/* ==========================================================================
   PERCEPTIO — Creative Studio · perceptio.it
   Design system + layout — palette derivata dal logo 2026
   ========================================================================== */

/* Caratteri ospitati sul sito (Poppins, JetBrains Mono, Cormorant Garamond — licenza SIL OFL) */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/cormorant-garamond-italic-400-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/cormorant-garamond-italic-400-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/jetbrains-mono-normal-300-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/jetbrains-mono-normal-300-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/poppins-normal-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/poppins-normal-200-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-normal-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-normal-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-normal-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-normal-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-normal-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-normal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-normal-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-normal-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Palette brand (campionata dal logo) */
  --ink:       #040606;
  --ink-2:     #0D1012;
  --ink-3:     #161A1D;
  --paper:     #F6F4F0;
  --paper-2:   #E8E4DC;
  --blue:      #224771;
  --bordeaux:  #5B1018;
  --red:       #CC4B56;
  --gold:      #BCAA34;

  --accent:    var(--red);
  --muted:     #8C8F92;
  --muted-dark:#6E7276;
  --line:      rgba(246,244,240,.14);
  --line-light:rgba(4,6,6,.14);

  --font: 'Poppins','Helvetica Neue',Arial,sans-serif;

  --gutter: clamp(20px, 5vw, 76px);
  --section: clamp(56px, 7vw, 104px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
::selection{background:var(--red); color:#fff}

/* ---------- Tipografia ---------- */
.display{
  font-weight:600; line-height:.92; letter-spacing:-.045em;
  text-transform:uppercase; margin:0;
}
h1.display{font-size:clamp(2.7rem, 10vw, 9rem); font-weight:500}
h2.display{font-size:clamp(2rem, 5.6vw, 4.4rem)}
h3{font-weight:500; letter-spacing:-.02em; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.15; margin:0 0 .6em}
p{margin:0 0 1.15em}
.lead{font-size:clamp(1.02rem,1.5vw,1.28rem); line-height:1.6; max-width:62ch; font-weight:300}
.thin{font-weight:200}
.eyebrow{
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:var(--muted); margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before{content:''; width:28px; height:1px; background:var(--red); flex:none}
.muted{color:var(--muted)}
.accent{color:var(--red)}
.gold{color:var(--gold)}

/* ---------- Layout ---------- */
.wrap{width:100%; padding-inline:var(--gutter); margin-inline:auto; max-width:1640px}
section{padding-block:var(--section)}
.light{background:var(--paper); color:var(--ink)}
.light .muted{color:var(--muted-dark)}
.light .eyebrow{color:var(--muted-dark)}
.grid{display:grid; gap:clamp(24px,3.2vw,60px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,96px); align-items:start}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{background:rgba(4,6,6,.86); backdrop-filter:blur(16px); padding-block:14px; border-color:var(--line)}
/* a menu aperto niente sfocatura: backdrop-filter farebbe da contenitore al menu fisso */
.site-header.menu-aperto{backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent; border-color:transparent}
.brand{display:block}
.brand img{height:22px; width:auto}
.nav{display:flex; align-items:center; gap:clamp(18px,2.3vw,40px)}
.nav a{font-size:.82rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; position:relative; padding-block:5px}
.nav a::after{content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--red); transition:width .3s ease}
.nav a:hover::after, .nav a[aria-current="page"]::after{width:100%}
.nav .btn{padding:.6rem 1.15rem}
.nav .btn::after{display:none}
.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:1.5px; background:var(--paper); margin:6px 0; transition:.3s}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.7rem; border:1px solid var(--red); border-radius:100px;
  font-weight:500; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--red); color:#fff; cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{background:var(--bordeaux); border-color:var(--bordeaux); color:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line)}
.btn-ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.light .btn-ghost{color:var(--ink); border-color:var(--line-light)}
.light .btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}
.link-more{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid var(--red); padding-bottom:4px;
}
.link-more:hover{color:var(--red)}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--gutter) + 70px) var(--gutter) var(--gutter);
  position:relative; overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,6,.55) 0%, rgba(4,6,6,.72) 45%, rgba(4,6,6,.96) 100%);
}
.hero-bg img,.hero-bg video{width:100%; height:100%; object-fit:cover}
.hero-inner{position:relative; z-index:2}
.hero-title .line{display:block; overflow:hidden}
.hero-title .line > span{display:block; transform:translateY(104%); animation:rise 1s cubic-bezier(.19,1,.22,1) forwards}
.hero-title .line:nth-child(2) > span{animation-delay:.1s}
.hero-title .line:nth-child(3) > span{animation-delay:.2s}
@keyframes rise{to{transform:translateY(0)}}
.hero-foot{
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,64px); align-items:flex-end;
  justify-content:space-between; margin-top:clamp(30px,4vw,56px);
  padding-top:28px; border-top:1px solid var(--line);
  opacity:0; animation:fade .9s ease .6s forwards;
}
@keyframes fade{to{opacity:1}}
.services-ticker{
  text-transform:uppercase; font-size:clamp(.72rem,1vw,.86rem);
  letter-spacing:.2em; font-weight:400;
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:var(--muted);
}
.services-ticker span:not(:last-child)::after{content:'·'; color:var(--red); margin-left:1rem}
.scroll-hint{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}

/* ---------- Servizi ---------- */
.svc{
  border-top:1px solid var(--line); padding-top:24px;
  transition:border-color .3s ease, transform .3s ease;
}
.light .svc{border-color:var(--line-light)}
.svc .num{font-size:.7rem; letter-spacing:.22em; color:var(--red); font-weight:500; display:block; margin-bottom:1.2rem}
.svc p{font-size:.94rem; color:var(--muted); margin-bottom:0}
.light .svc p{color:var(--muted-dark)}
.svc:hover{transform:translateY(-5px)}

/* ---------- Portfolio ---------- */
.work-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.4vw,22px)}
.work{position:relative; overflow:hidden; background:var(--ink-3); grid-column:span 6; display:block}
.work.w4{grid-column:span 4}
.work.w8{grid-column:span 8}
.work.w12{grid-column:span 12}
.work-img{aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform .9s cubic-bezier(.19,1,.22,1)}
.work.tall .work-img{aspect-ratio:3/4}
.work.w12 .work-img{aspect-ratio:21/9}
.work:hover .work-img{transform:scale(1.05)}
.work-meta{
  position:absolute; inset:auto 0 0 0; padding:clamp(16px,2vw,30px);
  color:#fff; background:linear-gradient(180deg,transparent,rgba(4,6,6,.88));
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
}
.work-meta h3{margin:0; font-size:clamp(1rem,1.4vw,1.3rem); font-weight:500}
.work-meta .tag{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); white-space:nowrap}

/* placeholder — sostituire con le foto reali */
.ph{
  background:
    linear-gradient(135deg, rgba(34,71,113,.55), rgba(91,16,24,.55)),
    repeating-linear-gradient(45deg,#15181B 0 14px,#101315 14px 28px);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.42); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
}

/* ---------- Filtri ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,3.5vw,50px)}
.filters button{
  border:1px solid var(--line); background:transparent; border-radius:100px; color:inherit;
  padding:.5rem 1.15rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:.25s;
}
.light .filters button{border-color:var(--line-light)}
.filters button:hover{border-color:var(--red)}

/* ---------- Blocco ViewMenù ---------- */
.vm-badge{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; border:1px solid var(--line); padding:.4rem .9rem; border-radius:100px;
  margin-bottom:1.6rem;
}
.vm-badge b{color:var(--gold); font-weight:600}
.vm-list{list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.85rem}
.vm-list li{display:flex; gap:.85rem; align-items:flex-start; font-size:.98rem; color:var(--muted)}
.vm-list li::before{content:''; width:7px; height:7px; margin-top:.6rem; flex:none; background:var(--gold); border-radius:50%}

/* ---------- Stat / clienti ---------- */
.stat{border-top:1px solid var(--line); padding-top:22px}
.light .stat{border-color:var(--line-light)}
.stat .n{font-weight:500; font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.04em}
.stat .l{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.7rem}
.clients{display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,54px); align-items:center}
.clients span{text-transform:uppercase; letter-spacing:.1em; font-size:clamp(.85rem,1.3vw,1.05rem); color:var(--muted); font-weight:400}

