/* ==========================================================================
   UZY.studio — nuovo sito
   Palette dal brief del logo: Blu Klein, Bianco sporco, Nero.
   Regole: colori piatti (niente sfumature/ombre), nero su blu mai.
   ========================================================================== */

/* ---------- Font (serviti in locale) ---------- */
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- Token ---------- */
:root{
  --blue:#1A12AD;
  --paper:#FBFBFB;
  --black:#000000;

  --line:color-mix(in srgb, var(--black) 16%, transparent);
  --line-inv:color-mix(in srgb, var(--paper) 30%, transparent);
  --mute:color-mix(in srgb, var(--black) 62%, transparent);
  --mute-inv:color-mix(in srgb, var(--paper) 78%, transparent);

  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(1.25rem,4vw,3.5rem);
  --max:80rem;
  --sec:clamp(4.5rem,10vw,9rem);
  --header-h:calc(4rem + env(safe-area-inset-top,0px));
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h)}
/* le sezioni del menu si fermano con il bordo in alto: l'header ci sta sopra e non resta nessuna striscia della sezione precedente */
main > section[id]{scroll-margin-top:calc(var(--header-h) * -1)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--f-body);font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:var(--paper)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.on-blue :focus-visible,.footer :focus-visible{outline-color:var(--paper)}

