/* MeCaps 45, sito.
   Pagina chiara e leggibile, un solo accento oro (il logo), pastello per materiale solo come puntino.
   L'unico momento scenografico è la fascia nera dei 45 anni in fondo. */
:root {
  --paper: #fff;
  --stone: #f4f4f2;
  --ink: #1d1d1f;
  --muted: #5c5954;
  --line: #e2e0dc;
  --gold: #a8843c;
  --gold-d: #7d6127;
  --black: #000;
  --on-black: #f2efe9;
  --on-black-m: #a29d94;
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --bar: 72px;
  --out: cubic-bezier(.23, 1, .32, 1);
  --out-expo: cubic-bezier(.19, 1, .22, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100% }
body { font-family: var(--font); font-size: 18px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
html, body { overflow-x: clip }
img { display: block; max-width: 100%; height: auto }
a { color: inherit }
ul { list-style: none }
b { font-weight: 600 }
h1, h2, h3 { font-weight: 600; text-wrap: balance }
h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.028em }
h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.022em }
h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.012em }
p { max-width: 64ch; text-wrap: pretty }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5 }
p + p { margin-top: 1em }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* lingua: ogni testo esiste in IT e EN, si mostra quello della pagina */
html:not([lang="it"]) .it, html:not([lang="en"]) .en, html:not([lang="es"]) .es, html:not([lang="pt"]) .pt, html:not([lang="fr"]) .fr { display: none }

:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 3px; border-radius: 2px }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 6px; text-decoration: none }
.skip:focus { top: 12px }

/* pulsanti e link */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color .2s ease, transform .12s ease-out }
.btn:active { transform: scale(.97) }
.btn-s { min-height: 40px; padding: 0 18px; font-size: 15px }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--gold); transition: color .2s ease }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--gold-d) }
  .link:hover { color: var(--gold-d) }
}

/* barra */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .25s ease }
.bar.lift { box-shadow: 0 1px 0 var(--line) }
.bar-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); height: var(--bar); display: flex; align-items: center; gap: 24px }
.bar-logo img { height: 34px; width: auto }
.menu { margin-left: auto; display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 500 }
.menu > a:not(.btn) { text-decoration: none; color: var(--muted); padding: 8px 0; transition: color .2s ease }
.menu > a:not(.btn):hover { color: var(--ink) }
.menu-cta { margin-left: 6px }
.lang { order: 3; background: none; border: 0; font: 500 15px var(--font); color: var(--muted); cursor: pointer; padding: 10px 2px; transition: color .2s ease }
.lang:hover { color: var(--ink) }
.burger { display: none }

/* copertina */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: min(calc(100svh - var(--bar)), 760px); background: var(--stone); overflow: hidden }
.hero-txt { padding: 64px var(--gut) 80px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
.hero h1 { max-width: 17ch }
.hero-sub { margin-top: 28px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--muted); max-width: 46ch }
.hero-act { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px }
/* la foto ha fondo chiaro: sfuma sui bordi e si fonde con la pietra della copertina */
.hero-img img { width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(0deg, transparent, #000 10%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(0deg, transparent, #000 10%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect }

@keyframes rise { from { opacity: 0; transform: translateY(16px) } }
@keyframes settle { from { opacity: 0; transform: scale(1.04) } }
.hero h1 { animation: rise .8s var(--out) .05s backwards }
.hero-sub { animation: rise .8s var(--out) .15s backwards }
.hero-act { animation: rise .8s var(--out) .25s backwards }
.hero-img img { animation: settle 1.2s var(--out) backwards }

/* sezioni */
.sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(80px, 10vw, 136px) var(--gut) }

/* materiali */
.sec-head { margin-bottom: 40px }
.sec-head h2 { max-width: 22ch }
.sec-head p { margin-top: 16px; color: var(--muted); font-size: clamp(18px, 1.4vw, 20px); max-width: 52ch }
.tabs { position: relative; display: flex; gap: 36px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tabs button { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 14px 0 16px; background: none; border: 0; font: 500 18px var(--font); color: var(--muted); cursor: pointer; transition: color .2s ease }
.tabs button::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--x); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) }
.tabs button:hover, .tabs button[aria-selected="true"] { color: var(--ink) }
.tabs button[aria-selected="true"] { font-weight: 600 }
.tabs-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); transition: transform .35s var(--out), width .35s var(--out) }
.panel { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; padding-top: 48px }
.panel[hidden] { display: none }
.panel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover }
.panel h3 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -.02em }
.kind { margin: 4px 0 20px; color: var(--muted); font-size: 17px }
.aside { margin-top: 24px !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted) }
@keyframes show { from { opacity: 0; transform: translateY(8px) } }
.js .panel:not([hidden]) .panel-txt { animation: show .3s var(--out) backwards }
.js .panel:not([hidden]) img { animation: show .3s var(--out) backwards }

