/* =========================================================================

   Cocolella Studio Design — style.css

   Palette chiara · rosa spento (#F7CAC9) + azzurro spento (#92A8D1)

   Titoli: GT Ultra Median (ripiego Hanken Grotesk se non caricato)

   Testi: Open Sans

   ========================================================================= */



/* ---------- Font auto-ospitati (WOFF2 sottoinsiemati Latin + Latin-ext) ---- */

@font-face{

  font-family:"Open Sans";

  src:url("../fonts/OpenSans-Regular.woff2") format("woff2");

  font-weight:400; font-style:normal; font-display:swap;

}

@font-face{

  font-family:"Open Sans";

  src:url("../fonts/OpenSans-SemiBold.woff2") format("woff2");

  font-weight:600; font-style:normal; font-display:swap;

}

@font-face{

  font-family:"Open Sans";

  src:url("../fonts/OpenSans-Bold.woff2") format("woff2");

  font-weight:700; font-style:normal; font-display:swap;

}

@font-face{

  font-family:"Hanken Grotesk";

  src:url("../fonts/HankenGrotesk-Medium.woff2") format("woff2");

  font-weight:500; font-style:normal; font-display:swap;

}

@font-face{

  font-family:"Hanken Grotesk";

  src:url("../fonts/HankenGrotesk-Bold.woff2") format("woff2");

  font-weight:700; font-style:normal; font-display:swap;

}

@font-face{

  font-family:"GT Ultra Median";

  src:url("../fonts/GTUltraMedian-Regular.woff2") format("woff2");

  font-weight:400 700; font-style:normal; font-display:swap;

}



/* ---------- Variabili ----------------------------------------------------- */

:root{

  /* Colori */

  --paper:#FBFAF8;        /* sfondo pagina           */

  --paper-2:#FFFFFF;      /* schede / superfici      */

  --ink:#2E2C2A;          /* testo principale        */

  --ink-soft:#C7C1BA;     /* testo secondario/beige   */

  --line:#EAE5E0;         /* bordi sottili           */

  --pink:#F7CAC9;         /* rosa spento (brand)     */

  --blue:#92A8D1;         /* azzurro spento (brand)  */

  --pink-tint:#FCEFEE;    /* fondo sezione rosa      */

  --blue-tint:#EEF2F8;    /* fondo sezione azzurro   */

  --link:#4F6DA6;         /* azzurro più scuro (contrasto AA) per link/hover */



  /* Tipografia */

  --font-head:"GT Ultra Median","Hanken Grotesk",ui-sans-serif,system-ui,Segoe UI,Helvetica,Arial,sans-serif;

  --font-body:"Open Sans",ui-sans-serif,system-ui,Segoe UI,Helvetica,Arial,sans-serif;



  /* Misure */

  --container:1160px;

  --gutter:clamp(20px,5vw,40px);

  --radius:14px;

  --radius-sm:10px;

  --shadow:0 18px 50px -28px rgba(46,44,42,.28);

  --shadow-sm:0 8px 24px -16px rgba(46,44,42,.30);

  --t:.28s cubic-bezier(.22,.61,.36,1);

}



/* ---------- Reset di base ------------------------------------------------- */

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}

body{

  margin:0;

  font-family:var(--font-body);

  font-size:17px;

  line-height:1.65;

  color:var(--ink);

  background:var(--paper);

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

  overflow-x:hidden;

}

img,svg,picture{max-width:100%;display:block;height:auto}

a{color:inherit;text-decoration:none}

button{font:inherit;cursor:pointer}

ul{list-style:none;margin:0;padding:0}

:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}



/* ---------- Tipografia ---------------------------------------------------- */

h1,h2,h3,h4{

  font-family:var(--font-head);

  font-weight:500;

  line-height:1.12;

  letter-spacing:-.01em;

  margin:0;

  color:var(--ink);

}

h1{font-size:clamp(2.3rem,1.4rem + 3.8vw,4.1rem)}

h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.9rem)}

h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);font-weight:700}

p{margin:0 0 1rem}

.lead{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--ink-soft);max-width:60ch}



.eyebrow{

  font-family:var(--font-body);

  font-weight:700;

  font-size:.74rem;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:var(--link);

  margin:0 0 .9rem;

  display:inline-block;

}



/* ---------- Layout -------------------------------------------------------- */

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

.section{padding-block:clamp(64px,9vw,120px)}

.section--tint-pink{background:var(--pink-tint)}

.section--tint-blue{background:var(--blue-tint)}

.section__head{max-width:62ch;margin-bottom:clamp(32px,5vw,56px)}

.center{text-align:center;margin-inline:auto}



/* ---------- Bottoni ------------------------------------------------------- */

.btn{

  display:inline-flex;align-items:center;justify-content:center;gap:.5em;

  padding:.85em 1.6em;border-radius:999px;

  font-weight:600;font-size:.98rem;letter-spacing:.01em;

  border:1.5px solid transparent;

  transition:transform var(--t),background var(--t),color var(--t),border-color var(--t),box-shadow var(--t);

  will-change:transform;

}

.btn-primary{background:var(--ink);color:var(--paper)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}

.btn-outline:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}

.btn-block{width:100%}



/* ---------- Header / Navigazione ----------------------------------------- */

.site-header{

  position:sticky;top:0;z-index:50;

  background:var(--paper); /* fallback per browser senza color-mix */

  background:color-mix(in srgb,var(--paper) 82%,transparent);

  -webkit-backdrop-filter:saturate(140%) blur(10px);

  backdrop-filter:saturate(140%) blur(10px);

  border-bottom:1px solid transparent;

  transition:border-color var(--t),box-shadow var(--t),background var(--t);

}