.skip{position:absolute;left:var(--pad);top:-4rem;z-index:100;background:var(--blue);color:var(--paper);padding:.6rem 1rem;font-family:var(--f-mono);font-size:.8rem;text-decoration:none}
.skip:focus{top:.75rem}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--full{max-width:none}
.mono{font-family:var(--f-mono)}
.label{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.section{padding-block:var(--sec)}
.on-blue{background:var(--blue);color:var(--paper)}

/* ---------- Preload: l'ovale cade, compare il nome, la barra carica ---------- */
.preloader{display:none}
html.is-loading{overflow:hidden}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .preloader{
    position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--blue);color:var(--paper);
    animation:pl-failsafe .01s 12s forwards;
    transition:opacity .55s ease .25s,visibility 0s .8s;
  }
  .preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
  .preloader__stack{display:grid;justify-items:center;gap:clamp(.9rem,2.4vw,1.5rem);transition:opacity .45s ease,transform .6s var(--ease)}
  .preloader.is-done .preloader__stack{opacity:0;transform:translateY(-1.2rem) scale(.96)}
  .preloader__mark{display:block;width:clamp(54px,8.5vw,84px);fill:currentColor;transform-origin:50% 100%;animation:pl-drop 1.25s linear both}
  .preloader__word{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,7.5vw,4.2rem);line-height:1.05;letter-spacing:-.05em;overflow:hidden;padding:0 .07em .08em 0;white-space:nowrap}
  .preloader__word .pl-ch{display:inline-block;transform:translateY(115%);animation:pl-rise .7s var(--ease) both}
  .preloader__word .pl-ch:nth-child(1){animation-delay:1.050s}
  .preloader__word .pl-ch:nth-child(2){animation-delay:1.095s}
  .preloader__word .pl-ch:nth-child(3){animation-delay:1.140s}
  .preloader__word .pl-ch:nth-child(4){animation-delay:1.185s}
  .preloader__word .pl-ch:nth-child(5){animation-delay:1.230s}
  .preloader__word .pl-ch:nth-child(6){animation-delay:1.275s}
  .preloader__word .pl-ch:nth-child(7){animation-delay:1.320s}
  .preloader__word .pl-ch:nth-child(8){animation-delay:1.365s}
  .preloader__word .pl-ch:nth-child(9){animation-delay:1.410s}
  .preloader__word .pl-ch:nth-child(10){animation-delay:1.455s}
  .preloader__bar{width:100%;height:2px;background:var(--line-inv);overflow:hidden;opacity:0;animation:fade .4s 1.2s ease forwards}
  .preloader__bar span{display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
  .preloader__pct{margin:0;width:100%;text-align:right;font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;font-variant-numeric:tabular-nums;opacity:0;animation:fade .4s 1.2s ease forwards}
  /* l'hero parte solo quando il preload finisce */
  html:not(.is-ready) .hero__title .ch,html:not(.is-ready) .hero__lead{animation-play-state:paused}
}
@keyframes pl-rise{from{transform:translateY(115%)}to{transform:none}}
@keyframes pl-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes pl-drop{
  0%{transform:translateY(-75vh) scale(1,1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  38%{transform:translateY(0) scale(1,1)}
  44%{transform:translateY(0) scale(1.28,.72);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  58%{transform:translateY(-58%) scale(.92,1.12);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  72%{transform:translateY(0) scale(1.12,.86);animation-timing-function:ease-out}
  84%{transform:translateY(-12%) scale(.98,1.03);animation-timing-function:ease-in}
  100%{transform:translateY(0) scale(1,1)}
}

/* ---------- Ovale viaggiatore: scende con lo scroll e si posa nei punti (.stop) di ogni sezione ---------- */
.about,.services,.projects,.contact,.faq,.footer{position:relative}
.stop{position:absolute;pointer-events:none;visibility:hidden;aspect-ratio:4/5}
.stop--hero{right:var(--pad);bottom:6rem;height:min(21vh,12.5rem)}
.stop--about{right:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));top:50%;height:min(46vh,27rem);translate:0 -50%}
.stop--services{right:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));top:calc(var(--sec) - .5rem);height:6.5rem}
.stop--projects{right:calc(max(var(--pad), (100% - var(--max)) / 2 + var(--pad)) + 11rem);top:calc(var(--sec) - 2rem);height:5.5rem}
.stop--contact{left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));bottom:var(--sec);height:min(36vh,21rem)}
.stop--faq{left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));top:calc(var(--sec) + 10rem);height:15rem}
.stop--faq2{left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));bottom:var(--sec);height:9rem}
.stop--footer{right:var(--pad);top:1.4rem;height:4.4rem}
.traveler{display:none}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .traveler{display:block;position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:0;will-change:transform}
  html.is-ready .traveler{opacity:1;transition:opacity .7s ease .5s}
  .traveler .mk{display:block;width:100%;height:100%;fill:currentColor;animation:bob 5s ease-in-out infinite}
}
/* Telefono: ovale più piccolo, posato negli angoli liberi delle sezioni */
@media (max-width:900px){
  .stop--faq2{display:none}
  .stop--hero{right:var(--pad);bottom:calc(4.3rem + clamp(0px, (100svh - 640px) * .25, 3.5rem));height:min(18vh,9rem)}
  .stop--about,.stop--services,.stop--projects,.stop--contact,.stop--faq{left:auto;bottom:auto;right:calc(var(--pad) + .25rem);top:3.6rem;height:4.2rem;translate:none}
  .stop--footer{right:calc(var(--pad) + .25rem);top:2.6rem;height:4rem}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);padding-top:env(safe-area-inset-top,0px);
  background:var(--paper);
  transition:background .35s var(--ease),transform .45s var(--ease);
}
.header.is-hidden{transform:translateY(-101%)}
.header:has(:focus-visible){transform:none}
@media (prefers-reduced-motion:reduce){.header{transition:background .35s}}
.header__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--blue);line-height:1;font-size:1.15rem}
.logo__mark{display:block;width:2.1rem;height:auto;fill:currentColor;margin-right:.55rem;flex:none;transition:transform .5s var(--ease)}
.logo:hover .logo__mark,.logo:focus-visible .logo__mark{transform:rotate(-14deg) scale(1.08)}
.logo__w{font-family:var(--f-display);font-weight:700;letter-spacing:0;font-kerning:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.nav a{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding-block:.4rem;border-bottom:1px solid transparent;transition:border-color .25s}
.nav a:hover{border-color:var(--blue);color:var(--blue)}
.nav a[aria-current="true"]{font-weight:800}
.nav .btn{border:1px solid var(--blue);color:var(--blue);padding:.55rem 1rem;border-radius:999px;transition:background .25s,color .25s}
.nav .btn:hover{background:var(--blue);color:var(--paper)}
.menu-btn{display:none;background:none;border:1px solid var(--blue);color:var(--blue);border-radius:999px;padding:.5rem .95rem;font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

@media (max-width:760px){
  .nav{
    position:fixed;inset:0;z-index:2;padding-top:var(--header-h);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.2rem;
    padding:var(--header-h) var(--pad) var(--pad);background:var(--blue);visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s;
  }
  .nav a{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,8vw,2.4rem);letter-spacing:-.02em;text-transform:none;color:var(--paper);border:0}
  .nav a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
  .nav a[aria-current="true"]{color:var(--paper)}
  .nav .btn{border:1px solid var(--paper);color:var(--paper);padding:.7rem 1.4rem;font-size:clamp(1.2rem,6vw,1.6rem)}
  .nav .btn:hover{background:var(--paper);color:var(--blue)}
  .menu-open .nav{visibility:visible;opacity:1;transition:opacity .3s}
  .menu-btn{display:inline-block;position:relative;z-index:3}
  .menu-open .header{background:var(--blue);border-color:var(--blue)}
  .menu-open .logo,.menu-open .menu-btn{color:var(--paper);border-color:var(--paper)}
  .menu-open{overflow:hidden}
}
@media (max-width:760px) and (scripting:none){
  .nav{display:none}
  .menu-btn{display:none}
}

/* Header: prende il colore della sezione che ha sotto (classe aggiunta da JS) */
.logo,.nav a,.nav .btn,.menu-btn{transition:color .35s var(--ease),border-color .35s var(--ease),background .25s}
.header.is-blue{background:var(--blue)}
.header.is-dark{background:var(--black)}
.header.is-blue .logo,.header.is-dark .logo{color:var(--paper)}
.header.is-blue .nav a,.header.is-dark .nav a{color:var(--paper)}
.header.is-blue .nav a:hover,.header.is-dark .nav a:hover{border-color:var(--paper);color:var(--paper)}
.header.is-blue .nav .btn,.header.is-dark .nav .btn{border-color:var(--paper)}
.header.is-blue .nav .btn:hover,.header.is-dark .nav .btn:hover{background:var(--paper);color:var(--blue)}
.header.is-blue .menu-btn,.header.is-dark .menu-btn{border-color:var(--paper);color:var(--paper)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:var(--header-h)}
.hero__inner{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:3rem;padding-block:clamp(2rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem)}
.hero__title{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;color:var(--paper);
  font-size:min(calc((min(100vw,var(--max)) - 2 * var(--pad)) / 10.7),9rem);line-height:.98;letter-spacing:-.015em;
}
.hero__title .line{display:block;overflow:hidden;padding:.14em .08em .06em 0;margin-top:-.14em;white-space:nowrap}
.hero__title .ch{display:inline-block;transition:translate .5s var(--ease)}
.hero__title .ch--sp{width:.26em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}
.hero__main{margin-block:auto;display:grid;gap:clamp(.9rem,1.8vw,1.5rem);max-width:100%}
.hero__lead{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.4;font-weight:500;max-width:34rem}
.hero{position:relative;overflow:hidden;background:var(--blue);color:var(--paper)}
.hero__inner,.ticker{position:relative;z-index:1}

@media (hover:hover){
  .hero__title .ch:not(.ch--sp):hover{translate:0 -.08em}
  .hero__title .ch:not(.ch--sp):hover+.ch,.hero__title .ch:has(+ .ch:not(.ch--sp):hover){translate:0 -.035em}
}

@media (prefers-reduced-motion:no-preference){
  .hero__title .ch{animation:rise 1.05s var(--ease) both}
  .hero__lead{opacity:0;animation:fade .9s .9s ease forwards}
  .hero__title .sr+.line .ch:nth-child(1){animation-delay:0.095s}
  .hero__title .line+.line .ch:nth-child(1){animation-delay:0.345s}
  .hero__title .sr+.line .ch:nth-child(2){animation-delay:0.140s}
  .hero__title .line+.line .ch:nth-child(2){animation-delay:0.390s}
  .hero__title .sr+.line .ch:nth-child(3){animation-delay:0.185s}
  .hero__title .line+.line .ch:nth-child(3){animation-delay:0.435s}
  .hero__title .sr+.line .ch:nth-child(4){animation-delay:0.230s}
  .hero__title .line+.line .ch:nth-child(4){animation-delay:0.480s}
  .hero__title .sr+.line .ch:nth-child(5){animation-delay:0.275s}
  .hero__title .line+.line .ch:nth-child(5){animation-delay:0.525s}
  .hero__title .sr+.line .ch:nth-child(6){animation-delay:0.320s}
  .hero__title .line+.line .ch:nth-child(6){animation-delay:0.570s}
  .hero__title .sr+.line .ch:nth-child(7){animation-delay:0.365s}
  .hero__title .line+.line .ch:nth-child(7){animation-delay:0.615s}
  .hero__title .sr+.line .ch:nth-child(8){animation-delay:0.410s}
  .hero__title .line+.line .ch:nth-child(8){animation-delay:0.660s}
  .hero__title .sr+.line .ch:nth-child(9){animation-delay:0.455s}
  .hero__title .line+.line .ch:nth-child(9){animation-delay:0.705s}
  .hero__title .sr+.line .ch:nth-child(10){animation-delay:0.500s}
  .hero__title .line+.line .ch:nth-child(10){animation-delay:0.750s}
  .hero__title .sr+.line .ch:nth-child(11){animation-delay:0.545s}
  .hero__title .line+.line .ch:nth-child(11){animation-delay:0.795s}
}
@keyframes rise{from{transform:translateY(112%) rotate(7deg)}to{transform:none}}
@keyframes fade{to{opacity:1}}

/* ---------- Ticker ---------- */
.ticker{border-top:1px solid var(--line-inv);overflow:hidden;background:var(--blue);color:var(--paper)}
.ticker__track{display:flex;width:max-content;font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.ticker__group{display:flex}
.ticker__track span,.ticker__track a{padding:1rem 1.6rem;white-space:nowrap}
.ticker__track a{text-decoration:none;transition:opacity .2s}
.ticker__track a:hover{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
.ticker__track a:focus-visible{outline-offset:-4px}
@media (prefers-reduced-motion:no-preference){
  .ticker__track{animation:ticker 38s linear infinite}
  .ticker:hover .ticker__track{animation-play-state:paused}
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- About ---------- */
.about{background:var(--paper);color:var(--black)}
.about__statement{
  margin-top:1.75rem;font-weight:500;font-size:clamp(1.7rem,4.2vw,3.7rem);line-height:1.1;letter-spacing:-.025em;max-width:22ch;
}
.about__statement b{font-family:var(--f-display);font-weight:500;letter-spacing:-.04em;color:var(--blue)}
.about__cols{margin-top:clamp(2.5rem,6vw,5rem);max-width:34rem}
.about__cols p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5}
.about__statement .w{transition:opacity .25s linear}

/* ---------- Servizi ---------- */
.services__head{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-bottom:clamp(2rem,5vw,4rem)}
.h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,3.6vw,3.2rem);line-height:1.08;letter-spacing:-.03em;color:var(--blue)}
.services__head .h2{text-wrap:balance;max-width:19em}
@media (max-width:760px){.services__head .h2{max-width:11.5em}}
.on-blue .h2{color:var(--paper)}
.services__list{border-top:1px solid var(--black)}
.service{border-bottom:1px solid var(--line)}
.service{scroll-margin-top:calc(var(--header-h) + 1rem)}
.services__head{scroll-margin-top:calc(var(--header-h) + 1.25rem)}
.service__btn{
  width:100%;display:grid;grid-template-columns:3.2rem minmax(0,1fr) 2.5rem;align-items:center;gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.8rem) 0;background:none;border:0;text-align:left;cursor:pointer;
}
.service__num{font-size:.8rem;font-weight:500;color:var(--mute);transition:color .25s}
.service__title{font-weight:500;font-size:clamp(1.2rem,2.5vw,2.15rem);line-height:1.15;letter-spacing:-.02em;transition:color .25s,transform .5s var(--ease)}
.service__icon{position:relative;width:1.6rem;height:1.6rem;justify-self:end}
.service__icon::before,.service__icon::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.service__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.service__btn[aria-expanded="true"] .service__title{color:var(--blue)}
.service__btn[aria-expanded="true"] .service__num{color:var(--blue)}
@media (hover:hover){
  .service__btn:hover .service__title{color:var(--blue)}
  .service__btn:hover .service__num{color:var(--blue)}
  .service__btn:hover .service__title{transform:translateX(.35rem)}
}
.service__btn[aria-expanded="true"] .service__icon{color:var(--blue)}
.service__btn[aria-expanded="true"] .service__icon::after{transform:translate(-50%,-50%) rotate(0deg)}

