/* METIS — foglio di stile (v3, tipografia gigante)
   Un'unica famiglia, Archivo variabile: larghezza espansa per i titoli, normale per il testo. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  --paper: #f6f5f3;
  --ink: #161314;
  --muted: #5a5355;
  --line: #dcd6d2;
  --bordeaux: #7b1d2e;
  --bordeaux-dark: #5c1421;
  --blush: #ecdfe0;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; font-stretch: 112%; letter-spacing: -0.035em; }
p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: 92rem; margin-inline: auto; padding-inline: var(--gutter); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 32em; }

/* Bottoni e link */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px;
  font: 600 1rem/1.2 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--bordeaux); }
.btn-line { border: 1.5px solid var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--bordeaux); }
.btn-light:hover { background: #fff; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: var(--bordeaux); }
.text-link:hover { color: var(--bordeaux); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header .bar { display: flex; align-items: center; gap: 2.25rem; height: 5rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--bordeaux); margin-right: auto; }
.brand span { font-weight: 700; font-stretch: 115%; font-size: 1.35rem; letter-spacing: -0.03em; }
.nav { display: flex; gap: 2rem; }
.nav a { text-decoration: none; font-weight: 500; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--bordeaux); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.menu-toggle { display: none; }
.mobile-nav { display: none; }
@media (max-width: 760px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: var(--ink); cursor: pointer; }
  .mobile-nav[data-open="true"] { display: block; background: var(--paper); border-top: 1px solid var(--line); }
  .mobile-nav .wrap { display: flex; flex-direction: column; padding-block: .75rem 1.5rem; }
  .mobile-nav a { text-decoration: none; font-weight: 500; font-stretch: 112%; letter-spacing: -0.03em; font-size: 2rem; padding: .3rem 0; }
  .mobile-nav a[aria-current="page"] { color: var(--bordeaux); }
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { font-size: clamp(2.5rem, 7.6vw, 8.4rem); line-height: .94; letter-spacing: -0.045em; }
.hero-sub { margin-top: clamp(2rem, 4vw, 3.5rem); display: grid; gap: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (min-width: 900px) {
  .hero-sub { grid-template-columns: 1fr 1fr; align-items: end; }
  .hero-sub .lead { grid-column: 2; }
  .hero-actions { grid-column: 2; }
}
.hero-figure { aspect-ratio: 21 / 9; overflow: hidden; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 700px) { .hero-figure { aspect-ratio: 4 / 3; } }
.reveal { animation: reveal 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Servizi (home) */
.services-overview { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2, .audiences h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; }
.service-grid { display: grid; }
.service-grid a { display: block; height: 100%; text-decoration: none; padding: 2rem 0 2.25rem; border-top: 2px solid var(--ink); transition: color .2s; }
.service-grid h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; }
.service-grid p { margin-top: 1rem; color: var(--muted); max-width: 24em; }
.service-grid a:hover h3 { color: var(--bordeaux); }
@media (min-width: 760px) { .service-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); } }

/* Con chi lavoriamo */
.audiences { padding-block: clamp(3rem, 6vw, 5rem); }
.aud-list { margin-top: 1.75rem; font-size: clamp(1.5rem, 3.2vw, 2.9rem); line-height: 1.2; font-weight: 400; font-stretch: 105%; letter-spacing: -0.025em; color: var(--muted); max-width: 30em; }
.aud-list span { color: var(--bordeaux); padding-inline: .15em; }

/* Banda finale */
.cta { background: var(--bordeaux); color: #fff; }
.cta-inner { padding-block: clamp(4rem, 10vw, 8.5rem); display: grid; gap: 2.25rem; }
.cta h2 { font-size: clamp(2.4rem, 6.6vw, 6.6rem); line-height: .95; letter-spacing: -0.045em; }
.cta .btn { justify-self: start; white-space: normal; text-align: center; }

/* Pagine interne */
.page-intro { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: 2rem; }
.page-intro h1 { font-size: clamp(2.6rem, 8vw, 8.4rem); line-height: .94; letter-spacing: -0.045em; }
@media (min-width: 900px) { .page-intro .lead { margin-left: 50%; } }

.services { padding-bottom: clamp(4rem, 8vw, 7rem); }
.service { display: grid; gap: 1.5rem; padding-block: 3rem; border-top: 2px solid var(--ink); scroll-margin-top: 6rem; }
.service h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: .98; }
.service-short { margin-top: 1rem; font-size: 1.2rem; line-height: 1.4; font-weight: 600; color: var(--bordeaux); max-width: 22em; }
.service-body > p { font-size: 1.1rem; color: var(--muted); max-width: 34em; }
.service-body ul { margin-top: 1.5rem; }
.service-body li { padding: .85rem 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .service { grid-template-columns: 1fr 1fr; gap: 4rem; padding-block: 4rem; } }