.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}

.brand img,.brand__mark{height:32px;width:auto}

.brand__wordmark{font-family:var(--font-head);font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.15;letter-spacing:.02em}

.brand__sub{display:block;font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-top:2px}

.nav-links{display:none;align-items:center;gap:1.6rem}

.nav-links a{

  font-size:.97rem;color:var(--ink-soft);position:relative;padding:.25rem 0;

  transition:color var(--t);

}

.nav-links a::after{

  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;

  background:var(--pink);transition:right var(--t);

}

.nav-links a:hover{color:var(--ink)}

.nav-links a:hover::after{right:0}



.nav-right{display:flex;align-items:center;gap:.75rem}



/* Selettore lingua */

.lang{display:flex;align-items:center;gap:.15rem;border:1px solid var(--line);border-radius:999px;padding:.2rem}

.lang button{

  background:transparent;border:0;border-radius:999px;

  padding:.28rem .6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;

  color:var(--ink-soft);text-transform:uppercase;transition:background var(--t),color var(--t);

}

.lang button[aria-current="true"]{background:var(--ink);color:var(--paper)}

.lang button:hover:not([aria-current="true"]){color:var(--ink)}



/* Hamburger */

.nav-toggle{

  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;

  width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);

}

.nav-toggle span{display:block;height:2px;width:20px;margin-inline:auto;background:var(--ink);transition:transform var(--t),opacity var(--t)}

.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}

.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}

.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}



/* Pannello mobile */

.mobile-menu{

  display:grid;gap:.25rem;overflow:hidden;max-height:0;

  border-top:1px solid transparent;

  transition:max-height .35s ease,border-color var(--t);

}

.mobile-menu.open{max-height:60vh;border-top-color:var(--line)}

.mobile-menu a{padding:.9rem .25rem;color:var(--ink-soft);font-size:1.05rem;border-bottom:1px solid var(--line)}

.mobile-menu a:last-child{border-bottom:0}



/* ---------- Hero ---------------------------------------------------------- */

.hero{position:relative;isolation:isolate}

.hero-media{

  position:relative;border-radius:var(--radius);overflow:hidden;

  min-height:clamp(360px,52vh,560px);

  background:linear-gradient(120deg,var(--pink-tint),var(--blue-tint));

}

.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hero-inner{padding-block:clamp(40px,7vw,72px)}

.hero h1{max-width:16ch}

.hero .lead{margin-top:1.1rem}

.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}



/* ---------- Studio (immagine + testo) ------------------------------------ */

.split{display:grid;gap:clamp(28px,5vw,56px);align-items:center}

.split__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.split__media img{width:100%;aspect-ratio:5/6;object-fit:cover}

.points{display:grid;gap:.7rem;margin-top:1.4rem}

.points li{position:relative;padding-left:1.7rem;color:var(--ink-soft)}

.points li::before{

  content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;

  background:var(--pink);box-shadow:6px 0 0 -1px var(--blue);

}



/* ---------- Servizi (schede) --------------------------------------------- */

.cards{display:grid;gap:clamp(18px,3vw,28px)}

.card{

  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);

  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;

  transition:transform var(--t),box-shadow var(--t),border-color var(--t);

}

.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}

.card__price{font-family:var(--font-head);font-size:1.35rem;color:var(--ink);margin:.2rem 0 .9rem}

.card__price span{font-family:var(--font-body);font-size:.85rem;color:var(--ink-soft);font-weight:600}

.card__desc{color:var(--ink-soft);margin-bottom:1rem}

.card__features{display:grid;gap:.55rem;margin:0 0 1.5rem}

.card__features li{position:relative;padding-left:1.5rem;font-size:.95rem;color:var(--ink-soft)}

.card__features li::before{

  content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;

  background:var(--blue);

}

.card .btn{margin-top:auto}

.note{font-size:.86rem;color:var(--ink-soft);margin-top:1.5rem;text-align:center}



/* ---------- Portfolio ----------------------------------------------------- */

.grid-portfolio{display:grid;gap:clamp(14px,2.2vw,22px)}

.tile{

  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--blue-tint);

  aspect-ratio:5/4;box-shadow:var(--shadow-sm);

}

.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}

.tile:hover img{transform:scale(1.05)}

.tile figcaption{

  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem .9rem;

  font-family:var(--font-head);font-size:1.02rem;color:#fff;

  background:linear-gradient(to top,rgba(46,44,42,.66),rgba(46,44,42,0));

  opacity:0;transform:translateY(8px);transition:opacity var(--t),transform var(--t);

}

.tile:hover figcaption,.tile:focus-within figcaption{opacity:1;transform:translateY(0)}



/* ---------- Contatti ------------------------------------------------------ */

.contact-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:start}

.field{display:grid;gap:.4rem;margin-bottom:1.1rem}

.field label{font-size:.86rem;font-weight:600;color:var(--ink)}

.field input,.field select,.field textarea{

  font:inherit;color:var(--ink);background:var(--paper-2);

  border:1px solid var(--line);border-radius:var(--radius-sm);

  padding:.8rem .95rem;width:100%;transition:border-color var(--t),box-shadow var(--t);

}

.field textarea{min-height:140px;resize:vertical}

.field input:focus,.field select:focus,.field textarea:focus{

  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(146,168,209,.25);

}

.consent{display:flex;align-items:flex-start;gap:.6rem;margin:.2rem 0 1.2rem;font-size:.9rem;color:var(--ink-soft)}

.consent input{width:18px;height:18px;margin-top:.2rem;accent-color:var(--blue);flex:none}

.consent a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* honeypot anti-spam: nascosto agli umani, visibile ai bot */

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



