:root{--bg:#07090d;--panel:#0c1017;--line:#202634;--text:#f5f7fb;--muted:#aeb6c7;--accent:#9fa8c4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#080a0f;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;flex-direction:column;gap:2px}.brand strong{font-size:20px;letter-spacing:.5px}.brand span{font-size:9px;letter-spacing:2px;color:var(--muted)}
nav{display:flex;gap:28px;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer}
.btn-light{background:#fff;color:#080a0f;border:0}.btn-outline{border:1px solid #697184;background:rgba(0,0,0,.2)}
.hero{min-height:700px;position:relative;background:url('hero-hd.jpg') 67% center/cover no-repeat;display:flex;align-items:center;padding:70px 7vw}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.84) 39%,rgba(5,7,11,.18) 72%,rgba(5,7,11,.05) 100%)}
.hero-content{position:relative;max-width:650px}.eyebrow{font-size:12px;letter-spacing:2.5px;color:var(--muted);font-weight:700}
h1{font-size:74px;line-height:.98;margin:15px 0 22px;letter-spacing:-3px}h1 span,h2 span{color:var(--accent)}.lead{font-size:20px;line-height:1.45;max-width:610px;color:#e3e7ee}.tech{color:#c5cbd7;margin:26px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}
.section{padding:80px 4vw}.section-heading{text-align:center;max-width:760px;margin:0 auto 38px}h2{font-size:42px;line-height:1.08;margin:8px 0 12px;letter-spacing:-1.5px}
.section-heading p:last-child,.split-content>p,.quote-copy>p{color:var(--muted);line-height:1.6}
.cards{display:grid;gap:14px}.services{grid-template-columns:repeat(7,1fr)}
.services article,.clients article{background:linear-gradient(180deg,#111620,#0a0d13);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.services article{min-height:350px}.services img{width:100%;height:185px;object-fit:cover;object-position:center;display:block;border-bottom:1px solid var(--line);background:#0b0e14}
.card-body{padding:20px}.services b{color:var(--accent);font-size:12px}.services h3{font-size:19px;margin:16px 0 10px}.services p{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split-image{min-height:600px;background:url('why-approved.jpg') center/cover no-repeat}.split-content{padding:85px 7vw}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px}.benefits div{display:flex;flex-direction:column;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--line)}.benefits span{font-size:14px;color:var(--muted)}
.compact{padding-top:70px;padding-bottom:70px}.clients{grid-template-columns:repeat(7,1fr)}.clients article{min-height:auto;text-align:center;font-weight:700;padding:28px 12px}
.quote-section{padding:90px 6vw;border-top:1px solid var(--line);display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start;background:linear-gradient(135deg,#0a0d13,#111622)}
.quote-section form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.quote-section label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:14px}.quote-section input,.quote-section select,.quote-section textarea{width:100%;background:#090c12;color:#fff;border:1px solid #303849;border-radius:10px;padding:14px;font:inherit}.full{grid-column:1/-1}.submit{width:100%}
footer{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;padding:38px 5vw;border-top:1px solid var(--line);color:var(--muted)}footer p{line-height:1.7;margin:0}
@media(max-width:1100px){nav,.desktop-cta{display:none}.services{grid-template-columns:repeat(3,1fr)}.clients{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){h1{font-size:56px}.split,.quote-section{grid-template-columns:1fr}.split-image{min-height:420px}.services{grid-template-columns:repeat(2,1fr)}.clients{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.topbar{height:64px}.hero{min-height:620px;padding:55px 24px;background-position:64% center}.hero-overlay{background:linear-gradient(90deg,rgba(5,7,11,.97),rgba(5,7,11,.65))}h1{font-size:46px;letter-spacing:-2px}.lead{font-size:17px}h2{font-size:34px}.section{padding:60px 20px}.services,.clients,.benefits,.quote-section form{grid-template-columns:1fr}.split-content,.quote-section{padding:60px 24px}footer{grid-template-columns:1fr;padding:34px 24px}}

/* Versione 4 */
.hero{background-position:72% center}
.services{align-items:stretch}
.service-card{
  appearance:none;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#111620,#0a0d13);color:var(--text);
  padding:0;text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  min-height:390px;font:inherit
}
.service-card:hover{transform:translateY(-6px);border-color:#566079;box-shadow:0 18px 45px rgba(0,0,0,.35)}
.service-card img{width:100%;height:210px;object-fit:cover;display:block;background:#0b0e14}
.service-card .card-body{padding:20px}
.learn-more{display:inline-block;margin-top:18px;color:#d8deeb;font-size:13px;font-weight:700}
.garments-section{padding:80px 5vw;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#080b10,#0d1118)}
.garment-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:1100px;margin:0 auto}
.garment-list span{padding:13px 18px;border:1px solid #30384a;border-radius:999px;background:#0a0e15;color:#e9edf5;font-weight:700;font-size:14px}
.service-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.service-modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}
.modal-panel{position:relative;z-index:1;width:min(920px,94vw);max-height:90vh;overflow:auto;background:#0d121a;border:1px solid #354055;border-radius:20px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 100px rgba(0,0,0,.65)}
.modal-panel>img{width:100%;height:100%;min-height:430px;object-fit:cover}
.modal-copy{padding:52px}
.modal-copy p{color:var(--muted);line-height:1.7}
.modal-close{position:absolute;right:14px;top:10px;width:42px;height:42px;border-radius:50%;border:1px solid #495267;background:#0a0d13;color:#fff;font-size:28px;cursor:pointer;z-index:2}
body.modal-open{overflow:hidden}
@media(max-width:800px){
  .modal-panel{grid-template-columns:1fr}
  .modal-panel>img{min-height:250px;height:250px}
  .modal-copy{padding:30px}
}

/* ===== VERSIONE 5: HERO PULITA, ANIMAZIONI, MOBILE COMPATTO ===== */
.hero{
  background-image:url('hero-clean.jpg') !important;
  background-position:74% center !important;
  background-size:cover !important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#06080c 0%,rgba(6,8,12,.97) 26%,rgba(6,8,12,.76) 52%,rgba(6,8,12,.08) 82%);
  pointer-events:none;
}
.hero-overlay{display:none!important}
.hero-content{z-index:2}

.split-image{
  background-image:url('why-approved.jpg') !important;
  background-position:center !important;
}

/* Service cards: no text inside the photos */
.service-card img{
  width:100%;
  height:205px;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:none;
}
.service-card .card-body{position:relative}

/* Elegant movement while scrolling */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{
  opacity:1;
  transform:none;
}
.service-card{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.service-card:hover{
  transform:translateY(-8px) scale(1.012);
  border-color:#66728c;
  box-shadow:0 24px 55px rgba(0,0,0,.42);
}
.btn{transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25)}

/* Mobile: visually similar to desktop, but compact instead of one huge vertical column */
@media(max-width:700px){
  .topbar{padding:0 18px}
  .brand strong{font-size:17px}
  .hero{
    min-height:620px;
    padding:54px 20px 40px;
    background-position:66% center !important;
  }
  .hero::before{
    background:linear-gradient(90deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.88) 52%,rgba(5,7,11,.25) 100%);
  }
  h1{font-size:44px;line-height:1.01}
  .lead{font-size:16px}
  .tech{font-size:13px;line-height:1.65}
  .actions{gap:9px}
  .btn{padding:12px 15px;font-size:12px}

  .services{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  .service-card{
    min-height:285px !important;
    border-radius:12px;
  }
  .service-card img{height:120px}
  .service-card .card-body{padding:13px}
  .service-card h3{font-size:16px;margin:8px 0}
  .service-card p{font-size:12px;line-height:1.4}
  .learn-more{font-size:11px;margin-top:10px}

  .clients{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  .clients article{
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 8px;
    font-size:13px;
  }

  .garment-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .garment-list span{
    text-align:center;
    padding:11px 9px;
    font-size:12px;
  }

  .benefits{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px;
  }
  .benefits strong{font-size:13px}
  .benefits span{font-size:11px}
  .split-image{min-height:320px}
  .split-content{padding:46px 20px}
  .section{padding:52px 16px}
  .garments-section{padding:52px 16px}
  .cta{padding:58px 18px}
}

/* ===== VERSIONE 7: IMMAGINI APPROVATE ===== */
.hero{background-image:url('hero-approved.jpg') !important;background-position:72% center !important;background-size:cover !important;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.92) 28%,rgba(5,7,11,.56) 52%,rgba(5,7,11,.08) 78%,rgba(5,7,11,0) 100%);z-index:1;pointer-events:none;}
.hero-overlay{display:none!important}.hero-content{position:relative;z-index:2}
.split-image{background-image:url('why-approved.jpg') !important;background-position:center !important;background-size:cover !important;}
.service-card img{height:210px !important;object-fit:cover !important;object-position:center !important;filter:none !important;}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
@media(max-width:700px){
.hero{min-height:610px;background-position:67% center !important;padding:50px 20px 34px !important;}
.hero::before{background:linear-gradient(90deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.88) 48%,rgba(5,7,11,.25) 100%);}
.services{display:flex !important;overflow-x:auto;gap:12px !important;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none;}
.services::-webkit-scrollbar{display:none}.service-card{flex:0 0 72vw;max-width:290px;min-height:330px !important;scroll-snap-align:start;}.service-card img{height:165px !important;}
.clients{display:flex !important;overflow-x:auto;gap:10px !important;scroll-snap-type:x mandatory;scrollbar-width:none}.clients::-webkit-scrollbar{display:none}.clients article{flex:0 0 42vw;min-width:145px;scroll-snap-align:start;}
.garment-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* ===== V8 CORRETTA ===== */
.hero{
  background-image:url('hero-approved.jpg') !important;
  background-position:82% center !important;
  background-size:cover !important;
}
.hero::before{
  background:linear-gradient(90deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.91) 28%,rgba(5,7,11,.48) 51%,rgba(5,7,11,.04) 76%,rgba(5,7,11,0) 100%) !important;
}
.service-card img{
  height:205px !important;
  object-fit:cover !important;
  object-position:center !important;
}
.service-card .card-body p{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:42px;
}
.split-image{
  background-image:url('why-approved.jpg') !important;
  background-position:center 64% !important;
  background-size:cover !important;
}
/* Reintroduce the smooth, clear scroll effect. */
.reveal{opacity:0;transform:translateY(34px);filter:blur(3px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),filter .75s ease}
.reveal.visible{opacity:1;transform:none;filter:blur(0)}
@media(max-width:700px){
  .hero{background-position:72% center !important}
  .hero::before{background:linear-gradient(90deg,rgba(5,7,11,.97) 0%,rgba(5,7,11,.85) 48%,rgba(5,7,11,.18) 100%) !important}
  .service-card .card-body p{-webkit-line-clamp:2;min-height:34px}
  .split-image{background-position:center 60% !important}
}


/* ===== V9 — SCROLL CINEMATICO + CARD PIÙ QUADRATE ===== */

/* Entry animation on first load */
.hero-enter{
  opacity:0;
  transform:translateY(24px);
  animation:heroEnter .9s cubic-bezier(.2,.7,.2,1) .12s forwards;
}
@keyframes heroEnter{
  to{opacity:1;transform:none}
}

/* Main section reveal: clear, smooth and progressive */
.reveal{
  opacity:0;
  transform:translateY(46px);
  filter:blur(7px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.16,.72,.25,1),
    filter .85s ease;
  will-change:opacity,transform,filter;
}
.reveal.visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* Inner text and form reveal */
.reveal-child{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible .reveal-child,
.reveal-child.visible{
  opacity:1;
  transform:none;
}

/* Cards appear one after another */
.stagger-group > *{
  opacity:0;
  transform:translateY(34px) scale(.975);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.75,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}
.reveal.visible .stagger-group > *,
.stagger-group.visible > *{
  opacity:1;
  transform:none;
}
.stagger-group > *:nth-child(1){transition-delay:.04s}
.stagger-group > *:nth-child(2){transition-delay:.10s}
.stagger-group > *:nth-child(3){transition-delay:.16s}
.stagger-group > *:nth-child(4){transition-delay:.22s}
.stagger-group > *:nth-child(5){transition-delay:.28s}
.stagger-group > *:nth-child(6){transition-delay:.34s}
.stagger-group > *:nth-child(7){transition-delay:.40s}
.stagger-group > *:nth-child(8){transition-delay:.46s}
.stagger-group > *:nth-child(9){transition-delay:.52s}

/* Compact, more square service cards */
.service-card{
  min-height:0 !important;
}
.service-card img{
  aspect-ratio:1 / 1;
  height:auto !important;
  width:100%;
  object-fit:cover !important;
}
.service-card .card-body{
  padding:15px 16px 16px !important;
}
.service-card .card-body b{
  font-size:10px;
}
.service-card h3{
  margin:7px 0 7px !important;
}
.service-card .card-body p{
  min-height:34px !important;
  margin-bottom:0;
}
.learn-more{
  margin-top:11px !important;
}

/* Slight image motion makes scrolling feel richer */
.service-card img,
.split-image{
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.service-card:hover img{
  transform:scale(1.045);
}
.split.reveal.visible .split-image{
  animation:softZoom 1.15s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes softZoom{
  from{transform:scale(1.035);filter:brightness(.82)}
  to{transform:scale(1);filter:brightness(1)}
}

/* Respect accessibility settings */
@media(prefers-reduced-motion:reduce){
  .hero-enter,.reveal,.reveal-child,.stagger-group>*,
  .service-card img,.split-image{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

@media(max-width:700px){
  /* Horizontal carousel, not one endless vertical page */
  .services{
    display:flex !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:12px !important;
    padding:2px 2px 16px;
    scrollbar-width:none;
  }
  .services::-webkit-scrollbar{display:none}
  .service-card{
    flex:0 0 76vw;
    max-width:300px;
    scroll-snap-align:center;
  }
  .service-card img{
    aspect-ratio:1 / 1;
  }

  .clients{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:10px !important;
    scrollbar-width:none;
    padding-bottom:10px;
  }
  .clients::-webkit-scrollbar{display:none}
  .clients article{
    flex:0 0 44vw;
    min-width:145px;
    scroll-snap-align:center;
  }

  .reveal{
    transform:translateY(30px);
    filter:blur(4px);
  }
}


/* ===== V10 — AEROGRAFIA, GRAFICA E PROCESSO ===== */

/* 4 cards per row on desktop, 2 rows total */
.services{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  max-width:1380px;
  margin:0 auto;
}
.service-card{
  max-width:none !important;
}
.service-card img{
  aspect-ratio:1.18 / 1 !important;
  height:auto !important;
  object-fit:cover !important;
}
.service-card .card-body{
  min-height:158px;
}

/* Graphic design section */
.creative-section{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  min-height:640px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#07090d,#10151f);
}
.creative-image{
  overflow:hidden;
  min-height:640px;
}
.creative-image img{
  width:100%;
  height:100%;
  min-height:640px;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.creative-section.visible .creative-image img{
  transform:scale(1.015);
}
.creative-copy{
  padding:90px 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.creative-copy p:not(.eyebrow){
  color:var(--muted);
  line-height:1.75;
  max-width:620px;
  margin-bottom:28px;
}

/* Workflow */
.process-section{
  padding:88px 5vw;
  background:
    radial-gradient(circle at 50% 0%,rgba(158,173,211,.10),transparent 38%),
    #080b10;
  border-bottom:1px solid var(--line);
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  max-width:1320px;
  margin:42px auto 0;
  position:relative;
}
.process-grid::before{
  content:"";
  position:absolute;
  top:34px;
  left:8%;
  right:8%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
}
.process-grid article{
  position:relative;
  z-index:1;
  min-height:245px;
  padding:28px 24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#111620,#090c12);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.process-grid article:hover{
  transform:translateY(-8px);
  border-color:#65718b;
  box-shadow:0 24px 55px rgba(0,0,0,.38);
}
.process-grid b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#e8ebf2;
  color:#080a0e;
  font-size:14px;
  margin-bottom:24px;
  box-shadow:0 0 0 8px #080b10;
}
.process-grid h3{
  margin:0 0 12px;
  font-size:20px;
}
.process-grid p{
  color:var(--muted);
  line-height:1.6;
  margin:0;
  font-size:14px;
}

@media(max-width:1100px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .creative-section{grid-template-columns:1fr}
  .creative-image,.creative-image img{min-height:480px}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid::before{display:none}
}

@media(max-width:700px){
  .services{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
    gap:10px !important;
  }
  .service-card{
    flex:none !important;
    max-width:none !important;
    min-height:0 !important;
  }
  .service-card img{
    aspect-ratio:1 / 1 !important;
    height:auto !important;
  }
  .service-card .card-body{
    min-height:148px;
    padding:13px !important;
  }
  .creative-image,.creative-image img{min-height:360px}
  .creative-copy{padding:52px 20px}
  .process-section{padding:58px 16px}
  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:28px;
  }
  .process-grid article{
    min-height:230px;
    padding:20px 15px;
  }
  .process-grid b{
    width:42px;
    height:42px;
    margin-bottom:18px;
  }
  .process-grid h3{font-size:16px}
  .process-grid p{font-size:12px}
}


/* ===== V11 — REFINEMENT ===== */
:root{
  --display-font: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}
body{
  font-family:var(--display-font);
  letter-spacing:-.01em;
}
h1,h2,h3,.brand{
  font-family:var(--display-font);
  letter-spacing:-.035em;
}

/* Service grid: smaller images, clearer titles, all visible in one screen */
.services{
  gap:14px !important;
}
.service-card{
  border-radius:14px !important;
}
.service-card img{
  aspect-ratio:1.45 / 1 !important;
  max-height:190px !important;
}
.service-card .card-body{
  min-height:104px !important;
  padding:14px 16px !important;
  position:relative;
}
.service-card .card-body b{
  position:absolute;
  top:12px;
  right:14px;
  opacity:.45;
}
.service-card h3{
  font-size:24px !important;
  margin:0 0 14px !important;
  line-height:1;
}
.service-card .learn-more{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.85;
}

/* Graphic design section: text is now the main focus */
.creative-section{
  grid-template-columns:.88fr 1.12fr !important;
  min-height:560px !important;
}
.creative-image,
.creative-image img{
  min-height:560px !important;
}
.creative-image img{
  object-position:center 42%;
}
.creative-copy{
  padding:70px 8vw !important;
}
.creative-copy h2{
  font-size:clamp(44px,5vw,78px);
  line-height:.96;
  margin:10px 0 24px;
}
.creative-copy .creative-lead{
  font-size:22px;
  color:#f4f6fb !important;
  max-width:680px;
  margin:0 0 16px !important;
}
.creative-copy p:not(.eyebrow){
  font-size:17px;
  max-width:680px;
}
.creative-copy .btn{
  margin-top:8px;
}

/* Benefits with small visual symbols */
.benefits span{
  display:flex;
  align-items:center;
  gap:12px;
}
.benefit-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  font-style:normal;
  font-size:14px;
  flex:0 0 auto;
  background:#0e131c;
}

/* Replace repeated garment pills with 3 strong statements */
.garment-highlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:1100px;
  margin:34px auto 0;
}
.garment-highlights article{
  padding:24px;
  border-top:1px solid #475064;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.garment-highlights strong{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  color:#9aa7c7;
  margin-bottom:12px;
}
.garment-highlights span{
  display:block;
  font-size:19px;
  line-height:1.3;
}

/* Audience section: less boxy, more editorial */
.audience-flow{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;
  max-width:1380px;
  margin:36px auto 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.audience-flow article{
  min-height:150px;
  padding:26px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
  border-right:1px solid var(--line);
  background:transparent;
}
.audience-flow article:last-child{border-right:0}
.audience-flow i{
  font-style:normal;
  font-size:24px;
  opacity:.9;
}
.audience-flow span{
  font-size:14px;
  line-height:1.25;
}
.audience-flow article:hover{
  background:rgba(255,255,255,.035);
}

@media(max-width:1100px){
  .service-card img{max-height:none !important}
  .creative-section{grid-template-columns:1fr !important}
  .audience-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .audience-flow article:nth-child(4){border-right:0}
  .audience-flow article:nth-child(-n+4){border-bottom:1px solid var(--line)}
}
@media(max-width:700px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .service-card img{aspect-ratio:1.25 / 1 !important}
  .service-card h3{font-size:18px !important}
  .creative-copy h2{font-size:42px}
  .creative-copy .creative-lead{font-size:19px}
  .garment-highlights{grid-template-columns:1fr}
  .audience-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audience-flow article{border-bottom:1px solid var(--line)}
  .audience-flow article:nth-child(even){border-right:0}
}


/* V12 refinements */
.services{gap:28px!important;justify-items:center}
.service-card{max-width:280px!important;border-radius:18px!important}
.service-card img{aspect-ratio:1/1!important;max-height:220px!important;object-fit:cover}
.service-card .card-body{min-height:90px!important;text-align:center}
.service-card h3{font-size:28px!important}
.creative-section{grid-template-columns:.75fr 1.25fr!important}
.creative-image,.creative-image img{min-height:480px!important}
.creative-copy{padding:60px 7vw!important}
.creative-copy p{max-width:560px!important}
.benefit-icon{background:#151b25;border-color:#3a465d}
.audience-flow{gap:18px!important;border:none!important}
.audience-flow article{border:1px solid var(--line)!important;border-radius:14px;background:#10151d}


/* ===== V13 — SERVIZI COMPATTI E TESTI PIÙ RICCHI ===== */

.services{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:26px !important;
  max-width:1280px !important;
  margin:0 auto !important;
  overflow:visible !important;
}

.compact-service{
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  align-items:stretch !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:16px !important;
}

.compact-service .service-copy{
  padding:22px 16px 18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  min-width:0;
}

.compact-service h3{
  font-size:22px !important;
  margin:0 0 10px !important;
  line-height:1.05 !important;
}

.compact-service p{
  font-size:13px !important;
  line-height:1.45 !important;
  color:var(--muted) !important;
  margin:0 0 14px !important;
}

.compact-service .learn-more{
  margin-top:auto !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}

.compact-service img{
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  max-height:none !important;
  border-left:1px solid var(--line);
}

.creative-copy{
  align-items:stretch !important;
}

.creative-copy h2{
  margin-bottom:26px !important;
}

.creative-copy .creative-lead{
  font-size:22px !important;
  line-height:1.45 !important;
  margin-bottom:18px !important;
}

.creative-copy p:not(.eyebrow):not(.creative-lead){
  font-size:17px !important;
  line-height:1.72 !important;
  margin-bottom:16px !important;
}

.creative-action{
  margin-top:20px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.creative-action span{
  color:#d9deea;
  font-size:15px;
  line-height:1.4;
  max-width:420px;
}

.why-intro{
  font-size:18px !important;
  line-height:1.75 !important;
  max-width:760px !important;
  color:#d7dce8 !important;
  margin-bottom:34px !important;
}

.split-copy h2{
  font-size:clamp(42px,4.7vw,68px) !important;
  line-height:1 !important;
  margin-bottom:22px !important;
}

.benefits{
  gap:18px 26px !important;
}

.benefits span{
  font-size:16px !important;
  line-height:1.35 !important;
}

@media(max-width:1100px){
  .services{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:20px !important;
  }
}

@media(max-width:700px){
  .services{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .compact-service{
    aspect-ratio:1.35 / 1 !important;
    grid-template-columns:1.15fr .85fr !important;
  }
  .compact-service .service-copy{
    padding:18px 14px 16px 16px;
  }
  .compact-service h3{
    font-size:20px !important;
  }
  .compact-service p{
    font-size:12px !important;
  }
  .creative-action{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ===== V14 — ELEGANTE E DEFINITIVO ===== */

.services{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:32px !important;
  max-width:1180px !important;
  margin:0 auto !important;
  overflow:visible !important;
}

.elegant-service{
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#111620,#090c12) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  text-align:left !important;
  box-shadow:0 16px 42px rgba(0,0,0,.22);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease !important;
}

.elegant-service:hover{
  transform:translateY(-7px) !important;
  border-color:rgba(185,197,225,.42) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.36) !important;
}

.elegant-service img{
  width:100% !important;
  height:56% !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  display:block !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  transition:transform .65s cubic-bezier(.2,.7,.2,1) !important;
}

.elegant-service:hover img{
  transform:scale(1.035) !important;
}

.elegant-service .card-body{
  flex:1 !important;
  min-height:0 !important;
  padding:18px 20px 19px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.elegant-service h3{
  font-size:23px !important;
  line-height:1 !important;
  margin:0 0 10px !important;
  letter-spacing:-.035em !important;
}

.elegant-service p{
  font-size:13px !important;
  line-height:1.45 !important;
  color:var(--muted) !important;
  margin:0 0 14px !important;
}

.elegant-service .learn-more{
  margin-top:auto !important;
  font-size:10px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  opacity:.9 !important;
}

/* Progettazione grafica: equilibrio 50/50 e testo leggibile */
.creative-section{
  grid-template-columns:1fr 1fr !important;
  min-height:650px !important;
}

.creative-image,
.creative-image img{
  min-height:650px !important;
}

.creative-image img{
  object-fit:cover !important;
  object-position:center !important;
}

.creative-copy{
  padding:72px 6.5vw !important;
  align-items:stretch !important;
}

.creative-copy h2{
  font-size:clamp(43px,4.7vw,72px) !important;
  line-height:.98 !important;
  margin:10px 0 26px !important;
}

.creative-copy .creative-lead{
  font-size:21px !important;
  line-height:1.48 !important;
  color:#f4f6fb !important;
  margin:0 0 18px !important;
  max-width:700px !important;
}

.creative-copy p:not(.eyebrow):not(.creative-lead){
  font-size:16.5px !important;
  line-height:1.72 !important;
  margin-bottom:16px !important;
  max-width:700px !important;
}

.creative-action{
  margin-top:22px !important;
  padding-top:24px !important;
  border-top:1px solid var(--line) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
}

.creative-action span{
  color:#d9deea !important;
  font-size:15px !important;
  line-height:1.45 !important;
  max-width:390px !important;
}

/* Perché scegliere: più importante e leggibile */
.split-copy h2{
  font-size:clamp(45px,5vw,72px) !important;
  line-height:.98 !important;
  margin-bottom:24px !important;
}

.why-intro{
  font-size:18px !important;
  line-height:1.72 !important;
  max-width:760px !important;
  color:#d7dce8 !important;
  margin-bottom:34px !important;
}

.benefits{
  gap:18px 28px !important;
}

.benefits span{
  font-size:16px !important;
  line-height:1.35 !important;
}

@media(max-width:1100px){
  .services{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px !important;
    max-width:760px !important;
  }
  .creative-section{
    grid-template-columns:1fr !important;
  }
  .creative-image,
  .creative-image img{
    min-height:480px !important;
  }
}

@media(max-width:700px){
  .services{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    max-width:none !important;
  }

  .elegant-service{
    aspect-ratio:1 / 1.18 !important;
    border-radius:14px !important;
  }

  .elegant-service img{
    height:52% !important;
  }

  .elegant-service .card-body{
    padding:14px 13px 14px !important;
  }

  .elegant-service h3{
    font-size:17px !important;
  }

  .elegant-service p{
    font-size:11.5px !important;
    line-height:1.35 !important;
  }

  .elegant-service .learn-more{
    font-size:8.5px !important;
  }

  .creative-copy{
    padding:54px 20px !important;
  }

  .creative-copy h2{
    font-size:40px !important;
  }

  .creative-action{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}


/* ===== V15 — SOLO PROGETTAZIONE GRAFICA PIÙ COMPATTA ===== */
.creative-section{
  min-height:520px !important;
}

.creative-image,
.creative-image img{
  min-height:520px !important;
}

.creative-copy{
  padding:48px 5vw !important;
}

.creative-copy h2{
  font-size:clamp(34px,3.6vw,54px) !important;
  line-height:1.02 !important;
  margin:8px 0 20px !important;
}

.creative-copy .creative-lead{
  font-size:18px !important;
  line-height:1.45 !important;
  margin-bottom:14px !important;
}

.creative-copy p:not(.eyebrow):not(.creative-lead){
  font-size:15px !important;
  line-height:1.62 !important;
  margin-bottom:12px !important;
}

.creative-action{
  margin-top:16px !important;
  padding-top:18px !important;
}

.creative-action span{
  font-size:14px !important;
}

@media(max-width:1100px){
  .creative-image,
  .creative-image img{
    min-height:390px !important;
  }
}

@media(max-width:700px){
  .creative-copy{
    padding:40px 18px !important;
  }

  .creative-copy h2{
    font-size:34px !important;
  }

  .creative-copy .creative-lead{
    font-size:17px !important;
  }

  .creative-copy p:not(.eyebrow):not(.creative-lead){
    font-size:14px !important;
  }
}


/* ===== V16 — SERVIZI OPZIONE A ===== */

.services{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:34px !important;
  max-width:1080px !important;
  margin:0 auto !important;
  overflow:visible !important;
}

.premium-service{
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:16px !important;
  background:#0c1017 !important;
  border:1px solid rgba(255,255,255,.11) !important;
  text-align:left !important;
  box-shadow:0 12px 34px rgba(0,0,0,.22) !important;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease !important;
}

.premium-service:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(183,196,225,.42) !important;
  box-shadow:0 24px 55px rgba(0,0,0,.34) !important;
}

.premium-service .service-image-wrap{
  height:72% !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.premium-service img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  display:block !important;
  border:0 !important;
  transition:transform .6s cubic-bezier(.2,.7,.2,1) !important;
}

.premium-service:hover img{
  transform:scale(1.035) !important;
}

.premium-service .card-body{
  flex:1 !important;
  min-height:0 !important;
  padding:15px 16px 16px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

.premium-service h3{
  font-size:21px !important;
  line-height:1 !important;
  margin:0 0 10px !important;
  letter-spacing:-.035em !important;
}

.premium-service .learn-more{
  margin-top:auto !important;
  font-size:9.5px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  opacity:.88 !important;
}

@media(max-width:1100px){
  .services{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px !important;
    max-width:720px !important;
  }
}

@media(max-width:700px){
  .services{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    max-width:none !important;
  }

  .premium-service{
    aspect-ratio:1 / 1.12 !important;
    border-radius:13px !important;
  }

  .premium-service .service-image-wrap{
    height:70% !important;
  }

  .premium-service .card-body{
    padding:12px 12px 13px !important;
  }

  .premium-service h3{
    font-size:17px !important;
  }

  .premium-service .learn-more{
    font-size:8px !important;
  }
}


/* ===== V17 — CATALOGO + CAMPIONARIO, SENZA APPESANTIRE ===== */
.creative-copy h2{
  font-size:clamp(33px,3.4vw,50px) !important;
  line-height:1.03 !important;
  margin-bottom:18px !important;
}

.creative-copy .creative-lead{
  font-size:18px !important;
  margin-bottom:13px !important;
}

.creative-copy p:not(.eyebrow):not(.creative-lead){
  font-size:14.5px !important;
  line-height:1.58 !important;
  margin-bottom:11px !important;
}

.creative-section{
  min-height:500px !important;
}

.creative-image,
.creative-image img{
  min-height:500px !important;
}

.creative-copy{
  padding:42px 4.8vw !important;
}

.creative-action{
  margin-top:14px !important;
  padding-top:16px !important;
}

.benefits .benefit-detail{
  display:block;
  grid-column:1 / -1;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin-top:-8px;
  padding:0 0 4px 46px;
}

@media(max-width:700px){
  .creative-section{
    min-height:auto !important;
  }

  .creative-image,
  .creative-image img{
    min-height:330px !important;
  }

  .creative-copy{
    padding:36px 18px !important;
  }

  .creative-copy h2{
    font-size:32px !important;
  }

  .creative-copy .creative-lead{
    font-size:16px !important;
  }

  .creative-copy p:not(.eyebrow):not(.creative-lead){
    font-size:13.5px !important;
  }

  .benefits .benefit-detail{
    padding-left:0;
  }
}


/* ===== V18 — PIÙ LUMINOSO, COMPATTO E DIRETTO ===== */

:root{
  --bg:#0b0f16;
  --panel:#121925;
  --panel-2:#172131;
  --text:#f7f9fc;
  --muted:#b8c1d0;
  --line:rgba(255,255,255,.14);
}

body{
  background:
    radial-gradient(circle at 30% 0%,rgba(114,137,184,.13),transparent 34%),
    linear-gradient(180deg,#0d121b 0%,#0a0e15 100%) !important;
  color:var(--text) !important;
}

section{
  background-color:transparent;
}

/* Compact alternating graphics + catalog section */
.studio-section{
  max-width:1280px;
  margin:0 auto;
  padding:58px 5vw;
  display:grid;
  gap:18px;
}

.studio-row{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  min-height:320px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(24,33,48,.94),rgba(13,18,27,.96));
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}

.studio-row-reverse{
  grid-template-columns:1.08fr .92fr;
}

.studio-media{
  min-height:320px;
  overflow:hidden;
}

.studio-media img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  display:block;
  filter:brightness(1.08) contrast(1.03) saturate(1.04);
  transition:transform .7s ease;
}

.studio-row:hover .studio-media img{
  transform:scale(1.025);
}

.studio-copy{
  padding:38px 42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.studio-copy h2{
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.04;
  letter-spacing:-.035em;
  margin:8px 0 16px;
  max-width:650px;
}

.studio-copy p{
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  max-width:680px;
  margin:0 0 12px;
}

.text-link{
  margin-top:10px;
  color:#f4f7fb;
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.24);
  padding-bottom:4px;
}

/* Why section: smaller, sharper, more visible */
.split{
  min-height:520px !important;
  grid-template-columns:.9fr 1.1fr !important;
}

.split-image,
.split-image img{
  min-height:520px !important;
}

.split-image img{
  object-fit:cover !important;
  object-position:center !important;
  filter:brightness(1.08) contrast(1.03) saturate(1.05);
}

.split-copy{
  padding:54px 5vw !important;
}

.split-copy h2{
  font-size:clamp(38px,4.2vw,60px) !important;
  margin-bottom:18px !important;
}

.why-intro{
  font-size:16px !important;
  line-height:1.65 !important;
  margin-bottom:26px !important;
}

.benefits{
  gap:14px 24px !important;
}

.benefits span{
  font-size:15px !important;
}

.benefit-icon{
  background:linear-gradient(180deg,#1b2636,#111823) !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* Make existing sections feel brighter without becoming flashy */
.service-card,
.process-grid article,
.audience-flow article{
  background:linear-gradient(180deg,#162030,#0f151f) !important;
  border-color:rgba(255,255,255,.14) !important;
}

.section-heading p,
.eyebrow{
  color:#b7c4df !important;
}

@media(max-width:900px){
  .studio-row,
  .studio-row-reverse{
    grid-template-columns:1fr;
  }

  .studio-row-reverse .studio-copy{
    order:2;
  }

  .studio-row-reverse .studio-media{
    order:1;
  }

  .studio-media,
  .studio-media img{
    min-height:280px;
  }

  .split{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:700px){
  .studio-section{
    padding:40px 16px;
  }

  .studio-copy{
    padding:28px 20px;
  }

  .studio-copy h2{
    font-size:30px;
  }

  .studio-copy p{
    font-size:14px;
  }

  .studio-media,
  .studio-media img{
    min-height:235px;
  }

  .split-copy{
    padding:40px 20px !important;
  }

  .split-copy h2{
    font-size:36px !important;
  }
}


/* ===== V19 — SFONDO UNICO, PROCESSO COMPATTO, FOTO CORRETTA ===== */

/* Un solo sfondo continuo per tutta la pagina */
html{
  background:#080d14 !important;
}

body{
  background:
    radial-gradient(circle at 18% 18%, rgba(81,112,171,.18), transparent 34%),
    radial-gradient(circle at 82% 48%, rgba(38,111,126,.12), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(116,75,150,.13), transparent 35%),
    linear-gradient(180deg,#0d131d 0%,#090e16 48%,#0b1018 100%) !important;
  background-attachment:fixed !important;
}

main,
section,
.services-section,
.process-section,
.studio-section,
.split,
.audience-section,
.contact-section{
  background:transparent !important;
}

/* Leggera luminosità uniforme, senza blocchi di colore diversi */
section{
  position:relative;
}

section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 36%,rgba(255,255,255,.008));
  z-index:0;
}

section > *{
  position:relative;
  z-index:1;
}

/* Come lavoriamo: più basso e molto meno ingombrante */
.process-section{
  padding:48px 5vw 52px !important;
}

.process-section .section-heading{
  margin-bottom:24px !important;
}

.process-section .section-heading h2{
  font-size:clamp(34px,3.8vw,52px) !important;
  margin-bottom:10px !important;
}

.process-section .section-heading p{
  font-size:14px !important;
  margin-bottom:0 !important;
}

.process-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  max-width:1120px !important;
  margin:24px auto 0 !important;
}

.process-grid::before{
  top:27px !important;
}

.process-grid article{
  min-height:150px !important;
  padding:18px 17px !important;
  border-radius:13px !important;
  background:rgba(15,22,32,.62) !important;
  backdrop-filter:blur(5px);
}

.process-grid b{
  width:40px !important;
  height:40px !important;
  margin-bottom:14px !important;
  box-shadow:0 0 0 6px #0b1119 !important;
  font-size:12px !important;
}

.process-grid h3{
  font-size:16px !important;
  margin-bottom:8px !important;
  line-height:1.18 !important;
}

.process-grid p{
  font-size:12px !important;
  line-height:1.45 !important;
}

/* Perché scegliere: immagine intera più leggibile e sezione più compatta */
.split{
  min-height:470px !important;
}

.split-image,
.split-image img{
  min-height:470px !important;
}

.split-image img{
  object-fit:cover !important;
  object-position:center !important;
  filter:brightness(1.08) contrast(1.04) saturate(1.08) !important;
}

.split-copy{
  padding:44px 5vw !important;
}

.split-copy h2{
  font-size:clamp(36px,4vw,56px) !important;
}

.why-intro{
  font-size:15px !important;
  line-height:1.58 !important;
  margin-bottom:22px !important;
}

.benefits{
  gap:12px 22px !important;
}

.benefits span{
  font-size:14px !important;
}

/* Le card mantengono contrasto ma non sembrano sezioni con sfondi diversi */
.service-card,
.process-grid article,
.audience-flow article,
.studio-row{
  background:linear-gradient(180deg,rgba(24,34,50,.78),rgba(12,18,27,.78)) !important;
}

@media(max-width:900px){
  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .process-grid::before{
    display:none !important;
  }
}

@media(max-width:700px){
  body{
    background-attachment:scroll !important;
  }

  .process-section{
    padding:38px 16px 42px !important;
  }

  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .process-grid article{
    min-height:145px !important;
    padding:16px 14px !important;
  }

  .process-grid h3{
    font-size:14px !important;
  }

  .process-grid p{
    font-size:11px !important;
  }

  .split{
    min-height:auto !important;
  }

  .split-image,
  .split-image img{
    min-height:340px !important;
  }
}


/* ===== V20 — SOLO SFONDO NERO LUCIDO + FOTO CORRETTA ===== */

html{
  background:#050505 !important;
}

body{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.055), transparent 28%),
    radial-gradient(circle at 82% 38%, rgba(45,72,110,.10), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(255,255,255,.035), transparent 34%),
    linear-gradient(180deg,#070707 0%,#0b0b0c 45%,#050506 100%) !important;
  background-attachment:fixed !important;
}

main,
section,
.services-section,
.process-section,
.studio-section,
.split,
.audience-section,
.contact-section{
  background:transparent !important;
}

section::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%,rgba(255,255,255,.01)) !important;
}

.service-card,
.process-grid article,
.audience-flow article,
.studio-row{
  background:
    linear-gradient(180deg,rgba(24,24,27,.88),rgba(10,10,12,.88)) !important;
  border-color:rgba(255,255,255,.12) !important;
}

.split-image img{
  filter:brightness(1.08) contrast(1.05) saturate(1.08) !important;
}

@media(max-width:700px){
  body{
    background-attachment:scroll !important;
  }
}


/* ===== V24 — HOME ORIGINALE + RESTO DEL SITO PREMIUM COESO ===== */

/* La home resta esattamente com'era nella versione approvata.
   Il nuovo effetto parte soltanto dalla sezione Servizi in poi. */

html,
body{
  background:#080b10;
}

/* Sfondo unico continuo dal secondo blocco in poi */
#servizi{
  position:relative;
  isolation:isolate;
}

#servizi::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse 70% 34% at 50% 42%,
      rgba(39,67,112,.22) 0%,
      rgba(21,37,64,.13) 40%,
      rgba(8,13,22,.035) 68%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 50% 24% at 50% 78%,
      rgba(29,50,84,.12) 0%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #090d15 0%,
      #080c14 48%,
      #070a10 100%
    );
}

/* Dalla sezione servizi in avanti: nessun blocco con sfondo separato */
#servizi,
#servizi ~ section,
#servizi ~ footer{
  background:transparent !important;
}

/* Elimina eventuali velature o filtri che possano sfocare */
#servizi *,
#servizi ~ section *,
#servizi ~ footer *{
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none;
}

#servizi img,
#servizi ~ section img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* Card effetto vetro scuro, nitide e coerenti */
#servizi .service-card,
#servizi ~ section .process-grid article,
#servizi ~ section .studio-row,
#servizi ~ section .audience-flow article,
#servizi ~ section .benefits span,
#servizi ~ section .contact-card{
  background:
    linear-gradient(
      180deg,
      rgba(19,27,41,.80),
      rgba(8,13,22,.84)
    ) !important;
  border:1px solid rgba(139,169,216,.14) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(7px);
}

/* Micro-luce premium sui bordi, senza rendere tutto blu */
#servizi .service-card:hover,
#servizi ~ section .process-grid article:hover,
#servizi ~ section .audience-flow article:hover{
  border-color:rgba(139,174,226,.28) !important;
  box-shadow:
    0 26px 58px rgba(0,0,0,.34),
    0 0 34px rgba(44,79,133,.07) !important;
}

/* Mantiene nitide le animazioni */
#servizi .reveal,
#servizi .reveal-child,
#servizi .stagger-group > *,
#servizi ~ section .reveal,
#servizi ~ section .reveal-child,
#servizi ~ section .stagger-group > *{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Separazioni sottilissime per collegare visivamente le sezioni */
#servizi ~ section{
  border-top:1px solid rgba(255,255,255,.055) !important;
}

/* Titoli e dettagli leggermente più luminosi */
#servizi h2,
#servizi ~ section h2{
  color:#f7f9fc;
}

#servizi .eyebrow,
#servizi ~ section .eyebrow{
  color:#aebbd4 !important;
}

/* Header e hero non vengono alterati da queste regole */

@media(max-width:700px){
  #servizi::before{
    position:absolute;
    min-height:100%;
  }

  #servizi .service-card,
  #servizi ~ section .process-grid article,
  #servizi ~ section .studio-row,
  #servizi ~ section .audience-flow article{
    backdrop-filter:none;
  }
}


/* ===== V25 — CARD NERE CON RIFLESSO CHAMPAGNE ===== */

/* Sfondo generale nero pulito */
html,
body{
  background:
    linear-gradient(180deg,#070707 0%,#090909 50%,#050505 100%) !important;
}

/* Rimuove il blu dalle card e dai quadranti */
#servizi .service-card,
#servizi ~ section .process-grid article,
#servizi ~ section .studio-row,
#servizi ~ section .audience-flow article,
#servizi ~ section .benefits span,
#servizi ~ section .contact-card{
  background:
    radial-gradient(circle at 28% 8%, rgba(255,244,210,.055), transparent 30%),
    linear-gradient(145deg, rgba(23,23,23,.96), rgba(8,8,8,.96)) !important;
  border:1px solid rgba(216,194,138,.22) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,244,210,.045) !important;
  backdrop-filter:blur(6px);
}

/* Leggera cornice champagne */
#servizi .service-card,
#servizi ~ section .process-grid article,
#servizi ~ section .studio-row,
#servizi ~ section .audience-flow article{
  position:relative;
  overflow:hidden;
}

#servizi .service-card::before,
#servizi ~ section .process-grid article::before,
#servizi ~ section .studio-row::before,
#servizi ~ section .audience-flow article::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255,248,225,.07) 0%,
      transparent 22%,
      transparent 72%,
      rgba(216,194,138,.035) 100%
    );
}

/* Hover più elegante, senza blu */
#servizi .service-card:hover,
#servizi ~ section .process-grid article:hover,
#servizi ~ section .audience-flow article:hover{
  border-color:rgba(216,194,138,.42) !important;
  box-shadow:
    0 26px 60px rgba(0,0,0,.42),
    0 0 34px rgba(216,194,138,.075),
    inset 0 1px 0 rgba(255,244,210,.07) !important;
}

/* Dettagli color champagne tenue */
#servizi .eyebrow,
#servizi ~ section .eyebrow,
#servizi .learn-more,
#servizi ~ section .text-link{
  color:#d8c28a !important;
}