.contact { padding-bottom: clamp(4rem, 8vw, 7rem); }
.mail-link {
  display: inline-block; font-weight: 500; font-stretch: 108%; letter-spacing: -0.035em;
  font-size: clamp(1.6rem, 5.4vw, 5rem); line-height: 1.05; color: var(--bordeaux);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; overflow-wrap: anywhere;
}
.mail-link:hover { color: var(--ink); }
.contact-meta { margin-top: 3.5rem; display: grid; gap: 2rem; border-top: 2px solid var(--ink); padding-top: 2rem; }
.contact-meta dt { font-weight: 700; }
.contact-meta dd { margin-top: .35rem; color: var(--muted); }
@media (min-width: 700px) { .contact-meta { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.prose { max-width: 44rem; padding-bottom: 5rem; }
.prose p { margin-top: 1.1rem; line-height: 1.7; }
.prose a { color: var(--bordeaux); text-underline-offset: .2em; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.76); font-size: .95rem; }
.site-footer .top { display: grid; gap: 2.5rem; padding-block: 4rem 3rem; }
.f-name { font-weight: 600; font-stretch: 112%; letter-spacing: -0.04em; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: #fff; }
.f-tagline { margin-top: 1rem; max-width: 28em; }
.f-head { font-size: .95rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: #fff; }
.site-footer ul { margin-top: .8rem; display: grid; gap: .45rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.site-footer address { font-style: normal; }
.site-footer .bottom { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; color: rgba(255,255,255,.6); }
@media (min-width: 800px) { .site-footer .top { grid-template-columns: 2fr 1fr 1fr; } }

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

/* Perché Metis */
.about-name { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 9vw, 8rem); display: grid; gap: 1.5rem; border-top: 2px solid var(--ink); }
.about-name h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; }
.about-name p { font-size: clamp(1.25rem, 2.2vw, 1.85rem); line-height: 1.4; letter-spacing: -0.015em; max-width: 30em; }
@media (min-width: 900px) { .about-name { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.service-grid .sg-short { color: var(--bordeaux); font-weight: 600; }
.service-grid .sg-short + p { margin-top: .5rem; }

/* ───── v4: fondo bianco, colonna neurale ───── */
:root { --paper: #ffffff; --line: #e8e3e1; }
.brand span { color: var(--bordeaux); }
.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.hero-grid { display: grid; gap: 1rem; align-items: center; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 8.6rem); line-height: .9; letter-spacing: -0.055em; max-width: 7.5em; }
.hero .lead { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hero-actions { margin-top: 2rem; }
.hero-art { position: relative; height: clamp(360px, 52vw, 680px); }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 2rem; }
  .hero-art { height: min(76vh, 720px); }
}
.btn-solid { background: var(--bordeaux); }
.btn-solid:hover { background: var(--bordeaux-dark); }

.services-overview { padding-block: clamp(3rem, 7vw, 6rem); }
.service-grid { gap: 14px; }
.service-grid a {
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 22px;
  padding: 1.75rem; min-height: 15rem; display: flex; flex-direction: column; position: relative;
  transition: border-color .25s, background-color .25s;
}
.service-grid a::after {
  content: ""; position: absolute; right: 1.4rem; top: 1.5rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bordeaux); box-shadow: 0 0 0 6px var(--blush);
}
.service-grid a:hover { border-color: var(--bordeaux); }
.service-grid h3 { padding-right: 1.5rem; }
.service-grid .sg-short { margin-top: auto; padding-top: 2rem; }
@media (min-width: 760px) { .service-grid { grid-template-columns: 1fr 1fr; column-gap: 14px; } }
@media (min-width: 1150px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }

.about-name { border-top: 2px solid var(--ink); }
.audiences { border-top: 1px solid var(--line); padding-bottom: clamp(4rem, 9vw, 8rem); }

/* ───── v5: tipografia più sottile, bordeaux più scuro, nero caldo ───── */
:root { --bordeaux: #651626; --bordeaux-dark: #4a0f1b; --night: #1f171b; }
h1, h2, h3 { font-weight: 400; font-stretch: 108%; }
.hero h1, .page-intro h1 { letter-spacing: -0.05em; }
.hero h1 { max-width: 9em; }
.hero-grid { grid-template-columns: 1fr !important; }
.hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero-text { display: grid; gap: 0; }
@media (min-width: 900px) {
  .hero-text { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .hero-text h1 { grid-column: 1 / -1; }
  .hero-text .lead, .hero-text .hero-actions { grid-column: 2; }
}
.brand span { font-weight: 600; }
.f-name { font-weight: 500; }
.site-footer { background: var(--night); }

.collab { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.collab h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; margin-bottom: clamp(2rem, 4vw, 3rem); }
.collab-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.collab-list li {
  display: flex; align-items: center; min-height: 7.5rem; padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: clamp(1.1rem, 2vw, 1.6rem); font-stretch: 105%; letter-spacing: -0.02em; color: var(--ink);
}
@media (min-width: 900px) { .collab-list { grid-template-columns: repeat(3, 1fr); } .collab-list li { min-height: 9rem; padding: 1.5rem 2rem; } }

/* Collaborazioni: elenco in linea */
.collab { display: grid; gap: 1.5rem; border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); }
.collab h2 { margin-bottom: 0; }
p.collab-list {
  display: block; border: 0; grid-template-columns: none;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem); line-height: 1.25; font-stretch: 105%; letter-spacing: -0.03em; color: var(--ink); max-width: 26em;
}
p.collab-list span { color: var(--bordeaux); padding-inline: .2em; font-weight: 300; }
.service-case { margin-top: 1.5rem; padding: 1.25rem 1.4rem; background: var(--blush); border-radius: 16px; line-height: 1.55; max-width: 36em; }
.service-case a { color: var(--bordeaux); font-weight: 600; text-underline-offset: .2em; }
.hero-figure { aspect-ratio: 21 / 9; overflow: hidden; margin: 0; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 700px) { .hero-figure { aspect-ratio: 4 / 3; } .hero-figure img { object-position: 70% 40%; } }
/* Home: schede servizi solo titolo */
.service-grid a { min-height: 11rem; justify-content: flex-end; }
.service-grid h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
/* Home: titoli servizi centrati */
.service-grid a { justify-content: center; align-items: center; text-align: center; }
.service-grid h3 { padding-right: 0; }
.service-grid a::after { right: 50%; transform: translateX(50%); top: 1.4rem; }
.service-grid a::after { display: none; }
/* Nome Metis nell'intestazione più grande */
.site-header .brand span { font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 500; letter-spacing: -0.04em; }
.site-header .bar { height: 5.5rem; }
/* Barra superiore più grande */
.site-header .bar { height: 6.25rem; gap: 2.75rem; }
.nav { gap: 2.5rem; }
.nav a { font-size: 1.15rem; }
.header-cta.btn { font-size: 1.1rem; min-height: 54px; padding: .8rem 1.75rem; }
.menu-toggle svg { width: 30px; height: 30px; }

/* Modulo di contatto */
.contact { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 2fr 1fr; gap: 5rem; align-items: start; } }
.contact-form { display: grid; gap: 1.5rem; }
.contact-form .row2 { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .contact-form .row2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: #fff; width: 100%;
  border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px var(--blush); }
.form-note { font-size: .92rem; color: var(--muted); }
.form-note a { color: var(--bordeaux); }
.contact-form .btn { border: 0; cursor: pointer; font-size: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-side { display: grid; gap: .5rem; align-content: start; }
.contact-side > p { color: var(--muted); }
.contact-side .contact-meta { margin-top: 2rem; grid-template-columns: 1fr; }
.contact-side .wa { justify-self: start; margin-top: 1rem; }
.contact-side .mail-small { justify-self: start; margin-top: .75rem; font-weight: 500; }
/* Contatti senza modulo */
.contact-simple { display: grid; gap: 2rem; grid-template-columns: 1fr !important; justify-items: start; }
.contact-simple .contact-meta { margin-top: 1.5rem; width: 100%; grid-template-columns: 1fr; }

/* Chi siamo: racconto */
.story { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 7vw, 6rem); }
.story-figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; }
.story-figure img { width: 100%; height: 100%; object-fit: cover; }
.story-text h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; margin-bottom: 1.75rem; }
.story-text p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--ink); max-width: 36em; }
.story-text p + p { margin-top: 1.1rem; }
@media (min-width: 900px) { .story { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: center; } }

