/* Content.O Studio — stile del sito pubblico (font ospitati localmente) */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-latin-800-normal.woff2) format("woff2")}

:root{
  --black:#090909;
  --paper:#f0eee8;
  --paper2:#e4e1d9;
  --ink:#101010;
  --red:#ff4a3d;
  --red-ink:#c4291d;
  --red-display:#e8392c;  /* rosso dei titoli grandi su fondo chiaro: contrasto ≥ 3:1 */      /* rosso con contrasto adeguato su fondo chiaro per testi piccoli */
  --lime:#d5ff36;
  --muted:#a3a3a3;        /* testo secondario su nero: contrasto ≥ 7:1 */
  --muted-2:#8f8f8f;      /* etichette su nero: contrasto ≥ 5.5:1 */
  --muted-light:#55524c;  /* testo secondario su carta: contrasto ≥ 6.5:1 */
  --line-dark:rgba(255,255,255,.16);
  --line-light:rgba(16,16,16,.16);
  --pad:clamp(16px,4vw,68px);
  --topbar-h:72px;
  --display:"Manrope","Arial Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"DM Sans",Arial,sans-serif;font-size:16px;line-height:1.5;background:var(--black);color:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--lime);color:#000}
[id]{scroll-margin-top:var(--topbar-h)}
main:focus{outline:none}

/* Focus sempre visibile per chi naviga da tastiera */
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.manifesto :focus-visible,.work :focus-visible,.process-shell :focus-visible,.statement :focus-visible,.page-light :focus-visible,.legal :focus-visible{outline-color:var(--ink)}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--pad);top:-100px;z-index:200;background:var(--lime);color:#000;padding:12px 16px;font-weight:700}
.skip-link:focus{top:12px}

.cursor-dot{display:none}
.has-cursor .cursor-dot{
  display:block;position:fixed;left:0;top:0;z-index:9999;
  width:10px;height:10px;border-radius:50%;
  background:var(--lime);pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .2s,height .2s;opacity:0;
}
.has-cursor .cursor-dot.is-active{opacity:1}
.has-cursor .cursor-dot.is-hover{width:24px;height:24px}