#servizi .learn-more,
#servizi ~ section .text-link{
  border-color:rgba(216,194,138,.28) !important;
}

/* Icone e cerchi */
#servizi ~ section .benefit-icon,
#servizi ~ section .process-grid b{
  background:
    linear-gradient(180deg,#e7d5a8,#bda66f) !important;
  color:#0a0a0a !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Mantiene tutto nitido */
#servizi *,
#servizi ~ section *{
  filter:none !important;
  -webkit-filter:none !important;
}

@media(max-width:700px){
  #servizi .service-card,
  #servizi ~ section .process-grid article,
  #servizi ~ section .studio-row,
  #servizi ~ section .audience-flow article{
    backdrop-filter:none;
  }
}


/* ===== V30 — BLU NOTTE SCURO CORRETTO ===== */

/* Sfondo esterno: blu notte molto scuro, non blu acceso e non nero puro */
html,
body{
  background:
    radial-gradient(
      ellipse 82% 36% at 50% 102%,
      rgba(20,55,112,.30) 0%,
      rgba(10,30,64,.18) 38%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #050914 0%,
      #071020 48%,
      #050a15 100%
    ) !important;
}

/* Quadranti: blu notte scuro gloss */
#servizi .service-card,
#servizi ~ section .process-grid article,
#servizi ~ section .studio-row,
#servizi ~ section .audience-flow article,
#servizi ~ section .contact-card{
  background:
    radial-gradient(
      ellipse 90% 55% at 50% 112%,
      rgba(25,79,163,.23) 0%,
      rgba(12,40,90,.13) 38%,
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(12,28,55,.97) 0%,
      rgba(7,18,39,.98) 56%,
      rgba(4,11,25,.99) 100%
    ) !important;
  border:1px solid rgba(90,133,201,.18) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(170,205,255,.06),
    inset 0 -1px 0 rgba(20,70,150,.08) !important;
}