.finiture { display: grid; grid-template-columns: 5fr 7fr; gap: 32px 64px; align-items: center; margin-top: clamp(56px, 6vw, 80px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line) }
.finiture p { color: var(--muted); margin-top: 10px }
.sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; font-size: 16px; font-weight: 500 }
.sw img { width: 100%; max-width: 132px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) }

/* su misura */
.misura-wrap { background: var(--stone) }
.misura { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 96px); align-items: center }
.misura figure { order: 2 }
.misura figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70% }
.misura h2 { max-width: 14ch; margin-bottom: 24px }
.misura .lead { margin-bottom: 28px }
.misura h3 { margin-top: 48px; margin-bottom: 12px }
.misura-txt > p:not(.lead) { color: var(--muted) }
.misura-txt b { color: var(--ink) }

/* azienda */
.azienda .sec { display: grid; grid-template-columns: 5fr 7fr; gap: 32px 64px; align-items: start; padding-bottom: clamp(56px, 7vw, 88px) }
.azienda h2 { max-width: 15ch; position: sticky; top: calc(var(--bar) + 32px) }
.azienda-txt p:not(.lead) { color: var(--muted) }
.azienda-txt .lead { margin-bottom: 8px }
/* video aziendale: la foto della sede fa da copertina finché non si avvia */
.video { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) clamp(72px, 9vw, 120px) }
.video-box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black) }
.video-box img, .video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-box img { object-fit: cover; object-position: 50% 60% }
.play { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(20px, 3vw, 40px); border: 0; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); color: #fff; font: 600 clamp(17px, 1.6vw, 22px) var(--font); text-align: left; cursor: pointer }
.play i { position: relative; flex: none; width: clamp(52px, 5vw, 68px); aspect-ratio: 1; border-radius: 50%; background: #fff; transition: transform .2s var(--out) }
.play i::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--ink) }
.play-row { display: flex; align-items: center; gap: 16px }
.play-off, .soon .play-on, .soon .play i { display: none }
.soon .play-off { display: inline; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.55); font-size: 15px; font-weight: 500 }
.soon .play { cursor: default }
.play:active i { transform: scale(.94) }
@media (hover: hover) and (pointer: fine) { .play:not(:disabled):hover i { transform: scale(1.06) } }
.video figcaption { padding-top: 14px; font-size: 15px; color: var(--muted) }

/* 45 anni + contatti: chiusura nera */
.anni, .contatti { background: var(--black); color: var(--on-black) }
.anni-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gut); display: grid; grid-template-columns: 6fr 5fr; gap: 32px 64px; align-items: center }
.anni-45 { width: 100%; max-width: 600px }
.anni h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -.026em; max-width: 12ch }
.anni-txt p { margin-top: 20px; color: var(--on-black-m) }
.js .anni .anni-45 { opacity: 0; transition: opacity 1.4s ease-out }
.js .anni .anni-txt { opacity: 0; transition: opacity 1.2s ease-out .5s }
.js .anni.in .anni-45 { opacity: 1 }
.js .anni.in .anni-txt { opacity: 1 }