.service__panel{display:grid;grid-template-rows:1fr}
.service__inner{min-height:0;overflow:hidden}
.service__body{display:grid;grid-template-columns:3.2rem minmax(0,38rem);gap:1rem;padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.service__body>div{grid-column:2}
.service__body p{font-size:1.05rem;line-height:1.6;color:var(--black)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tags li{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:.35rem .8rem}

@media (scripting:enabled){
  .service__panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease),visibility 0s .55s}
  .service.is-open .service__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
}
@media (max-width:640px){
  .service__btn{grid-template-columns:2.2rem minmax(0,1fr) 1.8rem;gap:.6rem}
  .service__body{grid-template-columns:1fr}
  .service__body>div{grid-column:1}
}

/* ---------- Progetti ---------- */
.projects{background:var(--paper);color:var(--black)}
.projects__head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:clamp(2rem,5vw,4rem)}
@media (max-width:760px){.projects__head .h2{max-width:8.5em;text-wrap:balance}}
.projects__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.5rem)}
.project{position:relative;display:flex;flex-direction:column;background:var(--blue);color:var(--paper);text-decoration:none;border:1px solid var(--blue);overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease)}
a.project:hover,a.project:focus-visible{background:var(--paper);color:var(--blue)}
.project__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--black)}
.project__media img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;display:block;
  translate:0 var(--py,0px);transition:scale 1s var(--ease)}
