/* ============================================================
   NAUB — Not An Usual Brand
   Foglio di stile principale
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F2EC;
  --ink:#16181C;
  --muted:#6E7178;
  --accent:#AD5A2B;
  --accent-ink:#FFFFFF;
  --accent-2:#16181C;
  --accent-2-ink:#FFFFFF;
  --btn-accent:#39FF14;
  --btn-accent-ink:#16181C;
  --line:rgba(22,24,28,0.10);
  --line-strong:rgba(22,24,28,0.18);
  --shadow:0 24px 60px -30px rgba(22,24,28,0.28);
  --radius:16px;
  --sans:'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:'Fraunces', Georgia, serif;
  --heading:'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Il sito resta sempre chiaro: nessuna modalità scura automatica, a prescindere dal tema di sistema del visitatore. */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
[hidden]{display:none!important;}
::selection{background:var(--accent);color:var(--accent-ink);}

.wrap{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}
h1,h2,h3{
  font-family:var(--heading);
  font-weight:800;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  letter-spacing:0;
  text-transform:uppercase;
  overflow-wrap:break-word;
}
h2{font-size:clamp(2.3rem,1.4rem + 3.4vw,3.6rem);font-weight:800;}
h3{font-size:1.5rem;font-weight:800;}
p{margin:0;}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--accent);
  display:inline-block;
}
.muted{color:var(--muted);}
.section{padding-block:100px;}
.section-head{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:52px;
  max-width:640px;
}
.btn{
  font-family:var(--mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 26px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.btn:hover{transform:translateY(-2px) scale(1.03);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn-primary{background:var(--btn-accent);color:var(--btn-accent-ink);}
.btn-primary:hover{box-shadow:var(--shadow);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-block{width:100%;min-width:0;white-space:normal;}
.btn-light{background:#fff;color:var(--ink);}
.btn-light:hover{box-shadow:0 24px 60px -30px rgba(0,0,0,0.6);}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}
.brand-logo{height:36px;width:auto;display:block;}
.brand-mark{
  width:32px;height:32px;
  border-radius:8px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.brand-mark svg{width:16px;height:16px;}
.brand-lockup{display:flex;flex-direction:column;gap:1px;line-height:1;}
.brand-word{
  font-family:var(--display);
  font-weight:700;
  font-size:1.28rem;
  letter-spacing:0.01em;
}
.brand-tag{
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
  margin:0;padding:0;
  font-size:0.92rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-cta .btn{transform-style:preserve-3d;will-change:transform;}
.nav-toggle{
  display:none;
  background:none;border:1px solid var(--line-strong);
  border-radius:8px;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  cursor:pointer;
  flex:none;
  color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.nav-toggle svg{width:18px;height:18px;}

/* ---------- Hero (full-bleed video background, staggered keyframe entrance) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  max-width:100vw;
  display:flex;
  align-items:flex-end;
  min-height:min(88vh,780px);
  padding-block:64px 72px;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  background:var(--ink);
}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,.15) 0%, rgba(10,9,8,.35) 45%, rgba(10,9,8,.82) 100%);
  z-index:1;
}
.hero-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:26px;
  color:#fff;
  width:100%;
}
.hero h1{font-size:clamp(2.1rem,1.2rem + 4.6vw,4.6rem);color:#fff;}
.hero-sub-group{display:flex;flex-direction:column;gap:8px;}
.hero-sub{font-size:1.06rem;color:rgba(255,255,255,.82);max-width:52ch;}
.hero-tagline{line-height:1.6;font-family:var(--heading);font-weight:800;text-transform:uppercase;color:#fff;}
#manifesto .hero-sub{color:var(--muted);font-size:clamp(0.95rem,0.8rem + 1vw,1.5rem);}
#manifesto .hero-tagline{color:var(--ink);font-size:clamp(1.15rem,0.9rem + 1.6vw,1.9rem);}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);}
.hero .btn-ghost:hover{border-color:#fff;}
.hero .eyebrow{color:#fff;}
.hero .eyebrow::before{background:#fff;}

@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
html.js-anim .kf{opacity:0;}
html.js-anim .kf.k1{animation:fadeUp .8s .1s cubic-bezier(.16,1,.3,1) forwards;}
html.js-anim .kf.k2{animation:fadeUp .9s .26s cubic-bezier(.16,1,.3,1) forwards;}
html.js-anim .kf.k3{animation:fadeUp .85s .42s cubic-bezier(.16,1,.3,1) forwards;}
html.js-anim .kf.k4{animation:fadeUp .8s .58s cubic-bezier(.16,1,.3,1) forwards;}
html.js-anim .kf.k5{animation:fadeUp .9s .5s cubic-bezier(.16,1,.3,1) forwards;}

/* ---------- Photo frames ---------- */
.photo-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--surface-2);
}
.photo-frame.elevated{box-shadow:var(--shadow);}
.photo-img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-caption{
  position:absolute;
  left:14px;bottom:14px;
  z-index:2;
  background:color-mix(in srgb, #fff 92%, transparent);
  border-radius:999px;
  padding:7px 14px;
  font-family:var(--mono);
  font-size:0.64rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ---------- Marquee ---------- */
.marquee-wrap{
  border-block:1px solid var(--line);
  background:var(--ink);
  padding-block:20px;
  overflow:hidden;
}
.marquee{display:flex;width:max-content;}
html.js-anim .marquee{animation:marquee-scroll 28s linear infinite;}
.marquee-wrap:hover .marquee{animation-play-state:paused;}
.marquee span{
  padding-inline:28px;
  font-family:var(--mono);font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:#fff;white-space:nowrap;display:flex;align-items:center;gap:28px;
}
.marquee span::after{content:"◆";color:#fff;font-size:0.8rem;}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Clienti marquee ---------- */
#clienti .section-head{margin-bottom:0;}
.clients-marquee-wrap{
  height:460px;
  touch-action:pan-y;
  display:flex;
  align-items:center;
  padding-block:0;
  overflow:hidden;
}
.clients-marquee{display:flex;gap:12px;width:max-content;will-change:transform;}
html.js-anim .clients-marquee{animation:marquee-scroll 30s linear infinite;}
.client-logo-item{flex:0 0 auto;width:580px;height:580px;}
.client-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:grayscale(1) opacity(0.75);
  transition:filter .3s ease;
}
.client-logo:hover{filter:grayscale(0) opacity(1);}

/* ---------- Generic card grid (scroll reveal + stagger) ---------- */
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
html.js-anim .card{
  opacity:0;
  transform:translateY(36px);
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
html.js-anim .card.in{opacity:1;transform:translateY(0);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong);}
.icon-box{
  width:42px;height:42px;
  border-radius:10px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  flex:none;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.icon-box svg{width:20px;height:20px;stroke:var(--ink);transition:stroke .3s ease;}
.card:hover .icon-box{
  transform:scale(1.1) rotate(-6deg);
  background:color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}
.card:hover .icon-box svg{stroke:var(--accent);}
.card p{color:var(--muted);font-size:0.94rem;}

section.alt{background:var(--surface-2);}
#clienti{background:var(--bg);padding-bottom:0;}
#studio{background:var(--ink);}
#studio .eyebrow{color:#fff;}
#studio h2{color:#fff;}
#studio .section-head p.muted{color:rgba(255,255,255,.65);}
#team{background:var(--ink);}
#team .eyebrow{color:#fff;}
#team h2{color:#fff;}
#team .portfolio-note{color:rgba(255,255,255,.65);}

/* ---------- Split (text + photo) section ---------- */
.split{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:56px;
  align-items:center;
}
.split-copy{display:flex;flex-direction:column;gap:18px;}
.split .photo-frame{aspect-ratio:4/3;}
.partner-logo{height:36px;width:auto;display:block;}
#risultati{background:var(--ink);}
#risultati .split{align-items:start;}
#risultati .partner-badge{color:#fff;}
.partner-badge{
  display:inline-block;
  align-self:flex-start;
  width:fit-content;
  background:transparent;
  border:2px solid var(--btn-accent);
  border-radius:999px;
  padding:16px 34px;
  font-size:1.4rem;
}
/* Stack "a faldone": gli screenshot si accavallano lasciando visibile la fascia
   superiore (dove sono i numeri) di ognuno, tranne l'ultimo che è mostrato intero. */
.folder-stack{
  position:relative;
  width:100%;
  max-width:600px;
  height:690px;
  margin-inline:auto;
}
.folder-item{
  position:absolute;
  left:0;right:0;top:0;
  aspect-ratio:1320/740;
  border-radius:14px;
  overflow:hidden;
  border:2px solid var(--bg);
  box-shadow:0 14px 30px -14px rgba(22,24,28,.35);
  cursor:pointer;
  filter:brightness(1);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease;
}
.folder-item:nth-child(1){top:0;z-index:1;}
.folder-item:nth-child(2){top:85px;z-index:2;}
.folder-item:nth-child(3){top:170px;z-index:3;}
.folder-item:nth-child(4){top:255px;z-index:4;}
.folder-item:nth-child(5){top:340px;z-index:5;}
.folder-item.active{transform:translateY(-16px);box-shadow:0 26px 50px -18px rgba(22,24,28,.45);z-index:20!important;}
.folder-stack.has-active .folder-item:not(.active){filter:brightness(0.5) blur(1.2px);}
.folder-item img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none;}
html.js-anim .folder-item{opacity:0;transform:translateY(30px);}
html.js-anim .folder-item.in{opacity:1;transform:translateY(0);}
.counter-roll{
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  height:1em;
  vertical-align:bottom;
}
.counter-roll strong{display:inline-block;line-height:1;}

/* ---------- Stat "ordini generati" (ispirata al modulo statistiche umanalabs.it) ---------- */
.stat-card{position:relative;margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);}
.stat-idx{
  position:absolute;top:16px;right:0;
  font-family:var(--mono);font-size:0.7rem;font-weight:600;letter-spacing:.1em;
  color:rgba(255,255,255,.42);
}
.stat-value{
  font-family:var(--heading);
  font-weight:900;
  font-size:clamp(3rem,2.1rem + 5vw,5.5rem);
  line-height:.92;
  letter-spacing:-.01em;
  color:#fff;
  font-variant-numeric:tabular-nums;
  margin-bottom:14px;
}
.stat-suf{color:var(--btn-accent);}
.stat-label{
  font-family:var(--heading);
  font-size:clamp(1.3rem,1rem + 1.6vw,2rem);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
html.js-anim .stat-card{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
html.js-anim .stat-card.in{opacity:1;transform:translateY(0);}
.partner-logos{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-top:28px;
  width:100%;
}
.partner-logo-tile{
  height:120px;
  flex:0 1 auto;
  min-width:0;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.partner-logo-tile img{
  height:100%;
  width:auto;
  max-width:200px;
  object-fit:contain;
  display:block;
}

/* ---------- Pinned manifesto stage ---------- */
.pin-wrap{position:relative;height:104vh;}
.pin-stage{
  position:sticky;top:0;height:84vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}
#manifesto{padding-top:16px;}
.pin-caption{
  position:absolute;top:16%;left:0;right:0;text-align:center;
  z-index:3;
}
.pin-caption .eyebrow{justify-content:center;}
.pin-card{
  position:absolute;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-2);
  will-change:transform, opacity;
}
.pin-card img{width:100%;height:100%;object-fit:cover;display:block;}
.pin-card.c1{left:16%;top:24%;width:260px;height:442px;}
.pin-card.c2{left:50%;top:9%;width:330px;height:560px;margin-left:-165px;z-index:1;}
.pin-card.c3{right:16%;top:30%;width:260px;height:442px;}
.blend-text{
  position:absolute;left:0;right:0;top:50%;
  display:flex;flex-direction:column;align-items:center;
  mix-blend-mode:difference;
  pointer-events:none;
  will-change:transform;
  z-index:2;
}
.blend-text img{
  width:clamp(280px,42vw,680px);
  height:auto;
  display:block;
  filter:invert(1);
}
.pin-cta{text-align:left;margin-top:32px;}

/* ---------- Collage foto (marquee a scorrimento orizzontale continuo, stesso pattern dei loghi clienti) ---------- */
.collage-wrap{position:relative;padding-block:32px;}
.collage-marquee-outer{overflow:hidden;touch-action:pan-y;}
.collage-marquee{
  display:flex;
  gap:16px;
  width:max-content;
  will-change:transform;
}
html.js-anim .collage-marquee{animation:marquee-scroll 46s linear infinite;}
.collage-item{
  flex:0 0 auto;
  width:300px;height:400px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.collage-item img{width:100%;height:100%;object-fit:cover;display:block;}

.portfolio-note{
  font-size:0.86rem;color:var(--muted);
  max-width:60ch;margin-top:14px;
}

/* ---------- Team (photo-only cards, info reveals on hover) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.team-photo-card{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-2);
  cursor:default;
}
html.js-anim .team-photo-card{
  opacity:0;
  transform:translateY(40px);
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1);
}
html.js-anim .team-photo-card.in{opacity:1;transform:translateY(0);}
.team-photo-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.team-photo-card:hover img{transform:scale(1.06);}
.team-photo-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 78%, var(--accent)));
  color:#fff;
  font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:0.02em;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.team-photo-card:hover .team-photo-placeholder{transform:scale(1.06);}
.team-photo-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;
  background:linear-gradient(to top, rgba(8,8,7,.8), rgba(8,8,7,.15) 55%, transparent 75%);
  opacity:0;
  transition:opacity .4s ease;
}
.team-photo-card:hover .team-photo-overlay,
.team-photo-card:focus-visible .team-photo-overlay{opacity:1;}
.team-photo-role{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  transform:translateY(10px);
  transition:transform .4s ease;
}
.team-photo-name{
  font-family:var(--display);font-weight:600;font-size:1.2rem;color:#fff;margin-top:4px;
  transform:translateY(10px);
  transition:transform .4s ease .05s;
}
.team-photo-card:hover .team-photo-role,
.team-photo-card:hover .team-photo-name,
.team-photo-card:focus-visible .team-photo-role,
.team-photo-card:focus-visible .team-photo-name{transform:translateY(0);}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
}
.contact-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;}
.contact-list li{
  display:flex;gap:14px;align-items:flex-start;
}
.contact-list .icon-box{background:var(--ink);color:#fff;}
.contact-list a{text-decoration:none;}
.contact-list a:hover{color:var(--accent);}
.contact-list dt{
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.contact-list dd{margin:0;font-weight:600;}

.form-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;
  width:100%;
  max-width:420px;
  margin-inline:auto;
  box-sizing:border-box;
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.field label{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
}
.field input,.field textarea{
  font-family:var(--sans);
  font-size:0.96rem;
  padding:13px 14px;
  border-radius:9px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  color:var(--ink);
  resize:vertical;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.form-note{font-size:0.78rem;color:var(--muted);margin-top:14px;}
.form-success{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--surface-2);border-radius:9px;padding:14px;
  font-size:0.86rem;color:var(--ink);margin-top:16px;
}
.form-success svg{width:18px;height:18px;flex:none;stroke:var(--accent);}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding-block:48px calc(48px + env(safe-area-inset-bottom,0px));
  background:var(--ink);
}
footer .brand{color:#fff;}
footer .brand-mark{background:var(--accent);}
footer .brand-tag{color:rgba(255,255,255,.55);}
footer .brand-logo{filter:invert(1);}
.footer-top{
  display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-bottom:32px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-brand p{color:rgba(255,255,255,.6);font-size:0.9rem;max-width:34ch;margin-top:10px;}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col .eyebrow{margin-bottom:4px;color:rgba(255,255,255,.55);}
.footer-col .eyebrow::before{display:none;}
.footer-col a{font-size:0.9rem;color:rgba(255,255,255,.6);text-decoration:none;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:0.8rem;color:rgba(255,255,255,.5);
}

/* ---------- Reveal on scroll (text blocks) ---------- */
/* Tutto è visibile per default: le regole "nascosto finché non rivelato" si attivano
   solo se lo script di bootstrap è riuscito ad aggiungere .js-anim su <html>, così il
   contenuto non sparisce mai anche se JavaScript non parte. */
html.js-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
html.js-anim .reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html.js-anim .reveal{opacity:1;transform:none;transition:none;}
  html.js-anim .kf{opacity:1!important;transform:none!important;animation:none!important;}
  html.js-anim .card,html.js-anim .team-photo-card,html.js-anim .folder-item,html.js-anim .stat-card{opacity:1!important;transform:none!important;transition:box-shadow .2s ease, border-color .2s ease!important;}
  .team-photo-overlay{opacity:1!important;}
  .team-photo-role,.team-photo-name{transform:none!important;}
  .marquee{animation:none!important;}
  .clients-marquee{animation:none!important;}
  .collage-marquee{animation:none!important;}
  .progress-ring-fill{transition:none!important;}
  .counter-roll strong{transition:none!important;}
  .btn:hover,.card:hover{transform:none;}
}

/* ---------- Responsive ---------- */
@media (min-width:861px){
  body{font-size:20px;}
}
@media (max-width:860px){
  .nav-links,.nav-cta .btn-ghost,.nav-cta .btn-primary{display:none;}
  .nav-toggle{display:flex;}
  .hero{min-height:min(78vh,620px);padding-block:40px 48px;}
  .split{grid-template-columns:1fr;gap:24px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .section{padding-block:64px;}
  .clients-marquee-wrap{height:320px;}
  html.js-anim .clients-marquee{animation-duration:11s;}
  /* Il filtro grayscale animato su 20 loghi contemporaneamente è pesante per le
     GPU mobili e causa scatti durante lo scroll continuo: su schermi stretti i
     loghi restano sempre a colori (l'hover per rivelarli non esiste comunque su touch). */
  .client-logo{filter:none;}
  .client-logo-item{width:320px;height:320px;}
  .collage-item{width:240px;height:320px;}
  html.js-anim .collage-marquee{animation-duration:34s;}
}
@media (max-width:700px){
  .pin-wrap{height:104vh;}
  .pin-stage{height:78vh;}
  .pin-card.c1{width:150px;height:320px;max-height:50%;left:3%;top:24%;}
  .pin-card.c2{width:190px;height:400px;max-height:62%;top:14%;margin-left:-95px;}
  .pin-card.c3{width:150px;height:320px;max-height:50%;right:3%;top:28%;}
  .pin-caption{top:8%;}
  #manifesto{padding-top:0;}
}
@media (max-width:640px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  h2{font-size:clamp(2rem,1.3rem + 4.5vw,2.6rem);}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{width:100%;white-space:nowrap;font-size:0.68rem;padding-inline:16px;}
  /* Stessa animazione a faldone del desktop, solo ridimensionata per lo schermo piccolo. */
  .folder-stack{max-width:300px;height:360px;}
  .folder-item:nth-child(2){top:45px;}
  .folder-item:nth-child(3){top:90px;}
  .folder-item:nth-child(4){top:135px;}
  .folder-item:nth-child(5){top:180px;}
  .partner-badge{
    align-self:center;
    margin-inline:auto;
    white-space:nowrap;
    text-align:center;
    font-size:clamp(0.68rem,0.4rem + 2.4vw,0.95rem);
    padding:12px 20px;
  }
  /* Schermo piccolo: i loghi partner uno sotto l'altro invece che in riga. */
  .partner-logos{flex-direction:column;gap:26px;}
  .partner-logo-tile{height:70px;}
  /* Schermo piccolo: loghi clienti ridimensionati (erano fissi a 580px anche su mobile). */
  .clients-marquee-wrap{height:240px;}
  .client-logo-item{width:240px;height:240px;}
  html.js-anim .clients-marquee{animation-duration:8s;}
  .collage-item{width:190px;height:260px;}
  html.js-anim .collage-marquee{animation-duration:26s;}
}

/* Mobile nav sheet */
.mobile-sheet{
  position:fixed;inset:0;
  background:var(--ink);
  z-index:60;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:14px;
  overflow-x:hidden;
  transform:translateY(-100%);
  transition:transform .25s ease;
}
.mobile-sheet.open{transform:translateY(0);}
.mobile-sheet .top{display:flex;justify-content:space-between;align-items:center;}
.mobile-sheet .brand-logo{filter:invert(1);}
.mobile-sheet .nav-toggle{border-color:var(--btn-accent);color:var(--btn-accent);}
.mobile-sheet nav{display:flex;flex-direction:column;gap:22px;margin-top:0;}
.mobile-sheet nav a{
  font-family:var(--sans);font-weight:400;font-size:1.05rem;text-decoration:none;color:var(--btn-accent);
}
.mobile-sheet .btn-block{
  width:100%;
  min-width:0;
  flex:none;
  box-sizing:border-box;
  white-space:normal;
  text-align:center;
  font-size:clamp(0.62rem,0.3rem + 1.6vw,0.78rem);
  padding-inline:16px;
}