.contatti-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--gut) clamp(64px, 8vw, 104px) }
.contatti h2 { font-size: clamp(30px, 3.4vw, 46px) }
.contatti-sub { margin-top: 16px; color: var(--on-black-m) }
.ways { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 40px 56px; margin-top: 56px }
.ways h3 { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--on-black-m); margin-bottom: 8px }
.ways a:not(.link) { font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; text-decoration: none; overflow-wrap: break-word; border-bottom: 1px solid #4a4741; transition: border-color .2s ease, color .2s ease }
.ways p { color: #d4cfc6 }
.mails dt { font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--on-black-m); margin: 20px 0 8px }
.mails dt:first-child { margin-top: 0 }
.ways .mails a { font-size: clamp(17px, 1.4vw, 19px) }
.link-l { display: inline-block; margin-top: 10px; font-size: 16px }
@media (hover: hover) and (pointer: fine) {
  .ways a:not(.link):hover { border-color: var(--gold); color: #fff }
  .link-l:hover { color: #fff }
}
.foot { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gut) 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #2b2a28; font-size: 14px; color: var(--on-black-m) }
.foot img { height: 28px; width: auto }
.foot p { text-align: right }

/* tablet e telefono */
@media (max-width: 960px) {
  :root { --bar: 64px }
  .bar-logo img { height: 30px }
  .burger { display: grid; place-items: center; order: 4; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer }
  .burger i, .burger i::before, .burger i::after { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--out), opacity .2s ease }
  .burger i { position: relative }
  .burger i::before, .burger i::after { content: ""; position: absolute; left: 0 }
  .burger i::before { top: -7px }
  .burger i::after { top: 7px }
  .menu-open .burger i { background: transparent }
  .menu-open .burger i::before { transform: translateY(7px) rotate(45deg) }
  .menu-open .burger i::after { transform: translateY(-7px) rotate(-45deg) }
  .lang { margin-left: auto }
  .menu { position: absolute; top: var(--bar); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px -24px rgba(0,0,0,.35); font-size: 20px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s var(--out), transform .2s var(--out), visibility 0s .2s }
  .menu > a:not(.btn) { padding: 14px 0; color: var(--ink); border-bottom: 1px solid var(--line) }
  .menu-cta { margin: 20px 0 0; justify-content: center; min-height: 52px; font-size: 17px }
  .menu-open .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--out), transform .2s var(--out) }

  .hero { grid-template-columns: 1fr; min-height: 0 }
  .hero-txt { padding: 48px var(--gut) 40px }
  .hero-img img { -webkit-mask-image: linear-gradient(0deg, transparent, #000 10%); mask-image: linear-gradient(0deg, transparent, #000 10%) }
  .panel, .finiture, .misura, .azienda .sec, .anni-in { grid-template-columns: 1fr }
  .misura figure { order: 0 }
  .panel { gap: 28px; padding-top: 32px }
  .azienda h2 { position: static }
  .misura figure img { aspect-ratio: 4 / 3 }
  .anni-45 { max-width: 420px }
}
@media (max-width: 640px) {
  body { font-size: 17px }
  .hero-act .btn { width: 100% ; justify-content: center }
  .tabs { gap: 24px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) }
  .tabs button { font-size: 17px }
  .sw { gap: 12px; font-size: 15px }
  .ways { grid-template-columns: 1fr; gap: 32px }
  .ways .mails a { font-size: clamp(15px, 4.4vw, 17px) }
  .video { padding-left: 0; padding-right: 0 }
  .video figcaption { padding-left: var(--gut); padding-right: var(--gut) }
  .play { padding: 16px; font-size: 16px }
  .play-row { gap: 12px }
  .play i { width: 44px }
  .play i::after { border-width: 7px 0 7px 12px }
  .foot { flex-direction: column; align-items: flex-start }
  .foot p { text-align: left }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .hero h1, .hero-sub, .hero-act, .hero-img img, .js .panel:not([hidden]) .panel-txt, .js .panel:not([hidden]) img { animation: none }
  .js .anni .anni-45, .js .anni .anni-txt { clip-path: none; opacity: 1; transform: none; transition: none }
  .tabs-ink, .menu, .burger i, .burger i::before, .burger i::after, .btn, .play i { transition: none }
}

/* sei finiture, solo testo */
.fin6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px }
.fin6 dt { font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.15 }
.fin6 dd { margin-top: 6px; color: var(--muted) }

