/* Arredamenti Bigoni — sito multipagina statico
   Palette e componenti ripresi dal design system "Industry" del canvas originale. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root{
  --color-bg:#f2f2f3;
  --color-surface:#e9e9ea;
  --color-text:#1d1f20;
  --color-accent:#5980a6;
  --color-accent-700:#416180;
  --color-accent-800:#2c455d;
  --color-accent-900:#1d2d3d;
  --color-neutral-100:#f5f5f8;
  --color-neutral-300:#d4d4d7;
  --color-neutral-700:#5d5d60;
  --color-neutral-800:#424244;
  --color-divider:color-mix(in srgb, #1d1f20 16%, transparent);
  --font-heading:'Barlow Condensed', system-ui, sans-serif;
  --font-body:'Barlow', system-ui, sans-serif;
  --maxw:1240px;
}

*, *::before, *::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
section[id]{scroll-margin-top:96px;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-heading); font-weight:600; line-height:1.05; margin:0;}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

.eyebrow{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--color-accent-700); margin:0 0 20px;
}

/* ---------- blueprint / corner deco ---------- */
.blueprint{position:relative; border:1px solid var(--color-divider);}
.blueprint > .corner{position:absolute; width:11px; height:11px; color:color-mix(in srgb, var(--color-text) 55%, transparent);}
.blueprint > .corner::before, .blueprint > .corner::after{content:""; position:absolute; background:currentColor;}
.blueprint > .corner::before{left:5px; top:0; width:1px; height:100%;}
.blueprint > .corner::after{top:5px; left:0; width:100%; height:1px;}
.blueprint > .corner.tl{top:-6px; left:-6px;}
.blueprint > .corner.tr{top:-6px; right:-6px;}
.blueprint > .corner.bl{bottom:-6px; left:-6px;}
.blueprint > .corner.br{bottom:-6px; right:-6px;}

/* ---------- photo slot (fallback graceful se manca la foto) ---------- */
.duotone{position:relative; overflow:hidden; background:var(--color-surface);}
.photo-slot{position:relative; width:100%; height:100%; overflow:hidden;}
.photo-slot img{position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block;}
.photo-slot img.is-empty{display:none;}
.photo-slot::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, color-mix(in srgb, var(--color-accent-900) 6%, transparent) 0px, color-mix(in srgb, var(--color-accent-900) 6%, transparent) 1px, transparent 1px, transparent 22px);
}
.photo-slot .ph-tag{
  position:absolute; bottom:10px; left:10px; z-index:3;
  font-family:var(--font-heading); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-accent-900); background:rgba(242,242,243,0.9);
  padding:5px 10px; border:1px solid var(--color-divider);
}

.logo-slot{height:30px; display:flex; align-items:center;}
.logo-slot img{height:100%; width:auto; object-fit:contain;}
.logo-slot img.is-empty{display:none;}
.logo-slot .logo-fallback{display:none;}
.logo-slot .logo-fallback.show{display:flex;}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-neutral-300);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0;}
.brand{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-family:var(--font-heading); font-size:22px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;}
.brand-sub{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-accent-700); margin-top:6px;}
.brand.logo-slot{flex-direction:row; align-items:center; height:40px;}
.brand.logo-slot img{height:100%; width:auto; object-fit:contain;}
.brand.logo-slot img.is-empty{display:none;}
.brand.logo-slot .logo-fallback{display:none;}
.brand.logo-slot .logo-fallback.show{display:flex; flex-direction:column; line-height:1;}
nav{display:flex; align-items:center; gap:4px;}
nav ul{list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0;}
nav a{
  font-family:var(--font-heading); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 14px; border:1px solid transparent; display:block;
  transition:border-color .15s ease, color .15s ease;
}
nav a:hover, nav a[aria-current="page"]{border-color:var(--color-accent); color:var(--color-accent-700);}
nav ul li:last-child{margin-left:8px;}

.nav-toggle{display:none; position:relative; width:44px; height:44px; background:none; border:none; cursor:pointer; color:var(--color-text);}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:12px; width:20px; height:2px; background:var(--color-text);
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle span{top:21px;}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{top:0; transform:rotate(45deg);}
.nav-toggle.open span::after{top:0; transform:rotate(-45deg);}