/* Riflesso gloss molto delicato */
#servizi .service-card::after,
#servizi ~ section .process-grid article::after,
#servizi ~ section .studio-row::after,
#servizi ~ section .audience-flow article::after,
#servizi ~ section .contact-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      120deg,
      rgba(190,218,255,.08) 0%,
      rgba(120,165,225,.025) 20%,
      transparent 42%,
      transparent 76%,
      rgba(35,105,210,.03) 100%
    );
}

/* Hover appena più luminoso */
#servizi .service-card:hover,
#servizi ~ section .process-grid article:hover,
#servizi ~ section .audience-flow article:hover{
  border-color:rgba(105,154,228,.30) !important;
  box-shadow:
    0 26px 58px rgba(0,0,0,.42),
    0 0 36px rgba(22,72,158,.10),
    inset 0 1px 0 rgba(188,218,255,.08) !important;
}

/* Sezione "Perché scegliere": nessun rettangolo attorno ai testi */
#perche .benefits{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:24px 38px !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

#perche .benefits div{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  padding:0 0 14px !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(111,147,205,.12) !important;
}

#perche .benefits strong{
  color:#f5f7fb !important;
  font-size:16px !important;
}

#perche .benefits span{
  padding:0 !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  color:#b7c2d3 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

#perche .benefits span::before,
#perche .benefits span::after{
  content:none !important;
  display:none !important;
}