/* certificazioni: righe separate da filetti, il link scarica il PDF */
.documenti { border-top: 1px solid var(--line) }
.docs { border-top: 1px solid var(--line) }
.doc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 230px; gap: 8px 40px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line) }
.doc h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600 }
.doc p { color: var(--muted) }
.doc .rev { white-space: nowrap; color: var(--gold-d) }
.doc-act { display: flex; gap: 20px; justify-content: flex-end; white-space: nowrap }
.doc-dl { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--gold); transition: color .2s }
@media (hover: hover) and (pointer: fine) { .doc-dl:hover { color: var(--gold-d) } }
@media (max-width: 960px) {
  .doc { grid-template-columns: 1fr }
  .doc-act { justify-content: flex-start }
}
@media (max-width: 640px) { .fin6 { grid-template-columns: 1fr 1fr; gap: 20px 24px } }

/* claim 45 anni: leggero, solo la chiusa in grassetto */
.anni h2 { font-weight: 300 }
.anni h2 b { font-weight: 700 }

/* quattro mondi */
.mondi-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 8px }
.mondi-g figure { text-align: center }
.mondi-g img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover }
.mondi-g figcaption { margin-top: 18px; font-size: clamp(18px, 1.5vw, 21px); color: var(--gold-d) }
@media (max-width: 760px) { .mondi-g { grid-template-columns: 1fr 1fr; gap: 24px } }

/* finiture: più larghezza alle sei voci, testo introduttivo più stretto */
.finiture { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 40px }
.fin6 { column-gap: 28px }
.fin6 dd { white-space: nowrap }
@media (max-width: 960px) { .fin6 dd { white-space: normal } }

/* freccia minimale per passare alla scheda successiva, fuori dal contenitore a destra del prodotto */
.panels { position: relative }
.next { position: absolute; top: calc(50% + 24px); right: calc(-1 * var(--gut) + 4px); width: 32px; height: 56px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); cursor: pointer; transition: color .2s ease, transform .2s ease }
@media (hover: hover) and (pointer: fine) { .next:hover { color: var(--ink); transform: translate(2px, -50%) } }
.next:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

/* selettore lingua: cinque sigle, quella attiva in grassetto */
.lang { display: flex; gap: 2px; padding: 0; font: 500 14px var(--font) }
.lang button { background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; padding: 10px 5px; letter-spacing: .02em; transition: color .2s ease }
.lang button:hover { color: var(--ink) }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 700 }
.lang button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px }

/* baffo di colore accanto al claim contatti */
.contatti-in { position: relative }
.baffo { position: absolute; top: clamp(80px, 9.6vw, 124px); width: 280px; height: auto; pointer-events: none }
@media (max-width: 760px) { .baffo { position: static; display: block; width: 46%; margin: 0 0 24px } }
@media (min-width: 961px) { .lang { margin-left: 56px } }

/* il logo non si deforma; su telefono la lingua attiva non compare tra le scelte */
.bar-logo { flex: 0 0 auto }
.bar-logo img { max-width: none }
@media (max-width: 960px) {
  .lang button[aria-pressed="true"] { display: none }
}
@media (max-width: 400px) { .bar-logo img { height: 26px } .lang button { padding: 10px 3px } }
@media (max-width: 340px) { .bar-logo img { height: 22px } .lang { font-size: 13px } }
/* da tablet in giù: prima il testo introduttivo, poi le sei finiture */
@media (max-width: 960px) { .finiture { grid-template-columns: 1fr; gap: 28px } }

