.logo img {height: 72px;width: auto;object-fit: contain;vertical-align: middle}
*{box-sizing:border-box;margin:0;padding:0}
:root{--black:#0d0d0d;--white:#f5f3ef;--light:#e7e4de;--mid:#999;--paper:#fff;--sans:Arial,sans-serif;--mono:"Courier New",monospace;--max:1280px}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;background:var(--white);color:var(--black);line-height:1.5; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
/* Consentire la selezione nei campi di input e form */
input, textarea, select { -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 48px),var(--max));margin:auto}
.mono{font-family:var(--mono)}
.section{padding:110px 0}
.label{font:400 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:30px}
h1,h2,h3{font-weight:300}
.header{background:#fafafa}
.header-main{height:78px;border-bottom:1px solid #ddd}
.header-main .container{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font:500 18px var(--mono);letter-spacing:.08em}
.nav{display:flex;gap:26px}
.nav a{font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.claim{height:22px;background:#f2f2f4;display:flex;align-items:center}
.claim .container{display:flex;justify-content:space-between}
.claim span,.claim a{font:400 9px var(--mono);letter-spacing:.08em;text-transform:uppercase}

.hero{background:#111;color:#fff;position:relative}
.tabs{display:grid;grid-template-columns:repeat(2,1fr)}
.tab{padding:13px;background:#111;color:#888;border:0;border-top:1px solid #333;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.tab.active{color:#fff;background:#191919}

/* --- HERO & SLIDER CONFIGURAZIONE (Scala di risoluzioni desktop) --- */
.viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1076px; /* 2560x1600 e superiori (schermo di riferimento) */
  background: #111;
}

@media (max-width: 2559px) {
  .viewport { height: 850px; } /* Schermi 1920x1200 / 1920x1080 */
}

@media (max-width: 1919px) {
  .viewport { height: 680px; } /* Schermi 1440x900 / laptop medi */
}

@media (max-width: 1399px) {
  .viewport { height: 540px; } /* Laptop piccoli / Notebook */
}

.category { position: absolute; inset: 0; display: none; }
.category.active { display: block; }
.slides { height: 100%; display: flex; transition: transform .45s ease; }
.slide { min-width: 100%; height: 100%; position: relative; overflow: hidden; }

/* Gestione Immagini: Copertura simmetrica via object-fit: cover e centraggio assoluto */
.placeholder img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 0;
}

.overlay{position:absolute;left:32px;bottom:32px;z-index:2}
.kicker{font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffffcc;margin-bottom:12px}
.hero-title{font-size:clamp(32px,5vw,60px);line-height:.95;letter-spacing:-.04em}

/* Controlli Hero (Desktop: Assoluti sopra l'immagine) */
.hero-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.arrows{position:absolute;right:24px;bottom:24px;display:flex;pointer-events:auto}
.arrow{width:36px;height:36px;border:1px solid #555;background:#111c;color:#fff;cursor:pointer}
.counter{position:absolute;left:24px;bottom:29px;color:#888;font:400 9px var(--mono);pointer-events:auto}

.intro{border-bottom:1px solid var(--light)}
.intro-grid,.method-grid,.contact-grid,.italy-grid{display:grid;grid-template-columns:1fr 2fr;gap:55px}
.intro-heading{font-size:clamp(34px,5vw,66px);line-height:.96;letter-spacing:-.04em}
.intro-body{font-size:clamp(22px,2.6vw,36px);line-height:1.1;max-width:850px}
.intro-sub{margin-top:28px;max-width:720px;font-size:14px;line-height:1.7}

.services{background:var(--paper)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid #ddd;border-top:1px solid #ddd}
.card{border-right:1px solid #ddd;border-bottom:1px solid #ddd}
.card-mark {
  height: 150px;
  background: #eee;
  position: relative;
  overflow: hidden;
  color: #999;
  font: 400 10px var(--mono);
}

.card-mark img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-content{padding:20px}
.card-no{font:400 10px var(--mono);color:#aaa;margin-bottom:28px}
.card-title{font:400 19px var(--mono);text-transform:uppercase;line-height:1.05}
.card-text{margin-top:17px;font-size:13px;line-height:1.6;color:#555}

.projects{border-bottom:1px solid var(--light)}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.project-image{aspect-ratio:16/10;background:#ddd;overflow:hidden}
.project-meta{border-top:1px solid #111;margin-top:10px;padding-top:12px;display:flex;justify-content:space-between;gap:20px}
.project-name,.project-type{font:400 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.project-type{color:#777;text-align:right}

.method{background:#111;color:#fff}
.steps{border-top:1px solid #444}
.step{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid #333}
.step-no{color:#777;font:400 10px var(--mono)}
.step-title{font:400 16px var(--mono);text-transform:uppercase}
.step-text{margin-top:6px;max-width:650px;color:#aaa;font-size:13px;line-height:1.6}
.method-heading{font-size:clamp(34px,5vw,66px);line-height:.96;letter-spacing:-.04em}

.italy{border-bottom:1px solid var(--light)}
.italy-heading{font-size:clamp(36px,5vw,72px);line-height:.94;letter-spacing:-.045em}
.italy-body{font-size:17px;line-height:1.55;max-width:650px}

.cta{background:#e7e4de}
.cta-inner{display:flex;align-items:end;justify-content:space-between;gap:30px}
.cta-heading{font-size:clamp(40px,7vw,90px);line-height:.9;letter-spacing:-.05em}
.cta-button,.submit{display:inline-block;background:#111;color:#fff;border:0;padding:17px 23px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

.contact{background:#fff}
.contact-heading{font-size:clamp(34px,5vw,66px);line-height:.96;letter-spacing:-.04em}
.form{border-top:1px solid #111}
.note{margin:15px 0 25px;font:400 10px var(--mono);color:#777}
.row{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.group{margin-bottom:22px}
.group label{display:block;margin-bottom:7px;font:400 9px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.group input,.group textarea,.group select{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;padding:9px 0;outline:0}
.group textarea{resize:vertical;min-height:90px}
.group select{border:1px solid #aaa;padding:8px;height:145px}
.honey{position:absolute;left:-9999px}
.privacy{margin-top:16px;font:400 9px/1.5 var(--mono);color:#777}

/* Footer & Accordion Privacy */
.footer{border-top:1px solid #ddd;padding:24px 0}
.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}
.footer small{font:400 9px var(--mono);color:#888}
.footer-privacy-wrap{width:100%;margin-top:15px;border-top:1px solid #eee;padding-top:15px}
.accordion-toggle{background:none;border:0;font:400 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#555;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px}

/* Accordion animato fluidamente */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 11px;
    line-height: 1.6;
    color: #666;
}

.accordion-content.open {
    max-height: 300px;
    margin-top: 10px;
}

@media(max-width:900px){
.services-grid{grid-template-columns:repeat(2,1fr)}
.intro-grid,.method-grid,.contact-grid,.italy-grid{grid-template-columns:1fr}
.cta-inner{align-items:flex-start;flex-direction:column}
}

/* --- VERSIONE MOBILE (Proporzione 1:1 e controlli sotto l'immagine) --- */
@media(max-width:650px){
.container{width:calc(100% - 32px)}
.nav a{display:none}
.viewport{height: auto; aspect-ratio: 1 / 1;}
.overlay{left:20px;bottom:20px;right:20px}

/* Controlli spostati in una barra flessibile sotto l'immagine su mobile */
.hero-controls {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #111;
  pointer-events: auto;
}
.arrows {
  position: static;
  display: flex;
}
.counter {
  position: static;
}
}