.form-msg{border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:.95rem;margin-top:.4rem;display:none}

.form-msg.show{display:block}

.form-msg.ok{background:var(--blue-tint);color:#2b3a55;border:1px solid #cdd8ec}

.form-msg.err{background:var(--pink-tint);color:#7d3b3a;border:1px solid #f0cfce}



.info-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,32px)}

.info-card dl{display:grid;gap:1rem;margin:1.2rem 0 0}

.info-card dt{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.15rem}

.info-card dd{margin:0;font-size:1.02rem}

.info-card a:hover{color:var(--link)}

.socials{display:flex;gap:.6rem;margin-top:1.4rem}

.socials a{

  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;

  border:1px solid var(--line);border-radius:50%;color:var(--ink);

  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);

}

.socials a:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);border-color:transparent}

.socials svg{width:19px;height:19px}



/* ---------- Footer -------------------------------------------------------- */

.site-footer{background:var(--ink);color:#D8D3CD;padding-block:clamp(48px,7vw,72px) 0}

.footer-grid{display:grid;gap:clamp(28px,5vw,48px)}

.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem;font-family:var(--font-body);font-weight:700}

.site-footer .brand-name{font-family:var(--font-head);font-size:1.5rem;color:#fff;margin-bottom:.6rem}

.site-footer p{color:#C7C1BA;max-width:32ch}

.footer-nav a{display:block;padding:.3rem 0;color:#C7C1BA;transition:color var(--t)}

.footer-nav a:hover{color:#fff}

.footer-socials{display:flex;gap:.6rem}

.footer-socials a{

  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;

  border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;transition:background var(--t),transform var(--t)}

.footer-socials a:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

.footer-socials svg{width:18px;height:18px}

.footer-bottom{

  margin-top:clamp(36px,5vw,52px);border-top:1px solid rgba(255,255,255,.14);

  padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;

  align-items:center;justify-content:space-between;font-size:.85rem;color:#A9A39C}

.footer-bottom a:hover{color:#fff}



/* ---------- Pagina legale (privacy) -------------------------------------- */

.legal{max-width:760px}

.legal h2{margin:1.8rem 0 .6rem;font-size:clamp(1.2rem,1rem + .8vw,1.5rem);font-weight:700}

.legal p{color:var(--ink-soft)}

.legal .back{display:inline-block;margin-bottom:1.5rem;color:var(--link)}

.legal .updated{font-size:.85rem;color:var(--ink-soft);margin-bottom:2rem}



/* ---------- Sistema animazioni premium ----------------------------------- */



/* Keyframes */

@keyframes fadeUp {

  from { opacity: 0; transform: translateY(32px); }

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes fadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@keyframes scaleReveal {

  from { opacity: 0; transform: scale(.97) translateY(16px); }

  to   { opacity: 1; transform: scale(1) translateY(0); }

}

@keyframes lineGrow {

  from { transform: scaleX(0); }

  to   { transform: scaleX(1); }

}

@keyframes slideRight {

  from { opacity: 0; transform: translateX(-24px); }

  to   { opacity: 1; transform: translateX(0); }

}

@keyframes quotePop {

  from { opacity: 0; transform: translateY(12px) scale(.94); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}



/* Variabili timing */

:root {

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --ease-soft: cubic-bezier(0.25, 0, 0, 1);

  --dur-fast:  0.5s;

  --dur-base:  0.75s;

  --dur-slow:  1.1s;

}



/* Reveal base — fade + salita */

.reveal {

  opacity: 0;

  transform: translateY(28px);

  transition:

    opacity  var(--dur-base) var(--ease-out),

    transform var(--dur-base) var(--ease-out);

}

.reveal.in-view {

  opacity: 1;

  transform: none;

}



/* Varianti reveal */

.reveal-scale {

  opacity: 0;

  transform: scale(.96) translateY(16px);

  transition:

    opacity  var(--dur-base) var(--ease-out),

    transform var(--dur-base) var(--ease-out);

}

.reveal-scale.in-view { opacity: 1; transform: none; }



.reveal-left {

  opacity: 0;

  transform: translateX(-28px);

  transition:

    opacity  var(--dur-base) var(--ease-out),

    transform var(--dur-base) var(--ease-out);

}

.reveal-left.in-view { opacity: 1; transform: none; }



/* Stagger automatico sui figli */

.stagger > *:nth-child(1) { transition-delay: 0s; }

.stagger > *:nth-child(2) { transition-delay: .12s; }

.stagger > *:nth-child(3) { transition-delay: .24s; }

.stagger > *:nth-child(4) { transition-delay: .36s; }

.stagger > *:nth-child(5) { transition-delay: .48s; }

.stagger > *:nth-child(6) { transition-delay: .60s; }



/* Hero: titolo con animazione al caricamento */

.pg-hero__eyebrow {

  animation: fadeIn var(--dur-base) var(--ease-out) .2s both;

}

.pg-hero__title {

  animation: fadeUp var(--dur-slow) var(--ease-out) .4s both;

}

.pg-hero__cta {

  animation: fadeUp var(--dur-base) var(--ease-out) .7s both;

}

.pg-hero__scroll {

  animation: fadeIn var(--dur-base) ease 1.2s both;

}

/* Immagine hero: leggero zoom in all'apertura */

.pg-hero__img {

  animation: scaleHero var(--dur-slow) var(--ease-soft) 0s both;

}

@keyframes scaleHero {

  from { transform: scale(1.05); }

  to   { transform: scale(1); }

}



/* Masonry portfolio: stagger + scale */

.pg-masonry__item {

  opacity: 0;

  transform: translateY(20px) scale(.98);

  transition:

    opacity  var(--dur-base) var(--ease-out),

    transform var(--dur-base) var(--ease-out);

}

.pg-masonry__item.in-view {

  opacity: 1;

  transform: none;

}

.pg-masonry__item:nth-child(1) { transition-delay: 0s; }

.pg-masonry__item:nth-child(2) { transition-delay: .1s; }

.pg-masonry__item:nth-child(3) { transition-delay: .18s; }

.pg-masonry__item:nth-child(4) { transition-delay: .26s; }

.pg-masonry__item:nth-child(5) { transition-delay: .34s; }

.pg-masonry__item:nth-child(6) { transition-delay: .42s; }



/* Process steps: slide da sinistra con stagger */

.process-step {

  opacity: 0;

  transform: translateX(-20px);

  transition:

    opacity  var(--dur-base) var(--ease-out),

    transform var(--dur-base) var(--ease-out);

}

.process-step.in-view {

  opacity: 1;

  transform: none;

}

.process-step:nth-child(1) { transition-delay: 0s; }

.process-step:nth-child(2) { transition-delay: .1s; }

.process-step:nth-child(3) { transition-delay: .2s; }

.process-step:nth-child(4) { transition-delay: .3s; }

.process-step:nth-child(5) { transition-delay: .4s; }



/* Benefit items: stagger su 2 colonne */

.benefit-item {

  opacity: 0;

  transform: translateY(20px);

  transition:

    opacity  var(--dur-base) var(--ease-out),

    transform var(--dur-base) var(--ease-out);

}

.benefit-item.in-view {

  opacity: 1;

  transform: none;

}

.benefit-item:nth-child(1) { transition-delay: 0s; }

.benefit-item:nth-child(2) { transition-delay: .15s; }

.benefit-item:nth-child(3) { transition-delay: .08s; }

.benefit-item:nth-child(4) { transition-delay: .22s; }



/* Target cards: zoom in con stagger */

.target-card {

  transition:

    background var(--dur-fast) var(--ease-soft),

    color      var(--dur-fast) var(--ease-soft),

    transform  var(--dur-fast) var(--ease-out),

    box-shadow var(--dur-fast) var(--ease-soft);

}



/* Hover button: lift raffinato */

.btn {

  transition:

    background var(--dur-fast) var(--ease-soft),

    color      var(--dur-fast) var(--ease-soft),

    border-color var(--dur-fast) var(--ease-soft),

    transform  .3s var(--ease-out),

    box-shadow .3s var(--ease-out);

}

.btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(69,25,18,.18);

}

.btn:active { transform: translateY(0); }



/* Nav links: underline animato più raffinato */

.nav-links a, .footer-nav a {

  transition: color .3s var(--ease-soft);

}



/* Immagini: hover zoom elegante */

.pg-masonry__item img {

  transition: transform .7s var(--ease-out), filter .7s ease;

}

.pg-masonry__item:hover img {

  transform: scale(1.04);

  filter: brightness(.95);

}



/* Citazione intro: animazione */

.intro-quote.in-view .intro-quote__mark {

  animation: quotePop .8s var(--ease-out) .1s both;

}

.intro-quote.in-view p {

  animation: fadeUp .8s var(--ease-out) .25s both;

}



/* Header: transizione blur su scroll */

.site-header {

  transition: background .4s var(--ease-soft), box-shadow .4s var(--ease-soft), backdrop-filter .4s;

}

.site-header.scrolled {

  background: rgba(251,250,248,.92) !important;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 1px 0 rgba(69,25,18,.08);

}



/* Riduzione del movimento */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after {

    transition: none !important;

    animation: none !important;

  }

  .reveal, .reveal-scale, .reveal-left,

  .process-step, .benefit-item, .pg-masonry__item {

    opacity: 1 !important;

    transform: none !important;

  }

}

@media (min-width:640px){

  .cards{grid-template-columns:repeat(2,1fr)}

  .grid-portfolio{grid-template-columns:repeat(2,1fr)}

  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}

}

@media (min-width:880px){

  .nav-links{display:flex}

  .nav-toggle{display:none}

  .mobile-menu{display:none!important}

  .split{grid-template-columns:1fr 1fr}

  .split--reverse .split__media{order:2}

  .cards{grid-template-columns:repeat(3,1fr)}

  .grid-portfolio{grid-template-columns:repeat(3,1fr)}

  .contact-grid{grid-template-columns:1.25fr .9fr}

  .hero-actions .btn{font-size:1rem}

}





/* ==========================================================================

   MULTI-PAGINA — stili per landing, pagine interne, dettaglio progetto

   ========================================================================== */



/* --- Landing: intestazione minimale ------------------------------------- */

.landing-intro{padding-block:clamp(28px,5vw,56px) clamp(16px,2.5vw,28px);text-align:center}

.landing-intro h1{font-size:clamp(1.4rem,3.5vw,2.4rem);font-weight:500;letter-spacing:-.01em;margin-top:.5rem}



/* --- Landing: galleria cliccabile --------------------------------------- */

.landing-gallery{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:4px;

  padding-bottom:clamp(32px,5vw,64px);

}

.landing-tile{

  display:block;position:relative;overflow:hidden;

  aspect-ratio:4/5;text-decoration:none;

}

.landing-tile img{

  width:100%;height:100%;object-fit:cover;display:block;

  transition:transform .6s cubic-bezier(.22,.61,.36,1);

}

.landing-tile:hover img,.landing-tile:focus-visible img{transform:scale(1.04)}

.landing-tile__caption{

  position:absolute;bottom:0;left:0;right:0;

  padding:.75rem 1rem;

  background:linear-gradient(transparent,rgba(46,44,42,.55));

  color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;

  opacity:0;transform:translateY(6px);

  transition:opacity .35s,transform .35s;

}

.landing-tile:hover .landing-tile__caption,

.landing-tile:focus-visible .landing-tile__caption{opacity:1;transform:none}



/* --- Intestazione pagine interne ---------------------------------------- */

.page-head{padding-block:clamp(32px,6vw,64px) clamp(20px,3vw,32px);border-bottom:1px solid var(--line)}

.page-head .eyebrow{margin-bottom:.5rem}



/* --- Griglia progetti (pagina progetti) --------------------------------- */

.projects-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:4px;

  padding-block:clamp(24px,4vw,40px);

}

.project-link{

  display:block;position:relative;overflow:hidden;

  aspect-ratio:5/4;text-decoration:none;

}

.project-link img{

  width:100%;height:100%;object-fit:cover;display:block;

  transition:transform .6s cubic-bezier(.22,.61,.36,1);

}

.project-link:hover img,.project-link:focus-visible img{transform:scale(1.04)}

.project-link__overlay{

  position:absolute;inset:0;display:flex;flex-direction:column;

  justify-content:flex-end;padding:1.25rem;

  background:linear-gradient(transparent 30%,rgba(46,44,42,.62));

  opacity:0;transition:opacity .35s;

}

.project-link:hover .project-link__overlay,

.project-link:focus-visible .project-link__overlay{opacity:1}

.project-link__title{color:#fff;font-family:var(--font-head);font-size:1rem;font-weight:500;line-height:1.2}

.project-link__sub{color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem}



/* --- Dettaglio progetto ------------------------------------------------- */

.project-hero{

  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;

  max-height:70vh;

}

.project-meta{

  display:flex;flex-wrap:wrap;gap:.5rem 2rem;

  padding-block:1.25rem;border-bottom:1px solid var(--line);

  margin-bottom:1.75rem;

}

.project-meta dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.15rem}

.project-meta dd{font-size:.95rem;color:var(--ink);font-weight:500}

.project-desc{max-width:64ch;font-size:1.05rem;line-height:1.75;margin-bottom:clamp(24px,4vw,48px)}

.project-gallery{

  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:8px;gap:10px;

  margin-bottom:clamp(32px,5vw,64px);

}

.project-gallery__item{margin:0;border-radius:10px;overflow:hidden}

.project-gallery__item--wide{grid-column:span 2}

.project-gallery__item img{width:100%;height:auto;display:block;transition:transform .6s ease}

.project-gallery__item:hover img{transform:scale(1.04)}



/* Back link */

.back-link{

  display:inline-flex;align-items:center;gap:.4rem;

  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;

  color:var(--ink-soft);text-decoration:none;margin-block:1.5rem .5rem;

  transition:color var(--t);

}

.back-link:hover{color:var(--ink)}



/* Pagina Studio (riusa .split e tinte esistenti) */

.studio-page .section__head{max-width:56ch}



/* Pagina Servizi (riusa .cards) */

.services-page .cards{margin-top:clamp(24px,4vw,40px)}



/* --- Responsive --------------------------------------------------------- */

@media(min-width:640px){

  .landing-gallery,.projects-grid{grid-template-columns:repeat(3,1fr)}

  .project-gallery{grid-template-columns:repeat(4,1fr)}

}

@media(min-width:880px){

  .landing-gallery,.projects-grid{grid-template-columns:repeat(3,1fr)}

}



/* ==========================================================================



/* ══════════════════════════════════════════════════════════════════════

   LANDING PAGE  —  Hero fullscreen + Masonry gallery + Micro-animazioni

   Scritto da zero. Classi nuove (.pg-hero, .pg-masonry) per zero conflitti.

   ══════════════════════════════════════════════════════════════════════ */



/* ── 1. HERO ─────────────────────────────────────────────────────────── */

.pg-hero {

  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 480px;

  overflow: hidden;

  background: #1a1816; /* colore mentre l'immagine carica */

}



/* Immagine di sfondo */

.pg-hero__img {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  width: 100%;

  height: 100%;        /* non usa height:auto — copre sempre tutto */

  object-fit: cover;

  object-position: center;

  display: block;

}



/* Scuro su tutta l'immagine via pseudo-elemento */

.pg-hero::after {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(14,12,10,.42);

  z-index: 1;

}



/* Testo sopra tutto */

.pg-hero__body {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: clamp(1.5rem, 4vw, 4rem);

}

.pg-hero__eyebrow {

  display: inline-block;

  font-size: .7rem;

  letter-spacing: .22em;

  text-transform: uppercase;

  color: rgba(255,255,255,.72);

  margin-bottom: 1.25rem;

}

.pg-hero__title {

  font-family: var(--font-head);

  font-size: clamp(2.4rem, 5.5vw, 5.2rem);

  font-weight: 500;

  line-height: 1.06;

  letter-spacing: -.028em;

  color: #fff;

  max-width: 820px;

  margin: 0 auto;

}



/* Freccia scorri */

.pg-hero__scroll {

  position: absolute;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  color: rgba(255,255,255,.6);

  text-decoration: none;

  display: flex;

  animation: pg-bob 2.4s ease-in-out infinite;

}

.pg-hero__scroll svg { width: 28px; height: 28px; }

@keyframes pg-bob {

  0%,100% { transform: translateX(-50%) translateY(0); }

  55%      { transform: translateX(-50%) translateY(8px); }

}



/* ── 2. INTRO TESTO ──────────────────────────────────────────────────── */

.pg-intro {

  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(1.5rem, 3vw, 3rem);

  text-align: center;

}

.pg-intro__text {

  font-family: var(--font-head);

  font-size: clamp(.85rem, 1.8vw, 1.1rem);

  font-weight: 400;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--ink-soft);

  max-width: 56ch;

  margin-inline: auto;

  padding-inline: 1rem;

}



/* ── 3. MASONRY ──────────────────────────────────────────────────────── */

.pg-masonry {

  column-count: 3;

  column-gap: 10px;

  padding: 0 10px 10px;

}

.pg-masonry__item {

  display: block;              /* block nel flow colonne */

  break-inside: avoid;

  margin-bottom: 10px;

  position: relative;

  border-radius: 10px;

  overflow: hidden;

  text-decoration: none;

  /* Transizione di ingresso (reveal) */

  opacity: 0;

  transform: translateY(20px);

  transition:

    opacity  .6s cubic-bezier(.22,.61,.36,1) var(--d, 0s),

    transform .6s cubic-bezier(.22,.61,.36,1) var(--d, 0s);

}

.pg-masonry__item.in-view {

  opacity: 1;

  transform: none;

}

.pg-masonry__item img {

  width: 100%;

  height: auto;               /* altezza naturale → colonne diseguali */

  display: block;

  transition: transform .65s cubic-bezier(.22,.61,.36,1);

}

.pg-masonry__item:hover img,

.pg-masonry__item:focus-visible img {

  transform: scale(1.04);

}

/* Caption al hover */

.pg-masonry__label {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: .75rem 1rem;

  background: linear-gradient(transparent, rgba(10,8,6,.62));

  color: #fff;

  font-size: .72rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  border-radius: 0 0 10px 10px;

  opacity: 0;

  transform: translateY(4px);

  transition: opacity .3s, transform .3s;

}

.pg-masonry__item:hover .pg-masonry__label,

.pg-masonry__item:focus-visible .pg-masonry__label {

  opacity: 1;

  transform: none;

}



/* ── 4. RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 479px) {

  .pg-masonry { column-count: 1; }

  .pg-hero__title { font-size: clamp(2rem, 9vw, 2.8rem); }

}

@media (min-width: 480px) and (max-width: 767px) {

  .pg-masonry { column-count: 2; }

}

/* ≥768: 3 colonne (già definito sopra) */



/* ── 5. PREFERS-REDUCED-MOTION ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .pg-hero__scroll          { animation: none; }

  .pg-masonry__item         { transition: none; opacity: 1; transform: none; }

  .pg-masonry__item img     { transition: none; }

  .pg-masonry__item:hover img { transform: none; }

}



/* ── 6. PAGINE INTERNE (layout / dettaglio progetto — stili non-landing) */

.page-head { padding-block: clamp(32px,6vw,64px) clamp(20px,3vw,32px); border-bottom: 1px solid var(--line); }

.projects-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; padding-block: clamp(24px,4vw,40px); }

.project-link { display: block; position: relative; overflow: hidden; aspect-ratio: 5/4; text-decoration: none; }

.project-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }

.project-link:hover img { transform: scale(1.04); }

.project-link__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: linear-gradient(transparent 30%,rgba(46,44,42,.62)); opacity: 0; transition: opacity .35s; }