a.project:hover .project__media img{scale:1.06}
.project__top{position:absolute;left:.9rem;right:.9rem;top:.9rem;display:flex;justify-content:space-between;font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.project__top span{background:var(--paper);color:var(--blue);padding:.25rem .55rem}
.project__go{position:absolute;left:.9rem;bottom:.9rem;background:var(--paper);color:var(--blue);padding:.5rem .8rem;font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.project__go i{font-style:normal}
.project__cap{display:block;padding:clamp(1rem,1.8vw,1.4rem) clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.6rem)}
.project__name{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.project__meta{display:block;margin-top:.9rem;font-family:var(--f-mono);font-size:.78rem;line-height:1.5;color:inherit;opacity:.8}
.project--soon{background:transparent;color:var(--blue);border:1px dashed var(--blue)}
.project--soon .project__top span{background:transparent;color:var(--paper)}
/* nome oscurato: barra nera al posto delle lettere (il nome vero non è nel codice) */

/* Carosello progetti: solo desktop con JS */
.carousel__ctrl,.carousel__bar{display:none}
@media (min-width:901px){
  .projects__grid{display:flex;gap:clamp(1rem,1.6vw,1.5rem);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .projects__grid::-webkit-scrollbar{display:none}
  .projects__grid>.project{flex:0 0 calc((100% - clamp(1rem,1.6vw,1.5rem)) / 1.75);scroll-snap-align:start}
  .projects__grid .project__media{aspect-ratio:4/3}
  .projects__grid .project__media img{object-position:50% 38%}
  .projects{overflow-x:clip}
  @media (scripting:enabled){
    .projects__grid{margin-right:calc((100% - 100vw) / 2);padding-right:calc((100vw - 100%) / 2)}
  }
  .projects__grid.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
  .projects__grid.is-drag .project{pointer-events:none}
  .projects__grid img{-webkit-user-drag:none;user-select:none}
  @media (scripting:enabled){
    .carousel__ctrl{display:flex;gap:.6rem}
    .carousel__bar{display:block;margin-top:clamp(1.25rem,2.4vw,2rem);height:2px;background:var(--line);position:relative;overflow:hidden}
    .carousel__bar span{position:absolute;left:0;top:0;height:100%;width:40%;background:var(--blue);transform-origin:left}
  }
}
/* Carosello progetti anche su telefono (si scorre con il dito) */
@media (max-width:900px) and (scripting:enabled){
  .projects{overflow-x:clip}
  .projects__grid{display:flex;grid-template-columns:none;max-width:none;gap:1rem;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .projects__grid::-webkit-scrollbar{display:none}
  .projects__grid>.project{flex:0 0 82%;scroll-snap-align:start}
  .carousel__ctrl{display:none}
  .carousel__bar{display:block;margin-top:1.25rem;height:2px;background:var(--line);position:relative;overflow:hidden}
  .carousel__bar span{position:absolute;left:0;top:0;height:100%;width:40%;background:var(--blue);transform-origin:left}
}
.carousel__btn{width:3.1rem;height:3.1rem;border-radius:50%;border:1px solid var(--blue);background:transparent;color:var(--blue);display:grid;place-items:center;cursor:pointer;
  transition:background .25s,color .25s,opacity .25s}
.carousel__btn--prev svg{transform:scaleX(-1)}
.carousel__btn:hover:not(:disabled){background:var(--blue);color:var(--paper)}
.carousel__btn:disabled{opacity:.28;cursor:default}

/* Fumetto "Apri" che esce dall'ovale (cursore normale; solo desktop con JS) */
.tv-bubble{display:none}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .tv-bubble{display:block;position:fixed;left:0;top:0;z-index:41;width:0;height:0;pointer-events:none}
  .tv-bubble__b{position:absolute;top:0;left:calc(var(--r,40px) + 14px);translate:0 -50%;display:block;width:max-content;max-width:min(var(--bmax,17rem),56vw);white-space:normal;line-height:1.5;
    background:var(--blue);color:var(--paper);border:2px solid var(--paper);padding:calc(.7rem - 2px) calc(1.05rem - 2px);border-radius:1.2rem;
    font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
    scale:.4;opacity:0;transform-origin:0 50%;transition:scale .38s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}
  .tv-bubble__b i{font-style:normal}
  /* Coda del fumetto con il suo bordo: un triangolo del colore del bordo (dietro) e uno del colore del fumetto (davanti),
     il secondo copre il bordo alla base così la punta si attacca al fumetto senza stacchi. */
  .tv-bubble__b::before,.tv-bubble__b::after{content:"";position:absolute;top:50%;translate:0 -50%}
  .tv-bubble__b::before{left:-12px;width:14px;height:16px;background:var(--blue);clip-path:polygon(0 50%,100% 0,100% 100%)}
  .tv-bubble__b::after{left:-15.4px;width:15.4px;height:21px;background:var(--paper);clip-path:polygon(0 50%,100% 0,100% 100%);z-index:-1}
  .tv-bubble.is-left .tv-bubble__b{left:auto;right:calc(var(--r,40px) + 14px);transform-origin:100% 50%}
  .tv-bubble.is-left .tv-bubble__b::before{left:auto;right:-12px;clip-path:polygon(0 0,100% 50%,0 100%)}
  .tv-bubble.is-left .tv-bubble__b::after{left:auto;right:-15.4px;clip-path:polygon(0 0,100% 50%,0 100%)}
  .tv-bubble.is-on .tv-bubble__b{scale:1;opacity:1;transition:scale .42s cubic-bezier(.34,1.56,.64,1),opacity .16s linear}
  .tv-bubble.is-paper .tv-bubble__b{background:var(--paper);color:var(--blue);border-color:var(--paper)}
  .tv-bubble.is-paper .tv-bubble__b::before{background:var(--paper)}
  /* il cartellino "Visita il sito" non serve: ci pensa il fumetto */
  html.has-cursor .project__go{display:none}
}
.magnetic{transition:translate .35s var(--ease),background .25s,color .25s,border-color .25s}
@media (max-width:900px){.projects__grid{grid-template-columns:1fr;max-width:34rem}}

/* ---------- Contatti ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.contact__title{font-family:var(--f-display);font-weight:700;color:var(--blue);font-size:clamp(1.9rem,5vw,4.6rem);line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.contact__lead{margin-top:1.5rem;font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:28rem}
.contact__links{margin-top:2.25rem;display:grid;gap:.5rem;font-family:var(--f-mono);font-size:.85rem}
.contact__links a{width:fit-content;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s}
.contact__links a:hover{color:var(--blue);border-color:var(--blue)}

.form{display:grid;gap:1.6rem}
.form__title{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--black);border-radius:0;padding:.55rem 0;font-size:1.05rem;
  transition:border-color .25s;
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--blue);box-shadow:0 1px 0 0 var(--blue)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.check{display:grid;grid-template-columns:1.1rem 1fr;gap:.75rem;align-items:start;font-size:.85rem;line-height:1.45;color:var(--mute)}
.check input{width:1.1rem;height:1.1rem;margin:.15rem 0 0;accent-color:var(--blue)}
.check a{color:var(--blue)}
.btn-submit{
  justify-self:start;background:var(--blue);color:var(--paper);border:1px solid var(--blue);border-radius:999px;
  padding:.95rem 2rem;font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.btn-submit:hover{background:var(--black);border-color:var(--black)}
.btn-submit[disabled]{opacity:.6;cursor:progress}
.form__status{font-size:.95rem}
.form__status:empty{display:none}
.form__submit{display:flex}
.form__req{margin-top:-.8rem}
.form__status.is-ok{color:var(--blue);font-weight:500}
.form__status.is-err{color:var(--black);font-weight:500}
.form__req{font-size:.8rem;color:var(--mute)}
@media (max-width:860px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{--footer-bg:var(--black);background:var(--footer-bg);color:var(--paper);padding-block:clamp(3.5rem,7vw,6rem) calc(1.75rem + env(safe-area-inset-bottom,0px))}
.footer__mark{
  display:block;font-family:var(--f-display);font-weight:700;letter-spacing:0;font-kerning:none;line-height:.9;white-space:nowrap;color:var(--paper);
  font-size:min(calc((100vw - 2 * var(--pad)) / 6.6),25rem);margin-left:-.04em;
}
/* spaziatura ottica uguale tra tutte le lettere (misurata sull'inchiostro dei glifi); il punto è centrato tra la Y e la s */
.footer__mark i,.logo__w i{font-style:normal}
.footer__mark .dot,.logo__w .dot{font-weight:500}
.footer__mark i:nth-child(1),.logo__w i:nth-child(1){margin-right:-.053em}
.footer__mark i:nth-child(2),.logo__w i:nth-child(2){margin-right:.002em}
.footer__mark i:nth-child(3),.logo__w i:nth-child(3){margin-right:.0008em}
.footer__mark i:nth-child(4),.logo__w i:nth-child(4){margin-left:-.28em;margin-right:.05em}
.footer__mark i:nth-child(5),.logo__w i:nth-child(5){margin-right:.0133em}
.footer__mark i:nth-child(6),.logo__w i:nth-child(6){margin-right:-.0255em}
.footer__mark i:nth-child(7),.logo__w i:nth-child(7){margin-right:-.012em}
.footer__mark i:nth-child(8),.logo__w i:nth-child(8){margin-right:-.0067em}
.footer__mark i:nth-child(9),.logo__w i:nth-child(9){margin-right:-.0195em}
.footer__cols{margin-top:clamp(2.5rem,6vw,5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;border-top:1px solid var(--line-inv);padding-top:1.75rem}
.footer__cols h3{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-inv);margin-bottom:.9rem}
.footer__cols li+li{margin-top:.35rem}
.footer__cols a{text-decoration:none;font-size:.95rem;border-bottom:1px solid transparent;transition:border-color .25s}
.footer__cols a:hover{border-color:var(--paper)}
.footer__bottom{margin-top:clamp(2.5rem,6vw,4.5rem);display:flex;justify-content:space-between;gap:1rem;font-family:var(--f-mono);font-size:.75rem;color:var(--mute-inv)}
@media (max-width:760px){
  .footer .wrap--full{display:flex;flex-direction:column}
  .footer__cols{order:1;margin-top:0;display:flex;flex-direction:column;gap:2rem;text-align:center;border-top:0;padding-top:0}
  .fc-contatti{order:1}.fc-social{order:2}.fc-nav{order:3}.fc-legal{order:4}
  .footer__mark{order:2;margin-top:clamp(2.5rem,12vw,4rem);text-align:center}
  .footer__bottom{order:3;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line-inv);flex-wrap:nowrap;justify-content:center;white-space:nowrap}
}

/* ---------- FAQ ---------- */
.faq__head{display:grid;gap:1.25rem;margin-bottom:clamp(2rem,5vw,4rem)}
@media (min-width:901px){
  .faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
  .faq__head{grid-column:1;grid-row:1 / 3;margin-bottom:0}
  .faq__list{grid-column:2;grid-row:1}
  .faq__more{grid-column:2;grid-row:2}
}
.faq__list{border-top:1px solid var(--black)}
.faq__item{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 1rem)}
.faq__btn{width:100%;display:grid;grid-template-columns:3.2rem minmax(0,1fr) 2.5rem;align-items:center;gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.8rem) 0;background:none;border:0;text-align:left;cursor:pointer;color:inherit}
.faq__num{font-size:.8rem;font-weight:500;color:var(--mute);transition:color .25s}
.faq__q{font-weight:500;font-size:clamp(1.1rem,2.1vw,1.75rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance;transition:color .25s,transform .5s var(--ease)}
.faq__icon{position:relative;width:1.6rem;height:1.6rem;justify-self:end}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__btn[aria-expanded="true"] .faq__q,.faq__btn[aria-expanded="true"] .faq__num,.faq__btn[aria-expanded="true"] .faq__icon{color:var(--blue)}
.faq__btn[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
@media (hover:hover){.faq__btn:hover .faq__num{color:var(--blue)}}
.faq__q{justify-self:start;padding-inline:.25em;margin-inline:-.25em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.faq__panel{display:grid;grid-template-rows:1fr}
.faq__inner{min-height:0;overflow:hidden}
.faq__body{display:grid;grid-template-columns:3.2rem minmax(0,38rem);gap:1rem;padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.faq__body>div{grid-column:2}
.faq__body p{font-size:1.05rem;line-height:1.6;color:var(--black)}
.faq__more{margin-top:clamp(1.75rem,4vw,3rem);font-size:1.05rem;line-height:1.5}
.faq__more a{color:var(--blue);font-weight:500;border-bottom:1px solid currentColor;padding-bottom:1px}
@media (hover:hover){.faq__more a:hover{background:var(--blue);color:var(--paper);border-bottom-color:var(--blue)}}
@media (scripting:enabled){
  .faq__panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease),visibility 0s .55s}
  .faq__item.is-open .faq__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
}
@media (max-width:640px){
  .faq__btn{grid-template-columns:2.2rem minmax(0,1fr) 1.8rem;gap:.6rem}
  .faq__body{grid-template-columns:1fr}
  .faq__body>div{grid-column:1}
}

/* Scelta del servizio nel form */
.services-pick{border:0;padding:0;margin:0;min-width:0}
.services-pick legend{padding:0;margin-bottom:.7rem;font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.services-pick .hint{text-transform:none;letter-spacing:0;opacity:.75}
.chips{display:flex;flex-wrap:nowrap;gap:.55rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;padding:.6rem;margin:-.6rem;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips.is-drag{cursor:grabbing;user-select:none}
.chip{position:relative;cursor:pointer;flex:0 0 auto}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:block;white-space:nowrap;font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.03em;border:1px solid currentColor;border-radius:999px;padding:.5rem .95rem;
  transition:background .2s,color .2s,border-color .2s}
/* come il pulsante "Contattaci": al passaggio la pillola si riempie e inverte i colori */
.chip span{transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
@media (hover:hover){.chip:hover span{background:var(--paper);color:var(--blue);border-color:var(--paper);transform:translateY(-2px)}}
.chip:active span{transform:translateY(0) scale(.97)}
.chip input:checked+span{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.chip input:checked+span::before{content:"\2713\00a0"}
.chip input:focus-visible+span{outline:2px solid var(--paper);outline-offset:3px}

/* ---------- Varianti su blu (servizi, contatti) ---------- */
.services.on-blue .service__num,.services .service__btn:hover .service__num,.services .service__btn[aria-expanded="true"] .service__num{color:var(--mute-inv)}
.services .service__btn[aria-expanded="true"] .service__title,
.services .service__btn[aria-expanded="true"] .service__icon{color:var(--paper)}
.services .service__btn[aria-expanded="true"] .service__num{color:var(--paper)}
@media (hover:hover){
  .services .service__btn:hover .service__title{color:var(--paper)}
  .services .service__btn:hover .service__num{color:var(--paper)}
}
.services__list{border-top-color:var(--paper)}
.services .service{border-bottom-color:var(--line-inv)}
.services .service__body p{color:var(--paper)}
.services .tags li{color:var(--paper);border-color:var(--paper)}

.contact__title{color:var(--paper)}
.contact__links a{border-bottom-color:var(--line-inv)}
.contact__links a:hover{color:var(--paper);border-color:var(--paper)}
.contact .form__title,.contact .check,.contact .form__req{color:var(--mute-inv)}
.contact .services-pick legend,.contact .chip{color:var(--paper)}
.contact .services-pick .hint{color:var(--mute-inv);opacity:1}
.contact .field input,.contact .field textarea{border-bottom-color:var(--paper)}
.contact .field input:focus,.contact .field textarea:focus{border-bottom-color:var(--paper);box-shadow:0 1px 0 0 var(--paper)}
.contact .check a{color:var(--paper)}
.contact .check input{accent-color:var(--paper)}
.contact .btn-submit{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.contact .btn-submit:hover{background:var(--blue);color:var(--paper);border-color:var(--paper)}
.contact .form__status.is-ok,.contact .form__status.is-err{color:var(--paper)}

/* Foto dei servizi: quadrate, doppio colore blu/bianco (colori piatti) */
.service__media{display:none}
@media (min-width:901px){
  .service__body{grid-template-columns:3.2rem minmax(0,38rem) minmax(0,1fr)}
  .service__body>.service__media{display:block;grid-column:3;grid-row:1;justify-self:end;align-self:start;position:relative;isolation:isolate;
    width:min(100%,13rem);aspect-ratio:1/1;overflow:hidden;background:var(--paper);margin-top:.4rem}
  .service__media img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
  .service__media::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:lighten;pointer-events:none}
}
/* telefono e tablet: la foto quadrata sta sotto il testo */
@media (max-width:900px){
  .service__body>.service__media{display:block;grid-column:2;grid-row:auto;justify-self:start;position:relative;isolation:isolate;
    width:min(100%,15rem);aspect-ratio:1/1;overflow:hidden;background:var(--paper);margin-top:.4rem}
  .service__media img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
  .service__media::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:lighten;pointer-events:none}
}
@media (max-width:640px){.service__body>.service__media{grid-column:1}}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .service__body>.service__media{clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--ease) .12s}
  .service__media img{transform:scale(1.25);transition:transform 1.1s var(--ease) .12s}
  .service.is-open .service__media{clip-path:inset(0 0 0 0)}
  .service.is-open .service__media img{transform:none}
}

/* ---------- Reveal allo scroll ---------- */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  [data-reveal].is-in{opacity:1;transform:none}
  [data-reveal="1"]{transition-delay:.08s}
  [data-reveal="2"]{transition-delay:.16s}
  [data-reveal="3"]{transition-delay:.24s}
  [data-reveal="4"]{transition-delay:.32s}
  [data-reveal="5"]{transition-delay:.4s}
  .project[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease),background .35s var(--ease),color .35s var(--ease)}
  .project__media{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease) .15s}
  .project__media img{scale:1.25}
  .project.is-in .project__media{clip-path:inset(0)}
  .project.is-in .project__media img{scale:1}
  a.project.is-in:hover .project__media img{scale:1.06}
  .project__media img{transition:scale 1.4s var(--ease)}
  a.project.is-in:hover .project__media img{transition-duration:1s}
}

