/* ============================================================
   FSA SERVIZI — CSS standalone
   Caricato solo su page-servizi.php (via nuclear dequeue).
   Include: reset, tokens, cursore, nav, hero, sections, footer.
   ============================================================ */

/* === RESET & TOKENS === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --black:  #0a0a0a;
  --white:  #f2f1ee;
  --dark:   #141414;
  --border: rgba(0,0,0,0.1);
  --accent: #ec7016;
}
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--white);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
a  { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* === CURSORE === */
#cur {
  width:9px; height:9px;
  background:var(--accent);
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
  transition:transform .15s, width .15s, height .15s, background .15s;
}
#cur.big {
  width:54px; height:54px;
  background:rgba(236,112,22,0.15);
  border:1.5px solid var(--accent);
}
@media(max-width:680px){ body{ cursor:auto; } #cur{ display:none; } }

/* === NAV === */
nav {
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 40px;
  z-index:500;
  transition:transform .4s cubic-bezier(.7,0,.2,1), background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.n-logo {
  display:block; height:70px; position:relative; width:331px;
  transition:width .3s ease, height .3s ease;
}
.n-logo img {
  height:100%; width:auto; display:block;
  position:absolute; top:0; left:0;
  transition:opacity .3s ease;
}
.n-logo .logo-black,
.n-logo .mono-white,
.n-logo .mono-black { opacity:0; }

.n-menu { display:flex; align-items:center; gap:65px; list-style:none; margin-left:auto; margin-right:32px; }
.n-menu a {
  font-size:18px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,0.35);
  transition:color .3s ease, text-shadow .3s ease, font-size .3s ease, opacity .2s, font-weight .2s;
}
.n-menu a:hover { opacity:0.6; }
.n-menu a:not(.active) { font-weight:400; }
.n-menu li.current-menu-item > a { font-weight:700; }

.n-lang {
  font-size:16px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; opacity:0.6; text-shadow:0 1px 12px rgba(0,0,0,0.35);
  transition:color .3s ease, text-shadow .3s ease, font-size .3s ease;
}
.n-burger {
  display:none; flex-direction:column; gap:5px; cursor:none; z-index:600;
}
.n-burger span {
  display:block; width:24px; height:1.5px; background:#fff;
  transition:transform .3s, opacity .3s, background .3s ease;
}

nav.nav-hidden  { transform:translateY(-100%); }
nav.nav-compact {
  background:rgba(10,10,10,0.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding-top:19px; padding-bottom:19px;
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
}
nav.nav-compact .n-menu                    { gap:40px; }
nav.nav-compact .n-menu a                  { font-size:14px; font-weight:400; color:#fff; text-shadow:none; }
nav.nav-compact .n-menu a:not(.active)     { font-weight:400; }
nav.nav-compact .n-menu li.current-menu-item > a { font-weight:700; }
nav.nav-compact .n-lang                    { font-size:13px; font-weight:500; color:#fff; text-shadow:none; }
nav.nav-compact .n-burger span             { background:#fff; }
nav.nav-compact .n-logo                    { height:49px; width:92px; }
nav.nav-compact .n-logo .logo-white,
nav.nav-compact .n-logo .logo-black        { opacity:0; }
nav.nav-compact .n-logo .mono-white        { opacity:1; }
nav.nav-compact .n-logo .mono-black        { opacity:0; }

/* === MOBILE MENU === */
.mobile-menu { display:none; }
@media(max-width:900px){
  .mobile-menu {
    display:flex; position:fixed; inset:0; z-index:550;
    background:var(--black);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:8px; padding:40px;
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.7,0,.2,1);
  }
  .mobile-menu.open { transform:translateY(0); }
  .mobile-menu a {
    font-size:34px; font-weight:700; text-transform:uppercase; color:#fff; line-height:1.15;
    opacity:0; transform:translateY(14px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .mobile-menu.open a:nth-child(1) { transition-delay:.08s; }
  .mobile-menu.open a:nth-child(2) { transition-delay:.14s; }
  .mobile-menu.open a:nth-child(3) { transition-delay:.20s; }
  .mobile-menu.open a:nth-child(4) { transition-delay:.26s; }
  .mobile-menu.open a:nth-child(5) { transition-delay:.32s; }
  .mobile-menu.open a,
  #mobileMenu.open a              { opacity:1 !important; transform:translateY(0) !important; }
  .mobile-menu .mm-lang {
    font-size:13px; font-weight:500; letter-spacing:0.1em;
    color:rgba(255,255,255,0.4); margin-top:32px;
    opacity:0; transition:opacity .4s ease .36s;
  }
  .mobile-menu.open .mm-lang       { opacity:1; }
  body.menu-open .n-burger span { background:#fff; }
  body.menu-open .n-burger span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  body.menu-open .n-burger span:nth-child(2) { opacity:0; }
  body.menu-open .n-burger span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
}

/* === EYEBROW === */
.eyebrow {
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before { content:''; width:26px; height:1px; background:var(--accent); flex-shrink:0; }

/* === HERO === */
.p-hero {
  position:relative; height:70vh; height:70svh; min-height:480px;
  overflow:hidden; background:var(--black);
}
.p-hero img { width:100%; height:100%; object-fit:cover; opacity:0.92; }
.p-hero-grad {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.12) 35%, rgba(10,10,10,0.62) 100%);
}
.p-hero-info {
  position:absolute; left:40px; right:40px; bottom:48px;
  color:#fff; z-index:2;
}
.p-title {
  font-size:clamp(34px,6vw,84px); font-weight:700;
  letter-spacing:-0.03em; line-height:0.98; text-transform:uppercase;
  max-width:920px;
}
.p-subtitle {
  font-size:clamp(16px,2vw,26px); font-weight:400;
  letter-spacing:-0.01em; margin-top:18px;
  max-width:640px; opacity:0.92;
}

/* === INTRO === */
.intro {
  max-width:1240px; margin:0 auto;
  padding:clamp(64px,8vw,120px) clamp(16px,2.5vw,40px);
  text-align:center;
}
.intro .eyebrow { justify-content:center; margin-bottom:26px; }
.intro h2 {
  font-size:clamp(30px,5.4vw,108px); font-weight:700;
  letter-spacing:-0.03em; line-height:0.98; text-transform:uppercase;
  margin-bottom:30px; white-space:nowrap;
}
.intro p {
  max-width:980px; margin:0 auto;
  font-size:clamp(17px,1.7vw,20px); font-weight:400;
  line-height:1.65; color:#5a5a56; letter-spacing:.005em;
}

/* === SERVICES — visual sticky + lista === */
.sv-section { display:flex; align-items:flex-start; }
.sv-sticky {
  flex:0 0 45%; position:sticky; top:0;
  height:100vh; height:100svh; display:flex; align-items:center;
  padding:clamp(14px,2vw,24px);
}
.sv-visual {
  width:auto; height:calc(100vh - clamp(28px,4vw,48px)); height:calc(100svh - clamp(28px,4vw,48px));
  aspect-ratio:3/4.3; margin:0 auto;
  position:relative; overflow:hidden; background:#e9e8e4;
}
.sv-img {
  position:absolute; inset:0;
  opacity:0; transform:scale(1.035);
  transition:opacity 1.1s ease, transform 1.3s ease;
}
.sv-img.active { opacity:1; transform:scale(1); z-index:2; }
.sv-img img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }

.sv-list { flex:0 0 55%; }
.sv-item {
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:40px clamp(40px,5vw,72px);
  opacity:0.5; transition:opacity .6s ease;
}
.sv-item.active { opacity:1; }
.sv-item::before {
  content:''; position:absolute; left:0; top:12%; bottom:12%;
  width:2px; background:var(--accent);
  opacity:0; transform:scaleY(.35); transform-origin:center;
  transition:opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.sv-item.active::before { opacity:1; transform:scaleY(1); }

.sv-head {
  display:flex; align-items:baseline; gap:14px; margin-bottom:24px;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.sv-head .num {
  font-size:clamp(22px,2.5vw,28px); font-weight:700;
  letter-spacing:-0.01em; color:#c4c3bd; line-height:1;
  transition:color .5s ease;
}
.sv-head .cat {
  font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#8a8a86; transition:color .5s ease;
}
.sv-item.active .sv-head                { transform:translateX(3px); }
.sv-item.active .sv-head .num,
.sv-item.active .sv-head .cat           { color:var(--accent); }
.sv-item .target {
  display:block; font-size:14px; font-weight:500; font-style:italic;
  color:#8a8a86; margin-bottom:22px;
}
.sv-item h2 {
  font-size:clamp(32px,4.6vw,54px); font-weight:700;
  letter-spacing:-0.025em; line-height:1.07; margin-bottom:18px;
  text-transform:uppercase; color:#3a3a36;
  transition:color .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.sv-item.active h2         { color:var(--black); transform:translateY(-5px); }
.sv-item p {
  font-size:clamp(16px,1.6vw,18px); font-weight:400;
  line-height:1.78; color:#9a9a94; letter-spacing:.005em;
  text-align:left; max-width:560px;
  transition:color .5s ease;
}
.sv-item.active p           { color:#6e6e68; }
.sv-item-img                { display:none; }

.deliv                      { margin-top:38px; padding-top:28px; border-top:1px solid var(--border); }
.deliv .l {
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.deliv .v-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:11px 28px; max-width:560px;
}
.deliv .v-grid span {
  display:block; position:relative; padding-left:16px;
  font-size:15.5px; font-weight:500; color:#2a2a26; line-height:1.5;
}
.deliv .v-grid span::before {
  content:''; position:absolute; left:0; top:10px;
  width:6px; height:1px; background:#b8b8b2;
}
@media(max-width:560px){ .deliv .v-grid { grid-template-columns:1fr; } }

@media(prefers-reduced-motion:reduce){ .sv-img { transition:none !important; } }

/* === METHOD === */
.method-wrap {
  border-top:1px solid var(--border);
  padding:clamp(64px,8vw,120px) clamp(16px,2.5vw,40px);
  text-align:center;
}
.method-head               { margin-bottom:6px; }
.method-head .eyebrow      { justify-content:center; }
.method-title {
  font-size:clamp(30px,5.4vw,108px); font-weight:700;
  line-height:0.98; letter-spacing:-0.03em; text-transform:uppercase;
  margin-top:16px; white-space:nowrap;
}
.method-title .accent      { color:#bbb; }
.method-desc {
  max-width:1240px; margin:32px auto 0;
  font-size:clamp(17px,1.7vw,20px); line-height:1.7;
  color:#5a5a56; letter-spacing:.005em;
}
@media(max-width:680px){
  .method-wrap  { padding:56px 22px; }
  .method-title { font-size:32px; line-height:1.1; white-space:normal; }
}

/* === PERCHÉ FSA === */
.why {
  max-width:1040px; margin:0 auto;
  padding:clamp(50px,6vw,76px) 40px clamp(36px,5vw,52px);
  border-top:1px solid var(--border);
}
.why-head                  { text-align:center; margin-bottom:46px; }
.why-head .eyebrow         { justify-content:center; margin-bottom:20px; }
.why-head h2 {
  font-size:clamp(32px,4.6vw,52px); font-weight:700;
  letter-spacing:-0.02em; text-transform:uppercase; line-height:1.08;
}
.why-grid                  { display:flex; gap:32px; }
.why-item {
  flex:1; padding-top:22px; border-top:1px solid var(--border);
}
.why-n {
  font-size:13px; font-weight:700; letter-spacing:.12em;
  color:#bbb; margin-bottom:12px;
}
.why-t {
  font-size:clamp(20px,2.3vw,26px); font-weight:600;
  letter-spacing:-0.005em; line-height:1.28; color:#1a1a1a;
}
@media(max-width:880px){ .why-grid { flex-direction:column; gap:26px; } }

/* === REVEAL ON SCROLL === */
.intro, .why, .p-cta {
  opacity:0; transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.intro.in, .why.in, .p-cta.in { opacity:1; transform:translateY(0); }

@media(max-width:900px){
  .p-cta a {
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease .15s, transform .5s ease .15s;
  }
  .p-cta.in a { opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce){
  .intro, .why, .p-cta, .p-cta a {
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* === CTA === */
.p-cta {
  max-width:900px; margin:0 auto;
  padding:clamp(36px,5vw,52px) 40px clamp(56px,7vw,84px);
  text-align:center;
}
.p-cta h3 {
  font-size:clamp(30px,3.8vw,46px); font-weight:700;
  letter-spacing:-0.02em; line-height:1.12; margin-bottom:18px;
}
.p-cta p {
  font-size:clamp(16px,1.6vw,19px); font-weight:400;
  line-height:1.6; color:#5a5a56; margin-bottom:30px;
}
.p-cta a {
  display:inline-block;
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:#fff; background:var(--black); border:none; border-radius:40px;
  padding:18px 36px; transition:opacity .2s;
}
.p-cta a:hover { opacity:0.85; }

/* === FOOTER === */
footer {
  background:var(--white); padding:60px 40px 40px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border);
}
.f-left  { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#999; }
.f-right { display:flex; gap:24px; }
.f-right a { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#999; }
.f-right a:hover { color:var(--black); }

/* === LIGHTBOX === */
.lb {
  position:fixed; inset:0; background:rgba(10,10,10,0.96);
  z-index:9000; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:30px; cursor:none;
}
.lb.open          { display:flex; }
.lb-main          { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:0; gap:14px; }
.lb-main img      { max-width:90vw; max-height:80vh; object-fit:contain; }
.lb-close         { position:absolute; top:24px; right:30px; color:#fff; font-size:30px; font-weight:300; cursor:none; z-index:2; }
.lb-arrow         { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:34px; font-weight:300; cursor:none; opacity:0.7; padding:10px; z-index:2; }
.lb-arrow:hover   { opacity:1; }
.lb-prev          { left:14px; }
.lb-next          { right:14px; }
@media(max-width:680px){ .lb-arrow { font-size:26px; } }

/* === RESPONSIVE MOBILE === */
@media(max-width:900px){
  .n-menu   { display:none; }
  .n-burger { display:flex; }
}
@media(max-width:880px){
  .sv-section     { flex-direction:column; }
  .sv-sticky      { display:none; }
  .sv-list        { flex:1 1 100%; }
  .sv-item {
    opacity:0; transform:translateY(28px);
    min-height:auto; display:block;
    padding:0 22px 70px; margin-bottom:14px;
    border-bottom:1px solid var(--border);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .sv-item:nth-child(even) { transform:translateY(28px) translateX(18px); }
  .sv-item.reveal-in       { opacity:1; transform:translateY(0) translateX(0); }
  .sv-item:first-child     { padding-top:50px; }
  .sv-item::before         { display:none; }
  .sv-item h2              { color:var(--black); transform:none; }
  .sv-item p               { color:#5a5a56; }
  .sv-item-img {
    display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
    border-radius:16px; margin-bottom:30px; background:#e9e8e4;
    cursor:pointer; transform:scale(1.08);
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  }
  .sv-item.reveal-in .sv-item-img { transform:scale(1); }
  .sv-item .sv-head,
  .sv-item .target,
  .sv-item h2,
  .sv-item p,
  .sv-item .deliv {
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .sv-item.reveal-in .sv-head  { opacity:1; transform:translateY(0); transition-delay:.08s; }
  .sv-item.reveal-in .target   { opacity:1; transform:translateY(0); transition-delay:.08s; }
  .sv-item.reveal-in h2        { opacity:1; transform:translateY(0); transition-delay:.18s; }
  .sv-item.reveal-in p         { opacity:1; transform:translateY(0); transition-delay:.28s; }
  .sv-item.reveal-in .deliv    { opacity:1; transform:translateY(0); transition-delay:.38s; }
  .intro { padding:50px 22px; }
  .intro h2 { font-size:38px; line-height:1.04; white-space:normal; }
  .intro h2, .intro p {
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .intro.in h2 { opacity:1; transform:translateY(0); transition-delay:.05s; }
  .intro.in p  { opacity:1; transform:translateY(0); transition-delay:.16s; }
  .sv-item h2  { font-size:clamp(34px,9vw,42px); line-height:1.02; }
}
@media(max-width:680px){
  .p-hero           { height:64vh; height:64svh; min-height:420px; }
  .p-hero-info      { left:22px; right:22px; bottom:32px; }
  .p-title          { font-size:clamp(36px,9vw,52px); line-height:1.02; }
  nav               { padding:18px 22px; }
  .n-logo           { height:30px; width:142px; }
  footer            { flex-direction:column; gap:20px; align-items:flex-start; padding:40px 22px; }
  .mobile-menu a    { font-size:34px; }
}

@media(prefers-reduced-motion:reduce) and (max-width:880px){
  .sv-item, .sv-item-img, .sv-item .sv-head, .sv-item .target,
  .sv-item h2, .sv-item p, .sv-item .deliv, .intro h2, .intro p {
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}