.project-link:hover .project-link__overlay { opacity: 1; }

.project-link__title { color: #fff; font-family: var(--font-head); font-size: 1rem; font-weight: 500; }

.project-link__sub { color: rgba(255,255,255,.72); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .25rem; }

.project-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; max-height: 70vh; }

.project-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }

.project-meta dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.project-meta dd { font-size: .95rem; color: var(--ink); font-weight: 500; }

.project-desc { max-width: 64ch; font-size: 1.05rem; line-height: 1.75; margin-bottom: clamp(24px,4vw,48px); }

.project-gallery { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 8px; gap: 10px; margin-bottom: clamp(32px,5vw,64px); }

.project-gallery__item { margin: 0; border-radius: 10px; overflow: hidden; }

.project-gallery__item--wide { grid-column: span 2; }

.project-gallery__item img { width: 100%; height: auto; display: block; transition: transform .6s ease; }

.project-gallery__item:hover img { transform: scale(1.04); }

.back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; margin-block: 1.5rem .5rem; transition: color var(--t); }

.back-link:hover { color: var(--ink); }

@media (min-width: 640px) {

  .projects-grid { grid-template-columns: repeat(3,1fr); }

  .project-gallery { grid-template-columns: repeat(4,1fr); }

}

/* micro-animazioni navlink */