/* ---------- Hover = testo "selezionato" ----------
   Sui link il passaggio del mouse evidenzia il testo come una selezione:
   fondo pieno (colore piatto) e testo a contrasto, a scatto, senza transizioni. */
:root{--sel-bg:var(--blue);--sel-fg:var(--paper)}
.on-blue,.header.is-blue{--sel-bg:var(--paper);--sel-fg:var(--blue)}
.footer,.header.is-dark{--sel-bg:var(--paper);--sel-fg:var(--black)}
@media (max-width:900px){.header .nav{--sel-bg:var(--paper);--sel-fg:var(--blue)}}

.header .nav a:not(.btn),.contact__links a,.footer__cols a,.service__title{
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-inline:.3em;margin-inline:-.3em}
.header .nav a:not(.btn){padding-block:.25rem}
.ticker__track a{padding:.2rem .4em;margin:.8rem 1.3rem}
.service__title{padding-inline:.25em;margin-inline:-.25em;justify-self:start}
@media (hover:hover){
  .header .nav a:not(.btn):hover,
  .ticker__track a:hover,
  .contact__links a:hover,
  .footer__cols a:hover,
  .services .service__btn:hover .service__title,
  .faq__btn:hover .faq__q,
  .service__btn:hover .service__title{
    background:var(--sel-bg);color:var(--sel-fg);border-color:transparent;text-decoration:none;transition:none;translate:none;transform:none}
  .header .nav a:not(.btn):hover{border-bottom-color:transparent}
}
.header .nav a:not(.btn):focus-visible,.ticker__track a:focus-visible,.contact__links a:focus-visible,.footer__cols a:focus-visible{background:var(--sel-bg);color:var(--sel-fg);outline:0}