/* Popup servizi coerente con il blu notte scuro */
.service-modal,
.modal-backdrop{
  background:rgba(2,6,14,.94) !important;
}

.modal-panel{
  background:
    radial-gradient(
      ellipse 90% 55% at 50% 112%,
      rgba(22,72,156,.22) 0%,
      transparent 70%
    ),
    linear-gradient(
      160deg,
      #0c1c38 0%,
      #07142d 58%,
      #030916 100%
    ) !important;
  border-color:rgba(96,143,213,.20) !important;
}

/* Foto corretta nella sezione "Perché scegliere" */
#perche .split-image{
  background-image:url('why-approved.jpg') !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Tutto nitido */
img,
h1,h2,h3,p,span,strong,a,button{
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none !important;
}

@media(max-width:700px){
  #perche .benefits{
    grid-template-columns:1fr !important;
  }
}


/* ===== V33 — PREMIUM ELEGANTE, NON GEOMETRICO ===== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@500;600&display=swap');

:root{
  --bg-main:#050812;
  --bg-deep:#03060d;
  --panel:#0a1220;
  --panel-soft:#0d1728;
  --line:rgba(176,195,225,.10);
  --text:#f3f5f8;
  --muted:#a9b3c2;
}

/* Tipografia elegante */
body,
button,
input,
select,
textarea{
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif !important;
  font-weight:400 !important;
}

h1,
h2,
.hero h1,
.section-heading h2,
.studio-copy h2,
.split-copy h2{
  font-family:"Playfair Display",Georgia,serif !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
  line-height:1.02 !important;
}

h3,
.service-card h3,
.process-grid h3,
.benefit-plain h3,
.audience-flow span{
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
}

p,
small,
nav a,
.btn,
.text-link{
  font-weight:300 !important;
  letter-spacing:0 !important;
}

/* Home non enorme */
.hero h1,
.hero-copy h1{
  font-size:clamp(44px,5.2vw,74px) !important;
  max-width:780px !important;
}

.hero p,
.hero-copy p{
  font-size:clamp(16px,1.3vw,20px) !important;
  line-height:1.6 !important;
  max-width:680px !important;
}

/* Sfondo uguale come atmosfera alla home: blu notte quasi nero, uniforme */
html{
  background:var(--bg-deep) !important;
}

body{
  background:
    linear-gradient(180deg,
      #050812 0%,
      #060b15 42%,
      #050812 72%,
      #03060d 100%) !important;
  color:var(--text) !important;
  background-attachment:fixed !important;
}

/* Nessun blocco scollegato */
main,
section,
footer,
#servizi,
#servizi ~ section,
#servizi ~ footer{
  background:transparent !important;
}

/* Box satinati blu notte, senza glow e senza giallo */
.service-card,
.process-grid article,
.studio-row,
.audience-flow article,
.contact-card,
.modal-panel{
  background:
    linear-gradient(180deg,
      rgba(13,23,40,.95),
      rgba(7,14,27,.98)) !important;
  border:1px solid var(--line) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.service-card::before,
.service-card::after,
.process-grid article::before,
.process-grid article::after,
.studio-row::before,
.studio-row::after,
.audience-flow article::before,
.audience-flow article::after,
.contact-card::before,
.contact-card::after,
.modal-panel::before,
.modal-panel::after{
  content:none !important;
  display:none !important;
}

/* Luce soltanto su testi importanti */
.section-heading h2,
.studio-copy h2,
.split-copy h2,
.hero h1{
  text-shadow:0 2px 18px rgba(155,180,220,.08) !important;
}

.eyebrow,
.learn-more,
.text-link{
  color:#b9c7dd !important;
}

/* Hover sobrio */
.service-card:hover,
.process-grid article:hover,
.audience-flow article:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(176,195,225,.17) !important;
  box-shadow:
    0 24px 52px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Sezione Perché scegliere: solo testo, zero rettangoli */
#perche .benefits-plain-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:28px 46px !important;
  margin-top:28px !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

#perche .benefit-plain{
  padding:0 !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

#perche .benefit-plain h3{
  margin:0 0 7px !important;
  font-size:17px !important;
  color:#f3f5f8 !important;
}

#perche .benefit-plain p{
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1.55 !important;
  color:var(--muted) !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

#perche .benefits-plain-grid *,
#perche .benefits-plain-grid *::before,
#perche .benefits-plain-grid *::after{
  background-color:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Popup dei servizi coerente e molto scuro */
.service-modal,
.modal-backdrop{
  background:rgba(1,4,10,.95) !important;
}

.modal-panel{
  background:linear-gradient(180deg,#0b1424,#050a13) !important;
  border-color:rgba(176,195,225,.10) !important;
}

/* Nitidezza */
img,
.reveal,
.reveal-child,
.stagger-group > *{
  filter:none !important;
  -webkit-filter:none !important;
}

h1,h2,h3,p,span,strong,a,button{
  text-shadow:none;
}

@media(max-width:700px){
  body{
    background-attachment:scroll !important;
  }

  .hero h1,
  .hero-copy h1{
    font-size:42px !important;
  }

  #perche .benefits-plain-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
}


/* ===== V34 — FONT PULITO + BOX GLOSS COERENTI ===== */

/* Font elegante, pulito e non corsivo */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

body,
button,
input,
select,
textarea,
nav a,
.btn,
.text-link,
small,
p{
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif !important;
}

h1,h2,h3,
.brand,
.logo{
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif !important;
  font-style:normal !important;
  letter-spacing:-.035em !important;
}

h1,
.hero h1{
  font-weight:700 !important;
}

h2,
.section-heading h2,
.studio-copy h2,
.split-content h2{
  font-weight:600 !important;
}

h3,
.service-card h3,
.process-grid h3,
.benefit-gloss h3{
  font-weight:500 !important;
}

p,
small{
  font-weight:300 !important;
}

/* Mantiene lo sfondo approvato della V33 */
html{
  background:#03060d !important;
}

body{
  background:
    linear-gradient(
      180deg,
      #050812 0%,
      #060b15 42%,
      #050812 72%,
      #03060d 100%
    ) !important;
}

/* Box dello stesso colore dello sfondo, con gloss delicato */
.service-card,
.process-grid article,
.studio-row,
.audience-flow article,
.contact-card,
.modal-panel,
.benefit-gloss{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(8,14,27,.94),
      rgba(5,10,20,.98)
    ) !important;
  border:1px solid rgba(151,174,209,.10) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Gloss leggero nella parte alta */
.service-card::after,
.process-grid article::after,
.studio-row::after,
.audience-flow article::after,
.contact-card::after,
.modal-panel::after,
.benefit-gloss::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.018) 20%,
      transparent 42%,
      transparent 78%,
      rgba(93,124,171,.018) 100%
    );
}

/* Nessun effetto geometrico o blu acceso */
.service-card::before,
.process-grid article::before,
.studio-row::before,
.audience-flow article::before,
.contact-card::before,
.modal-panel::before,
.benefit-gloss::before{
  content:none !important;
  display:none !important;
}

/* Sezione Perché scegliere: box ordinati e coerenti */
#perche .benefits-gloss-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px 20px !important;
  margin-top:28px !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

#perche .benefit-gloss{
  min-height:112px;
  padding:20px 20px 18px !important;
  border-radius:16px !important;
}

#perche .benefit-gloss h3{
  margin:0 0 8px !important;
  font-size:17px !important;
  color:#f4f6fa !important;
}

#perche .benefit-gloss p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:#aeb8c7 !important;
}

/* Hover molto sobrio */
.service-card:hover,
.process-grid article:hover,
.audience-flow article:hover,
.benefit-gloss:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(163,184,216,.16) !important;
  box-shadow:
    0 24px 50px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Titoli e testi nitidi */
h1,h2,h3,p,span,strong,a,button,small{
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

@media(max-width:700px){
  #perche .benefits-gloss-grid{
    grid-template-columns:1fr !important;
  }
}


/* ===== V35 — UNICO COLORE, BOX GLOSS, FONT PREMIUM ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root{
  --jtp-bg:#05070b;
  --jtp-text:#f5f6f8;
  --jtp-muted:#aeb5c2;
  --jtp-gold:#d6b15f;
  --jtp-line:rgba(255,255,255,.065);
}

/* Un unico colore continuo per tutto il sito */
html,
body{
  background:var(--jtp-bg) !important;
}

body{
  color:var(--jtp-text) !important;
  background-image:
    linear-gradient(
      180deg,
      #05070b 0%,
      #070b12 50%,
      #05070b 100%
    ) !important;
  background-attachment:fixed !important;
}

/* Nessuna sezione con un colore diverso */
main,
section,
footer,
header,
.site-header,
#servizi,
#servizi ~ section,
#servizi ~ footer{
  background:transparent !important;
}

/* Tipografia premium e semplice */
body,
button,
input,
select,
textarea,
p,
small,
nav a,
.btn,
.text-link{
  font-family:"Inter","Helvetica Neue",Arial,sans-serif !important;
}

h1,
h2,
h3,
.brand,
.logo,
.service-card h3,
.process-grid h3,
.benefit-gloss h3{
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif !important;
  font-style:normal !important;
  letter-spacing:-.03em !important;
}

h1,
.hero h1,
.hero-copy h1{
  font-weight:700 !important;
  font-size:clamp(46px,5vw,72px) !important;
  line-height:1.02 !important;
}

h2,
.section-heading h2,
.studio-copy h2,
.split-content h2{
  font-weight:600 !important;
  font-size:clamp(32px,3.6vw,50px) !important;
  line-height:1.06 !important;
}

h3,
.service-card h3,
.process-grid h3,
.benefit-gloss h3{
  font-weight:600 !important;
}

p,
small{
  font-weight:400 !important;
  color:var(--jtp-muted) !important;
}

/* Box dello stesso colore dello sfondo, con solo effetto gloss */
.service-card,
.process-grid article,
.studio-row,
.audience-flow article,
.contact-card,
.modal-panel,
.benefit-gloss{
  position:relative;
  overflow:hidden;
  background:rgba(5,7,11,.74) !important;
  border:1px solid var(--jtp-line) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.028) !important;
  backdrop-filter:blur(8px);
}

/* Riflesso lucido sottile */
.service-card::after,
.process-grid article::after,
.studio-row::after,
.audience-flow article::after,
.contact-card::after,
.modal-panel::after,
.benefit-gloss::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.015) 22%,
      transparent 44%,
      transparent 78%,
      rgba(255,255,255,.012) 100%
    );
}

/* Nessun altro effetto colorato */
.service-card::before,
.process-grid article::before,
.studio-row::before,
.audience-flow article::before,
.contact-card::before,
.modal-panel::before,
.benefit-gloss::before{
  content:none !important;
  display:none !important;
}

/* Hover minimale */
.service-card:hover,
.process-grid article:hover,
.audience-flow article:hover,
.benefit-gloss:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,255,255,.11) !important;
  box-shadow:
    0 24px 50px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Colori testo */
h1,h2,h3,strong,
nav a,
.btn,
.text-link{
  color:var(--jtp-text) !important;
}

.eyebrow,
.learn-more,
.accent{
  color:var(--jtp-gold) !important;
}

/* Perché scegliere: box coerenti, stesso colore del fondo */
#perche .benefits-gloss-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px 20px !important;
}

#perche .benefit-gloss{
  background:rgba(5,7,11,.74) !important;
  border:1px solid var(--jtp-line) !important;
  border-radius:16px !important;
  padding:20px !important;
}

#perche .benefit-gloss h3{
  margin:0 0 8px !important;
  font-size:17px !important;
}

#perche .benefit-gloss p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

/* Popup coerente, stesso colore */
.service-modal,
.modal-backdrop{
  background:rgba(5,7,11,.94) !important;
}

.modal-panel{
  background:rgba(5,7,11,.96) !important;
  border-color:var(--jtp-line) !important;
}

/* Nitidezza */
img,
h1,h2,h3,p,span,strong,a,button,small,
.reveal,
.reveal-child,
.stagger-group > *{
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none !important;
}

@media(max-width:700px){
  body{
    background-attachment:scroll !important;
  }

  .hero h1,
  .hero-copy h1{
    font-size:42px !important;
  }

  #perche .benefits-gloss-grid{
    grid-template-columns:1fr !important;
  }

  .service-card,
  .process-grid article,
  .studio-row,
  .audience-flow article,
  .benefit-gloss{
    backdrop-filter:none;
  }
}

/* ===== FINAL THEME OVERRIDE — requested visual-only changes ===== */
:root{
  --site-bg-start:#05070B;
  --site-bg-mid:#070A10;
  --site-bg-end:#05070B;
  --site-surface:#05070B;
}

html{
  background:#05070B !important;
}

body{
  background:#05070B !important;
  background-image:linear-gradient(180deg,#05070B 0%,#070A10 50%,#05070B 100%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-attachment:fixed !important;
}

body,
body p,
body span,
body a,
body button,
body input,
body select,
body textarea,
body label,
body small,
body li{
  font-family:"Inter",Arial,sans-serif !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .brand,
body .brand strong{
  font-family:"Plus Jakarta Sans",Arial,sans-serif !important;
}

/* Keep every section transparent so one continuous page gradient remains visible. */
body header,
body main,
body section,
body footer,
body .topbar,
body .garments-section,
body .quote-section,
body .studio-section,
body .process-section,
body .audience-section,
body .contact-section{
  background-color:transparent !important;
  background-image:none !important;
}

/* Neutral satin/glass surfaces: same base color as the page, no blue cast, glow or visible outline. */
body .service-card,
body .services article,
body .clients article,
body .process-grid article,
body .studio-row,
body .audience-flow article,
body .contact-card,
body .benefit-gloss,
body .modal-panel,
body .garment-list span,
body .quote-section input,
body .quote-section select,
body .quote-section textarea{
  background-color:#05070B !important;
  background-image:linear-gradient(145deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 30%,rgba(255,255,255,0) 62%,rgba(255,255,255,.018) 100%) !important;
  border-color:rgba(255,255,255,.045) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(255,255,255,.012) !important;
}

body .service-card::before,
body .services article::before,
body .clients article::before,
body .process-grid article::before,
body .studio-row::before,
body .audience-flow article::before,
body .contact-card::before,
body .benefit-gloss::before,
body .modal-panel::before{
  content:none !important;
  display:none !important;
}

body .service-card::after,
body .services article::after,
body .clients article::after,
body .process-grid article::after,
body .studio-row::after,
body .audience-flow article::after,
body .contact-card::after,
body .benefit-gloss::after,
body .modal-panel::after{
  background:linear-gradient(115deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.012) 24%,transparent 48%,transparent 100%) !important;
  opacity:1 !important;
}

body .service-card:hover,
body .process-grid article:hover,
body .audience-flow article:hover,
body .benefit-gloss:hover{
  border-color:rgba(255,255,255,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(255,255,255,.015) !important;
}

/* Remove residual colored glows/shadows without changing dimensions or placement. */
body .service-card,
body .process-grid article,
body .studio-row,
body .audience-flow article,
body .contact-card,
body .benefit-gloss,
body .modal-panel,
body .garment-list span{
  text-shadow:none !important;
}

/* ===== REVISIONE FINALE DA FEEDBACK VISIVO ===== */
/* Tutti i titoli principali usano lo stesso carattere di “Raccontaci il tuo progetto”
   e “Perché scegliere Just To Print”, superando le vecchie regole serif. */
body .hero h1,
body .section-heading h2,
body .studio-copy h2,
body .process-section .section-heading h2,
body #perche .split-content > h2,
body #clienti .section-heading h2,
body .quote-copy h2,
body .modal-panel h2{
  font-family:"Plus Jakarta Sans",Arial,sans-serif !important;
  font-weight:600 !important;
  font-style:normal !important;
  letter-spacing:-.035em !important;
}

/* Anche le parole evidenziate restano nello stesso font del titolo. */
body .hero h1 span,
body .section-heading h2 span,
body .studio-copy h2 span,
body #perche .split-content > h2 span,
body #clienti .section-heading h2 span,
body .quote-copy h2 span{
  font-family:inherit !important;
  font-weight:inherit !important;
  font-style:inherit !important;
}

/* Ripristino della leggibilità delle scritte nei pulsanti chiari. */
body .btn-light,
body .btn-light:link,
body .btn-light:visited,
body button.btn-light,
body .submit.btn-light{
  color:#080A0F !important;
  -webkit-text-fill-color:#080A0F !important;
  text-shadow:none !important;
}

body .btn-light span,
body .btn-light strong{
  color:#080A0F !important;
  -webkit-text-fill-color:#080A0F !important;
}

body .btn-outline,
body .btn-outline:link,
body .btn-outline:visited{
  color:#F5F6F7 !important;
  -webkit-text-fill-color:#F5F6F7 !important;
}

/* Sei riquadri: contenuti ben centrati e senza testi tagliati. */
body #perche .benefit-gloss{
  min-height:138px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding:22px 24px !important;
  overflow:hidden !important;
}

body #perche .benefit-gloss h3{
  width:100% !important;
  margin:0 0 9px !important;
  font-size:17px !important;
  line-height:1.28 !important;
  text-wrap:balance;
}