.nav-links a, .footer-nav a { position: relative; }

.nav-links a::after, .footer-nav a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1.5px; background:var(--blue); transition:width .28s ease; }

.nav-links a:hover::after, .footer-nav a:hover::after { width:100%; }

.card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }

.card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(46,44,42,.10); }

:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }





/* ══════════════════════════════════════════════════════════════════════

   MODE TOGGLE — switcher gallery ↔ scroll nell'header

   ══════════════════════════════════════════════════════════════════════ */

.mode-toggle {

  display: inline-flex;

  align-items: center;

  gap: 2px;

  padding: 0 10px 0 0;

  margin-right: 6px;

  border-right: 1px solid var(--line);

}

.mode-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border-radius: 7px;

  color: var(--ink-soft);

  text-decoration: none;

  transition: color .2s, background .2s;

}

.mode-btn svg { width: 15px; height: 15px; pointer-events: none; }

.mode-btn[aria-current="true"]  { color: var(--ink); background: var(--pink-tint); }

.mode-btn:hover                 { color: var(--ink); background: var(--blue-tint); }



/* ══════════════════════════════════════════════════════════════════════

   ONE-PAGE — sezioni extra (studio, servizi, contatti nella pg unica)

   ══════════════════════════════════════════════════════════════════════ */



/* Sezione con sfondo tinta blu (progetti) */