/* ---------- Testo non selezionabile, niente cursore a "I" ---------- */
body{cursor:default;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a,button,label,summary,[role="button"]{cursor:pointer}
input,textarea{-webkit-user-select:text;user-select:text;cursor:text}
input[type="checkbox"],input[type="radio"]{cursor:pointer}
img,svg{-webkit-user-drag:none}

/* ---------- Grana su tutto il sito (effetto pellicola) ----------
   Rumore generato in SVG (nessun file in più). Fa parte della pagina: scorre insieme allo sfondo.
   Sta sopra i contenuti ma sotto ovale e header (l'header ha la sua grana, così non si vede la differenza). */
:root{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='a' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -1.15'/></filter><filter id='b' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.6 0 0 0 -1.15'/></filter><rect width='100%25' height='100%25' filter='url(%23a)'/><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>")}
body{position:relative}
body::after,.header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);background-size:240px 240px;opacity:.16;
}
body::after{z-index:35}
.header::after{z-index:1}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .header::after{animation:grain .9s steps(1) infinite}
  /* Desktop: la grana è un livello fisso che si sposta con transform (lo gestisce la GPU), invece di ridisegnare
     ogni volta un livello alto come tutta la pagina. */
  body::after{position:fixed;inset:-150px;will-change:transform;animation:grain-t .9s steps(1) infinite}
}
@keyframes grain-t{
  0%{transform:translate3d(0,0,0)}
  17%{transform:translate3d(-90px,60px,0)}
  33%{transform:translate3d(70px,-110px,0)}
  50%{transform:translate3d(-130px,-40px,0)}
  67%{transform:translate3d(110px,90px,0)}
  83%{transform:translate3d(-40px,130px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes grain{
  0%{background-position:0 0}
  17%{background-position:-90px 60px}
  33%{background-position:70px -110px}
  50%{background-position:-130px -40px}
  67%{background-position:110px 90px}
  83%{background-position:-40px 130px}
  100%{background-position:0 0}
}
@media print{body::after,.header::after{display:none}}

/* ---------- Form: ringraziamento grande al posto del modulo ---------- */
[hidden]{display:none !important}
.form__thanks{display:grid;gap:1.4rem;align-content:center;justify-items:start;min-height:min(70vh,34rem)}
.thanks__label{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-inv)}
.thanks__title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.4rem,6.2vw,5.4rem);color:var(--paper);overflow-wrap:anywhere;outline:0}
.thanks__text{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;max-width:30rem;color:var(--paper)}
.form__thanks .btn-submit{margin-top:.6rem}
@media (prefers-reduced-motion:no-preference){
  .form__thanks:not([hidden]){animation:thanks-in .7s var(--ease) both}
  @keyframes thanks-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---------- Touch: tocco = testo selezionato + bottoni che vibrano ---------- */
html{-webkit-tap-highlight-color:transparent}
[tabindex="-1"]:focus{outline:0}
.header .nav a:not(.btn).is-tap,
.ticker__track a.is-tap,
.footer__cols a.is-tap{
  background:var(--sel-bg);color:var(--sel-fg);border-color:transparent;text-decoration:none;transition:none}
.header .nav a:not(.btn).is-tap{border-bottom-color:transparent}
@keyframes vibe{
  0%{translate:0 0}
  15%{translate:-4px 1px}
  30%{translate:4px -1px}
  45%{translate:-3px 1px}
  60%{translate:3px 0}
  80%{translate:-1px 0}
  100%{translate:0 0}
}
@media (prefers-reduced-motion:no-preference){
  .is-vibe{animation:vibe .38s var(--ease)}
}

/* ---------- Header su telefono: niente banda, solo due pillole che galleggiano ---------- */
@media (max-width:760px){
  .header,.header.is-blue,.header.is-dark{background:transparent;pointer-events:none}
  .header::after{display:none}
  .header .logo,.header .menu-btn{pointer-events:auto}
  .header .logo{transition:color .25s}
  /* tasto Menu "pieno": sul bianco blu pieno, sul blu e sul nero bianco pieno */
  .header .menu-btn{background:var(--blue);color:var(--paper);border-color:var(--blue)}
  .header.is-blue .menu-btn{background:var(--paper);color:var(--blue);border-color:var(--paper)}
  .header.is-dark .menu-btn{background:var(--paper);color:var(--black);border-color:var(--paper)}
  .menu-open .header,.menu-open .header.is-blue,.menu-open .header.is-dark{background:var(--blue)}
  .menu-open .header .menu-btn,.menu-open .header.is-blue .menu-btn,.menu-open .header.is-dark .menu-btn{background:var(--blue);color:var(--paper);border-color:var(--paper)}
  .menu-open .header .nav{pointer-events:auto}
}

/* ---------- Banner biscotto ---------- */
.consent{position:fixed;z-index:60;left:var(--pad);bottom:var(--pad);width:min(24rem,calc(100vw - 2 * var(--pad)));
  background:var(--paper);color:var(--blue);border:2px solid var(--blue);border-radius:1.2rem;padding:1.1rem 1.2rem;
  translate:0 140%;opacity:0;transition:translate .5s var(--ease),opacity .4s}
.consent.is-on{translate:0 0;opacity:1}
.consent__t{font-family:var(--f-mono);font-size:.74rem;line-height:1.55;letter-spacing:.04em;margin:0 0 .9rem}
.consent__t a{color:inherit;text-underline-offset:.2em}
.consent{max-height:calc(100svh - 2 * var(--pad));overflow-y:auto;overscroll-behavior:contain}
.consent__panel{margin:0 0 1rem;border-top:1px solid var(--blue)}
.cs{padding:.7rem 0;border-bottom:1px solid var(--blue)}
.cs__h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;cursor:pointer}
.cs__t{display:block;font-family:var(--f-mono);font-size:.72rem;line-height:1.5;letter-spacing:.03em}
.cs__t b{display:block;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;margin-bottom:.15rem}
.cs__t i{font-style:normal}
.cs__d{margin-top:.45rem;font-family:var(--f-mono);font-size:.7rem;line-height:1.5;letter-spacing:.03em}
.cs__d summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;text-decoration:underline;text-underline-offset:.2em}
.cs__d summary::-webkit-details-marker{display:none}
.cs__d summary::before{content:"+";display:inline-block;width:.9em;text-align:center;font-weight:700;text-decoration:none}
.cs__d[open] summary::before{content:"\2212"}
.cs__d summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cs__d p{margin:.5rem 0 0}
.cs__d p b{font-weight:700}
.cs input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:2.5rem;height:1.4rem;margin:.1rem 0 0;border:1.5px solid var(--blue);border-radius:999px;background:transparent;cursor:pointer;transition:background .2s}
.cs input::after{content:"";position:absolute;top:2px;left:2px;width:calc(1.4rem - 7px);height:calc(1.4rem - 7px);border-radius:50%;background:var(--blue);transition:translate .2s var(--ease),background .2s}
.cs input:checked{background:var(--blue)}
.cs input:checked::after{translate:1.1rem 0;background:var(--paper)}
.cs input:disabled{opacity:.55;cursor:default}
.cs input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.consent__b:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.consent__a{display:flex;gap:.6rem;flex-wrap:wrap}
.consent__b{font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer}
.consent__b--y{background:var(--blue);color:var(--paper)}
.consent__b:hover{background:var(--blue);color:var(--paper)}
.consent__b--y:hover{background:var(--black);border-color:var(--black)}
@media (prefers-reduced-motion:reduce){.consent{transition:opacity .2s;translate:0 0}}
@media print{.consent{display:none}}

/* ---------- Pagine interne (Lavora con noi) ---------- */
.page-hero{padding-top:calc(var(--header-h) + clamp(3rem,9vw,7rem));padding-bottom:clamp(3.5rem,9vw,7rem);min-height:min(78svh,48rem);display:flex;align-items:flex-end}
.page-hero__in{display:grid;gap:clamp(1.2rem,2.5vw,2rem)}
.page-hero__title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-.015em;
  font-size:clamp(2.6rem,min(11.5vw,12vh * 1.8),9rem);margin:0}
.page-hero__lead{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.4;font-weight:500;max-width:34rem;margin:0}
.jobs__title{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.6rem,3.6vw,3rem);max-width:30rem;margin:1rem 0 1.4rem}
.jobs__text{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;max-width:34rem;margin:0 0 2rem}
a.btn-submit{display:inline-block;text-decoration:none}

/* ---------- Transizione blu tra pagine ---------- */
/* Solo transform: viene composto dalla GPU, quindi scorre fluido anche su schermi grandi */
.pt-cover{position:fixed;inset:0;z-index:400;background:var(--blue);transform:translate3d(0,100%,0);will-change:transform;
  transition:transform .62s cubic-bezier(.76,0,.24,1)}