body #perche .benefit-gloss p{
  width:100% !important;
  margin:0 !important;
  line-height:1.45 !important;
  text-wrap:balance;
}

/* Superfici uniformi: stessa base dello sfondo, gloss satinato neutro e più percepibile. */
body .service-card,
body .services article,
body .clients article,
body .process-grid article,
body .studio-row,
body .audience-flow article,
body .contact-card,
body #perche .benefit-gloss,
body .modal-panel,
body .garment-list span{
  position:relative !important;
  isolation:isolate !important;
  background-color:#05070B !important;
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.025) 22%,rgba(255,255,255,0) 48%,rgba(255,255,255,.018) 76%,rgba(255,255,255,.045) 100%) !important;
  border:1px solid rgba(255,255,255,.065) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 14px 30px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(9px) saturate(90%) !important;
  -webkit-backdrop-filter:blur(9px) saturate(90%) !important;
}

body .service-card::before,
body .services article::before,
body .clients article::before,
body .process-grid article::before,
body .studio-row::before,
body .audience-flow article::before,
body .contact-card::before,
body #perche .benefit-gloss::before,
body .modal-panel::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  inset:1px 1px auto 1px !important;
  height:42% !important;
  border-radius:inherit !important;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,0)) !important;
  opacity:1 !important;
}

body .service-card::after,
body .services article::after,
body .clients article::after,
body .process-grid article::after,
body .studio-row::after,
body .audience-flow article::after,
body .contact-card::after,
body #perche .benefit-gloss::after,
body .modal-panel::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.032) 32%,transparent 58%) !important;
  opacity:.9 !important;
}

/* Nessuna dominante blu o glow nei riquadri, anche al passaggio del mouse. */
body .service-card:hover,
body .process-grid article:hover,
body .audience-flow article:hover,
body #perche .benefit-gloss:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(255,255,255,.022),
    0 17px 34px rgba(0,0,0,.2) !important;
}

@media(max-width:700px){
  body #perche .benefit-gloss{
    min-height:124px !important;
  }
}

/* ===== UNIFORMAZIONE GLOSS SU TUTTI I RIQUADRI ===== */
/* Stesso trattamento dei sei riquadri “Perché sceglierci” su tutte le card del sito. */
body .service-card,
body .services > article,
body .process-grid > article,
body .studio-row,
body .audience-flow > article,
body .contact-card,
body .modal-panel,
body .garment-list > span,
body #perche .benefit-gloss {
  position:relative !important;
  isolation:isolate !important;
  background-color:#05070B !important;
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.025) 22%,rgba(255,255,255,0) 48%,rgba(255,255,255,.018) 76%,rgba(255,255,255,.045) 100%) !important;
  border:1px solid rgba(255,255,255,.065) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 14px 30px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(9px) saturate(90%) !important;
  -webkit-backdrop-filter:blur(9px) saturate(90%) !important;
}

body .service-card::before,
body .services > article::before,
body .process-grid > article::before,
body .studio-row::before,
body .audience-flow > article::before,
body .contact-card::before,
body .modal-panel::before,
body .garment-list > span::before,
body #perche .benefit-gloss::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  inset:1px 1px auto 1px !important;
  height:42% !important;
  border-radius:inherit !important;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,0)) !important;
  opacity:1 !important;
}

body .service-card::after,
body .services > article::after,
body .process-grid > article::after,
body .studio-row::after,
body .audience-flow > article::after,
body .contact-card::after,
body .modal-panel::after,
body .garment-list > span::after,
body #perche .benefit-gloss::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.032) 32%,transparent 58%) !important;
  opacity:.9 !important;
}

/* Anche i campi del modulo riprendono lo stesso materiale satinato, senza blu. */
body .quote-section input,
body .quote-section select,
body .quote-section textarea {
  background-color:#05070B !important;
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.025) 22%,rgba(255,255,255,0) 48%,rgba(255,255,255,.018) 76%,rgba(255,255,255,.045) 100%) !important;
  border:1px solid rgba(255,255,255,.065) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 14px 30px rgba(0,0,0,.16) !important;
  color:#F5F6F7 !important;
}

body .quote-section input:focus,
body .quote-section select:focus,
body .quote-section textarea:focus {
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.022),
    0 17px 34px rgba(0,0,0,.20) !important;
  outline:none !important;
}
/* final fixes */
.studio-row{max-width:1180px!important;transform:scale(.94)!important;transform-origin:center!important}
#perche .split-image img,.split-image img{object-fit:contain!important;background:#05070B}
#perche .split-image{background-size:contain!important;background-position:center!important}
.studio-row,.studio-copy,.studio-media{background:#05070B!important;background-image:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 25%,transparent 55%,rgba(255,255,255,.04))!important}

/* ===== CORREZIONE FINALE MIRATA: NERO GLOSS + DIMENSIONI ===== */
:root{
  --panel-neutral:#05070B;
}

/* Elimina definitivamente qualsiasi dominante blu da tutti i quadranti indicati. */
body #servizi .service-card,
body #servizi .service-image-wrap,
body #servizi .service-card .card-body,
body #come-lavoriamo .process-grid > article,
body #clienti .audience-flow > article,
body #grafica .studio-row,
body #perche .benefit-gloss{
  background-color:var(--panel-neutral) !important;
  background-image:
    linear-gradient(145deg,
      rgba(255,255,255,.070) 0%,
      rgba(255,255,255,.025) 19%,
      rgba(255,255,255,.006) 42%,
      rgba(255,255,255,0) 64%,
      rgba(255,255,255,.025) 100%) !important;
  border-color:rgba(255,255,255,.060) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.080),
    inset 0 -1px 0 rgba(255,255,255,.014),
    0 14px 28px rgba(0,0,0,.16) !important;
}

body #servizi .service-card::before,
body #servizi .service-card::after,
body #come-lavoriamo .process-grid > article::before,
body #come-lavoriamo .process-grid > article::after,
body #clienti .audience-flow > article::before,
body #clienti .audience-flow > article::after,
body #grafica .studio-row::before,
body #grafica .studio-row::after{
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

body #servizi .service-card:hover,
body #come-lavoriamo .process-grid > article:hover,
body #clienti .audience-flow > article:hover{
  background-color:var(--panel-neutral) !important;
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.078),rgba(255,255,255,.022) 28%,transparent 62%,rgba(255,255,255,.028)) !important;
  border-color:rgba(255,255,255,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.090),
    inset 0 -1px 0 rgba(255,255,255,.016),
    0 16px 30px rgba(0,0,0,.18) !important;
}

/* Le due card grafiche: circa 5% più piccole, prima a sinistra e seconda a destra. */
body #grafica.studio-section{
  max-width:1280px !important;
}
body #grafica .studio-row{
  width:95% !important;
  max-width:1120px !important;
  min-height:304px !important;
  transform:none !important;
}
body #grafica .studio-row:first-child{
  margin-left:0 !important;
  margin-right:auto !important;
}
body #grafica .studio-row-reverse{
  margin-left:auto !important;
  margin-right:0 !important;
}
body #grafica .studio-media,
body #grafica .studio-media img{
  min-height:304px !important;
}
body #grafica .studio-copy{
  padding:36px 40px !important;
}

/* “Perché scegliere”: riduzione reale del 5%, mantenendo la foto intera. */
body #perche.split{
  width:95% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:1fr 1fr !important;
}
body #perche .split-image{
  min-height:570px !important;
  background-image:url('why-approved.jpg') !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:#05070B !important;
}
body #perche .split-content{
  padding:80px 6.65vw !important;
}

@media(max-width:800px){
  body #grafica .studio-row,
  body #grafica .studio-row:first-child,
  body #grafica .studio-row-reverse{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  body #perche.split{
    width:100% !important;
    grid-template-columns:1fr !important;
  }
  body #perche .split-image{
    min-height:399px !important;
  }
}

/* ===== MICRO-RIDIMENSIONAMENTO APPROVATO — NON MODIFICARE I QUADRANTI ===== */
/* Altri 5% in meno rispetto alla versione precedente; materiale e colori invariati. */
@media (min-width:801px){
  body #grafica .studio-row{
    width:90.25% !important;
    max-width:1064px !important;
    min-height:289px !important;
  }
  body #grafica .studio-row:first-child{
    margin-left:0 !important;
    margin-right:auto !important;
    transform:translateX(-2.5%) !important;
  }
  body #grafica .studio-row-reverse{
    margin-left:auto !important;
    margin-right:0 !important;
    transform:translateX(2.5%) !important;
  }
  body #grafica .studio-media,
  body #grafica .studio-media img{
    min-height:289px !important;
  }
  body #grafica .studio-copy{
    padding:34px 38px !important;
  }

  body #perche.split{
    width:90.25% !important;
  }
  body #perche .split-image{
    min-height:542px !important;
  }
  body #perche .split-content{
    padding:76px 6.3vw !important;
  }
}

/* ===== LUCE AMBIENTALE CALDA + RIDUZIONE FINALE SEZIONE PERCHÉ ===== */
/* Mantiene intatti colore e materiale dei quadranti: la luce vive solo sullo sfondo generale. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 48% 30% at 14% 18%, rgba(255,205,132,.065) 0%, rgba(255,205,132,.026) 36%, transparent 72%),
    radial-gradient(ellipse 44% 28% at 88% 47%, rgba(255,188,105,.052) 0%, rgba(255,188,105,.020) 38%, transparent 74%),
    radial-gradient(ellipse 52% 30% at 32% 84%, rgba(255,218,160,.048) 0%, rgba(255,218,160,.018) 40%, transparent 76%);
  opacity:.95;
}
body > header,
body > main,
body > footer{
  position:relative;
  z-index:1;
}

/* Un ulteriore 5% in meno solo per l'intero blocco “Perché scegliere”. */
@media (min-width:801px){
  body #perche.split{
    width:85.7375% !important;
  }
  body #perche .split-image{
    min-height:515px !important;
  }
  body #perche .split-content{
    padding:72px 5.98vw !important;
  }
  body #perche .split-content > h2{
    font-size:95% !important;
  }
  body #perche .split-content > p{
    font-size:95% !important;
  }
  body #perche .benefits{
    gap:22px !important;
    margin-top:36px !important;
  }
  body #perche .benefit-gloss{
    min-height:131px !important;
    padding:21px 23px !important;
  }
  body #perche .benefit-gloss h3{
    font-size:16px !important;
  }
  body #perche .benefit-gloss p{
    font-size:95% !important;
  }
}

/* ===== REVISIONE FINALE: BOX PERCHÉ + HERO + LUCE OFFICINA PREMIUM ===== */
/* Riduce il blocco intero senza rimpicciolire separatamente il titolo o i testi. */
@media (min-width:801px){
  body #perche.split{
    width:81.45% !important;
    max-width:1320px !important;
  }
  body #perche .split-image{
    min-height:489px !important;
  }
  body #perche .split-content{
    padding:68px 5.65vw !important;
  }
  body #perche .split-content > h2,
  body #perche .split-content > p,
  body #perche .benefit-gloss p{
    font-size:revert !important;
  }
  body #perche .benefits{
    gap:21px !important;
    margin-top:34px !important;
  }
  body #perche .benefit-gloss{
    min-height:125px !important;
    padding:20px 22px !important;
  }
}

/* Testi descrittivi della home chiaramente più piccoli del titolo principale. */
body #home .hero-content .lead{
  font-size:clamp(15px,1.35vw,19px) !important;
  line-height:1.58 !important;
  max-width:590px !important;
}
body #home .hero-content .hero-sub,
body #home .hero-content > p:not(.eyebrow):not(.lead){
  font-size:clamp(14px,1.15vw,17px) !important;
  line-height:1.6 !important;
  max-width:590px !important;
}

/* Luce calda più percepibile ma ancora sobria: effetto officina/serigrafia. */
body::before{
  background:
    radial-gradient(ellipse 52% 34% at 12% 15%, rgba(255,201,124,.105) 0%, rgba(255,201,124,.044) 34%, transparent 72%),
    radial-gradient(ellipse 46% 30% at 90% 43%, rgba(255,174,82,.082) 0%, rgba(255,174,82,.032) 38%, transparent 74%),
    radial-gradient(ellipse 56% 34% at 30% 86%, rgba(255,220,164,.070) 0%, rgba(255,220,164,.026) 42%, transparent 77%),
    linear-gradient(115deg, transparent 0%, rgba(255,214,153,.018) 48%, transparent 72%) !important;
  opacity:1 !important;
}

/* Una sottile luce alta, simile al riflesso di una lampada industriale. */
body::after{
  content:"";
  position:fixed;
  top:-18vh;
  left:18%;
  width:64%;
  height:42vh;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,216,157,.075) 0%, rgba(255,216,157,.025) 42%, transparent 72%);
  filter:blur(18px);
}

/* ===== TARATURA BLU NOTTE PREMIUM — REVISIONE MIRATA ===== */
/* Sfondo appena più blu notte, mantenendo la luce calda già approvata. */
:root{
  --bg:#050811;
  --panel-neutral:#070B14;
}
html,
body{
  background:
    linear-gradient(180deg,#050811 0%,#070B14 50%,#050811 100%) !important;
}

/* Quadranti coordinati al fondo, ma con più volume e riflesso satinato. */
body #servizi .service-card,
body #come-lavoriamo .process-grid > article,
body #clienti .audience-flow > article,
body #grafica .studio-row,
body #perche .benefit-gloss,
body .quote-section form,
body .quote-section input,
body .quote-section select,
body .quote-section textarea{
  background-color:#070B14 !important;
  background-image:
    linear-gradient(145deg,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.028) 18%,
      rgba(255,255,255,.006) 44%,
      rgba(255,255,255,0) 66%,
      rgba(255,205,132,.025) 100%) !important;
  border-color:rgba(255,255,255,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 18px 34px rgba(0,0,0,.22) !important;
}

/* Home: descrizioni molto più piccole del titolo principale. */
body #home .hero-content .lead{
  font-size:clamp(13px,1.05vw,16px) !important;
  line-height:1.55 !important;
  max-width:540px !important;
}
body #home .hero-content .tech{
  font-size:clamp(11px,.88vw,14px) !important;
  line-height:1.55 !important;
  max-width:560px !important;
  letter-spacing:.01em !important;
}