/* ---------- HEADER ---------- */
.topbar{
  position:fixed;z-index:100;inset:0 0 auto 0;height:var(--topbar-h);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:0 var(--pad);
  background:rgba(9,9,9,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
}
@supports (backdrop-filter:blur(10px)){.topbar{background:rgba(9,9,9,.78);backdrop-filter:blur(14px)}}
.brand{display:block;flex:0 0 auto}
.brand img{width:150px;height:auto}
.site-nav ul{display:flex;gap:26px;align-items:center;font-size:14px}
.site-nav a{display:inline-block;padding:8px 0;color:#c8c8c8}
.site-nav a:hover{color:#fff}
.site-nav .pill{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:10px 16px;color:#fff}
.site-nav .pill:hover{background:var(--lime);color:#000;border-color:var(--lime)}
.menu-toggle{display:none;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 14px;cursor:pointer;font-size:14px}
.menu-toggle-bars{position:relative;width:18px;height:10px}
.menu-toggle-bars span{position:absolute;left:0;right:0;height:2px;background:#fff;transition:transform .25s}
.menu-toggle-bars span:first-child{top:0}.menu-toggle-bars span:last-child{bottom:0}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:last-child{transform:translateY(-4px) rotate(-45deg)}

.kicker{margin:0 0 18px;font:800 12px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.kicker.dark{color:var(--muted-light)}
.kicker a{text-decoration:underline;text-underline-offset:3px}
.text-link{display:inline-flex;gap:8px;border-bottom:1px solid currentColor;padding-bottom:3px;font-weight:700}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:5vw;
  padding:calc(var(--topbar-h) + 40px) var(--pad) 65px;background:var(--black);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent);
}
.hero-asterisk{position:absolute;right:-1vw;top:2vh;font:800 min(35vw,580px)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);transform:rotate(14deg);pointer-events:none}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero h1{margin:0;font:800 clamp(64px,10vw,165px)/.79 var(--display);letter-spacing:-.082em;text-transform:uppercase}
.h1-line{display:block}
.h1-line.accent{color:var(--lime)}
.hero-lead{max-width:610px;color:var(--muted);line-height:1.7;font-size:clamp(16px,1.1vw,18px);margin-top:28px}
.hero-link{width:min(420px,100%);margin-top:32px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:18px 0}
.hero-link span:last-child{font-size:22px;color:var(--lime)}
.hero-photo{position:relative;z-index:2;margin:0;width:min(36vw,540px);justify-self:end}
.hero-photo img{width:100%;aspect-ratio:.75;object-fit:cover;filter:contrast(1.08)}
.hero-photo figcaption{display:flex;justify-content:space-between;margin-top:10px;font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- MANIFESTO ---------- */
.manifesto{min-height:90vh;padding:120px var(--pad);background:var(--paper);color:var(--ink);display:grid;grid-template-columns:100px 1fr .45fr;gap:4vw;align-items:center}
.manifesto-index{font:800 72px var(--display);letter-spacing:-.07em;color:#8a8578}
.manifesto h2{margin:0;font:800 clamp(52px,7vw,116px)/.86 var(--display);letter-spacing:-.07em;text-transform:uppercase}
.manifesto h2 em{font-style:normal;color:var(--red-display)}
.manifesto-copy{color:var(--muted-light);line-height:1.75;align-self:end;margin:0}

/* ---------- STORIE ORIZZONTALI (servizi, processo) ---------- */
.hstory{position:relative}
.services-shell{background:#0b0b0b}
.process-shell{background:var(--paper2);color:var(--ink)}
.section-bar{
  height:56px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:0 var(--pad);border-bottom:1px solid var(--line-dark);background:rgba(10,10,10,.92);
}
.section-bar.light{background:rgba(228,225,217,.95);color:#2b2b2b;border-color:var(--line-light)}
.section-bar-title{margin:0;font:800 12px var(--display);letter-spacing:.16em;text-transform:uppercase}
.section-progress{display:flex;align-items:center;gap:10px;font:800 12px var(--display)}
.section-progress b{color:var(--lime)}
.section-progress i{width:150px;height:2px;background:#333;overflow:hidden}
.section-progress i span{display:block;width:25%;height:100%;background:var(--lime)}
.section-progress em{font-style:normal;color:var(--muted-2)}
.dark-progress b{color:#a8221a}
.dark-progress em{color:var(--muted-light)}
.dark-progress i{background:#cbc7bd}.dark-progress i span{background:var(--red)}
.hstory-panel{padding:90px var(--pad)}

/* Desktop con animazioni consentite: scorrimento orizzontale guidato dallo scroll (attivato da JS) */
.hstory-on .hstory{height:calc(var(--panels,4) * 100vh)}
.hstory-on .hstory-sticky{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:hidden;display:flex;flex-direction:column}
.hstory-on .hstory-viewport{flex:1;overflow:hidden;min-height:0}
.hstory-on .hstory-track{height:100%;width:calc(var(--panels,4) * 100%);display:flex;will-change:transform}
.hstory-on .hstory-panel{flex:0 0 calc(100% / var(--panels,4));height:100%;padding-top:30px;padding-bottom:30px}
.section-progress{visibility:hidden}
.hstory-on .section-progress{visibility:visible}

.service-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center}
.service-social{background:#101010}
.service-photo{background:#191919}
.service-web{background:#0e1715}
.service-offline{background:#20120f}
.service-copy{max-width:650px;min-width:0}
.big-index{font:800 54px var(--display);color:#6f6f6f;letter-spacing:-.06em}
.service-copy h3{margin:12px 0 24px;font:800 clamp(48px,6.5vw,108px)/.83 var(--display);letter-spacing:-.072em;text-transform:uppercase}
.service-copy h3 em{font-style:normal;color:var(--lime)}
.service-photo .service-copy h3 em{color:#f4f4f4}
.service-web .service-copy h3 em{color:#8ef0b0}
.service-offline .service-copy h3 em{color:#ff8377}
.service-copy>p{max-width:550px;color:var(--muted);line-height:1.7}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.tag-row li{border:1px solid #4a4a4a;border-radius:999px;padding:6px 12px;font-size:13px;color:#c4c4c4}
.service-visual{width:min(50vw,760px);height:min(60vh,600px);justify-self:center;position:relative}

.social-visual{perspective:1000px}
.phone{position:absolute;width:230px;height:440px;border-radius:38px;padding:12px;background:#eeeeeb;box-shadow:0 35px 80px rgba(0,0,0,.36)}
.phone div{height:76%;border-radius:28px;background:linear-gradient(145deg,#d5ff36,#ff4a3d)}
.phone span{display:block;margin:24px 12px 0;color:#111;font:800 16px var(--display)}
.phone-a{left:17%;top:6%;transform:rotate(-9deg)}
.phone-b{right:16%;bottom:2%;transform:rotate(9deg)}
.phone-b div{background:linear-gradient(145deg,#202020,#b9b9b9)}
.float-label{position:absolute;right:0;top:14%;font:700 11px var(--display);letter-spacing:.14em;color:var(--muted-2)}
.photo-visual{overflow:hidden}
.photo-visual img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.photo-caption{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;font:800 12px var(--display);letter-spacing:.12em}
.web-visual{display:grid;place-items:center}
.browser{width:90%;height:78%;background:#f4f4f0;padding:12px;border-radius:18px;transform:rotate(-3deg);box-shadow:0 30px 80px rgba(0,0,0,.3)}
.browser-top{height:30px;display:flex;align-items:center;gap:5px;color:#555;font-size:11px}
.browser-top i{width:6px;height:6px;border-radius:50%;background:#c8c8c5}
.browser-top span{margin-left:8px}
.browser-body{height:calc(100% - 30px);background:#0e1715;color:#fff;padding:26px;display:flex;flex-direction:column}
.browser-body small{color:#8ef0b0;font:800 11px var(--display);letter-spacing:.14em}
.browser-body strong{margin:auto 0;font:800 clamp(44px,5vw,80px)/.83 var(--display);letter-spacing:-.07em}
.browser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.browser-grid span{height:46px;background:#8ef0b0}
.print-visual{display:grid;place-items:center}
.poster{position:absolute;width:46%;height:78%;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.poster-a{left:14%;top:7%;background:#f0eee8;color:#101010;transform:rotate(-7deg)}
.poster-b{right:14%;bottom:5%;background:#ff4a3d;color:#101010;transform:rotate(8deg)}
.poster span{font:800 11px var(--display);letter-spacing:.14em}
.poster b{font:800 clamp(42px,4.5vw,74px)/.8 var(--display);letter-spacing:-.07em}
.poster-b b{font-size:130px}

.process-panel{display:grid;grid-template-columns:100px 1fr .45fr;gap:4vw;align-items:center}
.process-index{font:800 68px var(--display);color:#7d786c;letter-spacing:-.07em}
.process-panel h3{margin:0;font:800 clamp(52px,7vw,118px)/.84 var(--display);letter-spacing:-.075em;text-transform:uppercase}
.process-panel h3 em{font-style:normal;color:var(--red-display)}
.process-panel>div>p:last-child{max-width:580px;color:var(--muted-light);line-height:1.7}
.process-symbol{font:800 min(20vw,300px) var(--display);color:#cfc9bd;text-align:center}
.process-panel:not(:last-child){border-bottom:1px solid var(--line-light)}
.hstory-on .process-panel{border-bottom:0}

/* ---------- PORTFOLIO ---------- */
.work{background:var(--paper);color:var(--ink);padding:130px var(--pad)}
.work-head{max-width:1200px;margin-bottom:60px}
.work-head h2{margin:0;font:800 clamp(52px,7.5vw,120px)/.84 var(--display);letter-spacing:-.075em;text-transform:uppercase}
.work-head h2 span{color:var(--red-display)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pf-card a{display:block;background:#fff;border:1px solid var(--line-light);padding:12px;height:100%;transition:transform .3s ease}
.pf-card a:hover{transform:translateY(-6px)}
.pf-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#ddd9d0}
.pf-media img{width:100%;height:100%;object-fit:cover}
.pf-meta{display:flex;flex-direction:column;gap:6px;padding:16px 4px 6px}
.pf-cat{font:800 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light)}
.pf-title{font:800 26px/1.05 var(--display);letter-spacing:-.03em}
.pf-summary{color:var(--muted-light);font-size:15px}
.work-more{margin:40px 0 0}

/* ---------- TEAM ---------- */
.team{background:#0b0b0b;padding:130px var(--pad)}
.team-head{margin-bottom:70px}
.team-head h2{margin:0;font:800 clamp(52px,7vw,115px)/.84 var(--display);letter-spacing:-.075em;text-transform:uppercase}
.team-head h2 span{color:var(--lime)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.person{min-height:720px;position:relative;overflow:hidden;background:#151515}
.person-light{background:#ddd9d0;color:#111}
.person-photo{position:absolute;inset:0}
.person-photo img{width:100%;height:100%;object-fit:cover;opacity:.72}
.person-light .person-photo img{opacity:.62}
.person::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),transparent 58%)}
.person-light::after{background:linear-gradient(to top,rgba(221,217,208,.97),transparent 58%)}
.person-copy{position:absolute;z-index:2;left:26px;right:26px;bottom:25px}
.person-copy>span{font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#b5b5b5}
.person-light .person-copy>span{color:var(--muted-light)}
.person h3{margin:14px 0 15px;font:800 clamp(40px,4.5vw,74px)/.85 var(--display);letter-spacing:-.06em;text-transform:uppercase}
.person p{max-width:540px;color:#c4c4c4;line-height:1.6;margin:0}
.person-light p{color:#45423d}

/* ---------- STATEMENT ---------- */
.statement{min-height:100vh;background:var(--lime);color:#111;padding:100px var(--pad);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.statement-star{position:absolute;right:-6vw;top:-10vh;width:min(48vw,700px);opacity:.08;animation:spin 26s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.statement-text{margin:0;position:relative;z-index:2}
.statement-small{display:block;margin:0 0 8px;font:800 13px var(--display);letter-spacing:.18em;text-transform:uppercase}
.statement-line{display:block;font:800 clamp(56px,10vw,165px)/.82 var(--display);letter-spacing:-.078em;text-transform:uppercase}
.statement-line.outline{color:transparent;-webkit-text-stroke:1.5px rgba(17,17,17,.7)}
.statement-line.accent{color:var(--red-ink)}
@supports not (-webkit-text-stroke:1px #000){.statement-line.outline{color:#111}}

/* ---------- CONTATTI ---------- */
.contact{padding:120px var(--pad) 90px;background:#090909;color:#fff}
.contact-head h2{margin:0;font:800 clamp(56px,9vw,150px)/.82 var(--display);letter-spacing:-.075em;text-transform:uppercase}
.contact-head h2 span{color:var(--lime)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;margin-top:75px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px;align-content:start}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-wide,.form-status,.contact-form button{grid-column:1/-1}
.field label{font:700 13px var(--display);letter-spacing:.06em;color:#d0d0d0}
.field .req,.field .opt{font-weight:500;color:var(--muted-2);letter-spacing:0}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;border:0;border-bottom:1px solid #5a5a5a;background:transparent;color:#fff;
  padding:12px 0;border-radius:0;font-size:17px;
}
.contact-form textarea{resize:vertical;min-height:130px;line-height:1.5}
.contact-form select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d5ff36' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:24px}
.contact-form select option{color:#111;background:#fff}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-bottom-color:var(--lime)}
.contact-form [aria-invalid="true"]{border-bottom-color:#ff8377}
.field-error{margin:0;color:#ff9c93;font-size:14px}
.form-alert{margin:0;padding:14px 16px;border:1px solid;font-size:15px;line-height:1.5}
.form-alert.is-ok{border-color:var(--lime);color:var(--lime)}
.form-alert.is-error{border-color:#ff8377;color:#ffb3ac}
.form-privacy{margin:0;color:var(--muted);font-size:14px}
.form-privacy a{text-decoration:underline;text-underline-offset:3px}
.contact-form button{
  margin-top:8px;background:var(--lime);color:#111;border:0;min-height:58px;padding:0 18px;
  display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:17px;cursor:pointer;
}
.contact-form button b{font-size:24px}
.contact-form button:hover{background:#e3ff7a}
.contact-form button[disabled]{opacity:.7;cursor:progress}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-info{border-top:1px solid #333;align-self:start}
.contact-info>div{padding:24px 0;border-bottom:1px solid #333}
.info-label{margin:0 0 8px;color:var(--muted-2);font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase}
.contact-info a,.contact-info p:not(.info-label){font-size:18px;margin:0}
.contact-info a:hover{color:var(--lime)}

/* ---------- FOOTER ---------- */
.site-footer{background:#090909;color:#fff;padding:0 var(--pad) 32px}
.footer-top{border-top:1px solid #2a2a2a;padding-top:32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.footer-top img{width:190px}
.footer-contacts{display:flex;flex-wrap:wrap;gap:8px 24px;color:#c8c8c8;font-size:15px}
.footer-contacts a:hover,.footer-social a:hover,.footer-legal a:hover{color:var(--lime)}
.footer-social{display:flex;flex-wrap:wrap;gap:16px;font-size:15px}
.footer-legal{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;color:var(--muted-2);font-size:13px}
.footer-legal p{margin:0;max-width:900px}
.footer-legal ul{display:flex;gap:20px}
.footer-legal a,.link-button{text-decoration:underline;text-underline-offset:3px}
.link-button{background:none;border:0;padding:0;color:inherit;cursor:pointer;font-size:inherit}

/* ---------- PAGINE INTERNE ---------- */
.page-head{padding:calc(var(--topbar-h) + 80px) var(--pad) 50px;background:var(--black)}
.page-head h1{margin:0;font:800 clamp(48px,8vw,120px)/.86 var(--display);letter-spacing:-.07em;text-transform:uppercase;overflow-wrap:anywhere}
.page-head h1 span{color:var(--lime)}
.work-page{padding-top:70px}
.project-summary{max-width:720px;color:var(--muted);font-size:19px;line-height:1.6;margin:26px 0 0}
.project-cover{margin:0;padding:0 var(--pad)}
.project-cover img{width:100%;max-height:85vh;object-fit:cover}
.project-body{max-width:760px;padding:60px var(--pad);font-size:18px;line-height:1.75;color:#ddd}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 var(--pad)}
.project-gallery figure{margin:0}
.project-back{padding:50px var(--pad) 80px;margin:0}
.legal{background:var(--paper);color:var(--ink)}
.legal .page-head{background:var(--black);color:#fff}
.legal .page-head h1{font-size:clamp(42px,6vw,90px)}
.legal-date{color:var(--muted);margin:22px 0 0}
.legal-body{max-width:820px;padding:60px var(--pad) 90px;font-size:17px;line-height:1.75}
.legal-body h2{font:800 28px/1.15 var(--display);letter-spacing:-.02em;margin:46px 0 14px}
.legal-body h3{font:800 21px/1.2 var(--display);margin:30px 0 10px}
.legal-body ul{list-style:disc;padding-left:22px}
.legal-body li{margin:6px 0}
.legal-body a{color:var(--red-ink);text-decoration:underline;text-underline-offset:3px}
.error-page{min-height:80vh;padding:calc(var(--topbar-h) + 90px) var(--pad) 90px}
.error-page h1{margin:0 0 20px;font:800 clamp(46px,7vw,110px)/.88 var(--display);letter-spacing:-.06em;text-transform:uppercase}
.error-page>p:not(.kicker){max-width:640px;color:var(--muted);font-size:18px}
.error-page .form-alert{max-width:720px;margin-top:20px}
.error-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px}

/* ---------- COMPARSA AL SCROLL (solo elementi fuori schermo, nessuno sfarfallio) ---------- */
.reveal-ready .reveal.is-pending{opacity:0;transform:translateY(28px)}
.reveal-ready .reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  :root{--topbar-h:64px}
  .brand img{width:130px}
  .menu-toggle{display:inline-flex}
  .site-nav{
    position:fixed;z-index:90;left:0;right:0;top:var(--topbar-h);
    max-height:calc(100vh - var(--topbar-h));overflow:auto;
    background:#0a0a0a;border-bottom:1px solid #2a2a2a;padding:24px var(--pad) 30px;
    display:none;
  }
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:6px;font-size:22px}
  .site-nav a{padding:10px 0}
  .site-nav .pill{margin-top:10px}
  .hero{grid-template-columns:1fr}
  .hero-photo{width:min(72vw,500px);justify-self:end}
  .manifesto{grid-template-columns:70px 1fr}.manifesto-copy{grid-column:2}
  .service-panel{grid-template-columns:1fr}
  .service-visual{width:min(90vw,700px);height:520px}
  .process-panel{grid-template-columns:70px 1fr;min-height:0}
  .process-symbol{grid-column:2;font-size:30vw}
  .pf-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:650px){
  .hero{padding-top:calc(var(--topbar-h) + 28px)}
  .hero h1{font-size:clamp(56px,18vw,95px)}
  .hero-photo{width:86vw}
  .manifesto{grid-template-columns:1fr;padding-top:90px;padding-bottom:90px;min-height:0}
  .manifesto-index,.manifesto-copy{grid-column:1}
  .manifesto h2{font-size:clamp(44px,14vw,82px)}
  .hstory-panel{padding-top:70px;padding-bottom:70px}
  .service-copy h3{font-size:clamp(44px,14vw,82px)}
  .service-visual{height:420px;width:100%}
  .phone{width:160px;height:310px}
  .phone-a{left:2%}.phone-b{right:2%}
  .poster-b b{font-size:90px}
  .work{padding-top:90px;padding-bottom:90px}
  .pf-grid{grid-template-columns:1fr}
  .process-panel{grid-template-columns:1fr}
  .process-index,.process-symbol{grid-column:1}
  .process-symbol{font-size:120px;text-align:left}
  .process-panel h3{font-size:clamp(44px,14vw,84px)}
  .team{padding-top:90px;padding-bottom:90px}
  .person{min-height:580px}
  .statement{min-height:70vh}
  .statement-line{font-size:clamp(46px,15vw,90px)}
  .contact-form{grid-template-columns:1fr}
  .project-gallery{grid-template-columns:1fr}
  .footer-legal{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .pf-card a:hover{transform:none}
}

/* ---------- Consenso (presente solo se i tracciamenti facoltativi sono attivi) ---------- */
.consent{position:fixed;z-index:300;left:var(--pad);right:var(--pad);bottom:16px;max-width:560px;background:#fff;color:#111;padding:20px;border:2px solid #111;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.consent p{margin:0 0 12px;font-size:15px;line-height:1.5}
.consent .consent-title{font:800 18px var(--display)}
.consent a{text-decoration:underline}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-actions button{flex:1 1 140px;min-height:46px;border:2px solid #111;background:#fff;color:#111;font-weight:700;cursor:pointer}
.consent-actions button[data-c="yes"]{background:#111;color:#fff}
.consent :focus-visible{outline:3px solid #111;outline-offset:2px}
.consent-current{margin-top:12px!important;color:#55524c}

/* ---------- Pagina provvisoria pre-lancio ---------- */
.holding-contacts{display:grid;gap:18px;margin-top:34px;max-width:640px}
.holding-contacts li{display:flex;flex-direction:column;gap:4px;border-top:1px solid #333;padding-top:14px;font-size:20px}
.holding-contacts a:hover{color:var(--lime)}
.footer-credit{margin:0}
.footer-credit a{text-decoration:underline;text-underline-offset:3px}

/* ---------- FILM: dalla galleria allo studio (sopra la hero) ---------- */
/* La sezione è alta: lo scorrimento naturale della pagina fa avanzare il film nello stage fisso (sticky). */
.studio-film{position:relative;height:360vh;height:360svh;background:var(--black)}   /* desktop 16:9: percorso accorciato (386 di 601 fotogrammi sorgente) */
@media (orientation:portrait) and (max-width:1024px){.studio-film{height:560vh;height:560svh}}   /* smartphone 9:16: invariato (stessa regola di scelta della sequenza nello script) */
.sf-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--black);isolation:isolate}
.sf-poster,.sf-end,.sf-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.sf-poster img,.sf-end img{width:100%;height:100%;object-fit:cover}
.sf-end{display:none}
.sf-stage canvas{display:block;opacity:0;transition:opacity .4s ease}
.studio-film.sf-ready canvas{opacity:1}
.sf-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(9,9,9,.78) 0,rgba(9,9,9,.25) 34%,rgba(9,9,9,0) 55%),
             linear-gradient(to bottom,rgba(9,9,9,.55) 0,rgba(9,9,9,0) calc(var(--topbar-h) + 40px))}
.sf-captions{position:absolute;left:var(--pad);bottom:clamp(88px,15vh,150px);width:min(560px,calc(100% - 2*var(--pad)));min-height:7.5em}
.sf-cap{position:absolute;left:0;bottom:0;margin:0;font:800 clamp(30px,3.6vw,58px)/1 var(--display);letter-spacing:-.045em;
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45);opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.sf-cap.is-on{opacity:1;transform:none}
.sf-kicker{display:block;margin-bottom:14px;font:500 12px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.sf-skip{position:absolute;right:var(--pad);bottom:clamp(30px,5vh,48px);display:inline-flex;gap:10px;align-items:center;
  padding:12px 18px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(9,9,9,.45);color:#fff;font-size:14px}
.sf-skip:hover,.sf-skip:focus-visible{background:#fff;color:var(--ink)}
.sf-skip span{color:var(--lime)}
.sf-skip:hover span,.sf-skip:focus-visible span{color:var(--ink)}
.sf-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.sf-progress i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.hero{scroll-margin-top:0}
@media (max-width:650px){
  .sf-captions{bottom:104px}
  .sf-cap{font-size:clamp(30px,8.6vw,40px)}
  .sf-skip{left:var(--pad);right:auto;bottom:36px;padding:11px 16px}
}
/* Composizione statica: movimento ridotto, browser senza le API necessarie (classe aggiunta dallo script) e senza JS (nojs.css) */
.studio-film.sf-static{height:auto}
.studio-film.sf-static .sf-stage{position:relative}
.studio-film.sf-static .sf-poster,.studio-film.sf-static canvas,.studio-film.sf-static .sf-progress,.studio-film.sf-static .sf-cap{display:none}
.studio-film.sf-static .sf-end,.studio-film.sf-static .sf-cap-last{display:block;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .studio-film{height:auto}
  .sf-stage{position:relative}
  .sf-poster,.sf-stage canvas,.sf-progress,.sf-cap{display:none}
  .sf-end,.sf-cap-last{display:block;opacity:1;transform:none}
}