@media (max-width:820px){
  nav ul{
    position:absolute; top:100%; left:16px; right:16px;
    background:var(--color-bg); flex-direction:column; align-items:stretch; gap:0;
    border:1px solid var(--color-divider);
    margin-top:0; padding:8px;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  nav ul.open{max-height:340px;}
  nav ul li{border-top:1px solid var(--color-divider);}
  nav ul li:first-child{border-top:none;}
  nav a{padding:14px 12px; width:100%;}
  nav ul li:last-child{margin-left:0; margin-top:8px;}
  .nav-toggle{display:block;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; font-family:var(--font-heading); font-weight:600; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:14px 22px; border:1px solid var(--color-divider); color:var(--color-text);
  background:transparent;
}
.btn-primary{border-color:var(--color-accent); background:var(--color-accent-900); color:var(--color-neutral-100);}
.btn-primary:hover{background:var(--color-accent-700);}
.btn-secondary:hover{background:color-mix(in srgb, var(--color-text) 7%, transparent);}

/* ---------- section shell ---------- */
main{display:block;}
section{padding:0;}
.section{padding:80px 0;}
.section-tight{padding:64px 0;}

/* ---------- hero ---------- */
.hero{padding:80px 0 0;}
.hero-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:64px; align-items:end;}
.hero h1{font-size:clamp(40px,5.4vw,72px); line-height:.98;}
.hero p.lead{font-size:19px; line-height:1.6; max-width:46ch; margin-top:32px; color:var(--color-neutral-800);}
.hero-cta{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
.hero-visual{padding:10px; position:relative;}
.hero-visual .duotone{height:460px;}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:1px solid var(--color-neutral-300); border-bottom:1px solid var(--color-neutral-300);}
.stat{padding:28px 24px; border-right:1px solid var(--color-neutral-300);}
.stat:last-child{border-right:none;}
.stat .num{font-family:var(--font-heading); font-size:42px; line-height:1;}
.stat .lbl{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700); margin-top:10px;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:72px; align-items:start;}
.about-grid p{font-size:17px; line-height:1.7; color:var(--color-neutral-800);}

/* ---------- servizi dark band (home preview) ---------- */
.servizi-band{background:var(--color-accent-900); color:var(--color-neutral-100); padding:80px 0;}
.servizi-head{display:flex; justify-content:space-between; align-items:baseline; gap:32px; flex-wrap:wrap; margin-bottom:48px;}
.servizi-head .btn{border-color:rgba(255,255,255,.45); color:inherit;}
.servizi-head .btn:hover{background:rgba(255,255,255,.12);}
.servizi-grid-dark{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:rgba(255,255,255,.28);}
.servizi-grid-dark > div{background:var(--color-accent-900); padding:32px 26px;}
.servizi-grid-dark .idx{font-family:var(--font-heading); font-size:13px; letter-spacing:.2em; opacity:.6;}
.servizi-grid-dark h3{font-size:24px; margin:14px 0 12px;}
.servizi-grid-dark p{font-size:15px; line-height:1.65; opacity:.82; margin:0;}

/* ---------- cards (servizi page, processo) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px;}
.card{background:transparent; border:1px solid var(--color-divider); padding:26px; position:relative; display:flex; flex-direction:column; gap:10px;}
.card-kicker{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700);}
.card-title{font-family:var(--font-heading); font-size:21px; font-weight:600;}
.card-body{font-size:14px; line-height:1.6; color:var(--color-neutral-800); flex:1; margin:0;}
.card-meta{font-size:12px; color:color-mix(in srgb, var(--color-text) 55%, transparent);}

/* ---------- table ---------- */
.table{width:100%; border-collapse:collapse; font-size:14px;}
.table th{text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-neutral-700); padding:12px; border-bottom:1px solid var(--color-divider);}
.table td{padding:12px; border-bottom:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);}
.table tbody tr:hover{background:color-mix(in srgb, var(--color-text) 4%, transparent);}

/* ---------- tags ---------- */
.tag{display:inline-flex; align-items:center; font-size:11px; letter-spacing:.02em; padding:5px 12px;}
.tag-outline{border:1px solid var(--color-accent); color:var(--color-accent-700);}

/* ---------- gallery (lavori page) ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px;}
.gallery-item .duotone{height:280px;}
.gallery-item figcaption{padding:18px 8px 8px;}
.gallery-item .g-title{font-family:var(--font-heading); font-size:20px; font-weight:600;}
.gallery-item .g-meta{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-700); margin-top:8px;}

/* ---------- processo (come lavoriamo) ---------- */
.process-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px;}

/* ---------- form / contatti ---------- */
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12px; color:color-mix(in srgb, var(--color-text) 70%, transparent);}
.input{
  width:100%; min-height:40px; padding:8px 12px; font:inherit; font-size:14px;
  color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-divider);
}
.input:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent);}
.input:focus-visible{outline:2px solid var(--color-accent); outline-offset:0;}
textarea.input{min-height:100px; resize:vertical;}
.contact-form{display:grid; gap:24px;}
.contact-form .row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px;}
.contact-info{display:grid; gap:36px;}
.contact-info h2{font-size:24px; margin-bottom:14px;}
.contact-lines{display:grid; gap:8px; font-size:16px; color:var(--color-neutral-800);}
.zone-tags{display:flex; flex-wrap:wrap; gap:10px;}

/* ---------- footer ---------- */
footer.site-footer{border-top:1px solid var(--color-neutral-300); margin-top:24px;}
.footer-row{display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; padding:36px 0;}
.footer-name{font-family:var(--font-heading); font-size:16px; letter-spacing:.12em; text-transform:uppercase;}
.footer-tag{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-700);}

:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent);}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  .section, .servizi-band{padding:48px 0;}
  .hero{padding:44px 0 0;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .hero-visual .duotone{height:240px;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat{border-bottom:1px solid var(--color-neutral-300);}
}

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