/* ---------- Form ---------- */
.field{display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem}
.field label{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea,.field select{
  min-width:0; width:100%; box-sizing:border-box;
  border:0; border-bottom:1px solid var(--line); background:transparent;
  padding:.75rem 0; font-family:inherit; font-size:1rem; color:inherit; border-radius:0;
}
.light .field input,.light .field textarea,.light .field select{border-color:var(--line-light)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--red)}
.field textarea{resize:vertical; min-height:130px}
.field select option{background:var(--ink); color:var(--paper)}
.checkline{display:flex; gap:.75rem; align-items:flex-start; font-size:.84rem; color:var(--muted); margin-bottom:1.8rem}
.checkline input{accent-color:var(--red); margin-top:.3rem}
.contact-item{border-top:1px solid var(--line); padding:22px 0}
.light .contact-item{border-color:var(--line-light)}
.contact-item .k{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.contact-item .v{font-size:clamp(1rem,1.6vw,1.35rem); font-weight:400}
.contact-item a:hover{color:var(--red)}

/* ---------- CTA ---------- */
.cta{text-align:center}
.cta .display{margin-bottom:clamp(26px,3vw,42px)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-2); color:var(--paper); padding:clamp(52px,6vw,86px) var(--gutter) 34px}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:46px; border-bottom:1px solid var(--line)}
.footer-col h4{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem; font-weight:500}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.75rem; font-size:.92rem}
.footer-col a:hover{color:var(--red)}
.footer-brand img{height:20px; margin-bottom:1.3rem}
.footer-bottom{display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; padding-top:26px; font-size:.76rem; color:var(--muted)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* sotto i 900px la barra completa non ci sta bene: menu a tutto schermo anche sui tablet in verticale */
  .nav{
    position:fixed; inset:0; background:var(--ink); color:var(--paper);
    flex-direction:column; justify-content:center; gap:26px; font-size:1.5rem;
    opacity:0; visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
  }
  .nav.open{opacity:1; visibility:visible}
  .nav a{opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .5s cubic-bezier(.19,1,.22,1)}
  .nav.open a{opacity:1; transform:none}
  .nav.open a:nth-child(1){transition-delay:.06s}
  .nav.open a:nth-child(2){transition-delay:.11s}
  .nav.open a:nth-child(3){transition-delay:.16s}
  .nav.open a:nth-child(4){transition-delay:.21s}
  .nav.open a:nth-child(5){transition-delay:.26s}
  .nav a{font-size:1.5rem; letter-spacing:.02em}
  .nav .btn{font-size:.9rem}
  .nav-toggle{display:block; position:relative; z-index:110}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
@media (max-width:720px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .work,.work.w4,.work.w8,.work.w12{grid-column:span 12}
  .footer-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .hero-title .line > span{transform:none}
  .hero-foot{opacity:1}
}

/* colonna laterale editoriale */
.sticky-col{position:sticky; top:120px}
@media (max-width:1000px){ .sticky-col{position:static} }

/* numero grande nelle pagine servizi */
.num-big{display:block; font-size:.72rem; letter-spacing:.24em; color:var(--red); font-weight:500; margin-bottom:1rem}
.work.w6{grid-column:span 6}

/* titolo pagina interna */
h1.display.page-title{font-size:clamp(2.4rem,6.4vw,5.6rem); max-width:18ch}

/* ==========================================================================
   Galleria fotografica + giostra dei reel
   ========================================================================== */

.script{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400; line-height:1.3}
.manifesto{text-align:center; max-width:880px; margin-inline:auto}
.manifesto__rule{display:block; width:54px; height:2px; background:var(--red); margin:0 auto 1.2rem; opacity:.85}
.manifesto h2{font-size:clamp(2rem,5vw,3.4rem)}
.manifesto h2 .g{color:var(--muted)}
.manifesto .script{margin-top:1.1rem; font-size:clamp(1.5rem,3.4vw,2.5rem); max-width:26ch; margin-inline:auto; color:var(--paper)}
.light .manifesto .script{color:var(--ink)}

/* --- griglia foto --- */
.galleria-avvolge{position:relative}
.galleria{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:2.6rem; grid-auto-flow:dense}
.scatto{position:relative; margin:0; overflow:hidden; border-radius:12px; background:#0a0a0a; aspect-ratio:4/5}
.scatto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.scatto:hover img{transform:scale(1.06)}
.scatto figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.7rem .9rem .8rem;
  font-size:.76rem; letter-spacing:.04em; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(4,6,6,.8));
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.scatto:hover figcaption{opacity:1; transform:none}
.scatto[data-big]{grid-column:span 2; grid-row:span 2; aspect-ratio:4/5}
.galleria__freccia{
  display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:60;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(188,170,52,.45);
  background:rgba(4,6,6,.55); backdrop-filter:blur(6px); color:var(--gold);
  align-items:center; justify-content:center; cursor:pointer; transition:background .2s, color .2s;
}
.galleria__freccia:hover{background:var(--gold); color:#000}
.galleria__freccia svg{width:20px; height:20px}
.galleria__freccia--prev{left:2px}
.galleria__freccia--next{right:2px}

/* --- giostra dei reel --- */
.giostra{position:relative; margin-top:2.8rem; --larghezza:clamp(180px,22vw,300px)}
.giostra__palco{
  position:relative; height:calc(var(--larghezza) * 16 / 9);
  perspective:1500px; transform-style:preserve-3d; touch-action:pan-y; cursor:grab;
}
.giostra__palco:active{cursor:grabbing}
.giostra .reel{
  position:absolute; top:0; left:50%; width:var(--larghezza); aspect-ratio:9/16;
  margin-left:calc(var(--larghezza) / -2); border-radius:16px; overflow:hidden;
  background:#0a0a0a; border:1px solid var(--line); cursor:pointer; will-change:transform;
  transition:transform .65s cubic-bezier(.22,.68,.3,1), opacity .65s ease, filter .65s ease, border-color .3s ease;
}
.giostra .reel video{width:100%; height:100%; object-fit:cover; display:block}
.giostra .reel.attivo{border-color:var(--gold); cursor:pointer}
.giostra__freccia{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(188,170,52,.45);
  background:rgba(4,6,6,.55); backdrop-filter:blur(6px); color:var(--gold);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s, color .2s;
}
.giostra__freccia:hover{background:var(--gold); color:#000}
.giostra__freccia svg{width:20px; height:20px}
.giostra__freccia--prev{left:0}
.giostra__freccia--next{right:0}

@media(max-width:1100px){
  .galleria{grid-template-columns:repeat(3,1fr)}
  /* a tre colonne le foto grandi non possono avere una colonna di partenza
     fissa: «dalla 3ª per due» inventava una quarta colonna e apriva buchi */
}
@media(max-width:820px){
  .galleria.giostra-foto{
    display:block; position:relative; height:calc(66vw * 5 / 4);
    perspective:1200px; transform-style:preserve-3d; touch-action:pan-y; cursor:grab; margin-top:2rem;
  }
  .galleria.giostra-foto:active{cursor:grabbing}
  .galleria.giostra-foto .scatto{
    position:absolute; top:0; left:50%; width:66vw; margin-left:-33vw; aspect-ratio:4/5;
    grid-column:auto!important; grid-row:auto!important;
    transition:transform .6s cubic-bezier(.22,.68,.3,1), opacity .6s ease, filter .6s ease; will-change:transform;
  }
  .galleria.giostra-foto .scatto figcaption{opacity:1; transform:none}
  .galleria.giostra-foto .scatto:hover img{transform:none}
  .giostra{--larghezza:75vw}
  .giostra__freccia--prev{left:-6px}
  .giostra__freccia--next{right:-6px}
}

/* ==========================================================================
   STRATO GRAFICO — tipografia, griglia, mono, movimento
   ========================================================================== */

:root{
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --blu:      #224771;
  --bordeaux: #5B1018;
}

/* --- monospaziato: solo dove è un dato, non dove è design --- */
.eyebrow,
.svc .num,
.hero-meta,
.video-etichetta,
.dati{
  font-family:var(--mono);
  font-weight:400;
}
.eyebrow{letter-spacing:.14em; font-size:.68rem}
.eyebrow::before{width:34px; background:var(--red)}

/* --- griglia di fondo (reticolo tipografico) --- */
.reticolo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-inline:var(--gutter); max-width:1600px; margin-inline:auto;
  opacity:.55;
}
.reticolo span{border-left:1px solid rgba(243,240,234,.045)}
.reticolo span:last-child{border-right:1px solid rgba(243,240,234,.045)}
body > header,body > main,body > footer{position:relative; z-index:1}
@media(max-width:820px){ .reticolo{grid-template-columns:repeat(2,1fr)} }

/* --- HERO: la parola si compone di grana, sulla tela --- */
.hero{justify-content:flex-end; padding-block:calc(var(--gutter) + 90px) var(--gutter)}

/* il video resta come ambiente: bianco e nero, appena percettibile */
.hero-bg{position:absolute; inset:0; height:auto; background:#000; z-index:0; will-change:transform}
.hero-bg video,.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  /* il filmato resta lo sfondo, ma abbastanza presente da riconoscerlo:
     è la stessa immagine che la parola trattiene dentro l'argento */
  /* il lavoro è il soggetto dell'apertura: il filmato si vede davvero */
  filter:grayscale(1) contrast(1.18) brightness(.66);
  opacity:.82;
}
.hero-bg::after{display:none}

/* anche l'apertura si sviluppa: la prima immagine del sito arriva come una
   stampa nella bacinella, con le stesse chiazze delle fotografie in galleria */
.hero-bg{
  --chiazza-h:radial-gradient(circle, #000 0%, #000 42%, rgba(0,0,0,.5) 66%, transparent 84%);
  -webkit-mask-image:var(--chiazza-h),var(--chiazza-h),var(--chiazza-h);
          mask-image:var(--chiazza-h),var(--chiazza-h),var(--chiazza-h);
  -webkit-mask-position:32% 38%, 74% 26%, 52% 76%;
          mask-position:32% 38%, 74% 26%, 52% 76%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:sviluppa-apertura 2.4s cubic-bezier(.32,.06,.2,1) forwards;
}
@keyframes sviluppa-apertura{
  0%{
    -webkit-mask-size:0% 0%,0% 0%,0% 0%; mask-size:0% 0%,0% 0%,0% 0%;
    filter:contrast(.28) brightness(.5) saturate(.06);
  }
  42%{
    -webkit-mask-size:58% 58%,34% 34%,44% 44%; mask-size:58% 58%,34% 34%,44% 44%;
    filter:contrast(.6) brightness(.76) saturate(.4);
  }
  76%{
    -webkit-mask-size:145% 145%,112% 112%,126% 126%; mask-size:145% 145%,112% 112%,126% 126%;
    filter:contrast(.9) brightness(.95) saturate(.85);
  }
  100%{
    -webkit-mask-size:300% 300%,300% 300%,300% 300%; mask-size:300% 300%,300% 300%,300% 300%;
    filter:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none; -webkit-mask-image:none; mask-image:none}
}

/* la grana della pellicola: una sola, ferma, dipinta una volta sola.
   Tiene il carattere analogico dell'apertura senza far girare nulla */
.pellicola{
  /* niente mix-blend-mode: fondere la grana con un video in movimento costa
     otto fotogrammi al secondo. Alla stessa resa si arriva con la sola opacità. */
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.6'/%3E%3C/svg%3E");
}

/* la scena della parola */

.hero-sfuma{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    /* un'ombra morbida sotto la firma: senza, su una scena chiara la parola
       si perde. È lo stesso velo dell'apertura, non un elemento nuovo */
    radial-gradient(46% 22% at 50% 27%, rgba(4,6,6,.55), rgba(4,6,6,0) 72%),
    linear-gradient(180deg, rgba(4,6,6,.42) 0%, rgba(4,6,6,0) 20%, rgba(4,6,6,0) 62%, rgba(4,6,6,.88) 88%, #040606 100%);
}
.hero-sotto{position:relative; z-index:4; width:100%}
.hero-claim{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(18px,3vw,48px);
  border-top:1px solid var(--line); padding-top:24px;
  opacity:0; animation:fade 1.2s ease 2.4s forwards;
}
.hero-claim h1{
  margin:0; max-width:46ch; font-size:clamp(.98rem,1.28vw,1.18rem);
  color:var(--paper); font-weight:300; line-height:1.5; letter-spacing:0;
  letter-spacing:-.005em; text-transform:none;
}
.hero-meta{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--muted); text-align:right; line-height:1.9}
.hero-meta b{color:var(--red); font-weight:500}

@media (prefers-reduced-motion:reduce){
  .hero-claim{animation:none; opacity:1}
}

/* --- nastro scorrevole delle competenze --- */
.nastro{
  border-block:1px solid var(--line); overflow:hidden; padding:18px 0;
  background:rgba(12,12,13,.4); position:relative; z-index:2;
}
.nastro__pista{display:flex; width:max-content; animation:scorre 38s linear infinite}
.nastro:hover .nastro__pista{animation-play-state:paused}
.nastro__gruppo{display:flex; align-items:center; gap:clamp(28px,4vw,64px); padding-right:clamp(28px,4vw,64px)}
.nastro b{
  font-family:'Poppins',sans-serif; font-weight:200; font-size:clamp(1.5rem,3.4vw,2.6rem);
  letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap; color:var(--paper);
}
.nastro i{
  width:9px; height:9px; flex:none; border-radius:50%;
  background:var(--red); display:inline-block; opacity:.85;
}
.nastro i:nth-of-type(2n){background:var(--gold)}
.nastro i:nth-of-type(3n){background:var(--blu)}
@keyframes scorre{to{transform:translateX(-50%)}}

/* --- titoli di sezione: scala tipografica più decisa --- */
.display{font-weight:700; letter-spacing:-.035em}
h2.display{font-size:clamp(2.1rem,6vw,4.8rem); line-height:.94}
.manifesto h2{font-size:clamp(2.1rem,5.4vw,3.8rem)}
.manifesto h2 .g{color:var(--muted); font-weight:200}
.display .sottile{font-weight:200}

/* --- card servizio: numero grande, linea che cresce --- */
.svc{position:relative; overflow:hidden}
.svc .num{
  font-size:.72rem; letter-spacing:.12em; color:var(--muted);
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.4rem;
}
.svc .num::before{content:'['; color:var(--red)}
.svc .num::after{content:'/ 06 ]'; color:var(--red)}
.svc::after{
  content:''; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--red); transition:width .55s cubic-bezier(.19,1,.22,1);
}
.svc:hover::after{width:100%}
.svc h3{font-weight:600; letter-spacing:-.02em}

/* --- blocco video di sezione --- */
.video-blocco{position:relative; overflow:hidden; border-radius:12px; background:#0a0a0a}
.video-blocco video{width:100%; height:100%; object-fit:cover; display:block}
.video-blocco--largo{aspect-ratio:16/9}
.video-blocco--alto{aspect-ratio:3/4}
/* Un reel è 9:16: in un riquadro 3/4 perdeva un quarto dell'altezza. */
.video-blocco--reel{aspect-ratio:9/16}
.video-etichetta{
  position:absolute; left:14px; top:14px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(12,12,13,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16); padding:.34rem .7rem; border-radius:100px;
}

/* --- dati in stile terminale --- */
.dati{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted);
  display:grid; gap:.55rem; border-left:1px solid var(--line); padding-left:1.2rem;
}
.dati span b{color:var(--paper); font-weight:400}
.dati span::before{content:'> '; color:var(--red)}

/* --- filtri portfolio: squadrati e mono --- */
.filters button{border-radius:0; font-size:.76rem; letter-spacing:.1em}
.filters button.active{background:var(--red); border-color:var(--red); color:#fff}

/* --- galleria: angoli meno morbidi, cifra sull'immagine --- */
.scatto{border-radius:6px}
.scatto figcaption{font-size:.8rem; letter-spacing:.02em; text-transform:none; font-weight:400}
.giostra .reel{border-radius:10px}

/* --- bottoni: più tesi --- */
.btn{border-radius:0; letter-spacing:.12em; font-size:.78rem; font-weight:500}
.link-more{letter-spacing:.14em; font-size:.76rem; font-weight:500}

@media(max-width:720px){
  .hero-meta{text-align:left}
  .parola{margin-bottom:26px}
}

/* ==========================================================================
   Rifiniture
   ========================================================================== */

/* la parola dell'apertura non deve mai uscire dallo schermo */
@media(max-width:520px){ .parola{font-size:13.6vw} }

/* la galleria a giostra resta dentro i suoi margini */
.galleria-avvolge{overflow:hidden}
@media(max-width:820px){
  .galleria-avvolge{padding-block:6px}
  .nastro__gruppo{gap:26px; padding-right:26px}
}

/* messa a fuoco visibile da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* Salta al contenuto: la scorciatoia per chi naviga da tastiera. Sta nascosta
   finché non ci si arriva col tasto Tab — allora deve farsi vedere, ma vestita
   come il sito, non come un avviso di errore. */
.salta{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; z-index:200;
  background:var(--ink-2); color:var(--carta);
  border:1px solid rgba(188,170,52,.65); border-radius:999px;
  padding:.6rem 1.1rem; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}
.salta:focus{
  width:auto; height:auto; clip-path:none; overflow:visible;
  left:var(--gutter); top:12px; outline:none;
}

/* il nastro si ferma per chi preferisce meno movimento */
@media (prefers-reduced-motion:reduce){
  .nastro__pista{animation:none; transform:none}
}

/* --- rifiniture di impaginazione --- */

/* gli accenti maiuscoli non devono toccare il bordo */
.display{padding-top:.06em}
h1.display,h2.display{line-height:.96}

/* blocco ViewMenù: colonne allineate, immagine che riempie */
.light .split{align-items:center}
.light .vm-badge{border-color:rgba(12,12,13,.2); color:var(--muted-dark)}
.light .video-blocco{background:var(--paper-dim)}

/* chiusura: meno vuoto sotto il bottone */
.cta{padding-block:clamp(64px,8vw,120px)}
.cta .lead{max-width:52ch}

/* elenco puntato ViewMenù: pallini più discreti */
.vm-list li::before{width:5px; height:5px; margin-top:.66rem}

/* nastro: un filo più basso, non deve gridare */
.nastro{padding:15px 0}
.nastro b{font-size:clamp(1.35rem,2.9vw,2.2rem); font-weight:300}
.nastro i{width:7px; height:7px}

/* reticolo: appena percettibile */
.reticolo{opacity:.4}
.video-blocco img{width:100%; height:100%; object-fit:cover; display:block}

/* --- correzioni --- */

/* il logo mantiene le sue proporzioni ovunque */
.brand img,
.footer-brand img{width:auto; height:22px}
.footer-brand img{height:20px}

/* l'apertura deve reggere anche se il video non parte:
   sotto il velo c'è sempre un fondo, così la parola resta leggibile */
/* fondo neutro da camera oscura: se il video non parte resta una carta grigia */
.hero-bg{
  background:
    radial-gradient(120% 90% at 30% 25%, #23252a 0%, #101215 55%, #050506 100%);
}

/* nessuna sezione può far scorrere la pagina in orizzontale */
main,
.nastro,
.giostra,
.galleria-avvolge{overflow-x:clip}

/* ==========================================================================
   I colori del logo, usati con misura
   ========================================================================== */

:root{
  /* i quattro del pittogramma, più due varianti leggibili sul nero */
  --c-rosso:    #CC4B56;
  --c-oro:      #BCAA34;
  --c-blu:      #3E7AB8;   /* schiarito per il fondo scuro */
  --c-bordeaux: #A32639;   /* schiarito per il fondo scuro */
  --c-blu-cupo: #224771;   /* originale, per i fondi chiari */
  --c-bord-cupo:#5B1018;
}

/* filo del marchio in cima alla pagina: quattro bande, 3px */
.filo-marchio{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120; opacity:.62;
  background:linear-gradient(90deg,
    var(--c-blu-cupo) 0 25%,
    var(--c-oro) 25% 50%,
    var(--c-rosso) 50% 75%,
    var(--c-bord-cupo) 75% 100%);
}
.site-header{top:3px}

/* un colore per mestiere — nei numeri e nella linea che cresce */
.svc:nth-child(1){--c:var(--c-rosso)}
.svc:nth-child(2){--c:var(--c-oro)}
.svc:nth-child(3){--c:var(--c-blu)}
.svc:nth-child(4){--c:var(--c-bordeaux)}
.svc:nth-child(5){--c:var(--c-blu)}
.svc:nth-child(6){--c:var(--c-rosso)}
.svc .num{color:var(--c, var(--red))}
.svc .num::before,.svc .num::after{color:var(--c, var(--red)); opacity:.55}
/* la riga in cima prende il colore della scheda, non il rosso di tutte:
   il numero, il titolo al passaggio del mouse e la riga sono lo stesso colore */
.svc::after{background:var(--c, var(--red)); height:2px; top:-1px}
/* il totale lo dichiara la griglia: attr() legge solo l'elemento su cui sta
   lo pseudo, quindi il valore si porta giù con una variabile */
.grid[data-tot="6"] .svc .num::after{content:'/ 06 ]'}
.grid[data-tot="4"] .svc .num::after{content:'/ 04 ]'}
.grid[data-tot="3"] .svc .num::after{content:'/ 03 ]'}
.svc:hover h3{color:var(--c, var(--red))}
.svc h3{transition:color .35s ease}

/* filtri del portfolio: ogni categoria ha il suo colore quando è attiva */
.filters button[data-filter="foto"].active{background:var(--c-rosso); border-color:var(--c-rosso)}
.filters button[data-filter="video"].active{background:var(--c-oro); border-color:var(--c-oro); color:#000}
.filters button[data-filter="grafica"].active{background:var(--c-blu); border-color:var(--c-blu)}
.filters button[data-filter="web"].active{background:var(--c-bordeaux); border-color:var(--c-bordeaux)}
.filters button[data-filter="social"].active{background:var(--c-rosso); border-color:var(--c-rosso)}

/* etichette sui video: un punto di colore invece del bordo grigio */
.video-etichetta{display:inline-flex; align-items:center; gap:.5rem; border-color:rgba(255,255,255,.14)}
.video-etichetta::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--c, var(--c-rosso)); flex:none;
}
.grid > div:nth-child(1) .video-etichetta{--c:var(--c-rosso)}
.grid > div:nth-child(2) .video-etichetta{--c:var(--c-blu)}
.grid > div:nth-child(3) .video-etichetta{--c:var(--c-oro)}

/* voci "Cosa facciamo" nel piede: un pallino per mestiere, negli stessi
   colori delle schede — e il testo al passaggio del mouse prende quel colore */
.footer-col:nth-child(3) li{display:flex; align-items:center; gap:.6rem}
.footer-col:nth-child(3) li::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--c, var(--red));
}
.footer-col:nth-child(3) li:nth-child(1){--c:var(--c-rosso)}
.footer-col:nth-child(3) li:nth-child(2){--c:var(--c-oro)}
.footer-col:nth-child(3) li:nth-child(3){--c:var(--c-blu)}
.footer-col:nth-child(3) li:nth-child(4){--c:var(--c-bordeaux)}
.footer-col:nth-child(3) li:nth-child(5){--c:var(--c-blu)}
.footer-col:nth-child(3) li:nth-child(6){--c:var(--c-rosso)}
.footer-col:nth-child(3) a:hover{color:var(--c, var(--red))}

/* ViewMenù nel piede: è un nostro progetto, non una voce di listino */
.footer-progetto{margin:1.1rem 0 0; font-size:.86rem; color:var(--muted)}
.footer-progetto a{color:var(--paper); border-bottom:1px solid rgba(246,244,240,.25); padding-bottom:1px}
.footer-progetto a:hover{border-bottom-color:var(--c-oro); color:var(--c-oro)}

/* i trattini delle etichette di sezione alternano i colori */
.wrap > .eyebrow::before,
section:nth-of-type(2n) .eyebrow::before{background:var(--c-rosso)}
section:nth-of-type(3n) .eyebrow::before{background:var(--c-oro)}
section:nth-of-type(4n) .eyebrow::before{background:var(--c-blu)}

/* il manifesto: filo nei colori del marchio */
.manifesto__rule{
  width:64px; height:2px; background:linear-gradient(90deg,
    var(--c-blu) 0 25%, var(--c-oro) 25% 50%, var(--c-rosso) 50% 75%, var(--c-bordeaux) 75% 100%);
  opacity:.95;
}

/* la barra di scorrimento riprende il marchio */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:#0a0a0b}
::-webkit-scrollbar-thumb{background:#2a2b2e; border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--c-rosso)}

/* --- i pulsanti di contatto passano al blu del marchio --- */
.btn{
  background:var(--c-blu-cupo);
  border-color:var(--c-blu-cupo);
  color:#fff;
}
.btn:hover{
  background:var(--c-blu);
  border-color:var(--c-blu);
  color:#fff;
}
.light .btn{background:var(--c-blu-cupo); border-color:var(--c-blu-cupo); color:#fff}
.light .btn:hover{background:var(--c-blu); border-color:var(--c-blu)}

/* nel form il pulsante di invio segue la stessa regola */
button.btn[type="submit"]{background:var(--c-blu-cupo); border-color:var(--c-blu-cupo)}
button.btn[type="submit"]:hover{background:var(--c-blu); border-color:var(--c-blu)}

/* --- angoli morbidi sui pulsanti --- */
.btn{border-radius:8px}
.nav .btn{border-radius:8px}
.filters button{border-radius:100px}

/* ==========================================================================
   Rifinitura — ritmo, tipografia, immagini, visore
   ========================================================================== */

/* --- tipografia più curata --- */
.muted,.svc p{color:#9DA0A3}          /* un gradino più leggibile sul nero */

/* numero di sezione accanto all'etichetta */
.eyebrow[data-n]::after{
  content:attr(data-n);
  margin-left:auto; padding-left:1.4rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  color:rgba(157,160,163,.5);
}

/* --- ritmo: non tutte le sezioni respirano uguale --- */

/* --- il video dell'apertura respira lentamente --- */
.hero-bg video,.hero-bg img{
  animation:respiro 28s ease-in-out infinite alternate;
  transform-origin:center 45%;
}
@keyframes respiro{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* invito a scorrere */
.scendi{
  display:flex; flex-direction:column; align-items:center; gap:.7rem; align-self:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,244,240,.45); transition:color .3s ease;
}
.scendi i::after{
  content:''; position:absolute; inset:0; background:var(--gold);
  animation:cala 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cala{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
@media(max-width:820px){ .scendi{display:none} }

/* --- le immagini non appaiono: si sviluppano ---------------------------------
   Ogni fotografia del sito entra come una stampa nella bacinella: prima il
   velo, poi le chiazze che si allargano e si saldano, e alla fine il contrasto
   e il colore. È lo stesso gesto dell'apertura, applicato al lavoro invece che
   a una scritta: è il mestiere che si mostra facendo, non dicendo. */
.scatto.reveal img,
.video-blocco.reveal img,
.figura.reveal img{
  --chiazza:radial-gradient(circle, #000 0%, #000 40%, rgba(0,0,0,.45) 64%, transparent 84%);
  -webkit-mask-image:var(--chiazza),var(--chiazza),var(--chiazza);
          mask-image:var(--chiazza),var(--chiazza),var(--chiazza);
  -webkit-mask-position:26% 32%, 72% 26%, 46% 78%;
          mask-position:26% 32%, 72% 26%, 46% 78%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:0% 0%; mask-size:0% 0%;
  /* niente sfocatura: costa più di tutto il resto messo insieme. Il velo lo
     fanno contrasto, luminosità e saturazione, che sono operazioni per pixel */
  filter:contrast(.3) brightness(.58) saturate(.08);
  transform:scale(1.04);
}
.scatto.reveal.in img,
.video-blocco.reveal.in img,
.figura.reveal.in img{
  animation:sviluppa 1.45s cubic-bezier(.32,.06,.2,1) forwards;
}
@keyframes sviluppa{
  0%{
    -webkit-mask-size:0% 0%,0% 0%,0% 0%; mask-size:0% 0%,0% 0%,0% 0%;
    filter:contrast(.3) brightness(.58) saturate(.08); transform:scale(1.04);
  }
  40%{
    -webkit-mask-size:70% 70%,44% 44%,54% 54%; mask-size:70% 70%,44% 44%,54% 54%;
    filter:contrast(.62) brightness(.82) saturate(.5);
  }
  74%{
    -webkit-mask-size:160% 160%,128% 128%,140% 140%; mask-size:160% 160%,128% 128%,140% 140%;
    filter:contrast(.92) brightness(.97) saturate(.88);
  }
  100%{
    -webkit-mask-size:300% 300%,300% 300%,300% 300%; mask-size:300% 300%,300% 300%,300% 300%;
    filter:none; transform:scale(1);
  }
}
/* sfalsate: la bacinella non sviluppa dodici stampe nello stesso istante */
.galleria .scatto:nth-child(4n+2).reveal.in img{animation-delay:.22s}
.galleria .scatto:nth-child(4n+3).reveal.in img{animation-delay:.44s}
.galleria .scatto:nth-child(4n+4).reveal.in img{animation-delay:.66s}

/* --- visore a pieno schermo --- */
.visore{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(4,6,6,.97); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:clamp(20px,5vw,70px);
  opacity:0; transition:opacity .4s ease;
}
.visore img{
  max-width:100%; max-height:82vh; object-fit:contain;
  border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.visore__barra{
  position:absolute; inset:auto 0 clamp(18px,3vw,34px) 0;
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--muted);
}
.visore__x,
.visore__prec,
.visore__succ{
  position:absolute; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(188,170,52,.4); background:rgba(4,6,6,.5);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s, color .25s;
}
@media(max-width:720px){
  .visore__prec,.visore__succ{display:none}
}

/* --- passaggio tra le pagine --- */
.tenda{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  pointer-events:none; opacity:0; transition:opacity .42s ease;
}
@media (prefers-reduced-motion:reduce){
  .tenda{display:none}
  .hero-bg video,.hero-bg img{animation:none}
  .scatto.reveal img,.video-blocco.reveal img,.figura.reveal img{mask-image:none; -webkit-mask-image:none; filter:none; transform:none; animation:none}
  .scendi i::after{animation:none}
}

/* --- il filo del marchio segna anche l'avanzamento della lettura --- */

/* --- chiusura: il contatto diretto sotto il pulsante --- */
.contatto-diretto{
  display:flex; flex-wrap:wrap; gap:.8rem 2.2rem; justify-content:center;
  margin-top:2.4rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
}

/* marchio del prodotto nel blocco ViewMenù */
.vm-logo{
  height:52px; width:auto; display:block; margin:0 0 1.1rem;
  filter:invert(1) contrast(1.05);   /* il logo è bianco su nero: qui il fondo è chiaro */
  opacity:.9;
}

/* --- le clip che si alternano dentro le lettere --- */
.hero-bg .clip{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s ease;
}

/* ==========================================================================
   Telefono — l'apertura si compatta e il reticolo si toglie di mezzo
   ========================================================================== */
@media(max-width:820px){

  /* il reticolo tagliava i testi: sul telefono sparisce */
  .reticolo{display:none}

  /* apertura: meno vuoto, la parola più presente */
  .hero{min-height:92svh; padding-block:calc(var(--gutter) + 74px) var(--gutter)}
  .velo{align-items:flex-start; padding-top:26svh}
  .parola-filo{align-items:flex-start; padding-top:26svh}
  .parola,
  .parola-filo span{
    font-size:13vw; letter-spacing:-.035em; line-height:1;
  }

  /* il claim si stacca dalla parola */
  .hero-claim{flex-direction:column; align-items:flex-start; gap:18px}
  .hero-meta{text-align:left}
  .scendi{display:none}

  /* sezioni un po' più raccolte */
  :root{--section:clamp(48px,8vw,72px)}

  /* i titoli non devono spezzarsi male */
  h2.display{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .manifesto h2{font-size:clamp(1.9rem,8vw,2.5rem)}
  .manifesto .script{font-size:clamp(1.3rem,6.4vw,1.8rem)}

  /* le schede servizio respirano meno */
  .grid{gap:34px}
  .svc{padding-top:20px}

  /* il piede si compatta */
  .footer-top{gap:34px; padding-bottom:34px}
  .footer-bottom{gap:10px 18px; font-size:.72rem}
}

/* ==========================================================================
   Indice di sezione — dove sei, scritto in verticale sul margine
   ========================================================================== */
.indice{
  position:fixed; right:calc(var(--gutter) * .42); top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--muted); pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
.indice .nome{
  writing-mode:vertical-rl; text-orientation:mixed;
  text-transform:uppercase; letter-spacing:.26em; font-size:.6rem;
  color:var(--tenue,#9DA0A3); max-height:220px; overflow:hidden;
  transition:opacity .35s ease;
}
@media(max-width:1100px){ .indice{display:none} }

/* le E con il trattino centrale corto, come nel marchio */
.e-corta{
  display:inline-block;
  /* taglia la punta del braccio centrale: resta al 65% della larghezza */
  /* nel marchio il braccio centrale sporge dall'asta per il 58% dello spazio
     disponibile: nel grassetto, dove l'asta è molto più larga, la stessa
     proporzione cadrebbe al 64,5%, ma alla vista risultava ancora mozzata:
     il valore scelto a occhio, sul confronto delle varianti, è il 75% */
  clip-path:polygon(0% 0%, 100% 0%, 100% 31%, 75% 31%, 75% 68%, 100% 68%, 100% 100%, 0% 100%);
}

/* ==========================================================================
   Rifinitura — ritmo, tipografia, immagini, visore
   ========================================================================== */

/* --- tipografia più curata --- */
h1,h2,h3,.display{text-wrap:balance}
.lead,.manifesto .script{text-wrap:pretty}
.muted,.svc p{color:#9DA0A3}          /* un gradino più leggibile sul nero */
.light .muted,.light .svc p{color:#5F6265}
.eyebrow,.svc .num,.hero-meta,.dati{font-variant-numeric:tabular-nums}

/* numero di sezione accanto all'etichetta */
.eyebrow[data-n]::after{
  content:attr(data-n);
  margin-left:auto; padding-left:1.4rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  color:rgba(157,160,163,.5);
}
.light .eyebrow[data-n]::after{color:rgba(95,98,101,.55)}

/* --- ritmo: non tutte le sezioni respirano uguale --- */
.sezione-stretta{padding-block:clamp(56px,7vw,110px)}
.sezione-ampia{padding-block:clamp(96px,14vw,210px)}

/* --- il video dell'apertura respira lentamente --- */
.hero-bg video,.hero-bg img{
  animation:respiro 28s ease-in-out infinite alternate;
  transform-origin:center 45%;
}
@keyframes respiro{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* invito a scorrere */
.scendi{
  display:flex; flex-direction:column; align-items:center; gap:.7rem; align-self:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,244,240,.45); transition:color .3s ease;
}
.scendi:hover{color:var(--gold)}
.scendi i{display:block; width:1px; height:38px; background:linear-gradient(180deg,transparent,rgba(188,170,52,.6)); position:relative; overflow:hidden}
.scendi i::after{
  content:''; position:absolute; inset:0; background:var(--gold);
  animation:cala 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cala{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
@media(max-width:820px){ .scendi{display:none} }

/* --- le immagini non appaiono: si sviluppano ---------------------------------
   Ogni fotografia del sito entra come una stampa nella bacinella: prima il
   velo, poi le chiazze che si allargano e si saldano, e alla fine il contrasto
   e il colore. È lo stesso gesto dell'apertura, applicato al lavoro invece che
   a una scritta: è il mestiere che si mostra facendo, non dicendo. */
.scatto.reveal img,
.video-blocco.reveal img,
.figura.reveal img{
  --chiazza:radial-gradient(circle, #000 0%, #000 40%, rgba(0,0,0,.45) 64%, transparent 84%);
  -webkit-mask-image:var(--chiazza),var(--chiazza),var(--chiazza);
          mask-image:var(--chiazza),var(--chiazza),var(--chiazza);
  -webkit-mask-position:26% 32%, 72% 26%, 46% 78%;
          mask-position:26% 32%, 72% 26%, 46% 78%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:0% 0%; mask-size:0% 0%;
  /* niente sfocatura: costa più di tutto il resto messo insieme. Il velo lo
     fanno contrasto, luminosità e saturazione, che sono operazioni per pixel */
  filter:contrast(.3) brightness(.58) saturate(.08);
  transform:scale(1.04);
}
.scatto.reveal.in img,
.video-blocco.reveal.in img,
.figura.reveal.in img{
  animation:sviluppa 1.45s cubic-bezier(.32,.06,.2,1) forwards;
}
@keyframes sviluppa{
  0%{
    -webkit-mask-size:0% 0%,0% 0%,0% 0%; mask-size:0% 0%,0% 0%,0% 0%;
    filter:contrast(.3) brightness(.58) saturate(.08); transform:scale(1.04);
  }
  40%{
    -webkit-mask-size:70% 70%,44% 44%,54% 54%; mask-size:70% 70%,44% 44%,54% 54%;
    filter:contrast(.62) brightness(.82) saturate(.5);
  }
  74%{
    -webkit-mask-size:160% 160%,128% 128%,140% 140%; mask-size:160% 160%,128% 128%,140% 140%;
    filter:contrast(.92) brightness(.97) saturate(.88);
  }
  100%{
    -webkit-mask-size:300% 300%,300% 300%,300% 300%; mask-size:300% 300%,300% 300%,300% 300%;
    filter:none; transform:scale(1);
  }
}
/* sfalsate: la bacinella non sviluppa dodici stampe nello stesso istante */
.galleria .scatto:nth-child(4n+2).reveal.in img{animation-delay:.22s}
.galleria .scatto:nth-child(4n+3).reveal.in img{animation-delay:.44s}
.galleria .scatto:nth-child(4n+4).reveal.in img{animation-delay:.66s}
.scatto{cursor:zoom-in}

/* --- visore a pieno schermo --- */
.visore{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(4,6,6,.97); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:clamp(20px,5vw,70px);
  opacity:0; transition:opacity .4s ease;
}
.visore.aperto{display:flex}
.visore.visibile{opacity:1}
.visore img{
  max-width:100%; max-height:82vh; object-fit:contain;
  border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.visore.visibile img{transform:scale(1)}
.visore__barra{
  position:absolute; inset:auto 0 clamp(18px,3vw,34px) 0;
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--muted);
}
.visore__barra b{color:var(--paper); font-weight:400}
.visore__x,
.visore__prec,
.visore__succ{
  position:absolute; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(188,170,52,.4); background:rgba(4,6,6,.5);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s, color .25s;
}
.visore__x:hover,.visore__prec:hover,.visore__succ:hover{background:var(--gold); color:#000}
.visore__x{top:clamp(18px,3vw,34px); right:clamp(18px,3vw,34px)}
.visore__prec{left:clamp(10px,2vw,28px); top:50%; margin-top:-23px}
.visore__succ{right:clamp(10px,2vw,28px); top:50%; margin-top:-23px}
.visore svg{width:19px; height:19px}
@media(max-width:720px){
  .visore__prec,.visore__succ{display:none}
}

/* --- passaggio tra le pagine --- */
.tenda{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  pointer-events:none; opacity:0; transition:opacity .42s ease;
}
.tenda.giu{opacity:1}
@media (prefers-reduced-motion:reduce){
  .tenda{display:none}
  .hero-bg video,.hero-bg img{animation:none}
  .scatto.reveal img,.video-blocco.reveal img,.figura.reveal img{mask-image:none; -webkit-mask-image:none; filter:none; transform:none; animation:none}
  .scendi i::after{animation:none}
}

/* --- il filo del marchio segna anche l'avanzamento della lettura --- */
.filo-marchio{opacity:.62}

/* --- chiusura: il contatto diretto sotto il pulsante --- */
.contatto-diretto{
  display:flex; flex-wrap:wrap; gap:.8rem 2.2rem; justify-content:center;
  margin-top:2.4rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
}
.contatto-diretto a{color:var(--muted); border-bottom:1px solid transparent; padding-bottom:3px}
.contatto-diretto a:hover{color:var(--paper); border-color:var(--gold)}

/* marchio del prodotto nel blocco ViewMenù */
.vm-logo{
  height:52px; width:auto; display:block; margin:0 0 1.1rem;
  filter:invert(1) contrast(1.05);   /* il logo è bianco su nero: qui il fondo è chiaro */
  opacity:.9;
}

/* --- le clip che si alternano dentro le lettere --- */
.hero-bg .clip{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s ease;
}
.hero-bg .clip.attiva{opacity:1}

/* ==========================================================================
   Telefono — l'apertura si compatta e il reticolo si toglie di mezzo
   ========================================================================== */
@media(max-width:820px){

  /* il reticolo tagliava i testi: sul telefono sparisce */
  .reticolo{display:none}

  /* apertura: meno vuoto, la parola più presente */
  .hero{min-height:92svh; padding-block:calc(var(--gutter) + 74px) var(--gutter)}
  .velo{align-items:flex-start; padding-top:26svh}
  .parola-filo{align-items:flex-start; padding-top:26svh}
  .parola,
  .parola-filo span{
    font-size:13vw; letter-spacing:-.035em; line-height:1;
  }

  /* il claim si stacca dalla parola */
  .hero-claim{flex-direction:column; align-items:flex-start; gap:18px}
  .hero-meta{text-align:left}
  .scendi{display:none}

  /* sezioni un po' più raccolte */
  :root{--section:clamp(48px,8vw,72px)}

  /* i titoli non devono spezzarsi male */
  h2.display{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .manifesto h2{font-size:clamp(1.9rem,8vw,2.5rem)}
  .manifesto .script{font-size:clamp(1.3rem,6.4vw,1.8rem)}

  /* le schede servizio respirano meno */
  .grid{gap:34px}
  .svc{padding-top:20px}

  /* il piede si compatta */
  .footer-top{gap:34px; padding-bottom:34px}
  .footer-bottom{gap:10px 18px; font-size:.72rem}
}

/* ==========================================================================
   Indice di sezione — dove sei, scritto in verticale sul margine
   ========================================================================== */
.indice{
  position:fixed; right:calc(var(--gutter) * .42); top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--muted); pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
.indice.visibile{opacity:1}
.indice b{color:var(--paper); font-weight:400; font-variant-numeric:tabular-nums}
.indice i{display:block; width:1px; height:34px; background:var(--line)}
.indice .nome{
  writing-mode:vertical-rl; text-orientation:mixed;
  text-transform:uppercase; letter-spacing:.26em; font-size:.6rem;
  color:var(--tenue,#9DA0A3); max-height:220px; overflow:hidden;
  transition:opacity .35s ease;
}
.light-sezione .indice{color:var(--muted-dark)}
.light-sezione .indice b{color:var(--ink)}
.light-sezione .indice i{background:var(--line-light)}
@media(max-width:1100px){ .indice{display:none} }

/* le E con il trattino centrale corto, come nel marchio */
.e-corta{
  display:inline-block;
  /* taglia la punta del braccio centrale: resta al 65% della larghezza */
  /* nel marchio il braccio centrale sporge dall'asta per il 58% dello spazio
     disponibile: nel grassetto, dove l'asta è molto più larga, la stessa
     proporzione cadrebbe al 64,5%, ma alla vista risultava ancora mozzata:
     il valore scelto a occhio, sul confronto delle varianti, è il 75% */
  clip-path:polygon(0% 0%, 100% 0%, 100% 31%, 75% 31%, 75% 68%, 100% 68%, 100% 100%, 0% 100%);
}

/* ==========================================================================
   La parola di grana — la tela e il testo per chi non la vede
   ========================================================================== */
/* la fascia va da sotto la testata alla riga del claim: la parola si centra
   in quello che resta libero dell'apertura */
.parola-scena{
  position:absolute; left:0; right:0; top:6%; height:76%;
  z-index:2; display:block; padding:0;
}
.grana-parola{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:pan-y;
  /* nessun filtro sul livello: sfocare tutta la fascia costava un terzo del
     tempo di ogni fotogramma. La morbidezza la fa l'alone di ogni granello. */
}

/* il titolo resta nel documento: motori di ricerca e lettori di schermo */
.parola-testo{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; margin:0;
}
/* se il movimento non è gradito, la parola si legge normalmente */
@media (prefers-reduced-motion:reduce){
  .grana-parola{display:none; filter:none}
  .parola-scena{display:grid; place-items:center; padding-inline:var(--gutter)}
  .parola-testo{
    position:static; width:auto; height:auto; overflow:visible; clip-path:none;
    font-family:'Poppins',sans-serif; font-weight:800; color:#EFE7DA; opacity:.85;
    font-size:clamp(2.2rem,10.4vw,11rem); letter-spacing:-.045em; line-height:.9;
    text-transform:uppercase;
  }
}


/* ==========================================================================
   ViewMenù in home — si mostra il prodotto, non se ne parla.
   La sezione è scura come l'apertura di viewmenu.it: il filmato del telefono
   ha il fondo nero, e su un fondo chiaro diventava un lastrone. Sul nero il
   telefono galleggia, che è esattamente come si presenta il prodotto a casa sua.
   (impostazione ripresa dall'apertura di viewmenu.it: il menù che scorre
   sul telefono e le tre demo vere, cliccabili)
   ========================================================================== */
.vm-griglia{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.vm-prova{display:flex; justify-content:center; position:relative}
.vm-prova::after{
  content:''; position:absolute; inset:-1px; pointer-events:none;
  background:linear-gradient(to bottom,var(--ink) 0,transparent 9%,transparent 91%,var(--ink) 100%);
}
/* il filmato è una registrazione dello schermo, 720×1280, col fondo nero:
   perché non si veda il riquadro, la sezione tiene lo stesso nero della pagina
   e si distingue con due filetti, non con un fondo più chiaro. I bordi del
   video sfumano, così non resta nessuno spigolo */
.vm-sezione{
  background:var(--ink); color:var(--paper); padding-block:var(--section);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.vm-video{
  width:100%; max-width:340px; aspect-ratio:9/16; height:auto; display:block;
  object-fit:contain; background:transparent;
}
.vm-sezione .vm-badge{border-color:rgba(243,240,234,.24); color:var(--muted)}
.vm-testo .display{margin:.4rem 0 .2rem; font-size:clamp(1.7rem,3.2vw,3rem); line-height:1.02}
.vm-testo .script{margin:.5rem 0 1.1rem}
.vm-testo .lead{max-width:46ch}
.vm-nota{
  margin:1.1rem 0 0; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--muted);
}

/* le tre demo: sono la prova, quindi vengono prima del pulsante */
.vm-demo{display:flex; flex-direction:column; gap:.7rem; margin:1.6rem 0 1.8rem; max-width:420px}
.btn-demo{
  position:relative; display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.95rem 4.6rem .95rem 1.4rem; border:1px solid rgba(243,240,234,.3); border-radius:100px;
  font-size:.95rem; letter-spacing:.01em; color:var(--paper); text-decoration:none;
  background:transparent; transition:background .35s ease, color .35s ease, transform .35s ease;
}
.btn-demo__t{display:inline-flex; gap:.4rem}
.btn-demo__t span{font-weight:600}
/* i colori del marchio, nelle varianti cupe che tengono sul fondo chiaro */
.btn-demo:nth-child(1) .btn-demo__t span{color:var(--c-blu)}
.btn-demo:nth-child(2) .btn-demo__t span{color:var(--c-rosso)}
.btn-demo:nth-child(3) .btn-demo__t span{color:var(--c-oro)}
.btn-demo:hover{background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px)}
.btn-demo:hover .btn-demo__t span{color:var(--ink)}
.vm-gr{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:56px; height:17px; object-fit:contain; opacity:.72}
.vm-gr{filter:none}

@media(max-width:900px){
  .vm-griglia{grid-template-columns:1fr}
  .vm-prova{order:-1}   /* su mobile la prova viene prima del discorso */
  .vm-video{max-width:260px}
  .vm-demo{max-width:none}
}

/* ==========================================================================
   Servizi che si aprono — ogni mestiere si mostra nel supporto su cui si lavora
   Un'unica idea grafica: il provino, la timeline, il foglio di stampa, la
   finestra, l'editor e il telefono, tutti disegnati a filo di linea, con la
   stessa testata in mono e le stesse regole. Niente immagini d'archivio:
   dentro ci sono le vostre foto e il vostro codice.
   ========================================================================== */
.apri-avvolge{margin-top:clamp(28px,4vw,48px)}
.apri{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.85rem 1.5rem; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:inherit;
  font:400 .84rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.light .apri{border-color:var(--line-light)}
.apri:hover{border-color:currentColor}
.apri__s{position:relative; width:11px; height:11px; flex:0 0 auto}
.apri__s::before,.apri__s::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1px; background:currentColor;
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}
.apri__s::after{transform:rotate(90deg)}
.apri[aria-expanded="true"] .apri__s::after{transform:rotate(0deg)}
/* aperto: si accende appena, e resta leggibile sia sul nero sia sul chiaro */
.apri[aria-expanded="true"]{background:rgba(243,240,234,.09); border-color:currentColor}
.light .apri[aria-expanded="true"]{background:rgba(4,6,6,.06); border-color:currentColor}

.dettaglio{overflow:hidden}
.dettaglio__in{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,3.4vw,54px); align-items:start; padding-top:clamp(26px,3.4vw,44px);
}
.dettaglio__punti{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.dettaglio__punti li{
  position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.62;
  color:var(--muted);
}
.light .dettaglio__punti li{color:var(--muted-dark)}
.dettaglio__punti li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--c-rosso);
}
@media(max-width:900px){ .dettaglio__in{grid-template-columns:1fr} }

/* --- il supporto: la cornice comune a tutti e sei -------------------------- */
.supporto{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.018);
}
.light .supporto{border-color:var(--line-light); background:rgba(4,6,6,.015)}
.sp-testa{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:.7rem 1rem; border-bottom:1px solid var(--line);
  font:400 .62rem/1 var(--mono); letter-spacing:.14em; color:var(--tenue,#9DA0A3);
}
.light .sp-testa{border-color:var(--line-light); color:var(--muted-dark)}
.sp-piede{
  padding:.85rem 1rem; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.55; color:var(--muted);
}
.light .sp-piede{border-color:var(--line-light); color:var(--muted-dark)}

/* 1 — provino a contatto */
.sp-griglia{display:grid; grid-template-columns:repeat(4,1fr); gap:3px; padding:3px}
.sp-scatto{position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:#0b0c0d}
.sp-scatto img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.1)}
.sp-scatto figcaption{
  position:absolute; left:4px; bottom:3px; font:400 .5rem/1 var(--mono);
  letter-spacing:.08em; color:rgba(243,240,234,.7);
}
.sp-scelto::after{
  content:''; position:absolute; inset:6%; border:2px solid var(--c-rosso); border-radius:50%;
  transform:rotate(-6deg);
}
.sp-scelto img{filter:none}

/* 2 — montaggio */
.sp-striscia{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; padding:10px 10px 0}
.sp-frame{aspect-ratio:9/16; overflow:hidden; background:#0b0c0d; border-radius:2px}
.sp-frame img{width:100%; height:100%; object-fit:cover; display:block}
.sp-linea{position:relative; height:22px; margin:10px 10px 0; border-top:1px solid var(--line)}
.light .sp-linea{border-color:var(--line-light)}
.sp-linea i{position:absolute; top:0; width:1px; height:6px; background:var(--line)}
.light .sp-linea i{background:var(--line-light)}
.sp-linea b{position:absolute; top:-4px; width:1px; height:16px; background:var(--c-rosso)}
.sp-linea b::before{
  content:''; position:absolute; top:-4px; left:-3px; width:7px; height:7px;
  background:var(--c-rosso); border-radius:50%;
}
.sp-tracce{
  display:flex; gap:1.4rem; padding:0 10px 12px;
  font:400 .56rem/1 var(--mono); letter-spacing:.12em; color:var(--tenue,#9DA0A3);
}
.light .sp-tracce{color:var(--muted-dark)}

/* 3 — foglio di stampa */
.sp-foglio{position:relative; margin:20px; padding:26px; background:#F6F4F0; border-radius:2px}
.sp-crocino{position:absolute; width:14px; height:14px}
.sp-crocino::before,.sp-crocino::after{content:''; position:absolute; background:#040606}
.sp-crocino::before{left:6px; top:0; width:1px; height:14px}
.sp-crocino::after{top:6px; left:0; height:1px; width:14px}
.sp-crocino--tl{left:6px; top:6px} .sp-crocino--tr{right:6px; top:6px}
.sp-crocino--bl{left:6px; bottom:6px} .sp-crocino--br{right:6px; bottom:6px}
.sp-barra{display:flex; height:9px; border-radius:1px; overflow:hidden}
.sp-barra i{flex:1}
.sp-barra i:nth-child(1){background:#224771} .sp-barra i:nth-child(2){background:#BCAA34}
.sp-barra i:nth-child(3){background:#CC4B56} .sp-barra i:nth-child(4){background:#5B1018}
.sp-barra i:nth-child(5){background:#040606} .sp-barra i:nth-child(6){background:#9A9A9A}

/* 4 — finestra */
.sp-testa--barra{gap:.8rem}
.sp-punti{display:inline-flex; gap:5px}
.sp-punti i{width:7px; height:7px; border-radius:50%; background:var(--line)}
.light .sp-punti i{background:rgba(4,6,6,.16)}
.sp-url{
  flex:1; text-align:center; padding:.28rem .8rem; border-radius:100px;
  background:rgba(255,255,255,.05); font-size:.58rem; letter-spacing:.06em;
}
.light .sp-url{background:rgba(4,6,6,.05)}
.sp-pagina{padding:12px}
.sp-eroe{position:relative; aspect-ratio:16/8; overflow:hidden; border-radius:3px}
.sp-eroe img{width:100%; height:100%; object-fit:cover; display:block}
.sp-eroe-testo{position:absolute; left:14px; bottom:12px; right:40%}
.sp-tre{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}

/* 5 — editor */
.sp-testa--tab{padding:0; gap:0}
.sp-tab{
  padding:.72rem 1rem; border-right:1px solid var(--line);
  font:400 .6rem/1 var(--mono); letter-spacing:.08em; color:var(--tenue,#9DA0A3);
}
.light .sp-tab{border-color:var(--line-light); color:var(--muted-dark)}
.sp-tab--attiva{color:var(--paper); box-shadow:inset 0 -1px 0 var(--c-blu)}
.light .sp-tab--attiva{color:var(--ink); box-shadow:inset 0 -1px 0 var(--c-blu-cupo)}
.sp-doppio{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1px; background:var(--line)}
.light .sp-doppio{background:var(--line-light)}
.sp-codice{
  margin:0; padding:14px 12px; background:#0A0C0D; overflow-x:auto;
  font:400 .66rem/1.85 var(--mono); color:#C9CCCF;
}
.sp-riga-cod{white-space:pre}
.sp-n{display:inline-block; width:1.6em; color:#43484C; user-select:none}
.sp-codice .c-kw{color:#7FA9DA} .sp-codice .c-fn{color:#D9C55A}
.sp-codice .c-at{color:#D98089} .sp-codice .c-st{color:#93B98B}
.sp-codice .c-cm{color:#5C6469; font-style:italic} .sp-codice .c-pt{color:#C9CCCF}
.sp-schermo{background:#101315; padding:12px; display:flex; flex-direction:column; gap:7px}
.sp-schermo-testa{font:400 .56rem/1 var(--mono); letter-spacing:.14em; color:#7C8287; margin-bottom:3px}
.sp-campo{
  display:flex; justify-content:space-between; gap:.8rem; align-items:center;
  padding:.5rem .65rem; border-radius:6px; background:rgba(255,255,255,.045);
  font-size:.72rem; color:#DCDFE1;
}
.sp-campo b{font:500 .72rem/1 var(--mono); color:#BCAA34}
.sp-campo--spento{opacity:.42}
.sp-campo--spento b{color:#D98089}
.sp-schermo-piede{margin-top:auto; padding-top:8px; font:400 .54rem/1.5 var(--mono); letter-spacing:.08em; color:#5C6469}
@media(max-width:700px){ .sp-doppio{grid-template-columns:1fr} }

/* 6 — telefono */
.sp-corpo-tel{padding:14px 12px 4px; display:flex; justify-content:center}
.sp-post-griglia{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:100%; max-width:330px}
.sp-post{aspect-ratio:1; overflow:hidden; background:#0b0c0d; border-radius:2px}
.sp-post img{width:100%; height:100%; object-fit:cover; display:block}

@media (prefers-reduced-motion:reduce){ .apri__s::before,.apri__s::after{transition:none} }

/* dalle schede in home si arriva al servizio con il dettaglio già aperto */
.svc h3 a{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .4s cubic-bezier(.19,1,.22,1);
}
.svc h3 a:hover{background-size:100% 1px}

/* ==========================================================================
   Servizi — una sequenza che si apre scorrendo, senza un solo click
   Prima ogni servizio era una riga da cliccare, e le etichette («provino a
   contatto», «banco di montaggio») promettevano al cliente cose che non
   riceve: erano il nostro gergo, non il suo. Ora è tutto aperto: il testo da
   una parte, il supporto dall'altra, e i lati si alternano riga dopo riga
   perché la pagina non sia una colonna piatta. Il supporto resta appeso
   mentre si legge, e si sviluppa quando entra nello schermo.
   ========================================================================== */
.servizi-elenco{padding-top:0}
.srv{
  padding:clamp(48px,6vw,88px) 0;
  border-top:1px solid var(--line);
}
.srv:last-child{border-bottom:1px solid var(--line)}
/* solo testo: a sinistra il nome e il perché, a destra come lavoriamo */
.srv__testo{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,96px); align-items:start;
}
.srv__intro{position:sticky; top:calc(var(--gutter) + 96px)}

.srv__num{
  display:block; margin-bottom:.7rem;
  font:400 .7rem/1 var(--mono); letter-spacing:.16em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.srv__nome{
  margin:0 0 1rem; font-family:'Poppins',sans-serif; font-weight:600;
  letter-spacing:-.02em; line-height:1; font-size:clamp(1.8rem,3.6vw,3rem);
  color:var(--paper);
}
.srv__lead{margin:0; max-width:44ch; font-size:1.02rem; line-height:1.62; color:var(--muted)}
.srv__titolo{
  margin:0 0 1rem; font:400 .64rem/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--tenue,#9DA0A3);
}
.srv__punti{list-style:none; margin:0 0 1.7rem; padding:0; display:grid; gap:1rem; max-width:62ch}
.srv__punti li{
  position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.62; color:var(--muted);
}
.srv__punti li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--c-rosso);
}
.srv__voci{
  list-style:none; margin:0; padding:1.2rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1.4rem; max-width:62ch; font-size:.86rem; color:var(--muted);
}
.srv__voci li{position:relative; padding-left:1.1rem}
.srv__voci li::before{content:'\00b7'; position:absolute; left:.2rem; color:var(--c-oro)}

@media(max-width:900px){
  .srv{padding:clamp(36px,7vw,56px) 0}
  .srv__testo{grid-template-columns:1fr; gap:22px}
  .srv__intro{position:static}
  .srv__lead{margin-bottom:.4rem}
}

/* ==========================================================================
   I supporti, seconda versione — ognuno mostra il lavoro E il suo risultato
   Il provino e lo scatto scelto; il montaggio e i tre formati esportati;
   l'esecutivo e i due pezzi stampati; il sito su desktop e su telefono; il
   pannello e quello che ne esce sul telefono del cliente; il calendario e il
   profilo un mese dopo. È il principio comune: causa a sinistra, effetto a destra.
   ========================================================================== */
.sp-confronto{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:3px; padding:3px; align-items:stretch;
}
.sp-confronto .sp-griglia{grid-template-columns:repeat(3,1fr); padding:0; gap:3px}
.sp-esito{position:relative; margin:0; overflow:hidden; background:#0b0c0d; border-radius:2px}
.sp-esito img{width:100%; height:100%; object-fit:cover; display:block}
.sp-esito figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 10px 7px;
  background:linear-gradient(180deg, rgba(4,6,6,0), rgba(4,6,6,.85));
  font:400 .56rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,240,234,.82);
}
.sp-esito figcaption b{color:var(--c-rosso); font-weight:500; margin-right:.5em}
@media(max-width:700px){ .sp-confronto{grid-template-columns:1fr} }

/* etichetta di servizio sotto un pezzo */
.sp-etichetta{
  display:block; margin-top:7px; text-align:center;
  font:400 .52rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue,#9DA0A3);
}
.light .sp-etichetta{color:var(--muted-dark)}

/* --- video: i tre formati che escono dallo stesso girato --- */
.sp-uscite{
  display:grid; grid-template-columns:1.6fr 1fr .62fr; gap:8px;
  padding:12px; align-items:end;
}
.sp-uscita{margin:0}
.sp-uscita img{width:100%; height:100%; object-fit:cover; display:block; border-radius:2px}
.sp-uscita--largo{aspect-ratio:16/9}
.sp-uscita--quadro{aspect-ratio:1}
.sp-uscita--alto{aspect-ratio:9/16}
.sp-uscita figure,.sp-uscita>img{height:100%}
.sp-uscita figcaption{
  margin-top:6px; font:400 .52rem/1 var(--mono); letter-spacing:.12em;
  color:var(--tenue,#9DA0A3);
}
.sp-uscita--largo,.sp-uscita--quadro,.sp-uscita--alto{display:flex; flex-direction:column}
.sp-uscita--largo img{aspect-ratio:16/9} .sp-uscita--quadro img{aspect-ratio:1}
.sp-uscita--alto img{aspect-ratio:9/16}

/* --- grafica: due pezzi, stesso sistema --- */
.sp-fogli{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin:20px 20px 0}
.sp-fogli .sp-foglio{margin:0}
.sp-foglio--manifesto{background:#F6F4F0}
.lc{display:flex; flex-direction:column; height:100%}
.lc-foto{aspect-ratio:1; overflow:hidden; border-radius:1px}
.lc-foto img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05)}
.lc-testo{padding:12px 4px 4px; color:#0B0C0D}
.lc-occhiello{
  display:block; font:400 .5rem/1 var(--mono); letter-spacing:.24em;
  text-transform:uppercase; color:rgba(11,12,13,.6);
}
.lc-titolo{
  margin:.45rem 0 .5rem; font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
  font-size:clamp(1.2rem,2vw,1.7rem); line-height:1; letter-spacing:.01em;
}
.lc-piede{
  display:block; padding-top:.5rem; border-top:1px solid rgba(11,12,13,.18);
  font:400 .48rem/1 var(--mono); letter-spacing:.12em; color:rgba(11,12,13,.55);
}
@media(max-width:700px){ .sp-fogli{grid-template-columns:1fr} }

/* --- il telefono, usato in tre supporti --- */
.sp-tel{display:flex; flex-direction:column; align-items:center; justify-content:flex-start}
.sp-tel-schermo{
  width:100%; max-width:190px; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:#0A0C0D;
}
.light .sp-tel-schermo{border-color:var(--line-light); background:#fff}
.sp-tel-barra{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .6rem; border-bottom:1px solid var(--line);
  font-size:.56rem; color:var(--paper);
}
.light .sp-tel-barra{border-color:var(--line-light); color:var(--ink)}
.sp-tel-barra b{font-weight:600; letter-spacing:-.01em}
.sp-tel-menu{width:11px; height:7px; border-top:1px solid currentColor; border-bottom:1px solid currentColor}
.sp-tel .sp-eroe{aspect-ratio:4/3}
.sp-tel .sp-eroe-testo{left:8px; right:8px; bottom:7px}
.sp-tel .sp-eroe-testo strong{font-size:.56rem; line-height:1.16}
.sp-tel .sp-eroe-testo span{font-size:.4rem; letter-spacing:.14em; margin-bottom:.2rem}
.sp-tel-bottone{
  margin:7px; padding:.42rem; border-radius:100px; text-align:center;
  background:var(--c-blu-cupo); color:#fff; font-size:.52rem; letter-spacing:.06em;
}
.sp-tel-riga{display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:0 7px 7px}
.sp-tel-riga img{width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:2px}
.sp-schermi{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:12px; align-items:start}
@media(max-width:820px){ .sp-schermi{grid-template-columns:1fr} .sp-tel{margin-top:8px} }

/* --- software: il pannello, la freccia, il telefono del cliente --- */
.sp-effetto{
  display:grid; grid-template-columns:minmax(0,1.1fr) auto minmax(0,.8fr);
  gap:12px; align-items:center; padding:12px; border-top:1px solid var(--line);
}
.light .sp-effetto{border-color:var(--line-light)}
.sp-freccia{display:flex; flex-direction:column; align-items:center; gap:.4rem}
.sp-freccia span{
  position:relative; display:block; width:44px; height:1px; background:var(--c-oro);
}
.sp-freccia span::after{
  content:''; position:absolute; right:0; top:-3px;
  border-left:6px solid var(--c-oro); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.sp-freccia em{
  font:400 .5rem/1 var(--mono); font-style:normal; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-oro);
}
.sp-tel--piccolo .sp-tel-schermo{max-width:150px}
.sp-piatto{
  display:grid; grid-template-columns:26px 1fr auto; gap:.45rem; align-items:center;
  padding:.36rem .5rem; border-bottom:1px solid rgba(243,240,234,.07);
  font-size:.52rem; color:#DCDFE1;
}
.sp-piatto img{width:26px; height:26px; object-fit:cover; border-radius:3px; display:block}
.sp-piatto b{font:500 .5rem/1 var(--mono); color:#BCAA34}
.sp-piatto--spento{opacity:.4}
.sp-piatto--spento b{color:#D98089}
@media(max-width:820px){ .sp-effetto{grid-template-columns:1fr} .sp-freccia span{transform:rotate(90deg)} }

/* --- social: il calendario e il profilo --- */
.sp-confronto--social{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:16px; padding:0 0 12px}
.sp-profilo{display:flex; align-items:center; gap:.5rem; padding:.55rem .6rem; border-bottom:1px solid var(--line)}
.light .sp-profilo{border-color:var(--line-light)}
.sp-profilo-tondo{width:26px; height:26px; border-radius:50%; overflow:hidden; flex:0 0 auto}
.sp-profilo-tondo img{width:100%; height:100%; object-fit:cover; display:block}
.sp-profilo b{display:block; font-size:.56rem; font-weight:600; color:var(--paper)}
.sp-profilo span{display:block; font:400 .46rem/1.5 var(--mono); color:var(--tenue,#9DA0A3)}
.light .sp-profilo b{color:var(--ink)}
.sp-confronto--social .sp-post-griglia{max-width:none; gap:2px; padding:3px}

@media(max-width:700px){
  /* calendario e profilo si impilano: affiancati su 390 px stanno stretti */
  .sp-confronto--social{grid-template-columns:1fr}
  .sp-uscite{grid-template-columns:1fr 1fr; align-items:start}
  .sp-uscita--alto{grid-column:span 2; max-width:150px; margin:0 auto}
}

/* ==========================================================================
   Dentro i supporti va contenuto vero, non segnaposto
   Le barrette grigie sembravano uno scheletro di caricamento e non dicevano
   niente del mestiere: il foglio di stampa è un menù davvero impaginato, la
   finestra è una pagina davvero costruita, il piano editoriale è un calendario
   che si legge.
   ========================================================================== */

/* --- il menù sul foglio di stampa --- */
.mn{padding:6px 4px 20px; color:#0B0C0D; text-align:center}
.mn-testata{padding:10px 0 16px}
.mn-occhiello{
  display:block; font:400 .52rem/1 var(--mono); letter-spacing:.3em;
  text-transform:uppercase; color:rgba(11,12,13,.55);
}
.mn-titolo{
  margin:.5rem 0 .7rem; font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.02; letter-spacing:.01em;
}
.mn-filetto{display:block; width:34px; height:1px; margin:0 auto; background:#0B0C0D}
.mn-corpo{display:grid; grid-template-columns:1fr 1fr; gap:22px; text-align:left; margin-top:6px}
.mn-col h4{
  margin:0 0 .55rem; font:400 .54rem/1 var(--mono); letter-spacing:.22em;
  text-transform:uppercase; color:rgba(11,12,13,.6);
}
.mn-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.42rem}
.mn-col li{display:flex; align-items:baseline; gap:.35rem; font-size:.62rem; line-height:1.3}
.mn-nome{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mn-filo{flex:1; border-bottom:1px dotted rgba(11,12,13,.35); transform:translateY(-2px)}
.mn-prezzo{font-family:var(--mono); font-size:.58rem; font-variant-numeric:tabular-nums}
.mn-piede{
  display:flex; justify-content:space-between; margin-top:16px; padding-top:8px;
  border-top:1px solid rgba(11,12,13,.18);
  font:400 .5rem/1 var(--mono); letter-spacing:.14em; color:rgba(11,12,13,.55);
}

/* --- la pagina dentro la finestra --- */
.sp-nav{
  display:flex; align-items:center; gap:1rem; padding:0 4px 10px;
  font-size:.56rem; color:var(--tenue,#9DA0A3);
}
.sp-nav b{font-size:.66rem; color:var(--paper); font-weight:600; margin-right:auto; letter-spacing:-.01em}
.sp-nav em{
  font-style:normal; padding:.24rem .6rem; border-radius:100px;
  background:var(--c-blu-cupo); color:#fff; font-size:.52rem; letter-spacing:.08em;
}
.light .sp-nav b{color:var(--ink)}
.sp-eroe-testo{position:absolute; left:16px; right:20%; bottom:14px; color:#F3F0EA; text-align:left}
.sp-eroe-testo span{
  display:block; font:400 .5rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  opacity:.8; margin-bottom:.35rem;
}
.sp-eroe-testo strong{
  display:block; font-family:'Poppins',sans-serif; font-weight:500; font-size:.86rem;
  line-height:1.18; letter-spacing:-.01em;
}
.sp-eroe::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,6,0) 34%, rgba(4,6,6,.72) 100%);
}
.sp-tre div{position:relative; border-radius:3px; overflow:hidden; aspect-ratio:4/3}
.sp-tre img{width:100%; height:100%; object-fit:cover; display:block}
.sp-tre span{
  position:absolute; left:7px; bottom:6px; z-index:1;
  font:400 .5rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#F3F0EA;
  text-shadow:0 1px 6px rgba(4,6,6,.9);
}

/* --- il calendario editoriale --- */
.cal-testa{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:12px 12px 4px;
  font:400 .5rem/1 var(--mono); letter-spacing:.16em; color:var(--tenue,#9DA0A3); text-align:center;
}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:0 12px}
.cal-g{
  position:relative; height:26px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:3px;
  font:400 .5rem/1 var(--mono); color:var(--tenue,#9DA0A3);
}
.light .cal-g{border-color:var(--line-light)}
.cal-g--pieno{background:rgba(243,240,234,.05)}
.light .cal-g--pieno{background:rgba(4,6,6,.04)}
.cal-p{
  position:absolute; right:3px; bottom:3px; width:4px; height:4px; border-radius:50%;
  display:inline-block;
}
.cal-p--foto{background:var(--c-rosso)} .cal-p--reel{background:var(--c-blu)}
.cal-p--storia{background:var(--c-oro)}
.cal-legenda{
  display:flex; gap:1.1rem; padding:9px 12px 0;
  font:400 .54rem/1 var(--mono); letter-spacing:.1em; color:var(--tenue,#9DA0A3);
}
.cal-legenda span{display:inline-flex; align-items:center; gap:.35rem}
.cal-legenda .cal-p{position:static}
.sp-post-griglia{grid-template-columns:repeat(3,1fr); max-width:280px}

@media(max-width:700px){
  /* i fogli di stampa a colonna singola: due colonne di menù su 390 px
     tagliavano i nomi dei piatti a metà */
  .sp-fogli{margin:14px; gap:12px}
  .sp-foglio{padding:18px}
  .mn{padding:4px 2px 14px}
  .mn-corpo{grid-template-columns:1fr; gap:14px}
  .mn-col li{font-size:.72rem}
  .mn-prezzo{font-size:.66rem}
  .lc-foto{aspect-ratio:4/3}
}

/* ==========================================================================
   Studio — la storia e il posto
   La pagina ripeteva la home («due competenze») e i servizi («tre cose su cui
   non transigiamo»): tre schermate di cose già lette. Al loro posto le due
   sole cose che nessun'altra pagina può dire — come si è arrivati qui, e dove
   sta questo qui.
   ========================================================================== */
.storia__corpo{
  max-width:62ch; margin:0 auto;
  font-size:clamp(1.02rem,1.25vw,1.14rem); line-height:1.72; color:var(--muted);
}
.storia__corpo p{margin:0 0 1.5rem}
.storia__corpo b{color:var(--paper); font-weight:500}
.storia__stacco{
  margin:2.6rem 0; padding:0 0 0 clamp(18px,2.4vw,34px);
  border-left:1px solid var(--c-rosso);
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.6vw,2.05rem); line-height:1.24; letter-spacing:.005em;
  color:var(--paper);
}

/* i quattro fotogrammi del posto: finché non ci sono le foto, restano
   riquadri non esposti — è onesto e resta nella lingua del sito */
.posare{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px)}
.posa{
  position:relative; margin:0; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line); border-radius:3px;
  background:
    repeating-linear-gradient(135deg, rgba(243,240,234,.022) 0 6px, transparent 6px 12px),
    rgba(243,240,234,.012);
  display:flex; align-items:flex-end;
}
.posa img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.posa__n{
  position:absolute; left:10px; top:9px;
  font:400 .58rem/1 var(--mono); letter-spacing:.16em; color:var(--tenue,#9DA0A3);
}
.posa figcaption{
  position:relative; z-index:1; padding:12px 11px;
  font-size:.78rem; line-height:1.45; color:var(--muted);
}
.posa:has(img) figcaption{
  background:linear-gradient(180deg, rgba(4,6,6,0), rgba(4,6,6,.86)); color:var(--paper);
}
/* Una foto sola: larga quanto la sezione, con la didascalia sotto.
   Il riquadro numerato serviva a reggere il vuoto — qui il vuoto non c'è. */
.posa--larga{position:relative; aspect-ratio:auto; width:100%;
  border:1px solid var(--filo); border-radius:4px; overflow:hidden;
  background:var(--ink-2)}
.posa--larga img{position:static; width:100%; height:auto; display:block}
.posa--larga figcaption{position:absolute; left:0; right:0; bottom:0;
  margin:0; padding:clamp(16px,2vw,26px) clamp(18px,2.2vw,30px);
  background:linear-gradient(to top, rgba(4,6,6,.86), transparent);
  opacity:1; color:var(--carta)}
@media(max-width:520px){ .posa--larga{aspect-ratio:auto} }

.posare__nota{
  margin:1.4rem 0 0; max-width:56ch;
  font-family:var(--mono); font-size:.74rem; line-height:1.7; letter-spacing:.02em;
  color:var(--tenue,#9DA0A3);
}
@media(max-width:900px){ .posare{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .posare{grid-template-columns:1fr} .posa{aspect-ratio:16/10} }

/* ==========================================================================
   ViewMenù in home — caso studio, non insegna
   È un progetto di Perceptio e vale come prova, non come pubblicità: qui si
   racconta chi l'ha fatto e cosa dimostra, e chi vuole comprarlo va sul suo
   sito. Nessun pulsante di vendita, nessun «prova gratis»: su questa pagina
   il prodotto in vendita è lo studio.
   ========================================================================== */
.vm-cosa{list-style:none; margin:1.7rem 0 2rem; padding:0; display:grid; gap:.75rem; max-width:44ch}
.vm-cosa li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:.6rem; align-items:baseline;
  font-size:.92rem; line-height:1.5; color:var(--muted);
  padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.vm-cosa li:last-child{border-bottom:0; padding-bottom:0}
.vm-cosa span{
  font:400 .62rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-oro);
}
.vm-guarda{
  margin:0 0 .9rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--tenue,#9DA0A3);
}
.vm-sezione .vm-nota a{
  color:var(--paper); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:1px;
}
.vm-sezione .vm-nota a:hover{background-size:0 1px}
@media(max-width:560px){ .vm-cosa li{grid-template-columns:1fr; gap:.2rem} }

/* ==========================================================================
   Respiro fra sezioni consecutive dello stesso colore
   ==========================================================================
   Fra la galleria e i reel c'erano 336 px di nero: il fondo della galleria
   (158) più il capo dei reel (158). Fra due sezioni sullo stesso fondo il
   vuoto va contato una volta sola, non due. */
#lavori{padding-bottom:clamp(36px,4vw,64px)}
#reel{padding-top:clamp(44px,5vw,84px)}

/* ==========================================================================
   Portfolio — una sezione per mestiere, i clienti dentro
   ==========================================================================
   La pagina arriva dal prototipo del 10/09/2026 con la sua palette: qui i suoi
   nomi diventano alias di quelli del sito, così le regole restano identiche
   all'originale e il colore resta uno solo. Le classi che nel sito esistevano
   già con un altro significato (visore, figura, dati, pellicola) sono passate
   a pf-*: la lightbox delle foto e la scheda dei contatti non si toccano. */
.pf{
  --carta:var(--paper); --testo:var(--paper); --tenue:var(--muted);
  --filo:var(--line); --rosso:var(--red); --blu:var(--blue);
  --oro:var(--gold); --bordeaux:var(--bordeaux);
}
.pf-visore{
  --carta:var(--paper); --testo:var(--paper); --tenue:var(--muted);
  --filo:var(--line); --rosso:var(--red); --blu:var(--blue);
}
.pf{padding-inline:var(--gutter)}

/* l'apertura scende sotto la testata fissa come nelle altre pagine interne */
.apertura{padding:calc(var(--gutter) + 130px) 0 clamp(30px,4vw,46px);max-width:56ch}
.occhiello{margin:0 0 18px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--rosso)}
h1{margin:0;font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(30px,5.4vw,60px);line-height:1.06}
.sommario{margin:22px 0 0;color:var(--tenue);font-size:clamp(15px,1.6vw,18px);line-height:1.66}

/* i filtri appartengono alla loro sezione, quindi non sono fissi:
   con più sezioni in pagina due barre appiccicate si sovrapporrebbero */
.filtri{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 clamp(20px,2.6vw,30px)}
@media (max-width:820px){
  /* una riga sola che scorre: la pila di pastiglie mangiava mezzo schermo */
  .filtri{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 22px}
  .filtri::-webkit-scrollbar{display:none}
  .filtri button{flex:none}
}
.filtri button{font:inherit;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue);background:transparent;border:1px solid var(--filo);border-radius:999px;
  padding:9px 17px;cursor:pointer;transition:color .25s,border-color .25s,background-color .25s}
.filtri button:hover{color:var(--testo);border-color:rgba(246,244,240,.4)}
.filtri button[aria-pressed="true"]{color:var(--ink);background:var(--carta);border-color:var(--carta)}

.gruppo{padding-bottom:clamp(52px,7vw,92px)}
.gruppo[hidden]{display:none}
/* Il titolo del mestiere e il nome del cliente avevano lo stesso trattamento —
   piccoli, maiuscoli, spaziati — e si confondevano. Ora il mestiere e grande e
   leggero, il cliente resta piccolo e spaziato: due voci diverse. */
/* pallino colorato del mestiere, come nel piede «Cosa facciamo» */
.titolo-gruppo{--c:var(--c-rosso)}
.titolo-gruppo::before{content:"";flex:none;align-self:center;
  width:clamp(10px,1.1vw,14px);height:clamp(10px,1.1vw,14px);border-radius:50%;
  background:var(--c, var(--red))}
#mestiere-foto    .titolo-gruppo{--c:var(--c-rosso)}
#mestiere-video   .titolo-gruppo{--c:var(--c-oro)}
#mestiere-grafica .titolo-gruppo{--c:var(--c-blu)}
#mestiere-sito    .titolo-gruppo{--c:var(--c-bordeaux)}
#mestiere-app     .titolo-gruppo{--c:var(--c-blu)}
#mestiere-social  .titolo-gruppo{--c:var(--c-rosso)}
.titolo-gruppo{margin:0 0 clamp(18px,2.4vw,30px);font-weight:200;
  font-size:clamp(30px,4.2vw,54px);letter-spacing:-.01em;line-height:1.02;
  text-transform:uppercase;color:var(--carta);
  display:flex;align-items:baseline;gap:clamp(16px,2vw,26px)}
.titolo-gruppo::after{content:"";flex:1;height:1px;
  background:linear-gradient(to right,color-mix(in srgb,var(--c, var(--c-rosso)) 55%,transparent),var(--filo) 38%);
  align-self:center}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(16px,2.2vw,30px)}
.scheda{margin:0;border:0;background:none;padding:0;text-align:left;color:inherit;font:inherit;
  cursor:pointer;display:flex;flex-direction:column;gap:14px}
.scheda[hidden]{display:none}
.pf-figura{margin:0;overflow:hidden;background:var(--ink-2);aspect-ratio:4/5;position:relative}
.pf-figura img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.scheda:hover .pf-figura img,.scheda:focus-visible .pf-figura img{transform:scale(1.035)}
.scheda:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.pf-dati h3{margin:0;font-size:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.tipo{position:absolute;left:12px;bottom:12px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(4,6,6,.72);color:var(--carta);
  border:1px solid rgba(246,244,240,.22);border-radius:999px;padding:5px 11px}
.pf-dati p{margin:6px 0 0;color:var(--tenue);font-size:14px;line-height:1.5}
.conta{display:inline-block;margin-top:9px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,244,240,.42)}

/* lo sviluppo: velo, chiazze che si saldano, contrasto pieno. nessuna sfocatura. */
.sviluppa{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 63%),
                     radial-gradient(circle at 50% 50%,#000 62%,transparent 63%),
                     radial-gradient(circle at 50% 50%,#000 62%,transparent 63%);
          mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 63%),
                     radial-gradient(circle at 50% 50%,#000 62%,transparent 63%),
                     radial-gradient(circle at 50% 50%,#000 62%,transparent 63%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:28% 34%,74% 60%,48% 88%;mask-position:28% 34%,74% 60%,48% 88%;
  -webkit-mask-size:0% 0%,0% 0%,0% 0%;mask-size:0% 0%,0% 0%,0% 0%;
  filter:contrast(.3) brightness(.58) saturate(.08);
}
.sviluppa.in{animation:sviluppa 1.15s cubic-bezier(.32,.72,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes sviluppa{
  0%{-webkit-mask-size:0% 0%,0% 0%,0% 0%;mask-size:0% 0%,0% 0%,0% 0%;
     filter:contrast(.3) brightness(.58) saturate(.08)}
  55%{filter:contrast(.72) brightness(.84) saturate(.55)}
  100%{-webkit-mask-size:230% 230%,230% 230%,230% 230%;mask-size:230% 230%,230% 230%,230% 230%;
     filter:none}
}

.invito{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;padding:clamp(26px,3.4vw,40px);background:var(--ink-2);border-top:2px solid var(--blu)}
.invito[hidden]{display:none}
.invito p{margin:0;max-width:46ch;font-size:clamp(15px,1.7vw,19px);line-height:1.55}
.bottone{display:inline-block;background:var(--blu);color:var(--carta);text-decoration:none;
  padding:14px 26px;border-radius:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;transition:background-color .25s}
.bottone:hover{background:#2b5a90}

.coda{border-top:1px solid var(--filo);padding:clamp(40px,6vw,72px) 0 clamp(50px,7vw,90px);
  color:var(--tenue);font-size:14px;line-height:1.7;max-width:60ch}

/* visore */
.pf-visore{position:fixed;inset:0;z-index:70;background:var(--ink);overflow-y:auto;
  /* niente padding in cima: il padding del contenitore sposta in basso il punto
     in cui si ferma la testata appiccicosa, e sopra la banda nera passavano le foto */
  padding:0 var(--gutter) clamp(60px,8vw,110px)}
.pf-visore[hidden]{display:none}
.pf-visore-testa{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;padding:clamp(26px,3.4vw,44px) 0 20px;margin-bottom:clamp(14px,1.8vw,24px);
  /* fondo pieno con un filetto: la sfumatura strisciava di nero sopra le foto chiare */
  background:var(--ink);border-bottom:1px solid var(--filo)}
.pf-visore-testa h2{margin:0;font-size:clamp(20px,3.2vw,32px);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.pf-visore-testa p{margin:8px 0 0;color:var(--tenue);font-size:15px;max-width:52ch}
.mestieri{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mestieri span,.mestieri button{font:inherit;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);background:transparent;
  border:1px solid var(--filo);border-radius:999px;padding:5px 12px}
.mestieri .acceso{color:var(--ink);background:var(--carta);border-color:var(--carta)}
.mestieri button{cursor:pointer;transition:color .25s,border-color .25s}
.mestieri button:hover{color:var(--testo);border-color:rgba(246,244,240,.42)}
.chiudi{flex:none;background:transparent;border:1px solid var(--filo);border-radius:999px;color:var(--testo);
  font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;cursor:pointer}
/* niente rosso qui: col cerchietto d'oro della messa a fuoco faceva a pugni.
   Al passaggio del mouse il pulsante si schiarisce, e basta */
.chiudi{transition:border-color .25s ease, color .25s ease, background-color .25s ease}
.chiudi:hover{border-color:rgba(246,244,240,.55); color:var(--carta);
  background:rgba(246,244,240,.06)}
/* colonne invece di griglia: gli scatti hanno formati diversi e a righe restavano buchi */
.scatti{columns:3;column-gap:clamp(14px,1.8vw,24px)}
@media (max-width:1100px){.scatti{columns:2}}
@media (max-width:640px){.scatti{columns:1}}
.pezzo{margin:0 0 clamp(14px,1.8vw,24px);break-inside:avoid}
.pezzo img,.pezzo video{width:100%;height:auto;background:var(--ink-2);display:block}
.pezzo figcaption{margin-top:9px;font-size:13px;line-height:1.5;color:var(--tenue)}
.pezzo-sito a{display:block;text-decoration:none;position:relative}
/* la didascalia sotto i tre schermi porta l'oro dei riquadri, non il rosso:
   in questa sezione il rosso non c'entra con niente altro */
.pezzo-sito .vai{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);padding-bottom:4px;
  border-bottom:1px solid rgba(188,170,52,.38);
  transition:color .3s ease, border-color .3s ease}
.pezzo-sito a:hover .vai{color:var(--carta); border-bottom-color:rgba(188,170,52,.85)}
.pf-visore .invito{margin-top:clamp(34px,5vw,60px)}

@media (prefers-reduced-motion:reduce){
  .sviluppa,.sviluppa.in{animation:none;filter:none;
    -webkit-mask-image:none;mask-image:none;-webkit-mask-size:auto;mask-size:auto}
  .pf-figura img,.scheda:hover .pf-figura img{transition:none;transform:none}
}

/* Il visore del portfolio sta sopra la testata fissa del sito (z-index 100),
   altrimenti il logo e il menu coprono il pulsante «Chiudi». Mentre è aperto
   la testata si toglie di mezzo: sotto c'è già la navigazione del visore. */
.pf-visore{z-index:150}
body:has(.pf-visore:not([hidden])) .site-header{opacity:0; pointer-events:none}

/* Nel sito ogni <section> ha 158 px sopra e sotto: qui il titolo del mestiere
   arriva subito dopo l'apertura, che il suo respiro ce l'ha già. */
.pf .gruppo{padding-top:0}
.pf .coda{padding-top:clamp(30px,4vw,52px)}
/* il titolo non va stretto come il testo: 56ch lo mandavano a quattro righe */
.pf .apertura{max-width:none}
.pf .apertura h1{max-width:18ch}
.pf .sommario{max-width:60ch}

/* La targa: come si mostra un sito finché non c'è la schermata.
   Il dominio scritto grande su fondo scuro dice più di un riquadro vuoto,
   e il giorno che arriva l'immagine questa sparisce da sola. */
.pf-targa{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.7rem; text-align:center;
  padding:24px; background:var(--ink-2);
  background-image:linear-gradient(140deg,rgba(34,71,113,.30),transparent 62%);
}
.pf-targa b{
  font-size:clamp(15px,1.5vw,19px); font-weight:500; letter-spacing:.02em;
  color:var(--paper); border-bottom:1px solid var(--red); padding-bottom:6px;
}
.pf-targa i{
  font-style:normal; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.scheda:hover .pf-targa b{color:var(--red); border-color:var(--paper)}

/* Un sito non è un ritratto: la sua scheda è larga come uno schermo, non alta
   come una fotografia di moda. */
#mestiere-sito .pf-figura{aspect-ratio:16/10}

/* --- i siti: il formato senza il dispositivo ------------------------------
   Nessuna scocca di telefono, nessuna barra di browser. Il formato lo dicono
   tre cose: il rapporto giusto, gli angoli arrotondati e un filetto d'oro
   sottile. È lo stesso modo in cui mostriamo i reel verticali. */
.pf-schermi{
  display:flex; align-items:flex-start; gap:clamp(12px,1.4vw,20px);
}
.pf-schermo{
  display:block; position:relative; overflow:hidden; background:var(--ink-2);
  border:1px solid rgba(188,170,52,.42); border-radius:14px;
  background-image:linear-gradient(140deg,rgba(34,71,113,.26),transparent 62%);
}
.pf-schermo img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.pf-schermo--largo{flex:1 1 auto; aspect-ratio:16/10}
/* il tablet sta in mezzo: piu stretto del desktop, piu largo del telefono */
.pf-schermo--medio{flex:0 0 clamp(96px,19%,168px); aspect-ratio:3/4; border-radius:15px}
.pf-schermo--alto{flex:0 0 clamp(66px,13%,104px); aspect-ratio:9/19.5; border-radius:16px}
.pf-schermo--alto .pf-targa b,.pf-schermo--medio .pf-targa b{font-size:11px; letter-spacing:0; word-break:break-all; line-height:1.35}
.pf-schermo--alto .pf-targa i,.pf-schermo--medio .pf-targa i{font-size:9px; letter-spacing:.14em}
.pf-schermo--alto .pf-targa,.pf-schermo--medio .pf-targa{padding:10px; gap:.45rem}
/* su schermo stretto i tre formati non ci stanno affiancati: va via il tablet,
   che e quello che dice meno di nuovo */
@media(max-width:720px){ .pf-schermo--medio{display:none} }
/* nel visore i pezzi vanno a colonne: una sola colonna per i siti, che sono larghi */

/* --- Social: la griglia del profilo e il reel accanto ------------------- */
/* Stessa idea dei siti: il formato si capisce dal rapporto, non da una scocca.
   La griglia è quadrata perché quadrata è la griglia di un profilo. */
.pf-social{display:flex; align-items:flex-start; gap:clamp(12px,1.4vw,20px)}
.pf-griglia{flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr);
  gap:3px; aspect-ratio:1/1; overflow:hidden; border-radius:14px;
  border:1px solid rgba(188,170,52,.42); padding:3px; background:var(--ink-2)}
.pf-cella{display:block; overflow:hidden; background:var(--ink-2)}
.pf-cella img{width:100%; height:100%; object-fit:cover; display:block}
.pf-griglia--vuota{display:block; position:relative; padding:0}
.pf-reel{flex:0 0 clamp(78px,17%,132px); display:block; position:relative;
  overflow:hidden; border-radius:16px; aspect-ratio:9/16; background:var(--ink-2);
  border:1px solid rgba(188,170,52,.42);
  background-image:linear-gradient(140deg,rgba(34,71,113,.26),transparent 62%)}
.pf-reel video,.pf-reel img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:720px){ .pf-reel{flex-basis:clamp(64px,20%,96px)} }

/* La copertina del social: un riquadro verticale, centrato nella scheda.
   Si capisce che è roba da telefono prima ancora di leggere il nome. */
.pf-figura--social{display:flex; align-items:center; justify-content:center;
  background:var(--ink); padding:clamp(14px,1.6vw,22px) 0}
.pf-verticale{position:relative; display:block; aspect-ratio:9/16;
  overflow:hidden; border-radius:18px; background:var(--ink-2);
  border:1px solid rgba(188,170,52,.42);
  background-image:linear-gradient(140deg,rgba(34,71,113,.26),transparent 62%)}
.pf-figura--social .pf-verticale{height:100%}
.pf-verticale img,.pf-verticale video{width:100%;height:100%;object-fit:cover;display:block}
/* Il filmato sta sopra la copertina e si scopre al passaggio: senza la copertina
   ferma sotto, il riquadro resta nero finché il video non ha deciso di partire. */
.pf-verticale video.pf-anteprima{position:absolute;inset:0;opacity:0;
  transition:opacity .35s ease}
.scheda:hover .pf-anteprima,.scheda:focus-visible .pf-anteprima{opacity:1}
.scheda:hover .pf-verticale,.scheda:focus-visible .pf-verticale{
  border-color:rgba(188,170,52,.85)}
.pezzo-social{margin:0 0 clamp(16px,2vw,26px); break-inside:avoid}
.pezzo-social figcaption{margin-top:10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue)}
/* Una schermata di software si legge solo se è grande: una colonna sola, e la
   cornice prende il rapporto dell'immagine invece di ritagliarla. */
/* ── La scheda di un software ──────────────────────────────────────
   Un software non si giudica guardandolo: va raccontato. Ma un muro di
   testo non lo legge nessuno, quindi la scheda ha un ritmo preciso —
   cos'è, com'era prima, cosa fa, le tre cose che contano, il resto in
   piccolo, lo schema, le schermate. */

.pf-progetto-testa{display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px,1.6vw,22px); max-width:46ch}
.pf-progetto-testa .pf-marchio{align-self:flex-start; width:auto; flex:none}
.pf-marchio-scritto{font-size:clamp(26px,3vw,38px); font-weight:300;
  letter-spacing:-.4px; color:var(--carta)}
.pf-claim{margin:0; font-size:clamp(19px,2.1vw,27px); line-height:1.34;
  font-weight:300; color:var(--carta)}

/* La riga dei fatti sotto il claim, e il rimando al prodotto: un progetto
   vivo ha un indirizzo, e chi legge deve poterci andare. */
.pf-fatti{margin:0; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue)}
.pf-vai{align-self:flex-start; flex:none; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--carta);
  padding:11px 18px; border:1px solid rgba(188,170,52,.55); border-radius:999px;
  transition:background-color .25s ease, border-color .25s ease}
.pf-vai:hover{background:rgba(188,170,52,.14); border-color:var(--gold)}

/* L'apertura: il problema, detto una volta e in grande. È la riga che si
   legge anche di sfuggita. */
.pf-apertura{max-width:38ch; margin:clamp(30px,3.4vw,46px) 0 0;
  font-size:clamp(19px,2vw,25px); line-height:1.5; font-weight:300; color:var(--carta)}

/* Le scene: un'immagine e poche righe, affiancate, che si alternano. Lo
   stesso ritmo di un servizio fotografico impaginato su una rivista. */
/* è un <section>, e le sezioni del sito hanno un padding da 100 px: qui no,
   altrimenti fra una scena e l'altra si apre un vuoto da schermata */
.pf-scena{padding:0; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(26px,3.6vw,64px); align-items:center;
  margin:clamp(32px,4vw,56px) 0 0}
.pf-scena--sinistra{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pf-scena--sinistra .pf-scena-img{order:2}
.pf-scena-img{margin:0; position:relative}
.pf-scena-img img{width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--filo)}
/* una schermata verticale non deve occupare tutta la colonna: telefono, non torre */
.pf-scena-img--alta{display:flex; justify-content:center}
.pf-scena-img--alta img{width:auto; max-height:min(58vh,480px); max-width:100%}
.pf-scena-img figcaption{position:absolute; right:12px; bottom:12px; margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,244,240,.55); background:rgba(4,6,6,.55);
  padding:4px 9px; border-radius:999px}
.pf-scena-img--alta figcaption{right:auto; left:50%; transform:translateX(-50%)}
/* quasi quadrata (un oggetto in mano su fondo bianco): a tutta colonna
   diventa un blocco bianco che pesa più del testo. Misura di un oggetto. */
.pf-scena-img--quadra{display:flex; justify-content:center}
.pf-scena-img--quadra img{width:auto; max-width:min(100%,460px); max-height:min(56vh,460px)}
.pf-scena-testo h3{margin:0 0 .7em; font-size:clamp(20px,2.1vw,26px); font-weight:400;
  line-height:1.25; color:var(--carta)}
.pf-scena-testo p{margin:0 0 .9em; font-size:15.5px; line-height:1.72; color:var(--tenue)}
.pf-scena-testo p:last-child{margin-bottom:0}

/* La chiusura: quello che resta da dire, in una riga sola, e il timbro. */
.pf-chiusura{max-width:64ch; margin:clamp(34px,4vw,56px) 0 0; padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--filo); font-size:14.5px; line-height:1.75; color:var(--tenue)}

@media(max-width:900px){
  /* a colonna singola l'immagine sta sopra il testo: se è alta quanto lo
     schermo, il testo finisce sotto la piega e sembra uno spazio vuoto.
     Un oggetto in mano non ha bisogno di più di mezzo schermo. */
  .pf-scena, .pf-scena--sinistra{grid-template-columns:1fr; gap:18px}
  .pf-scena--sinistra .pf-scena-img{order:0}
  .pf-scena-img--alta, .pf-scena-img--quadra{display:flex; justify-content:center}
  .pf-scena-img--alta img, .pf-scena-img--quadra img{width:auto; max-width:100%;
    max-height:min(52vh,420px)}
  .pf-scena{margin-top:clamp(28px,5vw,44px)}
  .pf-apertura{max-width:none}
}

/* Selettore dei mestieri: l'unica barra fissa della pagina. Si ferma sotto la
   testata del sito, che è alta circa 110 px. */
.pf-mestieri{position:sticky; top:0; z-index:60;
  display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto;
  margin:0 0 clamp(26px,3.2vw,44px);
  padding:clamp(14px,1.6vw,20px) 0;
  background:var(--ink);
  border-bottom:1px solid var(--filo);
  scrollbar-width:none; -ms-overflow-style:none}
.pf-mestieri::-webkit-scrollbar{display:none}
.pf-mestieri button{flex:none; font:inherit; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tenue); background:transparent;
  border:1px solid var(--filo); border-radius:999px;
  padding:9px 18px; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease}
/* I due livelli di filtro erano identici — stessa pastiglia, stesso grigio — e
   non si capiva quale comandasse. I mestieri ora prendono il loro colore, gli
   stessi del piede e delle schede dei servizi; i settori restano neutri. */
.pf-mestieri button[data-m="foto"]{--c:var(--c-rosso)}
.pf-mestieri button[data-m="video"]{--c:var(--c-oro)}
.pf-mestieri button[data-m="grafica"]{--c:var(--c-blu)}
.pf-mestieri button[data-m="sito"]{--c:var(--c-bordeaux)}
.pf-mestieri button[data-m="app"]{--c:var(--c-blu)}
.pf-mestieri button[data-m="social"]{--c:var(--c-rosso)}
.pf-mestieri button[data-m]:not([data-m="tutti"]){
  color:color-mix(in srgb, var(--c) 78%, var(--carta));
  border-color:color-mix(in srgb, var(--c) 46%, transparent)}
.pf-mestieri button:hover{color:var(--carta); border-color:rgba(246,244,240,.4)}
.pf-mestieri button[data-m]:not([data-m="tutti"]):hover{
  color:var(--carta); border-color:var(--c)}
.pf-mestieri button[aria-pressed="true"]{background:var(--carta); color:var(--ink);
  border-color:var(--carta)}
.pf-mestieri button[data-m]:not([data-m="tutti"])[aria-pressed="true"]{
  background:var(--c); border-color:var(--c); color:var(--paper)}
/* sull'oro il testo chiaro non si legge */
.pf-mestieri button[data-m="video"][aria-pressed="true"]{color:var(--ink)}
.pf-mestieri button:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
/* la testata del sito copre i primi 110 px: la barra si ferma sotto */
@supports (top: 1px){ .pf-mestieri{top:clamp(64px,7vw,104px)} }
.gruppo[hidden]{display:none}

/* Il racconto di un lavoro: prima dei pezzi, largo come una colonna di lettura. */
.pf-racconto{max-width:64ch; margin:0 0 clamp(28px,3.4vw,46px)}
/* Il nome grande e il logo attaccati si pestavano i piedi. Il marchio adesso sta
   in un riquadro suo, staccato, con le sue righe tecniche accanto: si legge come
   la targa di un progetto, non come un titolo ripetuto due volte. */
.pf-progetto{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:clamp(18px,2.6vw,36px);
  margin:clamp(22px,2.6vw,32px) 0 0;
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.6vw,34px);
  border:1px solid var(--filo); border-radius:16px;
  background:linear-gradient(140deg, rgba(34,71,113,.16), transparent 62%)}
.pf-marchio{display:block; width:auto; height:clamp(34px,3.8vw,52px); margin:0}
.pf-meta{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.pf-meta li{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue); border:1px solid var(--filo); border-radius:999px;
  padding:7px 13px; white-space:nowrap}

.pf-racconto p{margin:0 0 1em; color:var(--tenue); line-height:1.75; font-size:15px}
.pf-racconto strong{color:var(--carta); font-weight:500}
.pf-capacita{list-style:none; margin:1.6em 0 0; padding:0 0 1.5em;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:.55em clamp(18px,2.2vw,30px)}
.pf-capacita li{position:relative; padding-left:18px; font-size:14px;
  color:var(--tenue); line-height:1.55}
.pf-capacita li::before{content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--c-blu)}
.pf-nota{margin-top:1.8em; padding-top:1.2em; border-top:1px solid var(--filo);
  font-size:13.5px; color:var(--tenue)}
/* Le schermate di un software non vanno guardate come una fotografia:
   servono a dire «ecco com'è fatto», e a quello bastano piccole. A tutta
   larghezza diventavano muri di pixel in cui non si legge niente. */
.pf-aperto .scatti:has(.pezzo-app){columns:auto; display:flex; flex-wrap:wrap;
  align-items:flex-start; justify-content:center;
  gap:clamp(20px,2.6vw,40px); max-width:none; padding:clamp(8px,1.4vw,18px) 0}
.pezzo-app{margin:0; flex:0 1 auto}
/* verticale: la misura di un telefono. orizzontale: poco più di un tablet. */
.pezzo-app--alto{max-width:clamp(180px,19vw,238px)}
.pezzo-app--largo{max-width:clamp(280px,38vw,470px)}
.pezzo-app .pf-schermo--largo{display:block; aspect-ratio:auto; flex:none}
.pezzo-app .pf-schermo--largo img{height:auto}
.pezzo-app .pf-schermo{border-radius:10px}
.pezzo-app img{width:100%; height:auto; display:block}
.pezzo-app figcaption{margin-top:12px; font-size:12.5px; letter-spacing:0;
  text-align:center; text-transform:none; line-height:1.55; color:var(--tenue)}
/* Il lavoro aperto dentro la griglia. Occupa tutta la larghezza della riga,
   così sopra e sotto restano gli altri clienti e non si perde il filo. */
.pf-aperto{grid-column:1 / -1; margin:clamp(18px,2.4vw,32px) 0 clamp(26px,3.2vw,44px);
  padding:clamp(22px,2.8vw,38px) 0 0;
  border-top:1px solid var(--filo); border-bottom:1px solid var(--filo);
  padding-bottom:clamp(26px,3.2vw,40px);
  opacity:0; transform:translateY(-10px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  scroll-margin-top:calc(var(--gutter) + 172px)}
.pf-aperto.in{opacity:1; transform:none}
.pf-aperto-testa{display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:clamp(18px,2.4vw,30px)}
.pf-aperto-testa h2{margin:0; font-size:clamp(20px,3.2vw,32px); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--carta)}
.pf-aperto-testa p{margin:8px 0 0; color:var(--tenue); font-size:15px; max-width:52ch}
/* la scheda aperta resta segnata: è il filo che riporta indietro */
.scheda--aperta .pf-figura{outline:1px solid rgba(188,170,52,.55); outline-offset:3px}
.scheda--tornata .pf-figura{animation:tornata 1.4s ease}
@keyframes tornata{
  0%,100%{outline:1px solid rgba(188,170,52,0); outline-offset:3px}
  25%,60%{outline:2px solid rgba(188,170,52,.9); outline-offset:6px}}
/* il secondo «torna»: chi arriva in fondo scorrendo non deve risalire */
.pf-torna{display:block; margin:clamp(22px,2.8vw,36px) auto 0; font:inherit;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue); background:transparent; cursor:pointer;
  border:1px solid var(--filo); border-radius:999px; padding:11px 22px;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease}
.pf-torna:hover{color:var(--carta); border-color:rgba(246,244,240,.5);
  background:rgba(246,244,240,.06)}

/* Il ventaglio: le carte si sovrappongono e si inclinano di poco, come foto
   appoggiate sul tavolo. Senza il filo d'oro due carte scure sovrapposte su
   fondo scuro diventerebbero una macchia sola: è il bordo che le stacca. */
.pf-aperto .scatti--ventaglio{columns:auto; display:flex; align-items:flex-start;
  justify-content:center; max-width:none; padding:18px 0 34px}
.scatti--ventaglio .pezzo-social{flex:0 0 clamp(148px,17vw,228px);
  margin:0 0 0 calc(-1 * clamp(26px,3.2vw,52px)); cursor:pointer;
  transform:rotate(var(--g,0deg)) translateY(var(--y,0px));
  transform-origin:50% 94%;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.scatti--ventaglio .pezzo-social:first-child{margin-left:0}
.scatti--ventaglio .pezzo-social .pf-verticale{box-shadow:0 18px 40px rgba(0,0,0,.55)}
.scatti--ventaglio .pezzo-social:hover,
.scatti--ventaglio .pezzo-social:focus-visible{
  transform:rotate(0deg) translateY(-16px) scale(1.05); z-index:40 !important}
.scatti--ventaglio .pezzo-social:hover .pf-verticale,
.scatti--ventaglio .pezzo-social:focus-visible .pf-verticale{
  border-color:rgba(188,170,52,.9); box-shadow:0 26px 60px rgba(0,0,0,.7)}
.scatti--ventaglio .pezzo-social:focus-visible{outline:none}
.scatti--ventaglio figcaption{text-align:center; opacity:0;
  transition:opacity .3s ease}
.scatti--ventaglio .pezzo-social:hover figcaption,
.scatti--ventaglio .pezzo-social:focus-visible figcaption{opacity:1}

/* «Ascolta»: si scopre al passaggio, perché il clic non è indovinabile */
.pf-ascolta{position:absolute; left:50%; bottom:12px; transform:translate(-50%,8px);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  background:var(--carta); border-radius:999px; padding:6px 12px;
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease}
.pezzo-social:hover .pf-ascolta,.pezzo-social:focus-visible .pf-ascolta{
  opacity:1; transform:translate(-50%,0)}

/* Il video in portfolio: una scheda con il fotogramma e il tasto, non un
   lettore piantato nella griglia. Si apre dove si aprono i reel. */
.pezzo-video{margin:0 0 clamp(16px,2vw,26px); break-inside:avoid;
  padding:0; border:0; background:none; cursor:pointer; width:100%; text-align:left}
.pezzo-video:focus-visible{outline:none}
.pf-fotogramma{position:relative; display:block; aspect-ratio:9/16;
  overflow:hidden; border-radius:18px; background:var(--ink-2);
  border:1px solid rgba(188,170,52,.42);
  transition:border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.pf-fotogramma--largo{aspect-ratio:16/9; border-radius:12px}
/* un filmato verticale largo quanto la colonna diventa una torre alta mezzo
   schermo: sta nella misura di un telefono, centrato, come i reel */
.pezzo-video--alto{max-width:clamp(200px,22vw,300px); margin-inline:auto}
.pf-fotogramma img{width:100%; height:100%; object-fit:cover; display:block}
.pezzo-video:hover .pf-fotogramma,
.pezzo-video:focus-visible .pf-fotogramma{border-color:rgba(188,170,52,.9)}
/* il tondo del play: dice che si clicca senza bisogno di scritte */
.pf-play{position:absolute; inset:0; margin:auto; width:64px; height:64px;
  border-radius:999px; display:grid; place-items:center;
  background:rgba(4,6,6,.55); border:1px solid rgba(246,244,240,.5);
  color:var(--carta); backdrop-filter:blur(3px);
  transition:transform .3s ease, background-color .3s ease}
.pf-play svg{width:26px; height:26px; margin-left:3px}
.pezzo-video:hover .pf-play{transform:scale(1.1); background:rgba(4,6,6,.75)}
.pezzo-video figcaption{margin-top:10px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tenue)}

/* Il lettore con l'audio: il reel muto serve a sbirciare, questo a guardare */
.pf-lettore{position:fixed; inset:0; z-index:300; display:flex;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,48px);
  gap:clamp(20px,3.4vw,60px);
  background:rgba(4,6,6,.92); backdrop-filter:blur(6px)}
.pf-lettore[hidden]{display:none}
.pf-lettore-centro{display:flex; flex-direction:column; align-items:center;
  gap:14px; max-height:100%}
.pf-lettore video{max-width:min(64vw,440px); max-height:78vh; aspect-ratio:9/16;
  width:auto; height:100%; border-radius:16px;
  border:1px solid rgba(188,170,52,.45); background:#000}
.pf-lettore--largo video{aspect-ratio:16/9; max-width:min(92vw,1080px);
  max-height:76vh; width:100%; height:auto}
.pf-lettore-dida{margin:0; display:flex; gap:14px; align-items:baseline;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tenue)}
.pf-lettore-dida [data-conta]{color:var(--carta)}
/* le frecce stanno ai lati del filmato, non sopra: un reel è stretto e alto,
   ai lati lo spazio c'è sempre */
.pf-lettore-freccia{flex:none; width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(246,244,240,.10); border:1px solid rgba(246,244,240,.55);
  color:var(--carta); box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:border-color .25s ease, background-color .25s ease, transform .25s ease}
.pf-lettore-freccia svg{width:24px; height:24px; stroke-width:2}
.pf-lettore-freccia:hover{border-color:var(--carta);
  background:rgba(246,244,240,.18); color:var(--carta)}
.pf-lettore-freccia:active{background:rgba(246,244,240,.28)}
.pf-lettore-freccia:focus-visible,
.pf-lettore-chiudi:focus-visible{border-radius:999px; outline-offset:4px}
.pf-lettore-freccia[hidden]{display:none}
@media(max-width:700px){
  /* su telefono le frecce rubano larghezza al filmato: si scorre col dito */
  .pf-lettore-freccia{position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
    width:48px; height:48px; background:rgba(4,6,6,.72)}
  .pf-lettore-freccia--prima{left:18px}
  .pf-lettore-freccia--dopo{right:18px}
  .pf-lettore video{max-width:92vw; max-height:72vh}
}
.pf-lettore-chiudi{position:absolute; top:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px);
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(246,244,240,.3);
  color:var(--carta); font-size:26px; line-height:1;
  transition:border-color .25s ease, background-color .25s ease}
.pf-lettore-chiudi:hover{border-color:var(--carta); background:rgba(246,244,240,.18)}

@media(max-width:760px){
  /* sul telefono il ventaglio si trascina di lato, come si scorrono le storie */
  .pf-aperto .scatti--ventaglio{justify-content:flex-start; overflow-x:auto;
    scroll-snap-type:x proximity; padding-inline:2px;
    scrollbar-width:none; -ms-overflow-style:none}
  .pf-aperto .scatti--ventaglio::-webkit-scrollbar{display:none}
  .scatti--ventaglio .pezzo-social{flex-basis:min(58vw,240px); scroll-snap-align:center}
  .scatti--ventaglio .pezzo-social:hover{transform:rotate(var(--g,0deg)) translateY(var(--y,0px))}
}
.pf-aperto .scatti:has(.pezzo-sito){columns:1; max-width:900px}
.pezzo-sito .vai{margin-top:14px}

/* anche la scheda del sito dichiara il formato */
#mestiere-sito .pf-figura{border:1px solid rgba(188,170,52,.34); border-radius:14px}
.scheda:hover .pf-schermo,.scheda:focus-visible .pf-schermo{border-color:rgba(188,170,52,.7)}

/* arrivando a una sezione con un collegamento, il titolo finiva sotto la
   testata fissa: gli si lascia lo spazio della testata */
/* sotto la testata del sito (110) e sotto il selettore dei mestieri (~62) */
.pf .gruppo{scroll-margin-top:calc(var(--gutter) + 172px)}

/* ---------- Avviso cookie ---------- */
.avviso-cookie{
  position:fixed; left:50%; bottom:18px; z-index:900;
  transform:translate(-50%,16px); opacity:0; transition:opacity .35s ease, transform .35s ease;
  display:flex; align-items:center; gap:1.2rem;
  width:min(calc(100% - 32px),680px); padding:.9rem 1.1rem .9rem 1.3rem;
  background:rgba(14,15,17,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.avviso-cookie--visibile{opacity:1; transform:translate(-50%,0)}
.avviso-cookie p{margin:0; font-size:.86rem; line-height:1.5; color:rgba(246,244,240,.82)}
.avviso-cookie p b{color:#fff; font-weight:500}
.avviso-cookie p a{color:var(--gold,#BCAA34); text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.avviso-cookie__ok{
  flex:none; appearance:none; cursor:pointer; font:inherit; font-size:.8rem; font-weight:500;
  letter-spacing:.04em; color:#0c0c0d; background:#F6F4F0; border:0; border-radius:100px;
  padding:.6rem 1.15rem; transition:background .2s ease;
}
.avviso-cookie__ok:hover{background:#fff}
@media(max-width:560px){
  .avviso-cookie{flex-direction:column; align-items:stretch; gap:.8rem; bottom:12px; padding:1rem 1.1rem}
  .avviso-cookie__ok{width:100%}
}

/* ---------- «Un cliente, tutta la comunicazione»: foto + reel + sito insieme ---------- */
.insieme{
  margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto auto; gap:10px;
}
.insieme__tessera{position:relative; overflow:hidden; border-radius:12px; background:#0a0a0a}
.insieme__tessera img, .insieme__tessera video{width:100%; height:100%; object-fit:cover; display:block}
.insieme__tessera--reel{grid-row:1 / span 2; align-self:stretch}
.insieme__tessera--reel video{position:absolute; inset:0}
.insieme__tessera--foto{aspect-ratio:4/5}
.insieme__tessera--sito{aspect-ratio:16/10}
.insieme__tessera--sito img{object-position:top}
.insieme__tag{
  position:absolute; left:10px; top:10px; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(12,12,13,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16); padding:.3rem .6rem; border-radius:100px;
}
.insieme figcaption{
  grid-column:1 / -1; margin-top:.5rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.insieme figcaption b{font-weight:500; color:var(--paper)}
@media(max-width:1000px){ .insieme{max-width:540px} }

/* ---------- Portfolio sul telefono: due schede per riga ----------
   Una scheda sola per riga faceva una pagina di venti schermate; a due per
   riga il portfolio si sfoglia come una griglia. I siti restano a una colonna,
   perché una schermata di sito a metà larghezza non si legge. */
@media(max-width:640px){
  .griglia{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px}
  #mestiere-sito .griglia{grid-template-columns:1fr}
  .scheda{gap:10px}
  .pf-dati h3{font-size:12.5px; letter-spacing:.1em}
  .pf-dati p{font-size:12.5px; margin-top:4px}
  #mestiere-sito .pf-dati h3{font-size:14px}
  #mestiere-sito .pf-dati p{font-size:13.5px}
}

/* ---------- Studio: respiro fra titolo e racconto; la foto larga non eredita il 16/10 ---------- */
.storia .manifesto{margin-bottom:clamp(1.8rem,4vw,3rem)}
.posa.posa--larga{aspect-ratio:auto; display:block}

/* ---------- Servizi sul telefono stretto: le voci a una colonna ---------- */
@media(max-width:480px){ .srv__voci{grid-template-columns:1fr} }

/* ---------- Contatti: la foto dello studio al posto del segnaposto, con il collegamento alla mappa ---------- */
.posa--contatti figcaption{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}
.posa--contatti figcaption span{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(246,244,240,.78)}
.posa--contatti figcaption a{color:var(--carta); font-size:.9rem; font-weight:500; text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:2px}
.posa--contatti figcaption a:hover{color:var(--gold)}

/* ---------- Home: il reel davanti si apre con l'audio al clic (nessun simbolo sopra il video) ---------- */

/* ---------- Portfolio: il lavoro si apre in una finestra sopra la griglia ---------- */
.pf-modale{position:fixed; inset:0; z-index:200; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:rgba(4,6,6,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:clamp(16px,4vh,48px) clamp(12px,3vw,40px);
  opacity:0; transition:opacity .3s ease}
.pf-modale.in{opacity:1}
.pf-modale .pf-aperto{
  max-width:1180px; margin:0 auto; grid-column:auto;
  background:var(--ink); border:1px solid var(--filo); border-radius:18px;
  padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px) clamp(26px,3vw,40px);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.pf-modale.in .pf-aperto{opacity:1; transform:none}
.pf-modale .pf-aperto-testa{position:sticky; top:calc(-1 * clamp(22px,3vw,40px)); z-index:5;
  margin:calc(-1 * clamp(22px,3vw,40px)) calc(-1 * clamp(20px,3vw,44px)) clamp(18px,2.4vw,30px);
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,44px) 16px;
  background:linear-gradient(to bottom, var(--ink) 78%, transparent);
  border-radius:18px 18px 0 0}
/* niente overflow:hidden sul body: con overflow-x:hidden sull'html fa saltare lo scroll a zero.
   Il fondo resta fermo grazie a overscroll-behavior:contain sulla finestra. */
/* il lettore con audio sta sopra la finestra */
.pf-lettore{z-index:300}
@media(max-width:700px){
  .pf-modale{padding:0}
  .pf-modale .pf-aperto{border-radius:0; border:0; min-height:100%; padding-top:18px}
  .pf-modale .pf-aperto-testa{top:-18px; margin-top:-18px; padding-top:18px; border-radius:0}
}
/* nella finestra il «torna su» non serve: c'è Chiudi. E un cliente con una
   foto sola non la mostra piccola in un terzo di riga: la foto prende il centro */
.pf-modale .pf-torna{display:none}
.pf-modale .scatti:has(> .pezzo:only-child){columns:1; max-width:min(100%,720px); margin:0 auto}
.pf-modale .scatti:has(> .pezzo:only-child) .pezzo img{width:100%}

/* ---------- Modulo contatti: esca per i robot ed esito dell'invio ---------- */
.esca{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.modulo-esito{
  --segno:#3FB27F;                      /* verde conferma */
  margin:1.6rem 0 0; padding:1.15rem 1.35rem;
  display:flex; align-items:center; gap:1rem;
  border-radius:14px; border:1px solid color-mix(in srgb, var(--segno) 55%, transparent);
  background:linear-gradient(to right, color-mix(in srgb, var(--segno) 16%, transparent), color-mix(in srgb, var(--segno) 6%, transparent));
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 14px 40px -18px color-mix(in srgb, var(--segno) 70%, transparent);
  color:var(--paper); font-size:1.02rem; line-height:1.5;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.modulo-esito.in{opacity:1; transform:none}
.modulo-esito__segno{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:#08120d;
  background:var(--segno);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--segno) 18%, transparent);
}
.modulo-esito__segno svg{width:21px; height:21px}
/* la spunta si disegna, non compare */
.modulo-esito.in .modulo-esito__segno svg path{
  stroke-dasharray:32; stroke-dashoffset:32;
  animation:tira .45s .15s cubic-bezier(.3,.8,.3,1) forwards;
}
@keyframes tira{to{stroke-dashoffset:0}}
.modulo-esito__testo b{color:#fff; font-weight:600}
.modulo-esito--errore{--segno:#D2564E}
.modulo-esito--errore .modulo-esito__segno{color:#fff}
@media (prefers-reduced-motion:reduce){
  .modulo-esito{transition:none}
  .modulo-esito.in .modulo-esito__segno svg path{animation:none; stroke-dashoffset:0}
}
@media(max-width:560px){
  .modulo-esito{gap:.85rem; padding:1rem 1.05rem; font-size:.96rem}
  .modulo-esito__segno{width:34px; height:34px}
  .modulo-esito__segno svg{width:18px; height:18px}
}
.btn[disabled]{opacity:.6; cursor:wait}

/* ==========================================================================
   L'apertura — la fascia col montaggio dello studio

   Sta sopra l'hero e occupa tutta la larghezza. Il rapporto e quello del
   girato, 1920:822, cosi non si taglia niente; sotto i 640px si stringe a
   16:10, perche una fascia 21:9 su un telefono e alta quattro dita e non si
   capisce cosa sia.

   Niente .sviluppa qui: una maschera sopra un filmato in riproduzione lo fa
   ridisegnare a ogni fotogramma, ed e gia costata ventuno fotogrammi al
   secondo una volta. La comparsa e una dissolvenza di opacita, che sta sul
   compositore e non costa niente.
   ====================================================================== */
.film{
  position:relative;
  width:100%;
  background:var(--ink);
  line-height:0;             /* niente spazio fantasma sotto il video */
  overflow:hidden;
}
.film__video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1920 / 822;
  object-fit:cover;
  opacity:0;
  animation:film-entra 1.1s ease .15s forwards;
}
@keyframes film-entra{ to{ opacity:1 } }

/* Il velo in cima.
   L'intestazione e trasparente e galleggia sul filmato, ma il montaggio per
   meta dei suoi ventitre secondi ha il cielo o un piatto bianco proprio li:
   misurato, la zona sotto il marchio arriva a 255 su 255 intorno all'undicesimo
   secondo. Un marchio bianco su bianco non si vede. Questo velo scende solo
   sulla striscia che serve e si dissolve subito, cosi il filmato resta intero
   dove conta. */
.film::before{
  content:''; position:absolute; left:0; right:0; top:0; height:190px;
  background:linear-gradient(180deg, rgba(4,6,6,.74) 0%, rgba(4,6,6,.42) 48%, transparent 100%);
  pointer-events:none; z-index:1;
}

/* il raccordo col nero dell'hero, perche non ci sia uno stacco netto */
.film::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:14%;
  background:linear-gradient(180deg, transparent, var(--ink));
  pointer-events:none;
}

@media (max-width:640px){
  .film__video{ aspect-ratio:16 / 10 }
}

/* Chi ha chiesto meno movimento non se lo ritrova addosso: resta la
   copertina, e i comandi per farlo partire a mano. */
@media (prefers-reduced-motion: reduce){
  .film__video{ opacity:1; animation:none }
}

/* ==========================================================================
   L'apertura a colori

   Il bianco e nero e lo scurimento servivano a due cose che non ci sono piu:
   tenere il filmato indietro rispetto alle citazioni, e dare alla parola
   d'argento il grigio da cui nasceva. Tolte le citazioni, il filmato torna
   quello che e: il lavoro dello studio, guardato per quello che e.

   Il testo resta leggibile lo stesso: il claim sta in basso, dove .hero-sfuma
   arriva gia quasi al nero pieno. Quello che tolgo e l'alone al centro, che
   serviva a staccare la parola e adesso spegnerebbe il filmato per niente.
   ====================================================================== */
.hero-bg video,
.hero-bg img{
  filter:none;
  opacity:1;
}

.hero-sfuma{
  background:linear-gradient(180deg,
    rgba(4,6,6,.34) 0%,
    rgba(4,6,6,0) 22%,
    rgba(4,6,6,0) 58%,
    rgba(4,6,6,.86) 86%,
    #040606 100%);
}

/* ==========================================================================
   L'hero senza filmato

   Il montaggio e fatto di tre riquadri affiancati: ritagliarlo non lo
   rimpicciolisce, gli taglia via i riquadri esterni. Misurato — l'hero a
   tutta altezza ne perdeva il 23% della larghezza su un monitor e il 79% su
   un telefono, cioe restava quasi solo il riquadro centrale. Per questo il
   filmato vive nella fascia, dove sta nella sua proporzione vera, e qui
   resta la frase.

   Senza video l'hero non ha piu motivo di occupare tutto lo schermo: sarebbe
   una schermata vuota fra il filmato e i lavori. Si stringe su quello che
   contiene.
   ====================================================================== */
.hero{
  min-height:0;
  padding-block:clamp(48px,7vw,104px) clamp(40px,6vw,88px);
}
.hero-sfuma{display:none}

/* La fascia sta attaccata: niente cornice nera

   Ereditava il respiro che il foglio da a tutte le sezioni — sessanta pixel
   sopra e sessanta sotto — e il filmato finiva per galleggiare in mezzo al
   nero invece di aprire la pagina. Un'apertura comincia dal bordo.
   Anche la dissolvenza in basso si accorcia: serviva a raccordare col nero
   dell'hero quando sotto c'era un altro filmato, adesso basta un accenno. */
.film{ padding:0; margin:0 }
.film::after{ height:7% }

/* La frase sale verso il filmato: senza video dietro non deve piu tenersi
   a distanza da niente. */
.hero{
  padding-block:clamp(26px,3.4vw,52px) clamp(40px,6vw,88px);
}