.principles { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.principles h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; margin-bottom: clamp(2rem, 4vw, 3rem); }
.principle-list { display: grid; gap: 14px; }
.principle-list li { border: 1px solid var(--line); border-radius: 22px; padding: 1.75rem; }
.principle-list h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; }
.principle-list p { margin-top: .9rem; color: var(--muted); line-height: 1.6; }
@media (min-width: 760px) { .principle-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1150px) { .principle-list { grid-template-columns: repeat(4, 1fr); } }

/* Contatti con immagine */
.contact-split { display: grid; gap: 3rem; grid-template-columns: 1fr !important; }
.contact-intro { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 20em; margin-bottom: 2rem; }
.contact-col .contact-meta { margin-top: 3rem; grid-template-columns: 1fr; }
.contact-figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; }
.contact-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
@media (min-width: 900px) { .contact-split { grid-template-columns: 7fr 5fr !important; gap: 5rem; align-items: start; } }
/* Pulsante email grande in Contatti */
.contact-col .btn { font-size: clamp(1.2rem, 1.8vw, 1.5rem); min-height: 68px; padding: 1.1rem 2.4rem; }

/* Chi siamo: allineato alle altre sezioni */
.page-figure { margin: 0 0 clamp(3rem, 6vw, 5rem); aspect-ratio: 21 / 9; overflow: hidden; }
.page-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .page-figure { aspect-ratio: 4 / 3; } }
.story { display: grid; gap: 1.5rem; padding-block: clamp(3rem, 6vw, 5rem); border-top: 2px solid var(--ink); }
.story h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; margin: 0; }
.story-text p { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; letter-spacing: -0.01em; max-width: 32em; }
.story-text p + p { margin-top: 1.2rem; }
@media (min-width: 900px) { .story { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
/* Coerenza tra le sezioni di Chi siamo */
.story-text p, .about-name p { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.45; letter-spacing: -0.012em; max-width: 32em; }
.audiences { border-top: 2px solid var(--ink); }
/* chi siamo: immagine ridotta per evitare sgranatura */
.page-figure { max-width: 60rem; border-radius: 22px; }
/* === tipografia: Archivo leggermente più stretto e sottile (ott 2026) === */
h1,h2,h3,.story h2,.mobile-nav a{font-stretch:95%!important;font-weight:360!important;letter-spacing:-0.03em!important}
.aud-list,p.collab-list,.service-short{font-stretch:98%!important}
.brand span,.f-name{font-stretch:98%!important}
/* === titoli e logo in Schibsted Grotesk (ott 2026) === */
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
h1,h2,h3,.story h2,.mobile-nav a,.brand span,.f-name{font-family:"Schibsted Grotesk",sans-serif!important;font-stretch:100%!important}
h1,h2,h3,.story h2{font-weight:400!important;letter-spacing:-0.035em!important}
.brand span,.f-name{font-weight:500!important;letter-spacing:-0.03em!important}
/* === home: lead grande (ott 2026) === */
.hero-text .lead{grid-column:1 / -1!important;margin-top:clamp(2rem,4vw,3.5rem);font-size:clamp(1.45rem,2.7vw,2.5rem);line-height:1.22;letter-spacing:-0.02em;color:var(--ink);max-width:24em;font-weight:400;text-wrap:balance}
.hero-text .hero-actions{grid-column:1 / -1!important;margin-top:clamp(1.75rem,3vw,2.5rem)}

/* ================= BOOST GRAFICO (ott 2026) ================= */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header: trasparente, bordo sottile allo scroll */
.site-header{transition:box-shadow .3s,background .3s}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(0,0,0,.08);background:color-mix(in srgb,#fff 82%,transparent)}
.nav a{position:relative;text-decoration:none!important}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:2px;background:var(--bordeaux);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.btn{transition:background .25s,color .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}

/* eyebrow */
.eyebrow{grid-column:1/-1;display:inline-flex;align-items:center;gap:.7rem;margin:0 0 clamp(1.5rem,3vw,2.5rem);font-size:.85rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bordeaux)}
.eyebrow .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--bordeaux);box-shadow:0 0 0 0 color-mix(in srgb,var(--bordeaux) 50%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bordeaux) 45%,transparent)}70%{box-shadow:0 0 0 .7rem transparent}100%{box-shadow:0 0 0 0 transparent}}