/* Titolo “Perché scegliere Just To Print” riportato a una dimensione importante. */
body #perche .split-content > h2{
  font-size:clamp(36px,3.25vw,50px) !important;
  line-height:1.08 !important;
  letter-spacing:-1.5px !important;
}

@media(max-width:800px){
  body #perche .split-content > h2{
    font-size:clamp(32px,8.8vw,42px) !important;
  }
  body #home .hero-content .lead{
    font-size:13px !important;
  }
  body #home .hero-content .tech{
    font-size:11px !important;
  }
}

/* ===== FINAL POLISH — studio cards + image surround + premium depth ===== */
/* Le due card grafiche seguono ora esattamente il blu notte degli altri quadranti. */
body #grafica .studio-row,
body #grafica .studio-copy,
body #grafica .studio-media{
  background-color:#070B14 !important;
  background-image:
    linear-gradient(145deg,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.028) 18%,
      rgba(255,255,255,.006) 44%,
      rgba(255,255,255,0) 66%,
      rgba(255,205,132,.025) 100%) !important;
}
body #grafica .studio-media{
  overflow:hidden !important;
}
body #grafica .studio-media img{
  background:#070B14 !important;
}

/* La foto resta intera; le bande libere prendono il blu notte del sito, non il nero. */
body #perche .split-image{
  background-color:#050811 !important;
  background-image:url('why-approved.jpg') !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Piccolo intervento editoriale: più profondità senza aggiungere elementi o cambiare contenuti. */
body #servizi .service-card,
body #come-lavoriamo .process-grid > article,
body #clienti .audience-flow > article,
body #grafica .studio-row,
body #perche .benefit-gloss{
  position:relative;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}
body #servizi .service-card::after,
body #come-lavoriamo .process-grid > article::after,
body #clienti .audience-flow > article::after,
body #grafica .studio-row::after,
body #perche .benefit-gloss::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:0;
  height:1px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,211,146,.20),transparent) !important;
  opacity:.65;
}
@media (hover:hover) and (pointer:fine){
  body #servizi .service-card:hover,
  body #come-lavoriamo .process-grid > article:hover,
  body #clienti .audience-flow > article:hover,
  body #grafica .studio-row:hover,
  body #perche .benefit-gloss:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(255,255,255,.11) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 22px 40px rgba(0,0,0,.28) !important;
  }
}


/* ===== RIFINITURA TITOLI + CROP FOTO + GLOSS UNIFORME ===== */
/* Titoli principali: Manrope, elegante e sobrio, senza alterare testi o gerarchie. */
body .hero h1,
body .section-heading h2,
body .studio-copy h2,
body .process-section .section-heading h2,
body #perche .split-content > h2,
body #clienti .section-heading h2,
body .quote-copy h2,
body .modal-panel h2{
  font-family:"Manrope","Inter",Arial,sans-serif !important;
  font-weight:600 !important;
  font-style:normal !important;
  letter-spacing:-.038em !important;
}
body .hero h1 span,
body .section-heading h2 span,
body .studio-copy h2 span,
body #perche .split-content > h2 span,
body #clienti .section-heading h2 span,
body .quote-copy h2 span{
  font-family:inherit !important;
  font-weight:inherit !important;
}

/* La foto “Perché scegliere” riempie il riquadro: niente bande superiori/inferiori. */
body #perche .split-image{
  background-image:url('why-approved.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
}

/* Stesso riflesso premium su tutti i quadratini/card del sito. */
body #servizi .service-card,
body #come-lavoriamo .process-grid > article,
body #clienti .audience-flow > article,
body #perche .benefit-gloss,
body .garment-list span,
body .contact-card{
  position:relative !important;
  overflow:hidden !important;
  background-color:#070B14 !important;
  background-image:
    linear-gradient(145deg,
      rgba(255,255,255,.090) 0%,
      rgba(255,255,255,.030) 18%,
      rgba(255,255,255,.006) 45%,
      rgba(255,255,255,0) 66%,
      rgba(255,205,132,.026) 100%) !important;
  border-color:rgba(255,255,255,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 18px 34px rgba(0,0,0,.22) !important;
}
body #servizi .service-card::after,
body #come-lavoriamo .process-grid > article::after,
body #clienti .audience-flow > article::after,
body #perche .benefit-gloss::after,
body .garment-list span::after,
body .contact-card::after{
  content:"" !important;
  position:absolute !important;
  left:9% !important;
  right:9% !important;
  top:0 !important;
  height:1px !important;
  border-radius:999px !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,transparent,rgba(255,211,146,.22),transparent) !important;
  opacity:.68 !important;
}

@media(max-width:800px){
  body #perche .split-image{
    background-position:center center !important;
  }
}

/* ===== CORREZIONE MIRATA: FOTO, TITOLI E CONTINUITÀ HOME ===== */
/* Font titoli realmente distinto e più elegante, senza modificare i testi. */
body .hero h1,
body .section-heading h2,
body .studio-copy h2,
body .process-section .section-heading h2,
body #perche .split-content > h2,
body #clienti .section-heading h2,
body .quote-copy h2,
body .modal-panel h2{
  font-family:"Sora","Inter",Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.045em !important;
}

/* Crop dedicato: niente bande, ma restano visibili sia il logo a parete sia la stampa sul capo. */
body #perche .split-image{
  background-image:url('why-cropped.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#050811 !important;
}

/* La home sfuma nello stesso blu notte della sezione successiva, senza stacco netto. */
body #home.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:150px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,17,0) 0%,rgba(5,8,17,.52) 48%,#050811 100%);
}
body #home .hero-content{z-index:2 !important;}
body #servizi{
  position:relative;
  z-index:1;
  margin-top:-1px;
  background:linear-gradient(180deg,#050811 0%,rgba(5,8,17,0) 140px) !important;
}

@media(max-width:800px){
  body #home.hero::after{height:105px;}
  body #perche .split-image{background-position:center center !important;}
}

/* ===== ULTIMA RIFINITURA: FOTO ORIGINALE, BLOCCO PIÙ PICCOLO, ACCENTO CALDO ===== */
/* Usa la fotografia originale per intero: nessun taglio della scritta o dei capi. */
body #perche .split-image{
  background-image:url('why-approved.jpg') !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#050811 !important;
}

/* Riduce il quadrante completo di circa il 5%, senza rimpicciolire il solo titolo. */
@media (min-width:801px){
  body #perche.split{
    width:77.38% !important;
    max-width:1254px !important;
  }
  body #perche .split-image{
    min-height:465px !important;
  }
  body #perche .split-content{
    padding:65px 5.35vw !important;
  }
  body #perche .split-content > h2{
    font-size:clamp(38px,3.25vw,58px) !important;
  }
}

/* Accento champagne discreto: rende i titoli più presenti senza creare un glow. */
body .hero h1,
body .section-heading h2,
body .studio-copy h2,
body .process-section .section-heading h2,
body #perche .split-content > h2,
body #clienti .section-heading h2,
body .quote-copy h2{
  position:relative !important;
  text-shadow:0 1px 18px rgba(255,207,137,.055) !important;
}
body .section-heading h2::after,
body .studio-copy h2::after,
body .process-section .section-heading h2::after,
body #perche .split-content > h2::after,
body #clienti .section-heading h2::after,
body .quote-copy h2::after{
  content:"";
  display:block;
  width:58px;
  height:2px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,193,105,.82),rgba(255,221,171,.30),transparent);
  box-shadow:0 0 18px rgba(255,193,105,.12);
}
body .hero h1::after{
  content:"";
  display:block;
  width:72px;
  height:2px;
  margin-top:18px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,193,105,.82),rgba(255,221,171,.28),transparent);
  box-shadow:0 0 18px rgba(255,193,105,.12);
}

@media(max-width:800px){
  body #perche.split{width:100% !important;}
  body #perche .split-image{
    min-height:390px !important;
    background-size:contain !important;
  }
  body #perche .split-content > h2{
    font-size:clamp(34px,10vw,48px) !important;
  }
}

/* final fix */
.split-image{
 background-size:contain!important;
 background-repeat:no-repeat!important;
 background-position:center center!important;
 background-color:transparent!important;
}
.split{align-items:center;}

/* ===== CORREZIONE FINALE RICHIESTA: SOLO SEZIONE "PERCHÉ SCEGLIERE" ===== */
/* Foto grande, senza fasce sopra/sotto, mantenendo visibili entrambi i loghi. */
body #perche .split-image{
  background-image:url('why-cropped.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  min-height:465px !important;
}

/* Riduzione uniforme del 5% dell'intero blocco testuale di destra. */
@media (min-width:801px){
  body #perche .split-content{
    transform:scale(.95) !important;
    transform-origin:left center !important;
    width:105.263% !important;
  }
}

@media (max-width:800px){
  body #perche .split-image{
    min-height:390px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  body #perche .split-content{
    transform:none !important;
    width:auto !important;
  }
}

/* ===== MODIFICA RICHIESTA: FOTO CAMPIONARIO INTERA E LEGGERMENTE PIÙ GRANDE ===== */
/* Mantiene il sito invariato e interviene soltanto sulla foto della sezione "Perché sceglierci". */
body #perche .split-image{
  background-image:url('campionario.png') !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
}

@media (min-width:801px){
  body #perche.split{
    width:80% !important;
    max-width:1300px !important;
    grid-template-columns:52% 48% !important;
  }
  body #perche .split-image{
    min-height:650px !important;
  }
}

@media (max-width:800px){
  body #perche .split-image{
    min-height:500px !important;
    background-size:contain !important;
    background-position:center center !important;
  }
}

/* ===== MOBILE DESKTOP-LIKE — modifica esclusivamente telefono ===== */
@media (max-width:700px){
  html{scroll-padding-top:72px;}
  body{overflow-x:hidden;}

  /* Header pulito, stesso carattere visivo del desktop */
  body .topbar{
    min-height:68px !important;
    height:auto !important;
    padding:12px 16px !important;
    gap:12px !important;
    background:rgba(5,8,17,.94) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }
  body .topbar .brand{min-width:0 !important;}
  body .topbar .brand strong{font-size:15px !important;letter-spacing:.06em !important;}
  body .topbar .brand span{font-size:7px !important;letter-spacing:.12em !important;white-space:nowrap;}
  body .topbar nav{display:none !important;}
  body .topbar .desktop-cta{
    display:inline-flex !important;
    margin-left:auto !important;
    padding:10px 12px !important;
    min-height:40px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }

  /* Home: mantiene composizione, profondità e immagine del desktop */
  body #home.hero{
    min-height:670px !important;
    padding:104px 20px 72px !important;
    background-position:72% center !important;
    display:flex !important;
    align-items:center !important;
  }
  body #home.hero::before{
    background:linear-gradient(90deg,rgba(5,7,11,.985) 0%,rgba(5,7,11,.92) 38%,rgba(5,7,11,.56) 68%,rgba(5,7,11,.18) 100%) !important;
  }
  body #home .hero-content{width:100% !important;max-width:520px !important;margin:0 !important;}
  body #home .hero-content h1{
    font-size:clamp(45px,13vw,62px) !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
    max-width:360px !important;
  }
  body #home .hero-content .lead{font-size:14px !important;line-height:1.55 !important;max-width:340px !important;}
  body #home .hero-content .tech{font-size:10px !important;line-height:1.65 !important;max-width:350px !important;}
  body #home .actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;max-width:330px !important;}
  body #home .actions .btn{width:100% !important;justify-content:center !important;min-height:48px !important;}

  /* Spazi e titoli simili al desktop, adattati alla larghezza */
  body .section,
  body .process-section,
  body .studio-section,
  body .quote-section{padding-left:16px !important;padding-right:16px !important;}
  body .section-heading{max-width:620px !important;margin-left:auto !important;margin-right:auto !important;}
  body .section-heading h2,
  body .studio-copy h2,
  body .quote-copy h2{
    font-size:clamp(32px,9.5vw,43px) !important;
    line-height:1.08 !important;
  }

  /* Niente carosello: tutte le lavorazioni visibili come nel desktop */
  body #servizi .services{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    gap:12px !important;
    padding:0 !important;
  }
  body #servizi .service-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
    min-height:0 !important;
    scroll-snap-align:none !important;
    border-radius:16px !important;
  }
  body #servizi .service-image-wrap{aspect-ratio:1/1 !important;min-height:0 !important;}
  body #servizi .service-card img{width:100% !important;height:100% !important;aspect-ratio:1/1 !important;object-fit:cover !important;}
  body #servizi .service-card .card-body{padding:13px 12px 14px !important;text-align:left !important;}
  body #servizi .service-card h3{font-size:16px !important;margin:4px 0 8px !important;}
  body #servizi .learn-more{font-size:10px !important;margin-top:0 !important;}

  /* Blocchi grafica/catalogo: card complete, senza tagli o spostamenti */
  body #grafica.studio-section{padding-top:56px !important;padding-bottom:56px !important;}
  body #grafica .studio-row,
  body #grafica .studio-row:first-child,
  body #grafica .studio-row-reverse{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:620px !important;
    min-height:0 !important;
    margin:0 auto 20px !important;
    transform:none !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }
  body #grafica .studio-row-reverse .studio-copy{order:2 !important;}
  body #grafica .studio-row-reverse .studio-media{order:1 !important;}
  body #grafica .studio-media,
  body #grafica .studio-media img{width:100% !important;min-height:0 !important;height:auto !important;}
  body #grafica .studio-media img{aspect-ratio:16/10 !important;object-fit:cover !important;}
  body #grafica .studio-copy{padding:28px 24px 30px !important;}

  /* Processo ordinato a griglia, non una lunga sequenza */
  body #come-lavoriamo .process-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  body #come-lavoriamo .process-grid > article{
    min-height:190px !important;
    padding:20px 16px !important;
    border-radius:16px !important;
  }
  body #come-lavoriamo .process-grid h3{font-size:15px !important;line-height:1.25 !important;}
  body #come-lavoriamo .process-grid p{font-size:12px !important;line-height:1.55 !important;}

  /* Perché sceglierci: foto intera e contenuto leggibile */
  body #perche.split{
    display:flex !important;
    flex-direction:column !important;
    width:calc(100% - 32px) !important;
    margin:28px auto 58px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }
  body #perche .split-image{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:4/3 !important;
    background-image:url('campionario.png') !important;
    background-size:contain !important;
    background-position:center !important;
    background-color:#050811 !important;
  }
  body #perche .split-content{width:100% !important;padding:34px 20px 38px !important;transform:none !important;}
  body #perche .split-content > h2{font-size:clamp(31px,9vw,41px) !important;}
  body #perche .benefits{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;margin-top:28px !important;}
  body #perche .benefit-gloss{min-height:128px !important;padding:17px 14px !important;border-radius:15px !important;}
  body #perche .benefit-gloss h3{font-size:14px !important;line-height:1.25 !important;}
  body #perche .benefit-gloss p{font-size:11px !important;line-height:1.45 !important;}

  /* Clienti: griglia completa, nessuno scorrimento laterale */
  body #clienti .audience-flow{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    gap:10px !important;
  }
  body #clienti .audience-flow > article{
    width:auto !important;
    min-width:0 !important;
    flex:none !important;
    min-height:112px !important;
    padding:18px 10px !important;
    scroll-snap-align:none !important;
    border-radius:15px !important;
  }
  body #clienti .audience-flow > article:last-child{grid-column:1/-1 !important;}

  /* Preventivo e footer compatti ma completi */
  body .quote-section{display:block !important;padding-top:58px !important;padding-bottom:58px !important;}
  body .quote-copy{max-width:620px !important;margin:0 auto 28px !important;}
  body #quoteForm{display:grid !important;grid-template-columns:1fr !important;gap:14px !important;padding:20px !important;border-radius:18px !important;}
  body #quoteForm .full{grid-column:auto !important;}
  body footer{display:grid !important;grid-template-columns:1fr !important;gap:18px !important;padding:38px 20px !important;text-align:left !important;}

  /* Modali utilizzabili senza perdere lo stile */
  body .modal-panel{width:calc(100% - 24px) !important;max-height:90vh !important;overflow:auto !important;display:block !important;}
  body .modal-panel > img{width:100% !important;height:230px !important;object-fit:cover !important;}
  body .modal-copy{padding:24px 20px 28px !important;}
}

