
:root{
  --blue:#087fc1;
  --blue-dark:#0568a2;
  --ink:#15212d;
  --muted:#556472;
  --line:#d9e1e7;
  --soft:#f4f7f9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
}
img{max-width:100%;display:block}
a{color:inherit}
.site-header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.header-inner{
  max-width:1400px;
  margin:auto;
  padding:18px 5vw 0;
}
.logo-wrap{
  display:block;
  max-width:1180px;
}
.logo-wrap img{
  width:100%;
  max-height:120px;
  object-fit:cover;
  object-position:center;
}
.nav{
  border-top:6px solid var(--blue);
  display:flex;
  gap:44px;
  padding:15px 10px 14px;
  text-transform:uppercase;
  font-size:14px;
}
.nav a{text-decoration:none}
.nav a:hover{color:var(--blue)}
.menu-btn{display:none}

.hero{
  min-height:570px;
  display:grid;
  grid-template-columns:47% 53%;
  background:linear-gradient(90deg,#fff 0%,#f6f9fb 47%,#eaf1f5 47%);
}
.hero-copy{
  padding:80px 6vw 70px;
  align-self:center;
}
.kicker,.eyebrow{
  margin:0 0 18px;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.19em;
  font-weight:700;
  font-family:"Bank Gothic","BankGothic Md BT","Arial Narrow",Arial,sans-serif;
}
.hero h1,.section h2,.split-copy h2{
  margin:0;
  text-transform:uppercase;
  color:var(--blue);
  font-family:"Bank Gothic","BankGothic Md BT","Arial Narrow",Arial,sans-serif;
  font-size:clamp(48px,5.8vw,88px);
  line-height:.94;
  letter-spacing:.035em;
  font-weight:700;
}
.hero-text{
  max-width:620px;
  margin:30px 0;
  font-size:22px;
  line-height:1.45;
}
.hero-line{width:90px;height:4px;background:var(--blue);margin:34px 0 22px}
.hero-note{
  text-transform:uppercase;
  letter-spacing:.21em;
  font-weight:700;
  line-height:1.4;
}
.hero-image{
  min-height:570px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0)),
    url("assets/robotica-automotive.jpg") center/cover no-repeat;
}
.section{
  max-width:1400px;
  margin:auto;
  padding:90px 6vw;
}
.intro{
  display:grid;
  grid-template-columns:38% 62%;
  gap:70px;
}
.section-heading span{
  color:var(--blue);
  font-weight:700;
  letter-spacing:.2em;
}
.section h2,.split-copy h2{
  margin-top:18px;
  font-size:clamp(42px,4vw,68px);
}
.intro-copy p{
  margin:0 0 24px;
  font-size:20px;
  line-height:1.65;
  color:var(--muted);
  max-width:820px;
}
.services{
  max-width:none;
  background:#fff;
  border-top:1px solid var(--line);
}
.section-title-row{
  max-width:1280px;
  margin:0 auto 45px;
}
.section-title-row h2{
  color:var(--ink);
  font-size:clamp(36px,4vw,58px);
  text-transform:none;
  letter-spacing:-.03em;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:400;
}
.service-grid{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.service-grid article{
  min-height:285px;
  padding:35px 28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.icon{
  color:var(--blue);
  font-size:38px;
  line-height:1;
  height:50px;
}
.service-grid h3{
  color:var(--blue);
  text-transform:uppercase;
  font-family:"Bank Gothic","BankGothic Md BT","Arial Narrow",Arial,sans-serif;
  letter-spacing:.06em;
  font-size:20px;
  line-height:1.12;
  margin:22px 0 14px;
}
.service-grid p{
  color:var(--muted);
  line-height:1.5;
  margin:0;
}
.split-section{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:470px;
  background:linear-gradient(130deg,#eff5f8,#fff);
}
.split-copy{
  padding:70px 6vw;
  align-self:center;
}
.split-copy p:not(.eyebrow){
  max-width:560px;
  font-size:19px;
  line-height:1.6;
  color:var(--muted);
}
.button{
  display:inline-block;
  margin-top:20px;
  padding:15px 26px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.button:hover{background:var(--blue-dark)}
.split-image{
  min-height:470px;
  background:url("assets/progettazione-cad.jpg") center/cover no-repeat;
}
.contact{
  padding-bottom:70px;
}
.contact-grid{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:3px solid var(--blue);
}
.contact-grid>div{
  padding:28px 34px 10px;
  border-right:1px solid var(--line);
}
.contact-grid>div:last-child{border-right:0}
.contact-grid h3{
  margin:0 0 10px;
  color:var(--blue);
  text-transform:uppercase;
  font-family:"Bank Gothic","BankGothic Md BT","Arial Narrow",Arial,sans-serif;
  letter-spacing:.08em;
  font-size:20px;
}
.contact-grid p{line-height:1.6;color:var(--muted)}
.contact-grid a{text-decoration:none}
.contact-grid a:hover{color:var(--blue)}
footer{
  background:linear-gradient(90deg,#066ca6,#03486e);
  color:#fff;
  padding:26px 6vw;
  display:flex;
  justify-content:space-between;
  gap:30px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-family:"Bank Gothic","BankGothic Md BT","Arial Narrow",Arial,sans-serif;
  font-size:13px;
}
@media(max-width:900px){
  .header-inner{padding:12px 5vw 0}
  .logo-wrap img{max-height:92px}
  .menu-btn{
    display:block;
    margin:8px 0 10px auto;
    background:none;border:0;font-size:24px;color:var(--blue)
  }
  .nav{
    display:none;
    flex-direction:column;
    gap:0;
    padding:0;
    border-top:4px solid var(--blue);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 6px;border-bottom:1px solid var(--line)}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:60px 7vw}
  .hero-image{min-height:380px;grid-row:1}
  .intro{grid-template-columns:1fr;gap:28px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .split-section{grid-template-columns:1fr}
  .split-image{min-height:360px;grid-row:1}
  .contact-grid{grid-template-columns:1fr}
  .contact-grid>div{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .logo-wrap img{
    object-fit:cover;
    object-position:left center;
    height:74px;
  }
  .hero-copy{padding:45px 7vw 55px}
  .hero h1{font-size:45px}
  .hero-text{font-size:18px}
  .hero-image{min-height:280px}
  .section{padding:65px 7vw}
  .intro-copy p{font-size:18px}
  .service-grid{grid-template-columns:1fr}
  .service-grid article{min-height:auto}
  .split-copy{padding:60px 7vw}
  footer{flex-direction:column;font-size:11px}
}

.icon{font-family:"Bank Gothic","BankGothic Md BT","Arial Narrow",Arial,sans-serif;font-weight:700}
.company-contact{
  max-width:1280px;
  margin:auto;
  border-top:3px solid var(--blue);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0;
}
.company-block{
  padding:30px 38px 18px 0;
  border-right:1px solid var(--line);
}
.contact-logo{
  width:min(520px,92%);
  height:auto;
  margin:0 0 20px;
}
.company-block p,.contact-details p{
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}
.contact-details{
  padding:34px 0 20px 50px;
  align-self:center;
}
.contact-details p{margin:10px 0}
.contact-details span{
  display:inline-block;
  width:72px;
  color:var(--blue);
  font-weight:700;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
}
.contact-details a{text-decoration:none}
.contact-details a:hover{color:var(--blue)}
@media(max-width:900px){
  .company-contact{grid-template-columns:1fr}
  .company-block{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .contact-details{padding:24px 0 5px}
}

/* v4: menu mobile CSS-only */
.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.menu-btn{display:none;cursor:pointer;width:34px;height:28px;flex-direction:column;justify-content:space-between;margin:10px 0 12px auto}
.menu-btn span{display:block;height:3px;width:100%;background:var(--blue);border-radius:2px}
.plc-svg{width:48px;height:48px;display:block}
@media(max-width:900px){
  .menu-btn{display:flex}
  .nav{display:none}
  .menu-toggle:checked + .menu-btn + .nav{display:flex}
}
/* FMPRO v4 — adattamento responsive, 17 settembre 2026.
   Solo layout e dimensioni: HTML, contenuti, colori e risorse originali. */
:root{--gutter:clamp(20px,5vw,96px);--section-space:clamp(44px,5vw,80px)}
html{scroll-padding-top:160px}
img{height:auto}
.header-inner{max-width:1400px;padding:12px var(--gutter) 0}
.logo-wrap{width:min(100%,760px);max-width:100%}
.logo-wrap img{width:100%;height:auto;max-height:84px;object-fit:contain;object-position:left center}
.nav{gap:clamp(20px,3vw,44px);padding:12px 0;border-top-width:4px;flex-wrap:wrap}
.nav a{min-height:24px;display:flex;align-items:center}
.hero{grid-template-columns:minmax(0,47fr) minmax(0,53fr);min-height:0}
.hero-copy{min-width:0;padding:clamp(32px,5vh,64px) var(--gutter);container-type:inline-size}
.hero h1{font-size:clamp(28px,3.4vw,64px);font-size:clamp(28px,9.4cqi,64px);line-height:1.06;overflow-wrap:anywhere}
.hero-text{font-size:clamp(18px,1.35vw,22px);margin:clamp(18px,2vw,28px) 0;max-width:36ch}
.kicker,.eyebrow{font-size:clamp(13px,1vw,16px);line-height:1.5;overflow-wrap:anywhere}
.hero-line{margin:24px 0 18px}
.hero-note{font-size:clamp(13px,1vw,16px);margin-bottom:0}
.hero-image{min-height:clamp(380px,65vh,620px)}
.section{padding:var(--section-space) var(--gutter)}
.intro{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(28px,4vw,64px)}
.section-heading,.intro-copy,.split-copy,.company-block,.contact-details{min-width:0}
.section h2,.split-copy h2{font-size:clamp(28px,3vw,52px);line-height:1.12;overflow-wrap:anywhere}
.intro-copy p{font-size:clamp(17px,1.3vw,20px);line-height:1.65}
.intro-copy p:last-child{margin-bottom:0}
.section-title-row{margin-bottom:clamp(28px,3vw,45px)}
.section-title-row h2{font-size:clamp(28px,3.4vw,52px)}
.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-grid article{min-width:0;min-height:0;padding:clamp(24px,2.3vw,35px) clamp(16px,1.7vw,28px)}
.service-grid h3{font-size:clamp(16px,1.2vw,20px);line-height:1.25;letter-spacing:.035em;overflow-wrap:anywhere}
.service-grid p{overflow-wrap:anywhere}
.split-section{grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:0}
.split-copy{padding:var(--section-space) var(--gutter)}
.split-copy p:not(.eyebrow){font-size:clamp(17px,1.25vw,19px)}
.split-image{min-height:clamp(360px,50vh,520px)}
.company-contact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.company-block{padding-right:clamp(20px,3vw,38px)}
.contact-logo{width:min(100%,440px)}
.contact-details{padding-left:clamp(24px,3.5vw,50px)}
.company-block p,.contact-details p{font-size:clamp(16px,1.25vw,18px);overflow-wrap:anywhere}
.contact-details p{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.contact-details span{width:60px;flex-shrink:0}
.contact-details a{min-width:0;min-height:32px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
footer{padding:clamp(22px,2vw,30px) var(--gutter);flex-wrap:wrap;gap:16px 30px;line-height:1.6}
footer span{max-width:100%;overflow-wrap:anywhere}
.button{max-width:100%;white-space:normal}
.menu-toggle:focus-visible + .menu-btn{outline:2px solid var(--blue);outline-offset:4px}
@media(min-width:901px) and (max-height:800px){
  .logo-wrap{width:min(100%,620px)}
  .logo-wrap img{max-height:68px}
  .hero-copy{padding-top:28px;padding-bottom:28px}
  .hero-image{min-height:390px}
}
@media(max-width:1100px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid h3{font-size:19px}
}
@media(max-width:900px){
  html{scroll-padding-top:120px}
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0 16px;align-items:center;padding:10px var(--gutter)}
  .logo-wrap{width:min(100%,560px)}
  .logo-wrap img{height:auto;max-height:76px;object-fit:contain}
  .menu-btn{width:44px;height:44px;padding:10px 6px;margin:0;display:flex}
  .nav{grid-column:1/-1;gap:0;padding:0;flex-wrap:nowrap;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto}
  .nav a{min-height:44px;padding:12px 6px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-copy{padding:clamp(32px,5vw,48px) var(--gutter)}
  .hero h1{font-size:clamp(28px,6vw,52px);font-size:clamp(28px,9.4cqi,52px)}
  .hero-image{min-height:0;height:clamp(220px,40vw,360px);grid-row:1}
  .intro{grid-template-columns:minmax(0,1fr);gap:28px}
  .split-section{grid-template-columns:minmax(0,1fr)}
  .split-image{min-height:0;height:clamp(220px,42vw,380px);grid-row:1}
  .company-contact{grid-template-columns:minmax(0,1fr)}
  .company-block{padding-right:0;border-right:0}
  .contact-details{padding:24px 0 5px}
}
@media(max-width:560px){
  .service-grid{grid-template-columns:minmax(0,1fr)}
  .service-grid article{padding:28px 24px}
  .service-grid h3{font-size:20px}
  .hero-text{font-size:18px}
  .hero-image{height:clamp(200px,62vw,300px)}
  .split-image{height:clamp(220px,65vw,320px)}
  .contact-logo{width:min(100%,360px)}
  footer{flex-direction:column;font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Dimensione legata alla scheda: anche i nomi lunghi restano interi. */
.service-grid article{container-type:inline-size}
.service-grid h3{font-size:16px;font-size:clamp(15px,6.2cqi,20px)}