.section--tint-blue {

  background: var(--blue-tint);

}



/* Intestazione sezione centrata */

.section__head.center { text-align: center; max-width: 600px; margin-inline: auto; }

.section__head        { margin-bottom: clamp(2rem,4vw,3.5rem); }



/* Gallery masonry nella one-page: stessa cosa ma con intestazione sopra */

.op-gallery-head {

  text-align: center;

  padding-block: clamp(2.5rem,5vw,4rem) clamp(1rem,2vw,1.5rem);

}



/* Scroll padding per gli anchor con header sticky */

html { scroll-padding-top: 80px; scroll-behavior: smooth; }



/* Cards servizi nella one-page: i pulsanti usano data-package-index */

.op-note {

  text-align: center;

  font-size: .8rem;

  color: var(--ink-soft);

  margin-top: 1.5rem;

}





/* ══════════════════════════════════════════════════════════════════════

   SISTEMA LINGUA

   - data-active-lang="XX" su <html>  → lingua attiva

   - data-lang="XX" sui blocchi contenuto → quale lingua è quel blocco

   ATTENZIONE: NON usare data-lang su <html> — causerebbe display:none

   sull'intera pagina perché [data-lang="en"]{display:none} coincide.

   ══════════════════════════════════════════════════════════════════════ */