@media (max-width:390px){
  body .topbar .desktop-cta{font-size:9px !important;padding:9px 10px !important;}
  body #servizi .services{gap:9px !important;}
  body #servizi .service-card h3{font-size:14px !important;}
  body #come-lavoriamo .process-grid{grid-template-columns:1fr !important;}
  body #come-lavoriamo .process-grid > article{min-height:0 !important;}
}

/* =========================================================
   MOBILE REVISIONE FINALE — solo telefono, desktop invariato
   ========================================================= */
@media (max-width:700px){
  /* HOME: fotografia ben visibile nella parte alta, testo sotto */
  body #home.hero{
    min-height:720px !important;
    padding:330px 20px 34px !important;
    align-items:flex-end !important;
    background-image:url('hero-approved.jpg') !important;
    background-size:auto 330px !important;
    background-repeat:no-repeat !important;
    background-position:center 0 !important;
    background-color:#05070b !important;
  }
  body #home.hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,
      rgba(5,7,11,0) 0%,
      rgba(5,7,11,.04) 34%,
      rgba(5,7,11,.88) 48%,
      #05070b 62%,
      #05070b 100%) !important;
  }
  body #home .hero-content{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    position:relative !important;
    z-index:2 !important;
  }
  body #home h1{font-size:clamp(42px,12vw,55px) !important;line-height:.94 !important;}
  body #home .lead{font-size:16px !important;line-height:1.5 !important;}
  body #home .tech{font-size:10px !important;line-height:1.6 !important;}

  /* SERVIZI: due card alla volta e scorrimento naturale col dito */
  body #servizi .services{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:0 !important;
    gap:10px !important;
    padding:2px 0 14px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    overscroll-behavior-x:contain !important;
  }
  body #servizi .services::-webkit-scrollbar{display:none !important;}
  body #servizi .service-card{
    flex:0 0 calc((100% - 10px)/2) !important;
    width:calc((100% - 10px)/2) !important;
    min-width:calc((100% - 10px)/2) !important;
    max-width:none !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
    min-height:0 !important;
  }
  body #servizi .service-image-wrap{aspect-ratio:1/1.06 !important;}
  body #servizi .service-card img{aspect-ratio:1/1.06 !important;}
  body #servizi .service-card .card-body{padding:12px 10px 13px !important;}
  body #servizi .service-card h3{font-size:15px !important;}
  body #servizi .learn-more{font-size:9px !important;}

  /* COME LAVORIAMO: quadratini orizzontali, pagina molto più corta */
  body #come-lavoriamo .process-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    gap:10px !important;
    padding:2px 0 14px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  body #come-lavoriamo .process-grid::-webkit-scrollbar{display:none !important;}
  body #come-lavoriamo .process-grid::before{display:none !important;}
  body #come-lavoriamo .process-grid > article{
    flex:0 0 calc((100% - 10px)/2) !important;
    width:calc((100% - 10px)/2) !important;
    min-width:calc((100% - 10px)/2) !important;
    aspect-ratio:1/1 !important;
    min-height:0 !important;
    padding:17px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
  body #come-lavoriamo .process-grid h3{font-size:14px !important;line-height:1.18 !important;margin-bottom:8px !important;}
  body #come-lavoriamo .process-grid p{font-size:10.5px !important;line-height:1.4 !important;}

  /* PER CHI LAVORIAMO: due settori alla volta, scorribili */
  body #clienti .audience-flow{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    gap:10px !important;
    padding:2px 0 14px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    overscroll-behavior-x:contain !important;
  }
  body #clienti .audience-flow::-webkit-scrollbar{display:none !important;}
  body #clienti .audience-flow > article,
  body #clienti .audience-flow > article:last-child{
    flex:0 0 calc((100% - 10px)/2) !important;
    width:calc((100% - 10px)/2) !important;
    min-width:calc((100% - 10px)/2) !important;
    min-height:118px !important;
    grid-column:auto !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
}

@media (max-width:390px){
  body #home.hero{min-height:700px !important;background-size:auto 300px !important;padding-top:300px !important;}
  body #come-lavoriamo .process-grid{display:flex !important;grid-template-columns:none !important;}
  body #come-lavoriamo .process-grid > article{flex-basis:calc((100% - 9px)/2) !important;min-width:calc((100% - 9px)/2) !important;}
}

/* ===== MOBILE REFINEMENT V3 — desktop untouched ===== */
.mobile-swipe-hint{display:none}
@media(max-width:700px){
  /* Hero: immagine visibile ma con tutti i contenuti del desktop */
  .hero{
    min-height:560px!important;
    padding:82px 18px 28px!important;
    align-items:flex-end!important;
    background-image:url('hero-approved.jpg')!important;
    background-position:66% center!important;
    background-size:cover!important;
  }
  .hero::before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(5,7,11,.18) 0%,rgba(5,7,11,.34) 34%,rgba(5,7,11,.94) 72%,rgba(5,7,11,.99) 100%)!important;
    z-index:1!important;
  }
  .hero-content{max-width:100%!important;z-index:2!important}
  .hero .eyebrow{font-size:10px!important;letter-spacing:1.8px!important;margin-bottom:8px!important}
  .hero h1{font-size:38px!important;line-height:.98!important;letter-spacing:-1.8px!important;margin:0 0 10px!important}
  .hero .lead{font-size:14px!important;line-height:1.35!important;margin:0 0 8px!important;max-width:95%!important}
  .hero .tech{font-size:10px!important;line-height:1.4!important;margin:0 0 14px!important;opacity:.86!important}
  .hero .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:0!important}
  .hero .btn{min-height:42px!important;padding:10px 8px!important;font-size:11px!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}

  /* Spazi generali più stretti nella parte alta */
  #servizi,.studio-section,.process-section,#perche,#clienti{padding-top:42px!important;padding-bottom:42px!important}
  .section-heading{margin-bottom:18px!important}
  .section-heading h2{font-size:30px!important;margin-bottom:8px!important}
  .section-heading>p:last-child{font-size:14px!important;line-height:1.4!important}

  /* Servizi: due visibili + indicazione chiara dello swipe */
  .mobile-swipe-hint{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:-6px 0 12px;font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;opacity:.9}
  .mobile-swipe-hint b{font-size:22px;animation:swipeNudge 1.3s ease-in-out infinite}
  @keyframes swipeNudge{50%{transform:translateX(6px)}}
  #servizi .services{
    display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;gap:10px!important;
    scroll-snap-type:x mandatory!important;padding:0 18px 10px 0!important;margin-right:-20px!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
  }
  #servizi .services::-webkit-scrollbar{display:none!important}
  #servizi .service-card{flex:0 0 calc(50% - 5px)!important;scroll-snap-align:start!important;min-width:0!important}
  #servizi .service-image-wrap{aspect-ratio:1/1!important;min-height:0!important}
  #servizi .card-body{padding:10px!important}
  #servizi .card-body h3{font-size:15px!important}
  #servizi .learn-more{font-size:10px!important}

  /* Grafica e catalogo: due card compatte, immagine laterale */
  .studio-section{display:grid!important;gap:12px!important;padding-left:18px!important;padding-right:18px!important}
  .studio-row,.studio-row-reverse{
    display:grid!important;grid-template-columns:92px 1fr!important;min-height:0!important;gap:12px!important;
    padding:12px!important;border-radius:16px!important;align-items:center!important;
  }
  .studio-row-reverse .studio-copy{order:2!important}.studio-row-reverse .studio-media{order:1!important}
  .studio-media{min-height:92px!important;height:92px!important;border-radius:12px!important;overflow:hidden!important}
  .studio-media img{width:100%!important;height:100%!important;object-fit:cover!important}
  .studio-copy{padding:0!important}
  .studio-copy .eyebrow{font-size:8px!important;margin-bottom:4px!important}
  .studio-copy h2{font-size:18px!important;line-height:1.08!important;margin:0 0 5px!important}
  .studio-copy p{font-size:11px!important;line-height:1.35!important;margin:0 0 5px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .studio-copy p+ p{display:none!important}
  .studio-copy .text-link{font-size:10px!important}

  /* Come lavoriamo: griglia 2x2, non scorrevole */
  .process-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;overflow:visible!important}
  .process-grid article{min-width:0!important;padding:12px 10px!important;border-radius:14px!important;min-height:112px!important}
  .process-grid article h3{font-size:13px!important;line-height:1.15!important;margin-bottom:5px!important}
  .process-grid article p{font-size:10px!important;line-height:1.3!important;margin:0!important}

  /* Perché sceglierci: immagine bassa + 6 vantaggi molto compatti */
  #perche{display:block!important}
  #perche .split-image{min-height:165px!important;height:165px!important;background-position:center 38%!important}
  #perche .split-content{padding:24px 18px 34px!important}
  #perche .split-content>p:not(.eyebrow){font-size:13px!important;line-height:1.4!important;margin-bottom:14px!important}
  #perche h2{font-size:29px!important;margin-bottom:8px!important}
  #perche .benefits-gloss-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
  #perche .benefit-gloss{padding:10px 7px!important;min-height:70px!important;border-radius:12px!important}
  #perche .benefit-gloss h3{font-size:10px!important;line-height:1.15!important;margin:0!important;text-align:center!important}
  #perche .benefit-gloss p{display:none!important}

  /* Pubblici: tutti visibili, piccoli e senza quadratoni */
  #clienti{padding-left:18px!important;padding-right:18px!important}
  #clienti .audience-flow{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;overflow:visible!important}
  #clienti .audience-flow article{display:inline-flex!important;flex:0 1 auto!important;min-width:0!important;padding:6px 9px!important;border:0!important;background:rgba(255,255,255,.05)!important;border-radius:999px!important;gap:5px!important;align-items:center!important;box-shadow:none!important}
  #clienti .audience-flow i{font-size:13px!important;margin:0!important}
  #clienti .audience-flow span{font-size:10px!important;white-space:nowrap!important}
}

/* ===== MOBILE V4 — correzioni richieste, desktop invariato ===== */
.mobile-process-hint{display:none}
@media (max-width:700px){
  /* Hero compatta: contenuti essenziali sovrapposti alla foto */
  body #home.hero{
    min-height:430px!important;
    height:430px!important;
    padding:72px 16px 22px!important;
    display:flex!important;
    align-items:flex-end!important;
    background-image:url('hero-approved.jpg')!important;
    background-size:cover!important;
    background-position:64% center!important;
  }
  body #home.hero::before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(180deg,rgba(4,6,10,.14) 0%,rgba(4,6,10,.20) 38%,rgba(4,6,10,.82) 78%,rgba(4,6,10,.96) 100%)!important;
  }
  body #home .hero-overlay{display:none!important}
  body #home .hero-content{width:100%!important;max-width:520px!important;margin:0 auto!important;position:relative!important;z-index:2!important}
  body #home .hero-content .eyebrow{display:block!important;font-size:9px!important;line-height:1.2!important;letter-spacing:1.6px!important;margin:0 0 6px!important}
  body #home .hero-content h1{font-size:34px!important;line-height:.98!important;letter-spacing:-1.4px!important;margin:0 0 14px!important}
  body #home .hero-content .lead,
  body #home .hero-content .tech{display:none!important}
  body #home .hero-content .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0!important}
  body #home .hero-content .actions .btn{min-height:39px!important;padding:8px 6px!important;font-size:10.5px!important;line-height:1.1!important;white-space:nowrap!important}

  /* Subito dopo la hero iniziano i servizi */
  body #servizi{padding-top:30px!important}
  body #servizi .section-heading{margin-bottom:12px!important}

  /* Le due sezioni studio restano compatte e più vicine al processo */
  body .studio-section{padding-bottom:24px!important}
  body #come-lavoriamo{padding-top:24px!important}
  body #come-lavoriamo .section-heading{margin-bottom:10px!important}

  /* Processo: due card visibili e indicazione esplicita di scorrimento */
  .mobile-process-hint{display:flex!important;align-items:center;justify-content:flex-end;gap:8px;margin:-2px 0 10px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;opacity:.9}
  .mobile-process-hint b{font-size:20px;animation:swipeNudge 1.3s ease-in-out infinite}
  body #come-lavoriamo .process-grid{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:9px!important;
    padding:0 18px 10px 0!important;
    margin-right:-18px!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body #come-lavoriamo .process-grid::-webkit-scrollbar{display:none!important}
  body #come-lavoriamo .process-grid::before{display:none!important}
  body #come-lavoriamo .process-grid>article{
    flex:0 0 calc(50% - 5px)!important;
    width:calc(50% - 5px)!important;
    min-width:calc(50% - 5px)!important;
    min-height:120px!important;
    aspect-ratio:auto!important;
    padding:13px 11px!important;
    scroll-snap-align:start!important;
  }

  /* Perché sceglierci: immagine e contenuti ulteriormente compressi */
  body #perche{padding-top:26px!important;padding-bottom:26px!important}
  body #perche .split-image{height:118px!important;min-height:118px!important;background-position:center 42%!important}
  body #perche .split-content{padding:18px 16px 22px!important}
  body #perche .split-content .eyebrow{font-size:8px!important;margin-bottom:5px!important}
  body #perche .split-content h2{font-size:25px!important;line-height:1.03!important;margin:0 0 6px!important}
  body #perche .split-content>p:not(.eyebrow){font-size:11.5px!important;line-height:1.32!important;margin:0 0 10px!important}
  body #perche .benefits-gloss-grid{grid-template-columns:repeat(3,1fr)!important;gap:5px!important}
  body #perche .benefit-gloss{min-height:54px!important;padding:7px 5px!important;border-radius:9px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  body #perche .benefit-gloss h3{font-size:9px!important;line-height:1.12!important}

  /* Pubblici in tre sole righe, senza riquadri */
  body #clienti{padding-top:30px!important;padding-bottom:34px!important}
  body #clienti .section-heading{margin-bottom:13px!important}
  body #clienti .audience-flow{
    display:grid!important;
    grid-template-columns:repeat(12,1fr)!important;
    gap:8px 4px!important;
    overflow:visible!important;
    align-items:center!important;
  }
  body #clienti .audience-flow article{
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    width:auto!important;
    padding:0 2px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:center!important;
  }
  body #clienti .audience-flow article:nth-child(1),
  body #clienti .audience-flow article:nth-child(2),
  body #clienti .audience-flow article:nth-child(3){grid-column:span 4!important}
  body #clienti .audience-flow article:nth-child(4),
  body #clienti .audience-flow article:nth-child(5),
  body #clienti .audience-flow article:nth-child(6){grid-column:span 4!important}
  body #clienti .audience-flow article:nth-child(7){grid-column:5 / span 4!important}
  body #clienti .audience-flow i{display:none!important}
  body #clienti .audience-flow span{display:block!important;font-size:10.5px!important;line-height:1.2!important;white-space:normal!important;font-weight:700!important}
}

@media (max-width:390px){
  body #home.hero{min-height:410px!important;height:410px!important;background-position:66% center!important}
  body #home .hero-content h1{font-size:31px!important}
  body #home .hero-content .actions .btn{font-size:9.8px!important}
  body #clienti .audience-flow span{font-size:9.7px!important}
}

