/* ==========================================================================
   BERTACCO DUILIO - design tokens
   ========================================================================== */
:root{
  --iron-900: #202226;
  --iron-800: #2A2D32;
  --iron-700: #3A3E45;
  --steel-500: #8A8F98;
  --steel-300: #B7BBC2;
  --alu-100: #EDEEEA;
  --alu-050: #F6F6F3;
  --sky-500: #3E6B8A;
  --sky-400: #5B87A6;
  --copper-500: #f16c20;
  --copper-400: #ff984f;
  --white: #FFFFFF;
  --font-display: 'Arial Narrow', Impact, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-mono: 'Courier New', monospace;
  --radius: 3px;
  --container: 1180px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 100px; }
[hidden]{ display: none !important; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--iron-900);
  background: var(--alu-050);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.4em;
  line-height: 0.98;
}
p{ margin: 0 0 1em; color: var(--iron-700); }
a{ color: var(--sky-500); text-decoration: none; }
a:hover{ color: var(--copper-500); }
button{ font-family: inherit; cursor: pointer; }
img{ max-width: 100%; display: block; }
:focus-visible{
  outline: 3px solid var(--copper-400);
  outline-offset: 2px;
}
.section-inner, .header-inner, .footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-500);
  margin: 0 0 14px;
  display: inline-block;
}
.eyebrow-light, .hero .eyebrow{ color: #A8C7DA; }
.section-title{
  font-size: clamp(30px, 4vw, 44px);
  color: var(--white);
}
.section-title--dark{ color: var(--iron-900); }
.section{ padding: 84px 0; }
.section-dark{ background: var(--iron-900); }
.section-alt{ background: var(--alu-100); }
.section-note{ font-size: 15px; color: #565B63; max-width: 640px; }
.section-note code{ background: var(--alu-100); padding: 2px 6px; border-radius: 2px; }
/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary{
  background: var(--copper-500);
  color: var(--white);
}
.btn-primary:hover{
  background: #893D1D;
  color: var(--white);
  transform: translateY(-1px);
}
.btn-ghost{
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}
.btn-ghost:hover{
  border-color: var(--copper-400);
  color: var(--copper-400);
}
.btn-block{ width: 100%; }
/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(32, 34, 38, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
}
.brand-mark{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  background: var(--copper-500);
  color: var(--white);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.2; }
.brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--white); }
.brand-sub{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--steel-300); }
.brand:hover .brand-name{ color: var(--white); }
.main-nav{ display: flex; align-items: center; gap: 22px; }
.main-nav a{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--steel-300);
}
.main-nav a:hover{ color: var(--white); }
.lang-switch {
  width: auto;
  min-height: 44px;
  flex-shrink: 0;
  background: transparent;
  color: var(--steel-300);
  border: 1px solid var(--steel-500);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
}
.lang-switch:focus-visible { outline: 3px solid var(--copper-400); outline-offset: 3px; }
.lang-switch option { background: var(--iron-900); }
.nav-cta{
  background: var(--copper-500);
  color: var(--white) !important;
  padding: 9px 16px;
  border-radius: var(--radius);
}
.nav-cta:hover{ background: #893D1D; }
.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span{
  width: 24px;
  height: 2px;
  background: var(--white);
  display: block;
}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  background: var(--iron-900);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: center;
  gap: 56px;
  padding: 92px max(28px, calc((100% - 1124px) / 2)) 104px;
  overflow: hidden;
}
.hero-stripes{
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 2px,
    transparent 2px,
    transparent 34px
  );
  pointer-events: none;
}
.hero-stripes::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(62,107,138,0.35), transparent 55%);
}
.hero-inner{ position: relative; min-width: 0; }
.hero-title{
  font-size: clamp(48px, 6.5vw, 88px);
  white-space: pre-line;
  overflow-wrap: normal;
  color: var(--white);
  max-width: 780px;
}
.hero-lead{
  font-size: 18px;
  color: var(--steel-300);
  max-width: 480px;
  margin-bottom: 32px;
}
.hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; }
.plate{
  position: relative;
  background: linear-gradient(155deg, var(--iron-700), var(--iron-800));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.plate-rivet{
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--steel-300), var(--steel-500) 60%, #4a4e56 100%);
}
.plate-rivet--tl{ top: 9px; left: 9px; }
.plate-rivet--tr{ top: 9px; right: 9px; }
.plate-rivet--bl{ bottom: 9px; left: 9px; }
.plate-rivet--br{ bottom: 9px; right: 9px; }
.plate-row{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  color: var(--steel-300);
}
.plate-row:last-of-type{ border-bottom: none; }
.plate-row a{ color: var(--white); }
.plate-label{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--copper-400);
  font-weight: 600;
  flex-shrink: 0;
}
.plate-row span:last-child, .plate-row a{ text-align: right; }
.plate-floating{ position: relative; width: 100%; margin: 0; padding: 28px; }
/* ==========================================================================
   SERVIZI
   ========================================================================== */