/* Nasconde per default EN e PL (IT visibile senza regole extra) */

[data-lang="en"], [data-lang="pl"] { display: none; }



/* Lingua attiva = IT */

html[data-active-lang="it"] [data-lang="it"] { display: block; }

html[data-active-lang="it"] [data-lang="en"] { display: none; }

html[data-active-lang="it"] [data-lang="pl"] { display: none; }



/* Lingua attiva = EN */

html[data-active-lang="en"] [data-lang="en"] { display: block; }

html[data-active-lang="en"] [data-lang="it"] { display: none; }

html[data-active-lang="en"] [data-lang="pl"] { display: none; }



/* Lingua attiva = PL */

html[data-active-lang="pl"] [data-lang="pl"] { display: block; }

html[data-active-lang="pl"] [data-lang="it"] { display: none; }

html[data-active-lang="pl"] [data-lang="en"] { display: none; }





/* ══════════════════════════════════════════════════════════════════════

   HEADER LANDING — dropdown "Per chi" + CTA inline

   ══════════════════════════════════════════════════════════════════════ */



.nav-dropdown { position: relative; }

.nav-dropdown__toggle {

  display: inline-flex; align-items: center; gap: .3rem;

  background: none; border: none; cursor: pointer;

  font: inherit; font-size: .88rem; letter-spacing: .03em;

  color: var(--ink); padding: .4rem .1rem;

  transition: color var(--t);

}

.nav-dropdown__toggle:hover { color: var(--blue); }

.nav-dropdown__toggle svg { width: 12px; height: 12px; transition: transform .22s; }

.nav-dropdown.open .nav-dropdown__toggle svg { transform: rotate(180deg); }



.nav-dropdown__menu {

  position: absolute; top: calc(100% + 8px); left: 50%;

  transform: translateX(-50%);

  background: #fff; border: 1px solid var(--line);

  border-radius: 12px; padding: .5rem;

  min-width: 230px;

  box-shadow: 0 8px 32px rgba(46,44,42,.10);

  opacity: 0; visibility: hidden; pointer-events: none;

  transform: translateX(-50%) translateY(-6px);

  transition: opacity .22s, transform .22s, visibility .22s;

  z-index: 100;

}

.nav-dropdown.open .nav-dropdown__menu {

  opacity: 1; visibility: visible; pointer-events: auto;

  transform: translateX(-50%) translateY(0);

}

.nav-dropdown__menu a {

  display: flex; align-items: center; gap: .75rem;

  padding: .65rem .9rem; border-radius: 8px;

  text-decoration: none; color: var(--ink);

  font-size: .87rem; transition: background .18s;

}

.nav-dropdown__menu a:hover { background: var(--pink-tint); }

.nav-dropdown__menu a.active { background: var(--blue-tint); }

.nav-dropdown__menu .dd-badge {

  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;

  color: var(--ink-soft); background: var(--line);

  border-radius: 4px; padding: .15rem .4rem; white-space: nowrap;

}

.btn-sm { padding: .5rem 1rem; font-size: .82rem; }



/* ══════════════════════════════════════════════════════════════════════

   SEZIONI LANDING CONTENT

   ══════════════════════════════════════════════════════════════════════ */



/* Hero CTA buttons */

.pg-hero__cta {

  display: flex; flex-wrap: wrap; gap: .75rem;

  justify-content: center; margin-top: 2rem;

}

.btn-light {

  background: rgba(255,255,255,.18); color: #fff;

  border: 1.5px solid rgba(255,255,255,.55);

  backdrop-filter: blur(4px);

}

.btn-light:hover { background: rgba(255,255,255,.28); }

.btn-ghost {

  background: transparent; color: rgba(255,255,255,.85);

  border: 1.5px solid rgba(255,255,255,.3);

}

.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }



/* Riconoscimento "Sei nel posto giusto se..." */

.recognition { background: var(--pink-tint); }

.recognition__list {

  list-style: none; padding: 0; margin: 1.5rem 0 2rem;

  display: flex; flex-direction: column; gap: .75rem;

}

.recognition__list li {

  padding-left: 1.5rem; position: relative;

  font-size: 1rem; line-height: 1.6;

}