/* immagine hero incorniciata */
.hero-figure{border-radius:28px;aspect-ratio:21/9}
@media (max-width:700px){.hero-figure{border-radius:20px;aspect-ratio:4/5}}
.hero-figure img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.hero-figure:hover img{transform:scale(1.03)}

/* servizi home: card numerate */
.services-overview .service-grid{display:grid!important;gap:14px!important;grid-template-columns:1fr!important}
@media (min-width:700px){.services-overview .service-grid{grid-template-columns:1fr 1fr!important}}
@media (min-width:1100px){.services-overview .service-grid{grid-template-columns:repeat(4,1fr)!important}}
.services-overview .service-grid a{position:relative;display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:flex-start!important;text-align:left!important;min-height:clamp(220px,22vw,320px);padding:1.5rem 1.5rem 1.6rem!important;border:1.5px solid var(--ink)!important;border-radius:22px;background:#fff;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s}
.services-overview .service-grid a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bordeaux);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.services-overview .service-grid a:hover{color:#fff;border-color:var(--bordeaux)!important}
.services-overview .service-grid a:hover::before{transform:translateY(0)}
.services-overview .service-grid a:hover h3{color:#fff!important}
.sv-num{font-size:.9rem;font-weight:600;letter-spacing:.08em;opacity:.6}
.services-overview .service-grid h3{font-size:clamp(1.6rem,2.3vw,2.2rem)!important;line-height:1.02;margin-top:auto}
.sv-arrow{position:absolute;top:1.25rem;right:1.4rem;font-size:1.5rem;transform:rotate(-45deg);transition:transform .4s}
.services-overview .service-grid a:hover .sv-arrow{transform:rotate(0)}

/* collaborazioni: marquee */
.collab{overflow:hidden}
.marquee{margin-top:clamp(1.5rem,3vw,2.5rem);border-block:1.5px solid var(--ink);padding-block:clamp(1.1rem,2.2vw,1.8rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;align-items:center;gap:clamp(1.5rem,3vw,3rem);animation:marq 32s linear infinite;font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(1.8rem,4.2vw,4rem);letter-spacing:-.03em;white-space:nowrap}
.marquee-track i{font-style:normal;color:var(--bordeaux);font-size:.6em}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* CTA: blocco arrotondato */
.cta{background:transparent!important;padding:0 var(--gutter) clamp(3rem,6vw,5rem)}
.cta-inner{background:var(--bordeaux);color:#fff;border-radius:32px;padding:clamp(3rem,8vw,7rem) clamp(1.5rem,5vw,5rem)!important;position:relative;overflow:hidden}
.cta-inner::after{content:"";position:absolute;width:clamp(260px,40vw,560px);aspect-ratio:1;right:-8%;bottom:-35%;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);box-shadow:0 0 0 60px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.03)}
.cta h2{position:relative;z-index:1}
.cta .btn{position:relative;z-index:1}

/* footer: wordmark gigante */
.f-giant{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;font-size:clamp(5rem,24vw,22rem);line-height:.8;letter-spacing:-.06em;color:rgba(255,255,255,.08);padding-top:clamp(2rem,5vw,4rem);user-select:none;overflow:hidden}

/* comparsa allo scroll */
.js-reveal .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js-reveal .rv.is-in{opacity:1;transform:none}
.service-grid li:nth-child(2).rv{transition-delay:.08s}.service-grid li:nth-child(3).rv{transition-delay:.16s}.service-grid li:nth-child(4).rv{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.marquee-track,.eyebrow .dot{animation:none}}
@media (max-width:699px){.services-overview .service-grid a{min-height:140px}.eyebrow{font-size:.75rem;letter-spacing:.1em}}

/* ================= TENDENZE 2026 ================= */
/* transizioni tra pagine (View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
/* barra di avanzamento lettura (scroll-driven animation) */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--bordeaux);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
@supports (animation-timeline:scroll()){.progress{animation:prog linear both;animation-timeline:scroll(root)}@keyframes prog{to{transform:scaleX(1)}}}
/* tipografia: a capo bilanciati */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--bordeaux);color:#fff}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:4px;border-radius:6px}