.services-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.service-card{ padding: 26px 22px 24px; }
.service-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--iron-900);
  background: var(--copper-400);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.service-card h3{
  color: var(--white);
  font-size: 22px;
  margin-bottom: 10px;
}
.service-card p{
  color: var(--steel-300);
  font-size: 14px;
  margin-bottom: 0;
}
/* ==========================================================================
   CHI SIAMO
   ========================================================================== */
.chi-siamo-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.chi-siamo-text p{ font-size: 16px; }
.photo-frame{
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(62,107,138,0.12) 0, rgba(62,107,138,0.12) 2px, transparent 2px, transparent 14px),
    linear-gradient(155deg, var(--steel-300), var(--alu-100));
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.photo-frame--tall{ aspect-ratio: 4 / 3; }
.photo-frame > img{ width: 100%; height: 100%; object-fit: cover; }
.photo-frame:has(> img){ padding: 0; }
.photo-placeholder-label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iron-700);
  background: rgba(255,255,255,0.9);
  padding: 8px 12px;
  border-radius: 2px;
}
/* ==========================================================================
   GALLERIA
   ========================================================================== */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.gallery-item{
  aspect-ratio: 4 / 3;
  border: none;
  padding: 0; 
  font: inherit;
  position: relative;
}
.gallery-item:hover .photo-placeholder-label{
  background: var(--copper-400);
  color: var(--white);
}
/* ==========================================================================
   CONTATTI
   ========================================================================== */