.pt-cover.is-on{transform:translate3d(0,0,0)}
html.pt-in::after{content:"";position:fixed;inset:0;z-index:400;background:var(--blue);pointer-events:none;will-change:transform;
  animation:pt-out .7s cubic-bezier(.76,0,.24,1) .22s both}
@keyframes pt-out{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-100%,0)}}
@media (prefers-reduced-motion:reduce){.pt-cover{display:none}html.pt-in::after{display:none}}

/* ---------- Candidatura spontanea ---------- */
.apply{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.apply.is-open{grid-template-rows:1fr}
.apply__in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .7s}
.apply.is-open .apply__in{visibility:visible;transition-delay:0s}
.apply__form{padding-top:2.4rem;max-width:40rem}
.check--piva{color:var(--black)}
.field .hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--mute)}
.file__zone{position:relative;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border:1px dashed var(--blue);border-radius:1.1rem;padding:1.1rem 1.2rem;
  transition:background .25s,border-color .25s}
.file__zone:hover,.file__zone:focus-within,.file__zone.is-drag{background:color-mix(in srgb, var(--blue) 7%, transparent);border-style:solid}
.file__zone input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0;padding:0;border:0}
.file__btn{font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:var(--paper);border-radius:999px;padding:.55rem 1.1rem;flex:none}
.file__name{font-size:.95rem;color:var(--mute);overflow-wrap:anywhere;min-width:0}
.file__zone.has-file .file__name{color:var(--black);font-weight:500}
.file__hint{margin:.1rem 0 0;font-size:.8rem;color:var(--mute)}
.jobs .form__status.is-err{color:#b3261e}
.jobs .thanks__label{color:var(--mute)}
.jobs .thanks__title{color:var(--blue)}
.jobs .thanks__text{color:var(--black)}
.jobs .form__thanks{min-height:min(60vh,28rem);padding-top:2.4rem}
.jobs .form__thanks a.btn-submit{text-decoration:none}
@media (scripting:none){
  .apply{grid-template-rows:1fr}.apply__in{visibility:visible}#apply-toggle{display:none}
}

/* ---------- La grana si vede anche nelle transizioni ---------- */
.pt-cover::after,html.pt-in::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:240px 240px;opacity:.16}
html.pt-in::before{position:fixed;z-index:401;will-change:transform;animation:pt-out .7s cubic-bezier(.76,0,.24,1) .22s both}
@media (prefers-reduced-motion:reduce){html.pt-in::before{display:none}}

/* ---------- Omino: fischietta ---------- */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .tv-bubble.is-whistle .tv-bubble__b{padding:calc(.55rem - 2px) calc(1rem - 2px)}
  .tv-bubble__t .nt{display:inline-block;font-family:system-ui,"Segoe UI Symbol","Apple Symbols",sans-serif;font-size:1.3em;line-height:1;
    letter-spacing:.15em;animation:note-bob 1.1s ease-in-out infinite;animation-delay:calc(var(--i, 0) * .2s)}
  @keyframes note-bob{0%,100%{translate:0 3px;opacity:.65}50%{translate:0 -5px;opacity:1}}
  .traveler.is-whistling .mk{animation:bob 5s ease-in-out infinite,whistle-sway 1.1s ease-in-out 3}
  @keyframes whistle-sway{0%,100%{rotate:0deg}30%{rotate:-7deg}70%{rotate:7deg}}
}

/* ---------- Pagine legali (Privacy, Cookie): bianche, solo testo ---------- */
.legal-hero{padding-top:calc(var(--header-h) + clamp(3rem,9vw,7rem));padding-bottom:clamp(2rem,5vw,3.5rem)}
.legal-hero__in{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.legal-hero__title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-.03em;color:var(--blue);
  font-size:clamp(2.4rem,9.5vw,7rem);margin:0;overflow-wrap:anywhere}
.legal-hero__date{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.legal{padding-block:clamp(1rem,3vw,2rem) var(--sec)}
.legal__body{max-width:46rem;border-top:1px solid var(--black);padding-top:clamp(1.6rem,3vw,2.4rem)}
.legal__lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;font-weight:500;margin-bottom:1rem}
.legal__body h2{display:flex;gap:.9rem;align-items:baseline;font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--blue);
  font-size:clamp(1.25rem,2.4vw,1.75rem);margin:clamp(2.4rem,5vw,3.4rem) 0 1rem}
.legal__body h2 span{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;font-weight:500;color:var(--mute);flex:none}
.legal__body h3{font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:1.8rem 0 .7rem}
.legal__body h3 small{font-size:inherit;text-transform:none;letter-spacing:.02em;color:var(--mute);margin-left:.5rem}
.legal__body p{font-size:1.05rem;line-height:1.65;margin:0 0 1rem;max-width:42rem}
.legal__body a{color:var(--blue);text-underline-offset:.2em}
.legal__list{margin:0 0 1.1rem;display:grid;gap:.55rem}
.legal__list li{position:relative;padding-left:1.4rem;font-size:1.05rem;line-height:1.6}
.legal__list li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--blue)}
.ph{background:color-mix(in srgb,var(--blue) 10%,transparent);padding:0 .2em}
.ctab{margin:.6rem 0 1.6rem;border-top:1px solid var(--black)}
.ctab__r{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr) minmax(0,1fr);gap:.4rem 1.4rem;padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.5}
.ctab__r b{font-family:var(--f-mono);font-weight:500;font-size:.8rem;overflow-wrap:anywhere}
.ctab__d{color:var(--mute)}
@media (max-width:700px){.ctab__r{grid-template-columns:minmax(0,1fr)}}

/* ---------- Errore 404: tutto blu, scritte bianche, faccione al centro ---------- */
.page-404{background:var(--blue);color:var(--paper)}
.err{min-height:100svh;display:flex;flex-direction:column;padding-block:calc(var(--header-h) + .5rem) 2rem;position:relative}
.err__in{width:100%;margin-block:auto;display:grid;justify-items:center;gap:clamp(.8rem,2svh,1.4rem);text-align:center}
.err__stage{--fh:clamp(10rem,min(37svh,62vw * 1.25),28rem);position:relative;display:grid;justify-items:center}
.err__face{position:relative;display:block;height:var(--fh);aspect-ratio:4/5;border:0;padding:0;background:none;color:var(--paper);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.err__face svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.err__face:focus-visible{outline:2px solid var(--paper);outline-offset:8px;border-radius:50%}
.err__title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1;margin:0;
  font-size:clamp(2.2rem,min(9vw,7svh),5rem)}
.err__sub{margin:0;max-width:29rem;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.5;color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  /* la faccia respira (bob) sull'SVG e fa la scossa (wob) sul bottone: due animazioni su due livelli, così non si
     interrompono a vicenda e non c'è nessuno scatto quando si tocca o quando finisce la scossa */
  .err__face svg{animation:bob 5s ease-in-out infinite}
  .err__face.is-talk{animation:err-wob .6s cubic-bezier(.3,.6,.3,1)}
  @keyframes err-wob{0%{transform:scale(1,1) rotate(0)}25%{transform:scale(1.06,.94) rotate(-3deg)}55%{transform:scale(.97,1.04) rotate(2deg)}100%{transform:scale(1,1) rotate(0)}}
}
/* fumetto: nascosto; compare solo al passaggio del mouse (desktop) o al tocco (telefono).
   Sul telefono sta sopra la faccia (coda in giù), da tablet in su accanto alla faccia (coda a sinistra) */