.recognition__list li::before {

  content: '•'; position: absolute; left: 0;

  color: #451912; font-weight: 600;

}

.recognition__close {

  font-style: italic; color: var(--ink-soft);

  border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: .5rem;

}



/* Chi sono */

.who-am-i__photo {

  aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;

  background: var(--blue-tint);

  display: flex; align-items: center; justify-content: center;

}

.who-am-i__photo svg { width: 40%; height: auto; opacity: .35; }

.who-am-i__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.who-am-i__key {

  font-size: 1.1rem; font-weight: 600; line-height: 1.45;

  color: var(--ink); margin: 1.25rem 0;

  padding-left: 1rem; border-left: 3px solid var(--pink);

}

.pillars { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }

.pillar strong { display: block; font-size: 1rem; margin-bottom: .2rem; }

.pillar p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.65; }



/* Processo */

.process-steps { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; }

.process-step {

  display: grid; grid-template-columns: 56px 1fr; gap: 1rem;

  padding: 1.5rem 0; border-bottom: 1px solid var(--line);

}

.process-step:last-child { border-bottom: none; }

.process-step__num {

  font-family: var(--font-head); font-size: 1.8rem;

  font-weight: 600; color: var(--line);

  line-height: 1;

}

.process-step h3 { font-size: 1rem; margin: 0 0 .4rem; }

.process-step p  { margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.65; }



/* Card servizio */

.service-cards { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }

.service-card {

  border: 1.5px solid var(--line); border-radius: 14px;

  padding: 2rem; background: #fff;

  transition: box-shadow .3s, transform .3s;

}

.service-card:hover {

  box-shadow: 0 12px 40px rgba(46,44,42,.09);

  transform: translateY(-3px);

}

.service-card.featured {

  border-color: var(--blue); background: var(--blue-tint);

}

.service-card__num {

  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;

  color: var(--blue); margin-bottom: .5rem; display: block;

}

.service-card h3 { font-size: 1.2rem; margin: 0 0 .3rem; }

.service-card__sub {

  font-style: italic; color: var(--ink-soft); font-size: .9rem;

  margin: 0 0 .8rem;

}

.service-card p { margin: 0 0 1rem; font-size: .93rem; line-height: 1.65; }

.service-card__list {

  list-style: none; padding: 0; margin: 0 0 1.25rem;

  border-top: 1px solid var(--line); padding-top: 1rem;

}

.service-card__list-label {

  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;

  color: var(--ink-soft); margin-bottom: .5rem; display: block;

}

.service-card__list li {

  padding: .3rem 0 .3rem 1.2rem; position: relative;

  font-size: .88rem; color: var(--ink-soft);

}

.service-card__list li::before { content: '—'; position: absolute; left: 0; color: var(--pink); }

.service-card__result {

  font-weight: 600; font-size: .93rem;

  border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .5rem;

}

.badge-featured {

  display: inline-block; font-size: .65rem; letter-spacing: .12em;

  text-transform: uppercase; background: var(--blue); color: #fff;

  border-radius: 999px; padding: .25rem .7rem; margin-left: .6rem;

  vertical-align: middle;

}



/* Pacchetti (3 colonne su desktop) */

.packages { display: grid; gap: 1.25rem; margin-top: 2rem; }

@media (min-width: 880px) {

  .packages { grid-template-columns: repeat(3, 1fr); }

}



/* CTA finale */

.cta-finale {

  background: var(--ink); color: #fff;

  border-radius: 20px; padding: clamp(2.5rem,6vw,5rem);

  text-align: center; margin-top: clamp(3rem,6vw,6rem);

}

.cta-finale h2 { color: #fff; font-size: clamp(1.5rem,3vw,2.4rem); margin-bottom: .75rem; }

.cta-finale p  { color: rgba(255,255,255,.72); max-width: 52ch; margin: 0 auto 2rem; }



/* Form contatti inline */

.contact-inline { max-width: 600px; margin: 2.5rem auto 0; }

.contact-inline .field + .field { margin-top: 1rem; }



@media (min-width: 880px) {

  .service-cards { display: grid; grid-template-columns: 1fr 1fr; }

}



/* ══════════════════════════════════════════════════════════════════════

   SISTEMA LINGUA — data-active-lang su <html>, data-lang sui contenuti

   Non usare data-lang su <html> — causerebbe display:none sull'intera pagina

   ══════════════════════════════════════════════════════════════════════ */



/* Default: nasconde EN e PL (IT è sempre visibile per default) */

[data-lang="en"], [data-lang="pl"] { display: none; }



/* Lingua attiva = IT */

html[data-active-lang="it"] [data-lang="it"] { display: block; }

html[data-active-lang="it"] [data-lang="en"] { display: none; }

html[data-active-lang="it"] [data-lang="pl"] { display: none; }



/* Lingua attiva = EN */

html[data-active-lang="en"] [data-lang="en"] { display: block; }

html[data-active-lang="en"] [data-lang="it"] { display: none; }

html[data-active-lang="en"] [data-lang="pl"] { display: none; }



/* Lingua attiva = PL */

html[data-active-lang="pl"] [data-lang="pl"] { display: block; }

html[data-active-lang="pl"] [data-lang="it"] { display: none; }

html[data-active-lang="pl"] [data-lang="en"] { display: none; }



/* ---------- Animazione numeri 1/ al reveal -------------------------------- */

.b-num {

  display: inline-block;

  transition: opacity .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1);

}

.b-num--in {

  animation: fadeUp .6s cubic-bezier(0.16,1,0.3,1) both;

}



/* ---------- Smooth scroll globale ---------------------------------------- */

html { scroll-behavior: smooth; }