/* revisione 30-10: menu su una riga, finiture più a destra, frase nel riquadro nero */
.menu > a, .menu-cta { white-space: nowrap }
@media (min-width: 961px) {
  .menu { gap: clamp(14px, 1.9vw, 30px); font-size: clamp(14px, 1.15vw, 16px) }
  .menu-cta { margin-left: 0 }
  .lang { margin-left: clamp(20px, 3.6vw, 56px) }
  .bar-in { gap: clamp(14px, 1.8vw, 24px) }
  .fin6 { margin-left: clamp(0px, 5vw, 80px) }
}
.anni-q { grid-column: 1 / -1; margin: clamp(8px, 2vw, 24px) auto 0; max-width: 46ch; text-align: center; font-style: italic; font-weight: 300; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; color: var(--on-black) }
.anni-q b { font-weight: 700 }
@media (max-width: 960px) { .anni-q { text-align: left; margin-left: 0 } }
@media (min-width: 961px) and (max-width: 1180px) {
  .menu { gap: 12px; font-size: 13px }
  .bar-in { gap: 12px }
  .bar-logo img { height: 28px }
  .menu-cta.btn-s { padding: 0 12px; font-size: 13px }
  .lang { margin-left: 10px }
  .lang button { padding: 10px 3px }
}
.anni-q { max-width: none; width: 100%; text-wrap: balance }
@media (max-width: 960px) { .anni-q { text-wrap: pretty } }
@media (min-width: 961px) { .anni-q { font-size: clamp(22px, 2.45vw, 38px); max-width: 1100px } }
@media (min-width: 961px) { .anni-q { font-size: clamp(18px, 1.8vw, 28px); max-width: none } }
@media (min-width: 961px) { .anni-q { font-size: clamp(16px, 1.45vw, 22px); letter-spacing: .08em; word-spacing: .12em } }
@media (min-width: 961px) { .anni-q { font-size: clamp(16px, 1.5vw, 22px); letter-spacing: .15em; word-spacing: .25em } }
@media (min-width: 961px) { .anni-q { font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .3em; word-spacing: .5em; font-weight: 400 } }
.anni-q { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-weight: 400 }
.anni-q b { font-weight: 700 }
@media (min-width: 961px) { .anni-q { font-size: clamp(16px, 1.35vw, 21px); letter-spacing: .1em; word-spacing: .3em } }
@media (min-width: 961px) { .anni-q { font-size: clamp(17px, 1.6vw, 25px); letter-spacing: .05em; word-spacing: .15em } }
.anni-q b { font-weight: 700; font-synthesis: weight style }

/* frase 45 anni: Montserrat, ospitato sul sito */
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url(fonts/montserrat-300.ttf) format("truetype") }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/montserrat-700.ttf) format("truetype") }
.anni-q, .anni-q b { font-family: "Montserrat", var(--font), sans-serif; font-style: normal; font-synthesis: none; word-spacing: normal }
.anni-q { font-weight: 300; letter-spacing: .01em; line-height: 1.7; font-size: clamp(16px, 1.25vw, 20px) }
.anni-q b { font-weight: 700 }
@media (min-width: 961px) { .anni-q { font-size: clamp(16px, 1.25vw, 20px); letter-spacing: .01em; word-spacing: normal; font-weight: 300 } }
@media (min-width: 961px) {
  .anni-q { width: var(--qw, 100%); max-width: none; margin-left: 0; text-align: justify; text-align-last: justify; text-wrap: balance; font-size: calc(var(--qw, 800px) * .0305); letter-spacing: 0 }
}
@media (min-width: 961px) { .anni-q { margin-left: var(--ql, 0) } }
@media (min-width: 961px) { .anni-txt { display: flex; justify-content: flex-end } .anni h2 { width: fit-content } }