/* bento */
.bento{display:grid;gap:14px;padding-block:clamp(1rem,3vw,2rem) clamp(3rem,6vw,5rem)}
@media (min-width:900px){.bento{grid-template-columns:1.4fr 1fr 1fr}}
.tile{display:flex;flex-direction:column;gap:1rem;min-height:clamp(240px,24vw,340px);padding:clamp(1.4rem,2.4vw,2rem);border-radius:22px;text-decoration:none;color:inherit;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(31,23,27,.45)}
.tile p{margin:0;max-width:26em;line-height:1.45}
.tile-label{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.tile-big{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(1.8rem,2.8vw,2.6rem)!important;line-height:1;letter-spacing:-.03em;margin-top:auto!important}
.tile-more{margin-top:auto;font-weight:600}
.tile-dark{background:var(--night,#1f171b);color:#fff}
.tile-blush{background:var(--blush,#f3e6e8);color:var(--ink)}
.tile-blush .tile-label{color:var(--bordeaux);opacity:1}
.tile-line{border:1.5px solid var(--ink);background:#fff}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.chips li{padding:.55rem 1rem;border:1.5px solid currentColor;border-radius:999px;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1;transition:background .25s,color .25s}
.chips-light li{border-color:rgba(255,255,255,.35)}
.audiences .chips{margin-top:1.75rem}
.audiences .chips li{font-size:clamp(1.1rem,1.8vw,1.5rem);padding:.75rem 1.3rem}
.audiences .chips li:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}

/* servizi: numerazione e titoli sticky */
.service .sv-num{display:block;margin-bottom:1rem;font-size:.85rem;font-weight:600;letter-spacing:.12em;color:var(--bordeaux);opacity:1}
@media (min-width:900px){.service-head{position:sticky;top:7.5rem;align-self:start}}
.service-body li{position:relative;padding-left:1.6rem!important}
.service-body li::before{content:"";position:absolute;left:0;top:1.35em;width:.7rem;height:1.5px;background:var(--bordeaux)}
.service-case{border-radius:16px}

/* chi siamo: Perché Metis come citazione */
.greek{display:block;margin-top:.6rem;font-size:.42em;letter-spacing:.02em;color:var(--bordeaux);font-weight:400}
.about-name p{border-left:3px solid var(--bordeaux);padding-left:clamp(1rem,2vw,1.75rem)}
@media (min-width:900px){.story h2,.about-name h2{position:sticky;top:7.5rem}}
.page-figure,.contact-figure{border-radius:24px}
@media (max-width:699px){.tile{min-height:0}.tile-big{margin-top:1.5rem!important}}
/* riquadro "Con chi lavoriamo": bordeaux invece del quasi-nero */
.tile-dark{background:var(--bordeaux)!important;color:#fff}
.tile-dark .chips-light li{border-color:rgba(255,255,255,.45)}
.tile p.tile-big{line-height:1.02}

/* ===== Cosa facciamo: icone ===== */
.eyebrow-sm{margin-bottom:1rem!important}
.eyebrow-sm .dot{animation:none}
.services-overview .section-head{align-items:end}
.services-overview .service-grid a{min-height:clamp(300px,27vw,380px)!important;padding:1.6rem 1.6rem 1.8rem!important;background:#fff}
.sv-icon{display:block;width:clamp(84px,7.5vw,112px);margin:1.8rem 0 1.4rem;color:var(--bordeaux);transition:color .35s,transform .6s cubic-bezier(.2,.7,.2,1)}
.sv-icon svg{width:100%;height:auto;overflow:visible}
.services-overview .service-grid a:hover .sv-icon{color:#fff;transform:translateY(-4px)}
.services-overview .service-grid h3{font-size:clamp(1.75rem,2.5vw,2.45rem)!important}
.sv-num{font-variant-numeric:tabular-nums}
/* micro-animazioni icone */
.sv-icon .draw{stroke-dasharray:120;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
a:hover .sv-icon .draw{animation:draw 1s ease forwards}
@keyframes draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.sv-icon .lift1,.sv-icon .lift2,.sv-icon .lift3{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a:hover .sv-icon .lift1{transform:translateY(-4px)}a:hover .sv-icon .lift2{transform:translateY(-9px)}a:hover .sv-icon .lift3{transform:translateY(-12px)}
.sv-icon rect{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a:hover .sv-icon .bar1{transform:translateX(6px)}a:hover .sv-icon .bar2{transform:translateX(-6px)}a:hover .sv-icon .bar3{transform:translateX(10px)}a:hover .sv-icon .bar4{transform:translateX(-4px)}
.sv-icon .n1,.sv-icon .n2,.sv-icon .n3{transform-box:fill-box;transform-origin:center}
a:hover .sv-icon .n1{animation:blink 1.2s .0s infinite}a:hover .sv-icon .n2{animation:blink 1.2s .3s infinite}a:hover .sv-icon .n3{animation:blink 1.2s .6s infinite}
@keyframes blink{50%{transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.sv-icon *{animation:none!important;transition:none!important}}
@media (max-width:699px){.services-overview .service-grid a{min-height:0!important}.sv-icon{width:72px;margin:1rem 0}}
.sv-icon{width:clamp(110px,10vw,148px);margin:1.4rem 0 1.2rem}
.services-overview .service-grid a::before{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* senza icone: riquadri più compatti */
.services-overview .service-grid a{min-height:clamp(220px,20vw,280px)!important}
@media (max-width:699px){.services-overview .service-grid a{min-height:140px!important}}
/* 5 servizi in home */
@media (min-width:1200px){.services-overview .service-grid{grid-template-columns:repeat(5,1fr)!important}}
@media (min-width:700px) and (max-width:1199px){.services-overview .service-grid{grid-template-columns:1fr 1fr!important}.services-overview .service-grid li:last-child{grid-column:1/-1}}
@media (min-width:1100px) and (max-width:1199px){.services-overview .service-grid{grid-template-columns:1fr 1fr!important}}
.services-overview .service-grid li:nth-child(5).rv{transition-delay:.32s}
@media (min-width:1200px){.services-overview .service-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.services-overview .service-grid h3{font-size:clamp(1.5rem,2vw,2.1rem)!important;hyphens:none}}

/* ===== SERVIZI: fisarmonica (ott 2026) ===== */
.services{padding-bottom:clamp(3rem,6vw,5rem)!important}
.acc{border-top:1.5px solid var(--ink);scroll-margin-top:6rem}
.acc:last-of-type{border-bottom:1.5px solid var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.5rem 1fr auto;align-items:center;gap:1rem 1.5rem;padding:clamp(1.5rem,3vw,2.3rem) 0}
.acc summary::-webkit-details-marker{display:none}
.acc-num{font-weight:700;color:var(--bordeaux);font-size:1rem;letter-spacing:.08em}
.acc-t{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(2rem,4.6vw,4.2rem);line-height:1;letter-spacing:-.04em;transition:color .25s}
.acc-s{grid-column:2/3;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4;color:var(--bordeaux);font-weight:500}
@media(min-width:1000px){.acc summary{grid-template-columns:3.5rem 1fr 26rem auto}.acc-s{grid-column:auto}}
.acc-plus{grid-row:1;grid-column:-2/-1;width:3.2rem;height:3.2rem;flex:none;border:1.5px solid var(--ink);border-radius:50%;position:relative;transition:background .3s,border-color .3s,color .3s}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;left:50%;top:50%;width:1.1rem;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.acc-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.acc[open] .acc-plus{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.acc[open] .acc-plus::after{transform:translate(-50%,-50%) rotate(0)}
.acc summary:hover .acc-plus{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.acc-body{display:grid;gap:1.75rem;padding:0 0 clamp(2rem,4vw,3rem) 5rem}
@media(min-width:900px){.acc-body{grid-template-columns:1fr 1fr;gap:4rem}}
@media(max-width:700px){.acc-body{padding-left:0}}
.acc-body>p{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.45;margin:0;color:var(--ink);max-width:28em}
.acc-body ul{margin:0;padding:0;list-style:none}
.acc-body li{position:relative;padding:.9rem 0 .9rem 1.6rem;border-top:1px solid var(--line);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.4}
.acc-body li::before{content:"";position:absolute;left:0;top:1.55em;width:.7rem;height:1.5px;background:var(--bordeaux)}
.acc-body .service-case{grid-column:1/-1;font-size:1.1rem;max-width:none}
.acc[open] .acc-body{animation:accIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* bento: testi più leggibili */
.tile{gap:1.2rem}
.tile p{font-size:clamp(1.1rem,1.35vw,1.25rem)!important;line-height:1.45}
.tile-label{font-size:.9rem!important;letter-spacing:.12em}
.tile .chips li{font-size:clamp(1.05rem,1.3vw,1.2rem)!important;padding:.65rem 1.1rem}
.tile-more{font-size:1.15rem}
.tile-big{font-size:clamp(2rem,3vw,2.8rem)!important}
.tile p.tile-big{font-size:clamp(2rem,3vw,2.8rem)!important;line-height:1.02}
/* === leggibilità: testi minori più grandi (ott 2026) === */
.eyebrow{font-size:clamp(.92rem,1vw,1rem)!important}
.sv-num{font-size:1rem!important}
.tile-label{font-size:1rem!important}
.btn,.btn-solid,.btn-light{font-size:clamp(1.05rem,1.2vw,1.15rem)}
.hero-actions .btn{min-height:54px;padding:.85rem 1.6rem}
.text-link{font-size:clamp(1.05rem,1.2vw,1.15rem)}
.f-tagline{font-size:1.05rem!important;line-height:1.5}
.site-footer ul a,.site-footer li{font-size:1.06rem!important}
.f-head{font-size:1rem!important}
.site-footer .bottom,.site-footer .bottom span{font-size:.95rem!important}
.prose p,.prose li{font-size:clamp(1.06rem,1.25vw,1.15rem)}
/* pillole più grandi */
.tile .chips li{font-size:clamp(1.15rem,1.5vw,1.35rem)!important;padding:.7rem 1.2rem}
.audiences .chips li{font-size:clamp(1.25rem,2.1vw,1.75rem)!important;padding:.8rem 1.4rem}

/* ===== modulo contatti (ott 2026) ===== */
.cform{display:grid;gap:1.15rem;margin-top:2rem}
.cform .row2{display:grid;gap:1.15rem}
@media(min-width:700px){.cform .row2{grid-template-columns:1fr 1fr}}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:.45rem}
.field span{font-size:1rem;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:1.08rem;color:var(--ink);background:#fff;border:1.5px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:14px;padding:.85rem 1rem;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:9rem}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 55%,calc(100% - .95rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bordeaux);box-shadow:0 0 0 4px color-mix(in srgb,var(--bordeaux) 15%,transparent)}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;line-height:1.45}
.check input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--bordeaux);flex:none}
.check a{color:var(--bordeaux);font-weight:600}
.cform-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin:.5rem 0 0}
.cform .btn{border:0;cursor:pointer;min-height:58px;padding:1rem 2.2rem;font-size:1.15rem!important}
.req{font-size:.95rem;color:var(--muted)}
.contact-alt{margin-top:1.75rem;font-size:1.05rem;color:var(--muted)}
.contact-alt a{color:var(--bordeaux);font-weight:600}
.contact-col .contact-intro+p .btn{display:none}
.thanks{min-height:50vh;align-content:center}
.thanks .lead{margin-left:0!important}