/* ===== MOBILE V5 — revisione finale richiesta, desktop invariato ===== */
@media (max-width:700px){
  /* HERO: testo alto a sinistra, titolo importante, CTA basse sulla stessa riga */
  body #home.hero{
    position:relative!important;
    min-height:440px!important;
    height:440px!important;
    padding:0 16px!important;
    display:block!important;
    overflow:hidden!important;
    background-image:url('hero-approved.jpg')!important;
    background-size:auto 510px!important;
    background-position:61% 58%!important;
    background-repeat:no-repeat!important;
  }
  body #home.hero::before{
    background:linear-gradient(180deg,rgba(3,5,9,.62) 0%,rgba(3,5,9,.25) 26%,rgba(3,5,9,.08) 54%,rgba(3,5,9,.52) 82%,rgba(3,5,9,.78) 100%)!important;
  }
  body #home .hero-content{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:82px 16px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  body #home .hero-content .eyebrow{
    font-size:12px!important;
    line-height:1.2!important;
    letter-spacing:1.9px!important;
    margin:0 0 8px!important;
    font-weight:800!important;
  }
  body #home .hero-content h1{
    font-size:45px!important;
    line-height:.91!important;
    letter-spacing:-2.3px!important;
    margin:0!important;
    max-width:330px!important;
    text-shadow:0 3px 18px rgba(0,0,0,.42)!important;
  }
  body #home .hero-content .actions{
    width:100%!important;
    margin-top:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  body #home .hero-content .actions .btn{
    min-height:38px!important;
    padding:8px 5px!important;
    font-size:10px!important;
    border-radius:10px!important;
  }

  /* Riduzione dei distacchi nella parte centrale */
  body .studio-section{padding-bottom:10px!important}
  body .studio-row:last-child{margin-bottom:0!important}
  body #come-lavoriamo{padding-top:8px!important;margin-top:0!important}
  body #come-lavoriamo .section-heading{margin-top:0!important}

  /* PERCHÉ SCEGLIERE: testo sopra, vantaggi a sinistra e foto grande a destra */
  body #perche{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(125px,.85fr)!important;
    grid-template-rows:auto auto auto auto!important;
    column-gap:10px!important;
    row-gap:7px!important;
    padding:28px 16px 26px!important;
    align-items:stretch!important;
  }
  body #perche .split-content{display:contents!important}
  body #perche .split-content>.eyebrow{
    grid-column:1/-1!important;
    grid-row:1!important;
    margin:0!important;
  }
  body #perche .split-content>h2{
    grid-column:1/-1!important;
    grid-row:2!important;
    font-size:29px!important;
    line-height:1!important;
    margin:0!important;
  }
  body #perche .split-content>p:not(.eyebrow){
    grid-column:1/-1!important;
    grid-row:3!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    margin:0 0 5px!important;
    max-width:100%!important;
  }
  body #perche .benefits-gloss-grid{
    grid-column:1!important;
    grid-row:4!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:repeat(3,1fr)!important;
    gap:6px!important;
    min-width:0!important;
  }
  body #perche .benefit-gloss{
    min-height:48px!important;
    padding:6px 5px!important;
    border-radius:9px!important;
  }
  body #perche .benefit-gloss h3{
    font-size:8.8px!important;
    line-height:1.13!important;
  }
  body #perche .split-image{
    grid-column:2!important;
    grid-row:4!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    border-radius:13px!important;
    background-image:url('why-cropped.jpg')!important;
    background-size:cover!important;
    background-position:center!important;
    box-shadow:0 10px 26px rgba(0,0,0,.24)!important;
  }

  /* DESTINATARI: icona sopra, griglia compatta 4 + 3 */
  body #clienti{
    padding-top:24px!important;
    padding-bottom:22px!important;
    margin-bottom:0!important;
  }
  body #clienti .section-heading{margin-bottom:17px!important}
  body #clienti .audience-flow{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px 5px!important;
    align-items:start!important;
  }
  body #clienti .audience-flow article,
  body #clienti .audience-flow article:nth-child(n){
    grid-column:auto!important;
    min-width:0!important;
    width:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    padding:0!important;
    text-align:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body #clienti .audience-flow article:nth-child(5){grid-column:1!important}
  body #clienti .audience-flow i{
    display:flex!important;
    width:30px!important;
    height:30px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.08)!important;
  }
  body #clienti .audience-flow span{
    display:block!important;
    font-size:9px!important;
    line-height:1.12!important;
    font-weight:700!important;
    white-space:normal!important;
  }

  /* Elimina il grande vuoto prima del preventivo */
  body #preventivo{
    margin-top:0!important;
    padding-top:34px!important;
  }
  body #clienti + #preventivo{margin-top:0!important}
}

@media (max-width:390px){
  body #home.hero{height:420px!important;min-height:420px!important;background-size:auto 485px!important;background-position:61% 58%!important}
  body #home .hero-content{padding-top:76px!important}
  body #home .hero-content h1{font-size:41px!important;max-width:305px!important}
  body #perche{grid-template-columns:minmax(0,1.12fr) minmax(115px,.88fr)!important}
  body #perche .benefit-gloss h3{font-size:8.2px!important}
  body #clienti .audience-flow span{font-size:8.5px!important}
}

/* ===== MOBILE V6 — rifiniture richieste, desktop invariato ===== */
@media (max-width:700px){
  /* Hero: testi più in alto e titolo più importante */
  body #home .hero-content{
    padding-top:60px!important;
  }
  body #home .hero-content .eyebrow{
    font-size:13px!important;
    margin-bottom:7px!important;
  }
  body #home .hero-content h1{
    font-size:49px!important;
    line-height:.9!important;
    max-width:345px!important;
  }

  /* Servizi: banner rettangolari, più importanti, con pallini */
  body #servizi{padding-bottom:42px!important}
  body #servizi .services{
    gap:12px!important;
    padding-bottom:8px!important;
    scroll-padding-left:0!important;
  }
  body #servizi .service-card{
    flex:0 0 82vw!important;
    max-width:340px!important;
    min-height:246px!important;
    height:246px!important;
    border-radius:15px!important;
  }
  body #servizi .service-image-wrap,
  body #servizi .service-card img{
    height:176px!important;
  }
  body #servizi .service-card .card-body{
    min-height:70px!important;
    padding:12px 15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  body #servizi .service-card h3{
    font-size:19px!important;
    margin:0!important;
  }
  body #servizi .learn-more{
    margin:0!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
  body #servizi .service-dots{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:7px!important;
    margin:10px 0 13px!important;
    min-height:10px!important;
  }
  body #servizi .service-dots span{
    display:block!important;
    width:7px!important;
    height:7px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.32)!important;
  }
  body #servizi .service-dots span:first-child{
    width:22px!important;
    background:#fff!important;
  }

  /* Come lavoriamo: 2 + 2, senza scorrimento */
  body #come-lavoriamo{
    padding-top:0!important;
  }
  body #come-lavoriamo .section-heading{
    margin-bottom:14px!important;
  }
  body #come-lavoriamo .mobile-process-hint{display:none!important}
  body #come-lavoriamo .process-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body #come-lavoriamo .process-grid>article{
    flex:none!important;
    min-width:0!important;
    min-height:112px!important;
    padding:12px 10px!important;
  }

  /* Perché scegliere: titoli dentro i riquadri più leggibili */
  body #perche .benefit-gloss h3{
    font-size:11px!important;
    line-height:1.16!important;
    letter-spacing:-.1px!important;
  }

  /* Riduce il vuoto dopo i destinatari */
  body #clienti{
    padding-bottom:12px!important;
  }
  body #preventivo{
    padding-top:22px!important;
    padding-bottom:38px!important;
  }

  /* Preventivo più compatto */
  body #preventivo .quote-copy{
    margin-bottom:18px!important;
  }
  body #preventivo .quote-copy h2{
    font-size:32px!important;
    line-height:1!important;
    margin-bottom:10px!important;
  }
  body #preventivo .quote-copy p:not(.eyebrow){
    font-size:12px!important;
    line-height:1.4!important;
  }
  body #preventivo form{
    gap:10px!important;
  }
  body #preventivo label{
    font-size:11px!important;
  }
  body #preventivo input,
  body #preventivo select,
  body #preventivo textarea{
    padding:11px!important;
    font-size:13px!important;
  }
  body #preventivo textarea{
    min-height:92px!important;
  }
}

@media (max-width:390px){
  body #home .hero-content{padding-top:54px!important}
  body #home .hero-content h1{font-size:45px!important}
  body #servizi .service-card{flex-basis:84vw!important;height:236px!important;min-height:236px!important}
  body #servizi .service-image-wrap,
  body #servizi .service-card img{height:166px!important}
  body #perche .benefit-gloss h3{font-size:10.3px!important}
}

/* ===== MOBILE V7 — servizi verticali, processo 2x2, spazi ridotti ===== */
@media (max-width:700px){
  /* Servizi: card rettangolari in verticale, scorribili */
  body #servizi .services{
    gap:14px!important;
    align-items:stretch!important;
  }
  body #servizi .service-card{
    flex:0 0 62vw!important;
    width:62vw!important;
    max-width:250px!important;
    min-width:210px!important;
    height:320px!important;
    min-height:320px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  body #servizi .service-image-wrap,
  body #servizi .service-card img{
    width:100%!important;
    height:248px!important;
    min-height:248px!important;
    object-fit:cover!important;
  }
  body #servizi .service-card .card-body{
    height:72px!important;
    min-height:72px!important;
    padding:12px 14px!important;
  }
  body #servizi .service-card h3{font-size:20px!important}

  /* Come lavoriamo: quattro quadrati veri, due sopra e due sotto */
  body #come-lavoriamo .process-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  body #come-lavoriamo .process-grid>article{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
    padding:13px 11px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    border-radius:14px!important;
  }
  body #come-lavoriamo .process-grid>article h3{
    font-size:14px!important;
    line-height:1.15!important;
    margin-bottom:7px!important;
  }
  body #come-lavoriamo .process-grid>article p{
    font-size:10px!important;
    line-height:1.3!important;
    margin:0!important;
  }

  /* Elimina lo spazio inutile dopo i destinatari */
  body #clienti{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  body #clienti .audience-flow{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  body #preventivo{
    margin-top:0!important;
    padding-top:14px!important;
  }
}

@media (max-width:390px){
  body #servizi .service-card{
    flex-basis:64vw!important;
    width:64vw!important;
    min-width:205px!important;
    height:305px!important;
    min-height:305px!important;
  }
  body #servizi .service-image-wrap,
  body #servizi .service-card img{
    height:235px!important;
    min-height:235px!important;
  }
  body #come-lavoriamo .process-grid>article h3{font-size:13px!important}
  body #come-lavoriamo .process-grid>article p{font-size:9.3px!important}
}

/* ===== MOBILE V8 — hero riposizionata e processo centrato ===== */
@media (max-width:700px){
  /* Hero: immagine spostata verso destra e leggermente in alto */
  body #home.hero{
    height:420px!important;
    min-height:420px!important;
    background-size:auto 485px!important;
    background-position:72% 43%!important;
    padding:0 16px 18px!important;
    display:flex!important;
    align-items:stretch!important;
  }
  body #home .hero-content{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:25px 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    box-sizing:border-box!important;
  }
  body #home .hero-content .eyebrow{
    margin:0 0 5px!important;
    font-size:14px!important;
    line-height:1.1!important;
    letter-spacing:1.8px!important;
  }
  body #home .hero-content h1{
    margin:0!important;
    max-width:350px!important;
    font-size:50px!important;
    line-height:.9!important;
    letter-spacing:-2px!important;
  }
  body #home .hero-content .actions{
    width:100%!important;
    margin-top:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  /* Come lavoriamo: griglia perfettamente centrata e testi più leggibili */
  body #come-lavoriamo .process-grid{
    width:100%!important;
    max-width:520px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:center!important;
    justify-items:stretch!important;
  }
  body #come-lavoriamo .process-grid>article{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    align-items:center!important;
    text-align:center!important;
    padding:13px 12px!important;
  }
  body #come-lavoriamo .process-grid>article h3{
    width:100%!important;
    font-size:15px!important;
    line-height:1.15!important;
    text-align:center!important;
  }
  body #come-lavoriamo .process-grid>article p{
    width:100%!important;
    font-size:10.5px!important;
    line-height:1.32!important;
    text-align:center!important;
  }
}

@media (max-width:390px){
  body #home.hero{
    height:405px!important;
    min-height:405px!important;
    background-size:auto 470px!important;
    background-position:73% 42%!important;
  }
  body #home .hero-content{padding-top:20px!important}
  body #home .hero-content .eyebrow{font-size:13px!important}
  body #home .hero-content h1{font-size:46px!important;max-width:320px!important}
  body #come-lavoriamo .process-grid>article h3{font-size:14px!important}
  body #come-lavoriamo .process-grid>article p{font-size:10px!important}
}

/* ===== MOBILE V10 — sola correzione hero richiesta ===== */
@media (max-width:700px){
  body #home.hero{
    height:420px!important;
    min-height:420px!important;
    padding:0 16px 18px!important;
    background-image:url('hero-approved.jpg')!important;
    background-size:auto 485px!important;
    background-position:38% 43%!important;
    background-repeat:no-repeat!important;
    overflow:hidden!important;
  }
  body #home.hero::before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:
      linear-gradient(90deg,rgba(3,5,9,.92) 0%,rgba(3,5,9,.76) 35%,rgba(3,5,9,.28) 63%,rgba(3,5,9,.04) 100%),
      linear-gradient(180deg,rgba(3,5,9,.08) 0%,rgba(3,5,9,.03) 64%,rgba(3,5,9,.68) 100%)!important;
  }
  body #home .hero-content{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:30px 0 0!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
  }
  body #home .hero-content .eyebrow{
    display:block!important;
    position:static!important;
    top:auto!important;
    margin:0 0 7px!important;
    font-size:12px!important;
    line-height:1.15!important;
    letter-spacing:1.8px!important;
  }
  body #home .hero-content h1{
    position:static!important;
    top:auto!important;
    max-width:315px!important;
    margin:0!important;
    font-size:45px!important;
    line-height:.92!important;
    letter-spacing:-2px!important;
    text-shadow:0 3px 18px rgba(0,0,0,.55)!important;
  }
  body #home .hero-content .lead,
  body #home .hero-content .tech{
    display:none!important;
  }
  body #home .hero-content .actions{
    position:static!important;
    top:auto!important;
    width:100%!important;
    margin-top:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
}
@media (max-width:390px){
  body #home.hero{
    height:405px!important;
    min-height:405px!important;
    background-size:auto 470px!important;
    background-position:37% 42%!important;
  }
  body #home .hero-content{padding-top:26px!important}
  body #home .hero-content h1{font-size:42px!important;max-width:295px!important}
}

@media(max-width:700px){
.hero-content{
 margin-top:120px !important;
}
.actions{
 margin-top:18px !important;
}
}

/* ===== MOBILE FINAL — titolo in basso, desktop invariato ===== */
@media (max-width:700px){
  body #home .hero-content{
    margin-top:0!important;
    padding:0 0 18px!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
  }
  body #home .hero-content .eyebrow{
    margin:0 0 5px!important;
    font-size:12px!important;
    line-height:1.1!important;
  }
  body #home .hero-content h1{
    margin:0 0 13px!important;
    max-width:315px!important;
    font-size:42px!important;
    line-height:.94!important;
  }
  body #home .hero-content .actions{
    margin-top:0!important;
    width:100%!important;
  }
  body #home .hero-content .lead,
  body #home .hero-content .tech{
    display:none!important;
  }
}
@media (max-width:390px){
  body #home .hero-content{
    margin-top:0!important;
    padding:0 0 14px!important;
  }
  body #home .hero-content h1{
    font-size:39px!important;
    max-width:290px!important;
    margin-bottom:11px!important;
  }
}