.contatti-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contatti-lead{ color: var(--steel-300); font-size: 16px; }
.contatti-plate{ margin: 28px 0 24px; max-width: 460px; }
.map-frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  height: 240px;
  display: grid;
  place-items: center;
  background: var(--iron-800);
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; }
.contact-form{
  background: var(--iron-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 32px;
}
.form-row{ margin-bottom: 18px; }
.form-row--split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.form-row--split .form-row{ margin-bottom: 0; }
label{
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: 7px;
}
input, select, textarea{
  width: 100%;
  background: var(--iron-900);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  color: var(--white);
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 16px;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--copper-500);
  outline: 2px solid var(--copper-400);
  outline-offset: 2px;
}
textarea{ resize: vertical; }
.form-status{
  font-family: var(--font-mono);
  font-size: 13px;
  color: #A8C7DA;
  min-height: 18px;
  margin: 12px 0 0;
}
.form-status.is-error{ color: var(--copper-400); }
.form-fallback{ font-size: 14px; color: var(--steel-300); margin: 12px 0 0; }
.form-fallback a{ color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--iron-900); border-top: 1px solid rgba(255,255,255,0.08); padding: 32px 0; }
.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-note{ font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); margin: 0; }
/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 72px 88px;
  background: transparent;
  color: var(--white);
  display: none;
  overflow: auto;
}
.lightbox[open]{ display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop{ background: rgba(20,22,25,0.96); }
.has-dialog{ overflow: hidden; }
.lightbox-content{ max-width: 1100px; width: 100%; text-align: center; }
.lightbox-content img{ max-width: 100%; max-height: calc(100dvh - 210px); object-fit: contain; margin: auto; border-radius: var(--radius); }
.lightbox-caption{ color: var(--white); margin: 18px 0 0; overflow-wrap: anywhere; }
.image-error{ color: var(--steel-300); padding: 40px 16px; }
.lightbox-close, .lightbox-nav{
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  background: var(--iron-800);
  color: var(--white);
  font-size: 32px;
  line-height: 1;
}
.lightbox-close{ top: 16px; right: 20px; }
.lightbox-nav{ top: 50%; transform: translateY(-50%); }
.lightbox-prev{ left: 20px; }
.lightbox-next{ right: 20px; }
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--copper-500); }
.lightbox-counter{ position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--steel-300); font-size: 14px; margin: 0; white-space: nowrap; }
/* ---------- Accessible utilities and content states ---------- */
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link{ position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--white); color: var(--iron-900); transform: translateY(-180%); }
.skip-link:focus{ transform: translateY(0); }
fieldset{ min-width: 0; margin: 0; padding: 0; border: 0; }
.form-help{ font-size: 14px; color: var(--steel-300); }
button:disabled{ cursor: wait; opacity: 0.7; }
.directions-link{ display: inline-block; color: #A8C7DA; margin-top: 14px; text-decoration: underline; text-underline-offset: 4px; }
.btn-map{ background: var(--alu-050); color: var(--iron-900); margin: 16px; }
.btn-map:hover{ background: var(--white); }
.workshop-panel{ background: repeating-linear-gradient(115deg, transparent 0 32px, rgba(255,255,255,0.04) 32px 34px), linear-gradient(140deg, #3A3E45, #202226); border: 1px solid #575B62; }
.workshop-sign{ display: flex; align-items: center; flex-direction: column; gap: 12px; color: var(--steel-300); padding: 28px 10px; }
.workshop-monogram{ color: var(--copper-400); font: 800 clamp(70px, 10vw, 120px)/0.9 var(--font-display); }
.workshop-name{ color: white; text-transform: uppercase; font: 700 28px/1.1 var(--font-display); }
.workshop-location{ font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 16px; }
.gallery-item{ background: repeating-linear-gradient(115deg, transparent 0 32px, rgba(255,255,255,0.05) 32px 34px), linear-gradient(140deg, #465360, #252B32); text-align: left; transition: box-shadow 160ms ease; }
.gallery-item:nth-child(2){ background-color: #513B30; background-image: repeating-linear-gradient(115deg, transparent 0 32px, rgba(255,255,255,0.05) 32px 34px), linear-gradient(140deg, #70503E, #302B29); }
.gallery-number{ position: absolute; top: 16px; left: 20px; color: #E1E3E6; font: 600 14px var(--font-mono); background: #202226; padding: 5px 8px; }
.gallery-label{ position: absolute; bottom: 0; left: 0; right: 0; padding: 42px 20px 20px; background: linear-gradient(transparent, rgba(20,22,25,0.94) 65%); color: var(--white); display: flex; flex-direction: column; gap: 8px; }
.gallery-title{ font: 700 24px/1.1 var(--font-display); text-transform: uppercase; }
.gallery-count{ font: 12px/1.4 var(--font-mono); color: #D3D6DC; }
button.gallery-item:hover{ box-shadow: 0 0 0 3px var(--copper-500); }
.plate-row > :last-child{ min-width: 0; overflow-wrap: anywhere; }
.service-card h3{ line-height: 1.12; }
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .header-inner{ height: auto; min-height: 76px; flex-wrap: wrap; }
  .main-nav{ width: 100%; flex-wrap: wrap; padding: 16px 0; }
  .js-ready .main-nav{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    width: auto;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    background: var(--iron-900);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    padding: 16px 28px 24px;
    border-bottom: 1px solid #575B62;
    box-shadow: 0 14px 28px rgba(0,0,0,0.2);
  }
  .js-ready .main-nav.is-open{ display: flex; }
  .js-ready .main-nav a{ display: block; padding: 12px; }
  .js-ready .nav-toggle{ display: flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; }
  .js-ready .lang-switch{ width: 100%; margin: 6px 0; }
  .nav-cta{ text-align: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .hero{ gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(280px, 350px); }
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contatti-grid{ gap: 32px; }
  .plate-row{ gap: 12px; font-size: 12px; }
}
@media (max-width: 800px){
  .hero{ grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; }
  .hero-title{ font-size: clamp(48px, 9vw, 78px); }
  .hero-lead{ max-width: 580px; }
  .plate-floating{ max-width: 560px; margin-top: 12px; }
  .chi-siamo-grid, .contatti-grid{ grid-template-columns: 1fr; gap: 36px; }
  .chi-siamo-media{ max-width: 600px; width: 100%; }
  .contatti-plate{ max-width: none; }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section{ padding: 64px 0; }
}
@media (max-width: 540px){
  .section-inner, .header-inner, .footer-inner{ padding-left: 20px; padding-right: 20px; }
  .hero{ padding: 48px 20px 56px; }
  .hero-title{ font-size: clamp(40px, 10vw, 54px); }
  .hero-lead{ font-size: 16px; }
  .hero-actions{ gap: 12px; }
  .hero-actions .btn{ width: 100%; }
  .services-grid, .gallery-grid, .form-row--split{ grid-template-columns: 1fr; }
  .services-grid, .gallery-grid{ margin-top: 28px; }
  .section{ padding: 52px 0; }
  .plate-floating, .contact-form{ padding: 24px 20px; }
  .brand-sub{ font-size: 9px; letter-spacing: 0.03em; }
  .brand-name{ font-size: 18px; }
  .brand{ gap: 10px; }
  .plate-label{ flex-shrink: 1; max-width: 42%; overflow-wrap: anywhere; }
  .eyebrow{ font-size: 11px; letter-spacing: 0.1em; }
  .lightbox{ padding: 74px 16px 140px; }
  .lightbox-content img{ max-height: calc(100dvh - 280px); }
  .lightbox-nav{ top: auto; bottom: 54px; transform: none; }
  .lightbox-prev{ left: calc(50% - 62px); }
  .lightbox-next{ right: calc(50% - 62px); }
  .lightbox-counter{ bottom: 20px; }
  .btn{ padding-left: 18px; padding-right: 18px; letter-spacing: 0.03em; }
}
/* Motto aziendale */
.hero-motto { color: #e9b28c; font-size: clamp(18px, 2.3vw, 25px); font-weight: 600; line-height: 1.4; max-width: 35ch; margin: 20px 0 18px; }
/* V3: materiali, marchi, lingue e recensioni */
.hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px 54px; padding-top: 65px; padding-bottom: 0; }
.hero-title { font-size: clamp(42px,5.2vw,74px); }
.hero-materials { position: relative; align-self:center; min-width:0; }
.material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.material-card { margin:0; background:#eeece7; border-radius:4px; overflow:hidden; }
.material-card img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.material-card figcaption { color:#25272b; padding:11px 15px; font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border-top:1px solid #d9d6cf; }
.material-note { color:#adb2b9; margin:10px 0 0; font-size:11px; }
.hero-contact { grid-column:1/-1;position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;padding:22px 0;border-top:1px solid #4a4d52;font-size:14px; }
.hero-contact a { color:#f3f0ea;text-decoration:none; }
.hero-contact a:hover { color:#e9b28c;text-decoration:underline; }
.brand-strip { background:#fff; border-bottom:1px solid #dedbd5; }
.brand-strip-inner { display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:28px;padding-bottom:28px; }
.partner-primary { display:flex;align-items:center;gap:24px;max-width:550px; }
.partner-primary img { display:block;width:144px;height:auto; }
.partner-primary p { margin:0;font-size:15px;max-width:290px;color:#35373a;line-height:1.5; }
.brand-secondary { display:flex;align-items:center;gap:18px; }
.brand-logo { display:flex;align-items:center;justify-content:center;min-height:74px;padding:14px 18px; }
.brand-logo img { object-fit:contain;width:140px;height:45px; }
.metra-logo { background:#fff;border-radius:3px; }
.metra-logo img { height:68px;width:150px;object-fit:contain; }
.language-picker { position:relative;color:#fff; }
.language-picker summary { cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid #5c6066;border-radius:3px;font:12px Arial,sans-serif; }
.language-picker summary::-webkit-details-marker { display:none; }
.language-options { position:absolute;top:calc(100% + 8px);right:0;min-width:160px;padding:6px;background:#fff;box-shadow:0 10px 30px #0004;border:1px solid #ddd;z-index:100; }
.language-options button { width:100%;display:flex;align-items:center;gap:12px;padding:11px;border:0;background:#fff;color:#24262a;text-align:left;font-size:14px; }
.language-options button:hover,.language-options button[aria-pressed=true] { background:#eee9e1; }
.language-picker img { object-fit:cover;border:1px solid #7774;flex-shrink:0; }
.plate-row a { overflow-wrap:anywhere; }
.directions-link { display:inline-flex;align-items:center;padding:13px 18px;border:1px solid #b88965;color:#f0cfb6;margin-top:20px;text-decoration:none; }
.email-preview { padding:18px;margin-top:18px;background:#ffffff0a;border:1px solid #7776;border-radius:4px; }
.email-preview p { font-size:13px;line-height:1.5; }
.email-preview textarea { width:100%;padding:12px;line-height:1.5;background:#fff;color:#26282b;border:1px solid #aaa;resize:vertical;font-family:inherit; }
.email-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:12px; }
.reviews-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;margin-top:30px;align-items:start; }
.reviews-empty { padding:30px;border:1px solid #cfc9bd;background:#eeebe5;line-height:1.7; }
.review-policy { font-size:13px;line-height:1.7;color:#676b70;margin-top:22px; }
.review-form { padding:30px;background:#fff;border:1px solid #d9d5ce;border-radius:4px; }
.review-form h3 { font-size:26px;color:#292c31;margin-bottom:16px; }
.review-form p { font-size:13px;line-height:1.6; }
.review-form .form-row label,.rating-field legend { color:#45494e;font-size:13px; }
.review-form input:not([type=radio]):not([type=checkbox]),.review-form textarea { background:#faf9f6;border:1px solid #b7b8b8;color:#222; }
.review-form input:focus,.review-form textarea:focus { outline:2px solid #a26940;outline-offset:2px; }
.review-form .btn-ghost { color:#333;border-color:#777; }
.rating-field { border:0;padding:0;margin:0 0 22px; }
.rating-options { display:flex;gap:7px;margin-top:10px; }
.rating-options label { position:relative;cursor:pointer;flex:1; }
.rating-options input { position:absolute;opacity:0;inset:0; }
.rating-options span { display:block;text-align:center;padding:10px 5px;border:1px solid #bcb8b2;border-radius:3px;color:#665341; }
.rating-options input:checked + span { background:#3a2c20;color:#fff;border-color:#3a2c20; }
.rating-options input:focus-visible + span { outline:2px solid #a26940;outline-offset:2px; }
.consent-row { display:flex;align-items:flex-start;gap:10px;margin:20px 0;font-size:13px;line-height:1.6;color:#444; }
.consent-row input { width:18px;height:18px;flex-shrink:0;margin-top:3px;accent-color:#87522d; }
.review-email-note { color:#60646a; }
.review-card { background:#fff;border:1px solid #dad6ce;padding:24px;margin-bottom:16px; }
.review-stars { color:#986539;font-size:20px;letter-spacing:.12em;margin:0 0 16px; }
.review-card blockquote { margin:0 0 16px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere; }
.review-author { font-weight:700;margin:0;font-size:14px; }
.review-card time { color:#71757a;font-size:12px; }
@media(max-width:1080px) { .language-options {left:0;right:auto;} .brand-strip-inner{flex-wrap:wrap;} }
@media(max-width:760px) { .hero{grid-template-columns:1fr;padding-top:36px;gap:28px;} .hero-materials{width:100%;max-width:600px;} .hero-contact{justify-content:flex-start;gap:14px 24px;} .reviews-layout{grid-template-columns:1fr;gap:26px;} .brand-strip-inner{gap:24px;} .partner-primary{gap:20px;} .brand-secondary{width:100%;justify-content:center;} .brand-logo{padding:8px 12px;} .review-form{padding:22px;} }
@media(max-width:420px) { .partner-primary{align-items:flex-start;flex-direction:column;gap:12px;} .material-grid{gap:10px;} .material-card figcaption{font-size:11px;padding:10px;} .hero-contact{flex-direction:column;} .brand-logo img{width:115px;} }
.consent-row { text-transform:none;letter-spacing:normal; }
/* Insegna, mappa su richiesta e dati per aziende */
.hero-sign{position:relative;margin:0;align-self:center;min-width:0;background:#ecebe6;border:1px solid #7778;box-shadow:0 18px 45px #0003;transform:none;}
.hero-sign img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#f5f4ee;}
.hero-sign figcaption{padding:11px 18px;color:#4b4d50;font-size:12px;}
.map-panel{margin-top:28px;border:1px solid #7777;border-radius:4px;overflow:hidden;background:#ece9e1;color:#303438;}
.map-placeholder{padding:30px;text-align:center;background:linear-gradient(35deg,#e4e1d7,#f6f4ee);}
.map-placeholder h3{color:#303438;font-size:25px;margin:10px 0;}
.map-placeholder p{line-height:1.6;}
.map-placeholder .map-disclosure{font-size:12px;max-width:390px;margin:18px auto 0;color:#595e63;}
.map-pin{display:block;font-size:38px;color:#985a31;}
#map-frame iframe{display:block;width:100%;height:350px;border:0;}
.business-fields{margin:10px 0 24px;padding:20px;border:1px solid #7778;min-width:0;}
.business-fields legend{font-size:14px;color:#e4c3a9;padding:0 8px;}
@media(max-width:760px){.hero-sign{width:100%;max-width:560px;justify-self:center;transform:none;}.map-placeholder{padding:22px;}#map-frame iframe{height:310px;}.business-fields{padding:16px;}}

/* Identità ricavata dall'insegna, integrata nello sfondo. */
.signature-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.signature-logo{display:block;width:100%;height:auto;aspect-ratio:1448/205;overflow:visible}
.brand.brand-signature{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:clamp(175px,21vw,265px);flex-shrink:0;text-decoration:none}
.brand-signature .brand-sub{color:#aab4bd;font-size:10px;letter-spacing:.13em;line-height:1.4}
.hero .hero-motto{color:#cdd6de}

.hero-identity{position:relative;min-width:0;align-self:center;padding:30px 0}
.hero-identity .signature-logo{margin-bottom:24px;filter:drop-shadow(0 3px 3px #0004)}
.identity-materials{margin:0;color:#abb7c1;font-size:12px;line-height:1.9;letter-spacing:.12em;text-transform:uppercase}
.identity-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;list-style:none;margin:27px 0 28px;padding:26px 0;border-top:1px solid #d0dce338;border-bottom:1px solid #d0dce338}
.identity-services li{display:flex;align-items:center;gap:11px;color:#e3e9ed;font-size:clamp(16px,1.45vw,20px);line-height:1.4}
.identity-services li::before{content:"";width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#becbd4}
.identity-partners{display:flex;align-items:center;gap:42px}
.identity-partners a{flex-shrink:0}
.identity-velux{display:block;width:155px;text-decoration:none;color:#dbe2e8}
.identity-velux img{display:block;width:100%;height:auto}
.velux-tagline{display:block;margin-top:7px;font:13px/1.4 Arial,sans-serif;letter-spacing:.02em;text-align:center}
.metra-signature{display:block;width:90px;height:auto;aspect-ratio:285/310;color:#c7d1d9}
.partner-velux-lockup{display:block;flex-shrink:0;width:144px;text-decoration:none;color:#333}
.partner-velux-lockup img{display:block;width:144px;height:auto}
.partner-velux-lockup .velux-tagline{font-size:12px}
.brand-strip .metra-logo{background:transparent}
.brand-strip .metra-signature{width:74px;height:auto;color:#333b42}
#chi-siamo .chi-siamo-grid{display:block}
#chi-siamo .chi-siamo-text{width:100%;max-width:880px}
#chi-siamo .chi-siamo-text>p:not(.eyebrow){max-width:800px}
#about-media{display:none!important}
.site-footer .footer-inner.footer-redesign{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1.2fr);align-items:start;gap:38px 45px}
.footer-redesign .brand-signature{width:min(280px,100%);margin-bottom:18px}
.footer-description{margin:0;max-width:340px;color:#aab4be;font-size:13px;line-height:1.8}
.footer-heading{margin:0 0 16px;color:#e5eaee;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.footer-address{font-style:normal}
.footer-address a,.footer-navigation a,.footer-company a{color:#c6d0d8;font-size:13px;line-height:1.6;text-decoration:none;overflow-wrap:anywhere}
.footer-address a{display:block;width:fit-content;margin:0 0 10px}
.footer-address a:hover,.footer-navigation a:hover,.footer-company a:hover{color:#fff;text-decoration:underline}
.footer-company>p{color:#c6d0d8;font-size:13px;line-height:1.7}
.company-register{margin:0;font-size:12px;color:#bec8d1;line-height:1.7}
.company-register>div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:9px;margin-top:5px}
.company-register dt{color:#93a2ae}.company-register dd{margin:0;overflow-wrap:anywhere}
.footer-bottom{grid-column:1/-1;width:100%;padding-top:22px;border-top:1px solid #ffffff20}
.footer-navigation{display:flex;flex-wrap:wrap;gap:12px 25px;margin-bottom:14px}
.footer-redesign .footer-note{margin:0;text-align:left;color:#99a5af;font-size:12px;line-height:1.7}
@media(max-width:1080px){.brand.brand-signature{width:230px}.footer-redesign .brand.brand-signature{width:min(280px,100%)}.site-footer .footer-inner.footer-redesign{gap:30px}}
@media(max-width:760px){.hero-identity{width:100%;max-width:560px;justify-self:center;padding:10px 0 25px}.site-footer .footer-inner.footer-redesign{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-branding{grid-column:1/-1}}
@media(max-width:480px){.brand.brand-signature{width:185px}.brand-signature .brand-sub{font-size:9px;letter-spacing:.08em}.identity-services{gap:16px 14px}.identity-services li{font-size:16px}.identity-partners{gap:30px}.site-footer .footer-inner.footer-redesign{grid-template-columns:minmax(0,1fr)}.footer-branding{grid-column:auto}}

/* Versione 6: blu dell’identità e arancione per le azioni. */
.signature-logo{filter:drop-shadow(0 1px 0 #ffffff25)}
.hero-identity .signature-logo{filter:drop-shadow(0 2px 3px #0004)}
.btn,.btn-primary,.btn-ghost,.btn-map,.hero .btn,.main-nav .nav-cta,.review-form .btn-ghost{background:#f16c20;color:#202226!important;border-color:#f16c20;box-shadow:none}
.btn:hover,.btn-primary:hover,.btn-ghost:hover,.btn-map:hover,.hero .btn:hover,.main-nav .nav-cta:hover,.review-form .btn-ghost:hover{background:#ff873c;color:#171c21!important;border-color:#ff873c;transform:translateY(-1px)}
.lightbox-close,.lightbox-nav,.nav-toggle{background:#f16c20;color:#202226;border-color:#f16c20}
.lightbox-close:hover,.lightbox-nav:hover,.nav-toggle:hover{background:#ff873c}
.nav-toggle span{background:#202226}
.language-picker summary{border-color:#f16c20}
.language-options button:hover,.language-options button[aria-pressed=true]{background:#ff984f;color:#202226}
.identity-partners .metra-signature{width:96px;padding:8px;background:#f6f6f3;border-radius:3px;box-sizing:content-box}
.brand-secondary{margin-left:auto}
.brand-strip .metra-signature{width:86px}
.hero-contact{flex-wrap:wrap;gap:14px 26px}
.form-fallback .mobile-contact{display:inline-block;margin-left:8px}
@media(max-width:760px){.hero-contact{display:flex;justify-content:flex-start}.brand-strip-inner{gap:24px}.partner-primary{min-width:0}}