.err__say{position:absolute;left:50%;bottom:calc(100% - .2rem);translate:-50% 0;margin:0;width:max-content;max-width:min(19rem,88vw);background:var(--paper);color:var(--blue);
  border-radius:1.3rem;padding:.9rem 1.2rem;font-family:var(--f-mono);font-weight:500;font-size:clamp(.8rem,2.5vw,.92rem);line-height:1.5;letter-spacing:.02em;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.94);transform-origin:50% 100%;
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1),visibility 0s .45s}
.err__say.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s}
.err__say.is-chg{opacity:0;transition:opacity .12s}
.err__say::before{content:"";position:absolute;left:50%;bottom:-10px;translate:-50% 0;width:20px;height:11px;background:var(--paper);clip-path:polygon(0 0,100% 0,50% 100%)}
.err__stage{padding-top:4.6rem}
@media (min-width:760px){
  .err__stage{padding-top:0}
  .err__say{left:calc(50% + var(--fh) * .4 + 1.4rem);bottom:auto;top:8%;translate:0 0;text-align:left;max-width:19rem;transform-origin:0 1.6rem;transform:translateX(-12px) scale(.94)}
  .err__say.is-on{transform:none}
  .err__say::before{left:-10px;bottom:auto;top:1.2rem;translate:0 0;width:11px;height:20px;clip-path:polygon(100% 0,0 50%,100% 100%)}
}
/* bottone "Torna alla home": solo linea bianca, pieno (bianco con testo blu) al passaggio del mouse */
.err__go{justify-self:center;margin-top:.3rem;display:inline-block;text-decoration:none;background:transparent;color:var(--paper);border-color:var(--paper);
  transition:background .25s,color .25s,border-color .25s}
.err__go:focus-visible{background:var(--paper);color:var(--blue);border-color:var(--paper)}
@media (hover:hover){.err__go:hover{background:var(--paper);color:var(--blue);border-color:var(--paper)}}

/* ---------- Progetti: bannerino "Online a breve" ---------- */
.project--live{cursor:default}
.project__flag{position:absolute;left:.9rem;bottom:.9rem;background:var(--blue);color:var(--paper);padding:.5rem .8rem;font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

/* Telefono: con il menu aperto l'ovale si nasconde */
@media (max-width:900px){.menu-open .traveler{opacity:0 !important;transition:opacity .15s !important}}


/* ---------- Pagina contatti (QR dei biglietti) ---------- */
.page-hero--card{min-height:0;align-items:flex-end}
.ccard__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:44rem}
.ccard__row{display:grid;grid-template-columns:6.5rem 1fr auto;align-items:baseline;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--black);transition:color .25s,padding .35s var(--ease)}
.ccard__k{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ccard__v{font-family:var(--f-display);font-weight:500;font-size:clamp(1.05rem,3.6vw,1.5rem);letter-spacing:-.01em;overflow-wrap:anywhere}
.ccard__row i{font-style:normal;font-size:1.2rem;color:var(--blue)}
@media (hover:hover){.ccard__row:hover{color:var(--blue);padding-left:.6rem}}
.ccard__row:focus-visible{color:var(--blue);outline:2px solid var(--blue);outline-offset:2px}
.ccard__save{margin:2.2rem 0 0}
.ccard__save .btn-submit{display:inline-block;text-decoration:none}
@media (max-width:480px){.ccard__row{grid-template-columns:1fr auto;gap:.15rem 1rem}.ccard__k{grid-column:1/-1}}

/* Vintage Machine: la foto è verticale, nel carosello 4:3 va ancorata in alto così si vede il volto */
.projects__grid>.project:first-child .project__media img{object-position:50% 0%}

/* campo trappola anti-bot: invisibile alle persone */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* nome e dettagli oscurati: velo opaco sfocato (il testo vero non è nel codice) */
.redact{display:inline-block;filter:blur(.22em);opacity:.5;user-select:none;-webkit-user-select:none;pointer-events:none;line-height:.95;margin-top:.12em}
.project__meta .redact{filter:blur(.26em);margin-top:0;line-height:1.5}

/* X per chiudere il banner cookie */
.consent__x{position:absolute;top:.55rem;right:.55rem;width:2rem;height:2rem;display:grid;place-items:center;background:transparent;border:0;color:inherit;cursor:pointer;padding:0}
.consent__x:hover{color:var(--blue)}
.consent__x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.consent__t{padding-right:1.8rem}
/* Desktop: progetti e contatti più compatti, ciascuna sezione sta in una sola schermata */
@media (min-width:901px){
  .projects__head{margin-bottom:clamp(1rem,2.5svh,1.75rem)}
  .projects__head .h2{font-size:clamp(1.5rem,2.6vw,2.4rem)}
  .projects__grid>.project{flex:0 0 calc((100% - clamp(1rem,1.6vw,1.5rem)) / 2.35)}
  .projects__grid .project__media{aspect-ratio:auto;height:clamp(12rem,44svh,30rem)}
  .projects__grid .project__cap{padding:.9rem 1.1rem 1rem}
  .projects__grid .project__name{font-size:clamp(1.15rem,1.7vw,1.7rem)}
  .projects__grid .project__meta{margin-top:.5rem;font-size:.72rem}

  .contact__title{font-size:clamp(1.9rem,3.6vw,3.6rem)}
  .contact__lead{margin-top:1rem}
  .contact__links{margin-top:1.5rem}
  .contact .form{gap:1rem}
  .contact .form__row{gap:1rem}
  .contact .field input,.contact .field textarea{padding:.4rem 0}
  .contact .field textarea{min-height:4.5rem;height:5rem}
  .contact .form__req{margin-top:-.4rem}
  .contact .btn-submit{padding:.8rem 1.8rem}
}

/* Desktop: ogni sezione occupa una schermata intera (così non si vede il colore della sezione dopo)
   e servizi / FAQ / progetti / contatti stanno dentro una sola schermata. */
@media (min-width:901px){
  main > section.section{min-height:100vh;min-height:100svh}
  .services.section,.projects.section,.contact.section,.faq.section{--sec:clamp(4.5rem,10svh,7rem)}
  .about.section{display:flex;flex-direction:column;justify-content:center}
  .about.section>.wrap{width:100%}

  /* progetti */
  .projects.section{padding-block:var(--sec)}
  .projects__head{margin-bottom:clamp(.9rem,2.2svh,1.6rem)}
  .projects__head .h2{font-size:clamp(1.5rem,2.6vw,2.4rem)}
  .projects__grid .project__media{height:clamp(11rem,40svh,30rem)}

  /* servizi */
  .services__head{gap:.7rem;margin-bottom:clamp(1rem,3svh,2rem)}
  .services__head .h2{font-size:clamp(1.5rem,2.7vw,2.6rem)}
  .service__btn{padding:clamp(.5rem,1.9svh,1.2rem) 0}
  .service__title{font-size:clamp(1.1rem,3.8svh,2rem)}

  /* contatti */
  .contact.section{padding-block:var(--sec)}
  .contact__title{font-size:clamp(1.9rem,min(3.6vw,7svh),3.6rem)}
  .contact__lead{margin-top:clamp(.6rem,1.8svh,1rem)}
  .contact__links{margin-top:clamp(.8rem,2.4svh,1.5rem)}
  .contact .form,.contact .form__row{gap:clamp(.55rem,1.7svh,1rem)}
  .contact .field input,.contact .field textarea{padding:.4rem 0}
  .contact .field textarea{min-height:3rem;height:clamp(3.2rem,9svh,5rem)}
  .contact .form__req{margin-top:-.3rem}
  .contact .btn-submit{padding:.75rem 1.8rem}

  /* il percorso della faccia: nelle FAQ ora c'è una sola tappa */
  .stop--faq2{display:none}

  /* faq */
  .faq__btn{padding:clamp(.5rem,1.7svh,1.1rem) 0}
  .faq__q{font-size:clamp(1rem,2.9svh,1.55rem)}
  .faq__more{margin-top:clamp(.9rem,2.4svh,1.6rem);font-size:1rem}
}