/* ============================================================
   SERAFINI DESIGN — style2026.css
   Design system v4 · Fase 1 (header, footer, homepage)
   Tutte le classi hanno prefisso .sd- : nessun conflitto
   con il vecchio style.css durante la migrazione.
   ------------------------------------------------------------
   INDICE
   01. Token & reset locale
   02. Tipografia
   03. Header / navigazione
   04. Menu mobile overlay
   05. Hero
   06. Sezioni & griglia editoriale
   07. Indice ambienti (signature)
   08. Servizi a blocchi alternati
   09. Marquee brand
   10. Showroom
   11. CTA finale
   12. Footer
   13. Reveal on scroll & motion
   14. Responsive
   ============================================================ */

/* ---------- 01. TOKEN ---------- */
:root{
  --sd-ink:      #191917;
  --sd-paper:    #FAF8F5;
  --sd-stone:    #8A857C;
  --sd-line:     #E6E2DB;
  --sd-brass:    #A38B5F;
  --sd-white:    #FFFFFF;

  --sd-display:  'Marcellus', serif;
  --sd-body:     'Archivo', system-ui, sans-serif;

  --sd-max:      1440px;
  --sd-gutter:   clamp(1.25rem, 4vw, 4rem);
  --sd-section:  clamp(5rem, 12vh, 9rem);

  --sd-ease:     cubic-bezier(.22,.61,.21,1);
  --sd-slow:     .9s;
}

.sd-page, .sd-page *, .sd-page *::before, .sd-page *::after{
  box-sizing:border-box; margin:0; padding:0;
}
body.sd-page{
  background:var(--sd-paper);
  color:var(--sd-ink);
  font-family:var(--sd-body);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.sd-page img{ display:block; max-width:100%; }
.sd-page a{ color:inherit; text-decoration:none; }
.sd-page :focus-visible{ outline:2px solid var(--sd-brass); outline-offset:3px; }

/* ---------- 02. TIPOGRAFIA ---------- */
.sd-display-xl{
  font-family:var(--sd-display);
  font-weight:400;
  font-size:clamp(2.6rem, 7vw, 6rem);
  line-height:1.04;
  letter-spacing:.01em;
}
.sd-display-l{
  font-family:var(--sd-display);
  font-weight:400;
  font-size:clamp(1.9rem, 4vw, 3.2rem);
  line-height:1.15;
}
.sd-eyebrow{
  font-family:var(--sd-body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sd-brass);
  display:block;
  margin-bottom:1.4rem;
}
.sd-lead{
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  color:var(--sd-stone);
  max-width:38em;
}
.sd-link{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sd-ink);
  padding-bottom:.35em;
  border-bottom:1px solid var(--sd-ink);
  transition:color .3s var(--sd-ease), border-color .3s var(--sd-ease), gap .3s var(--sd-ease);
}
.sd-link::after{ content:'→'; font-size:1em; transition:transform .3s var(--sd-ease); }
.sd-link:hover{ color:var(--sd-brass); border-color:var(--sd-brass); }
.sd-link:hover::after{ transform:translateX(4px); }

/* ---------- 03. HEADER ---------- */
.sd-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--sd-ease), box-shadow .4s var(--sd-ease);
}
.sd-header-inner{
  max-width:var(--sd-max);
  margin:0 auto;
  padding:1.1rem var(--sd-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.sd-logo img{ height:44px; width:auto; transition:filter .4s var(--sd-ease), height .4s var(--sd-ease); }
.sd-nav{ display:flex; align-items:center; gap:2.4rem; }
.sd-nav a{
  font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sd-white);
  position:relative;
  transition:color .4s var(--sd-ease);
}
.sd-nav a::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--sd-ease);
}
.sd-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.sd-nav-cta{
  border:1px solid currentColor;
  padding:.7em 1.6em;
}
.sd-nav-cta::after{ display:none; }
.sd-nav-cta:hover{ background:var(--sd-brass); border-color:var(--sd-brass); color:var(--sd-white) !important; }

/* header su pagine senza hero, o dopo lo scroll */
.sd-header.is-solid{
  background:rgba(250,248,245,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--sd-line);
}
.sd-header.is-solid .sd-nav a{ color:var(--sd-ink); }
.sd-header.is-solid .sd-logo img{ height:36px; }
/* il logo è scuro: sopra l'hero lo invertiamo in bianco */
.sd-header:not(.is-solid) .sd-logo img{ filter:brightness(0) invert(1); }

/* ---------- 04. MENU MOBILE ---------- */
/* NOTA: .sd-menu-overlay deve restare fuori da .sd-header.
   L'header usa backdrop-filter, che crea un containing block e
   ridurrebbe un figlio position:fixed alle dimensioni dell'header. */
.sd-burger{
  display:none;
  background:none; border:0; cursor:pointer;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  position:relative; z-index:1;
}
.sd-burger span{
  width:26px; height:1.5px; background:var(--sd-white);
  transition:transform .4s var(--sd-ease), opacity .25s, background .4s;
}
.sd-header.is-solid .sd-burger span{ background:var(--sd-ink); }
body.sd-menu-open .sd-burger span{ background:var(--sd-ink); }
body.sd-menu-open .sd-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
body.sd-menu-open .sd-burger span:nth-child(2){ opacity:0; }
body.sd-menu-open .sd-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.sd-menu-overlay{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; height:100dvh;
  z-index:110;                       /* sotto il burger (header z-index:120) */
  background:var(--sd-paper);        /* pieno, non trasparente */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--sd-ease), visibility 0s .4s;
}
body.sd-menu-open .sd-menu-overlay{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s var(--sd-ease);
}
.sd-menu-inner{
  display:flex; flex-direction:column;
  padding:6rem var(--sd-gutter) 3rem;
  gap:.2rem;
}
.sd-menu-overlay a{
  display:block;
  font-family:var(--sd-display);
  font-size:clamp(1.75rem, 7vw, 2.75rem);
  line-height:1.3;
  color:var(--sd-ink);
  transform:translateY(20px); opacity:0;
  transition:transform .55s var(--sd-ease), opacity .55s var(--sd-ease), color .3s;
}
.sd-menu-overlay a:hover{ color:var(--sd-brass); }
body.sd-menu-open .sd-menu-overlay a{ transform:translateY(0); opacity:1; }
body.sd-menu-open .sd-menu-overlay a:nth-child(2){ transition-delay:.04s; }
body.sd-menu-open .sd-menu-overlay a:nth-child(3){ transition-delay:.08s; }
body.sd-menu-open .sd-menu-overlay a:nth-child(4){ transition-delay:.12s; }
body.sd-menu-open .sd-menu-overlay a:nth-child(5){ transition-delay:.16s; }
body.sd-menu-open .sd-menu-overlay a:nth-child(6){ transition-delay:.20s; }
body.sd-menu-open .sd-menu-overlay a:nth-child(7){ transition-delay:.24s; }
.sd-menu-note{
  margin-top:2.5rem;
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--sd-stone);
}
/* blocca lo scroll della pagina sotto il menu */
body.sd-menu-open{ overflow:hidden; }
/* con il menu aperto l'header resta cliccabile ma senza velo */
body.sd-menu-open .sd-header{
  background:transparent; backdrop-filter:none; box-shadow:none; z-index:120;
}

/* ---------- 05. HERO ---------- */
.sd-hero{
  position:relative; height:100svh; min-height:600px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--sd-white);
}
.sd-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  animation:sd-kenburns 22s var(--sd-ease) both;
}
@keyframes sd-kenburns{
  from{ transform:scale(1.12); }
  to{ transform:scale(1); }
}
.sd-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,14,12,.72) 0%, rgba(15,14,12,.18) 45%, rgba(15,14,12,.28) 100%);
}
.sd-hero-content{
  position:relative; z-index:2;
  width:100%; max-width:var(--sd-max);
  margin:0 auto;
  padding:0 var(--sd-gutter) clamp(3rem, 9vh, 6rem);
}
.sd-hero .sd-eyebrow{ color:rgba(255,255,255,.85); }
.sd-hero h1{ max-width:12em; }
.sd-hero-scroll{
  position:absolute; right:var(--sd-gutter); bottom:clamp(3rem, 9vh, 6rem); z-index:2;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  writing-mode:vertical-rl;
  display:flex; align-items:center; gap:1rem;
}
.sd-hero-scroll::after{
  content:''; width:1px; height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,.9), transparent);
  animation:sd-drip 2.2s var(--sd-ease) infinite;
}
@keyframes sd-drip{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  51%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- 06. SEZIONI ---------- */
.sd-section{
  max-width:var(--sd-max);
  margin:0 auto;
  padding:var(--sd-section) var(--sd-gutter);
}
.sd-section-full{ padding:var(--sd-section) 0; }
.sd-intro{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem, 5vw, 6rem);
  align-items:end;
}

/* ---------- 07. INDICE AMBIENTI (signature) ---------- */
.sd-rooms{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.sd-rooms-list{ list-style:none; }
.sd-rooms-list li{ border-top:1px solid var(--sd-line); }
.sd-rooms-list li:last-child{ border-bottom:1px solid var(--sd-line); }
.sd-rooms-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:clamp(1.1rem, 2.5vh, 1.8rem) 0;
  font-family:var(--sd-display);
  font-size:clamp(1.8rem, 3.4vw, 3rem);
  line-height:1;
  color:var(--sd-stone);
  transition:color .35s var(--sd-ease), padding-left .35s var(--sd-ease);
}
.sd-rooms-list a small{
  font-family:var(--sd-body);
  font-size:.7rem; font-weight:500;
  letter-spacing:.25em; text-transform:uppercase;
  color:var(--sd-stone);
  opacity:0; transform:translateX(-8px);
  transition:opacity .35s var(--sd-ease), transform .35s var(--sd-ease);
}
.sd-rooms-list a:hover,
.sd-rooms-list a.is-active{ color:var(--sd-ink); padding-left:.6em; }
.sd-rooms-list a:hover small,
.sd-rooms-list a.is-active small{ opacity:1; transform:translateX(0); }

.sd-rooms-preview{
  position:sticky; top:14vh;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--sd-line);
}
.sd-rooms-preview img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .6s var(--sd-ease), transform 1.4s var(--sd-ease);
}
.sd-rooms-preview img.is-active{ opacity:1; transform:scale(1); }

/* ---------- 08. SERVIZI ---------- */
.sd-service{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.sd-service + .sd-service{ margin-top:clamp(3rem, 8vh, 6rem); }
.sd-service-img{ overflow:hidden; aspect-ratio:4/3; }
.sd-service-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--sd-ease);
}
.sd-service:hover .sd-service-img img{ transform:scale(1.05); }
.sd-service-txt{
  padding:clamp(2rem, 4vw, 5rem);
}
.sd-service-txt h2{ margin-bottom:1.2rem; }
.sd-service-txt p{ color:var(--sd-stone); margin-bottom:2rem; max-width:34em; }
.sd-service.is-reverse .sd-service-img{ order:2; }
.sd-service.is-reverse .sd-service-txt{ order:1; }

/* ---------- 09. MARQUEE BRAND ---------- */
.sd-brands{
  border-top:1px solid var(--sd-line);
  border-bottom:1px solid var(--sd-line);
  padding:2.6rem 0;
  overflow:hidden;
}
.sd-marquee{
  display:flex; width:max-content;
  animation:sd-marquee 32s linear infinite;
}
.sd-brands:hover .sd-marquee{ animation-play-state:paused; }
.sd-marquee-group{
  display:flex; align-items:center;
  gap:clamp(3rem, 7vw, 6rem);
  padding-right:clamp(3rem, 7vw, 6rem);
}
.sd-marquee img{
  height:34px; width:auto;
  opacity:.55; filter:grayscale(1);
  transition:opacity .3s, filter .3s;
}
.sd-marquee img:hover{ opacity:1; filter:grayscale(0); }
@keyframes sd-marquee{
  to{ transform:translateX(-50%); }
}

/* ---------- 10. SHOWROOM ---------- */
.sd-showrooms{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top:3rem;
}
.sd-showroom-card{
  position:relative; overflow:hidden;
  aspect-ratio:16/11;
  display:flex; align-items:flex-end;
  color:var(--sd-white);
}
.sd-showroom-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--sd-ease);
}
.sd-showroom-card:hover img{ transform:scale(1.06); }
.sd-showroom-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,14,12,.65), transparent 55%);
}
.sd-showroom-card figcaption{
  position:relative; z-index:2;
  padding:1.8rem 2rem;
}
.sd-showroom-card figcaption h3{
  font-family:var(--sd-display); font-weight:400;
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
}
.sd-showroom-card figcaption span{
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase;
  opacity:.85;
}

/* ---------- 11. CTA ---------- */
.sd-cta{
  background:var(--sd-ink);
  color:var(--sd-paper);
  text-align:center;
}
.sd-cta .sd-section{ padding-top:var(--sd-section); padding-bottom:var(--sd-section); }
.sd-cta h2{ margin:0 auto 2.4rem; max-width:14em; }
.sd-cta .sd-link{ color:var(--sd-paper); border-color:var(--sd-paper); }
.sd-cta .sd-link:hover{ color:var(--sd-brass); border-color:var(--sd-brass); }

/* ---------- 12. FOOTER ---------- */
.sd-footer{
  background:var(--sd-ink);
  color:#B9B4AA;
  border-top:1px solid #2A2925;
  font-size:.88rem;
}
.sd-footer-grid{
  max-width:var(--sd-max);
  margin:0 auto;
  padding:clamp(3.5rem, 8vh, 5.5rem) var(--sd-gutter) 2.5rem;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(2rem, 4vw, 4rem);
}
.sd-footer-brand img{ height:40px; filter:brightness(0) invert(.92); margin-bottom:1.4rem; }
.sd-footer h4{
  font-size:.7rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--sd-brass);
  margin-bottom:1.2rem;
}
.sd-footer ul{ list-style:none; }
.sd-footer li{ margin-bottom:.55rem; }
.sd-footer a{ transition:color .3s; }
.sd-footer a:hover{ color:var(--sd-white); }
.sd-footer-legal{
  max-width:var(--sd-max);
  margin:0 auto;
  padding:1.6rem var(--sd-gutter) 2.2rem;
  border-top:1px solid #2A2925;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.74rem; color:#7C776D;
}
.sd-social{ display:flex; gap:1rem; margin-top:1.4rem; }
.sd-social svg{
  width:20px; height:20px; fill:#B9B4AA;
  transition:fill .3s, transform .3s;
}
.sd-social a:hover svg{ fill:var(--sd-white); transform:translateY(-2px); }

/* ---------- 13. REVEAL ON SCROLL ---------- */
.sd-reveal{
  opacity:0; transform:translateY(36px);
  transition:opacity var(--sd-slow) var(--sd-ease), transform var(--sd-slow) var(--sd-ease);
}
.sd-reveal.is-in{ opacity:1; transform:none; }
.sd-reveal-d1{ transition-delay:.12s; }
.sd-reveal-d2{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .sd-page *, .sd-page *::before, .sd-page *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .sd-reveal{ opacity:1; transform:none; }
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 1024px){
  .sd-rooms-preview{ aspect-ratio:4/4.4; }
}
@media (max-width: 860px){
  .sd-nav{ display:none; }
  .sd-burger{ display:flex; }
  .sd-intro{ grid-template-columns:1fr; align-items:start; }
  .sd-rooms{ grid-template-columns:1fr; }
  .sd-rooms-preview{ position:relative; top:0; aspect-ratio:16/10; order:-1; }
  .sd-service, .sd-service.is-reverse{ grid-template-columns:1fr; }
  .sd-service.is-reverse .sd-service-img{ order:0; }
  .sd-service.is-reverse .sd-service-txt{ order:1; }
  .sd-service-txt{ padding:1.8rem 0 0; }
  .sd-showrooms{ grid-template-columns:1fr; }
  .sd-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  .sd-footer-grid{ grid-template-columns:1fr; }
  .sd-hero-scroll{ display:none; }
}

/* ============================================================
   PARTE 2 — Pagine interne
   15. Hero compatto (progetti, ambienti)
   16. Scheda progetto & crediti
   17. Masonry & lightbox
   18. Indice realizzazioni + filtri
   19. Brand
   20. Contatti & showroom
   21. About / timeline
   22. Render / contract
   23. Navigazione "successivo"
   24. Utility & 404
   ============================================================ */

/* ---------- 15. HERO COMPATTO ---------- */
.sd-hero-project{ height:72svh; min-height:460px; }
.sd-hero-project .sd-hero-img{ animation-duration:16s; }
.sd-hero-page{
  padding:calc(var(--sd-section) + 5rem) var(--sd-gutter) var(--sd-section);
  max-width:var(--sd-max); margin:0 auto;
  border-bottom:1px solid var(--sd-line);
}
.sd-hero-page h1{ max-width:14em; }
.sd-hero-page .sd-lead{ margin-top:1.6rem; }

/* ---------- 16. SCHEDA PROGETTO ---------- */
.sd-project-head{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.sd-credits{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem 1.5rem;
  font-size:.9rem;
  border-top:1px solid var(--sd-line);
  padding-top:1.6rem;
}
.sd-credits dt{
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sd-stone);
  padding-top:.25em;
}
.sd-credits dd{ color:var(--sd-ink); }
.sd-credits dd a{ border-bottom:1px solid var(--sd-line); }
.sd-credits dd a:hover{ border-color:var(--sd-brass); color:var(--sd-brass); }

/* ---------- 17. MASONRY & LIGHTBOX ---------- */
.sd-masonry{
  columns:3;
  column-gap:clamp(.5rem,1.2vw,1.1rem);
  padding:0 var(--sd-gutter);
  max-width:var(--sd-max);
  margin:0 auto;
}
.sd-masonry-item{
  display:block; width:100%;
  break-inside:avoid;
  margin-bottom:clamp(.5rem,1.2vw,1.1rem);
  padding:0; border:0; background:var(--sd-line);
  cursor:zoom-in;
  overflow:hidden;
  position:relative;
}
.sd-masonry-item img{
  width:100%; height:auto;
  transition:transform .9s var(--sd-ease), opacity .4s;
}
.sd-masonry-item:hover img{ transform:scale(1.035); }
.sd-masonry-item::after{
  content:''; position:absolute; inset:0;
  background:rgba(25,25,23,0);
  transition:background .35s var(--sd-ease);
}
.sd-masonry-item:hover::after{ background:rgba(25,25,23,.08); }

.sd-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,14,12,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--sd-ease), visibility 0s .35s;
}
.sd-lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .35s var(--sd-ease); }
.sd-lightbox img{
  max-width:92vw; max-height:86vh;
  object-fit:contain;
  transform:scale(.97); transition:transform .4s var(--sd-ease);
}
.sd-lightbox.is-open img{ transform:scale(1); }
.sd-lb-btn{
  position:absolute; z-index:2;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.75);
  font-size:2rem; line-height:1;
  padding:1rem;
  transition:color .25s, transform .25s var(--sd-ease);
}
.sd-lb-btn:hover{ color:#fff; }
.sd-lb-close{ top:1rem; right:1.4rem; font-size:1.7rem; }
.sd-lb-prev{ left:.6rem; }
.sd-lb-next{ right:.6rem; }
.sd-lb-prev:hover{ transform:translateX(-3px); }
.sd-lb-next:hover{ transform:translateX(3px); }
.sd-lb-count{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.6);
  font-size:.72rem; letter-spacing:.25em;
}

/* ---------- 18. INDICE REALIZZAZIONI ---------- */
.sd-filters{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:2.5rem 0 3rem;
}
.sd-filter{
  background:none; cursor:pointer;
  border:1px solid var(--sd-line);
  padding:.6em 1.4em;
  font-family:var(--sd-body);
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sd-stone);
  transition:color .3s, border-color .3s, background .3s;
}
.sd-filter:hover{ color:var(--sd-ink); border-color:var(--sd-stone); }
.sd-filter.is-active{ background:var(--sd-ink); border-color:var(--sd-ink); color:var(--sd-paper); }

.sd-projects{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem) clamp(1.25rem,2.5vw,2.5rem);
}
.sd-project-card{
  display:block;
  opacity:1; transform:none;
  transition:opacity .45s var(--sd-ease), transform .45s var(--sd-ease);
}
.sd-project-card.is-hidden{ display:none; }
.sd-project-card figure{ overflow:hidden; aspect-ratio:4/3; background:var(--sd-line); }
.sd-project-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--sd-ease), filter .5s;
  filter:saturate(.92);
}
.sd-project-card:hover img{ transform:scale(1.045); filter:saturate(1); }
.sd-project-card-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding-top:1.1rem;
}
.sd-project-card h3{
  font-family:var(--sd-display); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.75rem);
  line-height:1.2;
}
.sd-project-card span{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sd-stone); white-space:nowrap;
}
/* la prima card occupa tutta la larghezza: gerarchia editoriale */
.sd-projects .sd-project-card.is-wide{ grid-column:1 / -1; }
.sd-projects .sd-project-card.is-wide figure{ aspect-ratio:21/9; }

/* ---------- 19. BRAND ---------- */
.sd-brand-group + .sd-brand-group{ margin-top:clamp(3rem,7vh,5rem); }
.sd-brand-group > h2{
  font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--sd-brass);
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--sd-line);
  margin-bottom:2rem;
}
.sd-brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:clamp(1.25rem,2.5vw,2.2rem);
}
.sd-brand-card{ display:block; }
.sd-brand-card-img{ overflow:hidden; aspect-ratio:5/4; background:var(--sd-line); }
.sd-brand-card-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--sd-ease);
}
.sd-brand-card:hover .sd-brand-card-img img{ transform:scale(1.05); }
.sd-brand-card-body{ padding-top:1rem; }
.sd-brand-card-body h3{
  font-family:var(--sd-display); font-weight:400;
  font-size:1.35rem; margin-bottom:.4rem;
  transition:color .3s;
}
.sd-brand-card:hover .sd-brand-card-body h3{ color:var(--sd-brass); }
.sd-brand-card-body p{ font-size:.88rem; color:var(--sd-stone); }
.sd-brand-logo{
  height:26px; width:auto; margin-bottom:.7rem;
  opacity:.7; filter:grayscale(1);
}

/* ---------- 20. CONTATTI & SHOWROOM ---------- */
.sd-contact{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem);
}
.sd-contact-card{
  border-top:1px solid var(--sd-line);
  padding-top:1.8rem;
}
.sd-contact-card h2{
  font-family:var(--sd-display); font-weight:400;
  font-size:clamp(1.7rem,3vw,2.4rem);
  margin-bottom:.3rem;
}
.sd-contact-card .sd-place{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sd-brass); display:block; margin-bottom:1.4rem;
}
.sd-contact-card dl{
  display:grid; grid-template-columns:auto 1fr;
  gap:.55rem 1.5rem; font-size:.92rem;
  margin-bottom:1.8rem;
}
.sd-contact-card dt{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sd-stone); padding-top:.3em;
}
.sd-contact-card dd a{ border-bottom:1px solid var(--sd-line); }
.sd-contact-card dd a:hover{ color:var(--sd-brass); border-color:var(--sd-brass); }

.sd-map{
  width:100%; height:clamp(320px, 46vh, 520px);
  background:var(--sd-line);
  filter:grayscale(1) contrast(.92);
  transition:filter .6s var(--sd-ease);
  border:0;
}
.sd-map:hover{ filter:grayscale(0) contrast(1); }
.sd-map-wrap{ margin-top:var(--sd-section); }

/* ---------- 21. ABOUT ---------- */
.sd-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1px;
  background:var(--sd-line);
  border:1px solid var(--sd-line);
  margin-top:3rem;
}
.sd-figure{
  background:var(--sd-paper);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.sd-figure b{
  display:block;
  font-family:var(--sd-display); font-weight:400;
  font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:1; margin-bottom:.5rem;
}
.sd-figure span{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sd-stone);
}
.sd-services-list{
  list-style:none;
  columns:2; column-gap:clamp(2rem,5vw,4rem);
  margin-top:2rem;
}
.sd-services-list li{
  border-bottom:1px solid var(--sd-line);
  padding:.85rem 0;
  font-size:.95rem;
  break-inside:avoid;
}
.sd-services-list li::before{
  content:''; display:inline-block;
  width:5px; height:5px; margin-right:.9em;
  background:var(--sd-brass);
  vertical-align:middle;
}
.sd-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.sd-split img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

/* ---------- 22. PROCESSO (timeline reale) ---------- */
.sd-steps{ counter-reset:sdstep; margin-top:2.5rem; }
.sd-step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.6rem,3vh,2.4rem) 0;
  border-top:1px solid var(--sd-line);
  align-items:start;
}
.sd-step:last-child{ border-bottom:1px solid var(--sd-line); }
.sd-step::before{
  counter-increment:sdstep;
  content:counter(sdstep,decimal-leading-zero);
  font-family:var(--sd-body);
  font-size:.72rem; letter-spacing:.2em;
  color:var(--sd-brass);
  padding-top:.55em;
}
.sd-step h3{
  font-family:var(--sd-display); font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.25;
}
.sd-step p{ color:var(--sd-stone); font-size:.95rem; }

/* ---------- 23. NEXT ---------- */
.sd-next{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:clamp(280px,42vh,420px);
  overflow:hidden; text-align:center; color:var(--sd-white);
}
.sd-next img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.4s var(--sd-ease);
}
.sd-next:hover img{ transform:scale(1.08); }
.sd-next::after{ content:''; position:absolute; inset:0; background:rgba(15,14,12,.5); }
.sd-next-txt{ position:relative; z-index:2; }
.sd-next-txt .sd-eyebrow{ color:rgba(255,255,255,.8); }

/* ---------- 24. UTILITY ---------- */
.sd-back{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sd-stone);
  margin-bottom:1.6rem;
  transition:color .3s, gap .3s var(--sd-ease);
}
.sd-back::before{ content:'←'; }
.sd-back:hover{ color:var(--sd-ink); gap:.95em; }

.sd-notice{
  border:1px solid var(--sd-line);
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--sd-white);
  font-size:.92rem; color:var(--sd-stone);
}
.sd-center{ text-align:center; }
.sd-404{
  min-height:70svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:1.6rem;
  padding:0 var(--sd-gutter);
}

/* ---------- RESPONSIVE PARTE 2 ---------- */
@media (max-width: 1024px){
  .sd-masonry{ columns:2; }
}
@media (max-width: 860px){
  .sd-project-head{ grid-template-columns:1fr; }
  .sd-projects{ grid-template-columns:1fr; }
  .sd-projects .sd-project-card.is-wide figure{ aspect-ratio:4/3; }
  .sd-contact{ grid-template-columns:1fr; }
  .sd-split{ grid-template-columns:1fr; }
  .sd-services-list{ columns:1; }
  .sd-step{ grid-template-columns:auto minmax(0,1fr); }
  .sd-step p{ grid-column:2; }
  .sd-hero-project{ height:60svh; }
}
@media (max-width: 560px){
  .sd-masonry{ columns:1; }
  .sd-credits{ grid-template-columns:1fr; gap:.15rem; }
  .sd-credits dd{ margin-bottom:.8rem; }
}

/* ---------- 25. Gallery: stati ---------- */
.sd-masonry-item.is-hidden{ display:none; }
button.sd-link{ background:none; cursor:pointer; font-family:var(--sd-body); }

/* ============================================================
   PARTE 3 — Form contatti, negozi, boutique
   26. Form
   27. Alert
   28. Card negozio
   29. Boutique
   ============================================================ */

/* ---------- 26. FORM ---------- */
.sd-form-layout{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.sd-form{ display:flex; flex-direction:column; gap:1.4rem; }
.sd-field{ display:flex; flex-direction:column; gap:.5rem; }
.sd-field-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.4rem;
}
.sd-field label{
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sd-stone);
}
.sd-field label span[aria-hidden]{ color:var(--sd-brass); }
.sd-field input,
.sd-field select,
.sd-field textarea{
  font-family:var(--sd-body);
  font-size:1rem; font-weight:300;
  color:var(--sd-ink);
  background:var(--sd-white);
  border:1px solid var(--sd-line);
  border-radius:0;
  padding:.9em 1em;
  width:100%;
  transition:border-color .3s var(--sd-ease), box-shadow .3s var(--sd-ease);
  -webkit-appearance:none; appearance:none;
}
.sd-field textarea{ resize:vertical; min-height:9em; line-height:1.6; }
.sd-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238A857C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.1em center;
  padding-right:2.8em;
  cursor:pointer;
}
.sd-field input:focus,
.sd-field select:focus,
.sd-field textarea:focus{
  outline:none;
  border-color:var(--sd-brass);
  box-shadow:0 0 0 3px rgba(163,139,95,.14);
}
.sd-field input[aria-invalid="true"],
.sd-field textarea[aria-invalid="true"]{ border-color:#B4483C; }
.sd-field-error{
  font-style:normal; font-size:.82rem; color:#B4483C;
}
.sd-field ::placeholder{ color:#B3AEA4; }

.sd-check label{
  display:flex; align-items:flex-start; gap:.8em;
  font-size:.88rem; font-weight:300;
  letter-spacing:0; text-transform:none;
  color:var(--sd-stone); line-height:1.6;
  cursor:pointer;
}
.sd-check input{
  width:18px; height:18px; flex:0 0 18px;
  margin-top:.25em;
  accent-color:var(--sd-brass);
  cursor:pointer;
}
.sd-check a{ color:var(--sd-ink); border-bottom:1px solid var(--sd-line); }
.sd-check a:hover{ color:var(--sd-brass); border-color:var(--sd-brass); }

.sd-submit{
  align-self:flex-start;
  font-family:var(--sd-body);
  font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sd-paper);
  background:var(--sd-ink);
  border:1px solid var(--sd-ink);
  padding:1.1em 2.6em;
  cursor:pointer;
  transition:background .3s var(--sd-ease), border-color .3s var(--sd-ease), color .3s;
}
.sd-submit:hover{ background:var(--sd-brass); border-color:var(--sd-brass); }
.sd-form-note{ font-size:.78rem; color:var(--sd-stone); }
.sd-form-note span{ color:var(--sd-brass); }

/* honeypot: fuori schermo, mai display:none (i bot lo riconoscono) */
.sd-hp{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- 27. ALERT ---------- */
.sd-alert{
  padding:1.2rem 1.4rem;
  margin-bottom:1.8rem;
  font-size:.92rem; line-height:1.6;
  border-left:3px solid;
}
.sd-alert strong{ display:block; margin-bottom:.2rem; }
.sd-alert-ok{ background:#F1F4EE; border-color:#6E8B5A; color:#3D4F32; }
.sd-alert-ko{ background:#FBF0EE; border-color:#B4483C; color:#7C2F26; }

/* ---------- 28. CARD NEGOZIO ---------- */
.sd-shops{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
}
.sd-shop-card{ display:flex; flex-direction:column; }
.sd-shop-card figure{ overflow:hidden; aspect-ratio:4/3; background:var(--sd-line); }
.sd-shop-card figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--sd-ease);
}
.sd-shop-card:hover figure img{ transform:scale(1.05); }
.sd-shop-body{ padding-top:1.6rem; }
.sd-shop-body h2{ margin-bottom:1rem; transition:color .3s; }
.sd-shop-card:hover .sd-shop-body h2{ color:var(--sd-brass); }
.sd-shop-body p{ color:var(--sd-stone); margin-bottom:1.4rem; }
.sd-shop-tags{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.8rem;
}
.sd-shop-tags li{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sd-stone);
  border:1px solid var(--sd-line);
  padding:.5em 1em;
}

/* ---------- 29. BOUTIQUE ---------- */
.sd-boutique{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1px;
  background:var(--sd-line);
  border:1px solid var(--sd-line);
  margin-top:2.5rem;
}
.sd-boutique-card{
  background:var(--sd-paper);
  padding:clamp(1.8rem,3vw,2.6rem);
}
.sd-boutique-card h3{
  font-family:var(--sd-display); font-weight:400;
  font-size:clamp(1.2rem,2vw,1.5rem);
  margin-bottom:.9rem;
}
.sd-boutique-card p{ font-size:.9rem; color:var(--sd-stone); }

/* ---------- RESPONSIVE PARTE 3 ---------- */
@media (max-width: 860px){
  .sd-form-layout{ grid-template-columns:1fr; }
  .sd-field-row{ grid-template-columns:1fr; }
  .sd-shops{ grid-template-columns:1fr; }
  .sd-submit{ align-self:stretch; text-align:center; }
}

/* ---------- 30. Immagini mancanti e schede brand testuali ---------- */
.sd-img-missing{
  background:var(--sd-line);
  min-height:180px;
  /* nasconde l'icona di immagine rotta senza togliere spazio al layout */
  color:transparent; font-size:0;
}
.sd-brand-cat{
  display:block;
  font-size:.66rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sd-brass);
  margin-bottom:.5rem;
}
/* scheda brand senza foto: diventa un blocco tipografico */
.sd-brand-card-text{
  border:1px solid var(--sd-line);
  background:var(--sd-white);
  padding:clamp(1.6rem,3vw,2.2rem);
  display:flex; flex-direction:column;
  transition:border-color .3s var(--sd-ease), transform .3s var(--sd-ease);
}
.sd-brand-card-text:hover{ border-color:var(--sd-brass); transform:translateY(-3px); }
.sd-brand-card-text .sd-brand-card-body{ padding-top:0; }

/* ---------- 31. Segnaposto per immagini mancanti ---------- */
.sd-noimg{
  position:relative;
  background:linear-gradient(150deg, #EFEBE3 0%, #E3DED5 100%);
}
.sd-noimg::after{
  content:attr(data-sd-initial);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sd-display);
  font-size:clamp(2.5rem,6vw,4.5rem);
  color:rgba(163,139,95,.35);
  pointer-events:none;
}
.sd-img-missing{ opacity:0; }
/* L'immagine del lightbox non deve mai essere trattata come mancante:
   nasce senza src e riceve il file solo all'apertura. */
.sd-lightbox img.sd-img-missing{ opacity:1; }
.sd-lightbox.sd-noimg{ background:rgba(15,14,12,.96); }
.sd-lightbox.sd-noimg::after{ content:none; }



/* ---------- 33. Testo esteso della scheda progetto ---------- */
.sd-project-testo{
  margin-top:2rem;
  max-width:36em;
  border-top:1px solid var(--sd-line);
  padding-top:2rem;
}
.sd-project-testo p{ color:var(--sd-stone); }
.sd-project-testo p + p{ margin-top:1.1rem; }
.sd-project-testo a{ color:var(--sd-ink); border-bottom:1px solid var(--sd-line); }
.sd-project-testo a:hover{ color:var(--sd-brass); border-color:var(--sd-brass); }

/* ---------- 34. Marchio principale ---------- */
.sd-brand-card-img{ position:relative; }
.sd-brand-badge{
  position:absolute; left:0; bottom:0;
  background:var(--sd-brass); color:var(--sd-white);
  font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.6em 1.1em;
}
.sd-brand-card.is-principale{ grid-column:span 2; }
.sd-brand-card.is-principale .sd-brand-card-img{ aspect-ratio:16/9; }
.sd-brand-card.is-principale .sd-brand-card-body h3{ font-size:1.7rem; }
@media (max-width: 700px){
  .sd-brand-card.is-principale{ grid-column:span 1; }
  .sd-brand-card.is-principale .sd-brand-card-img{ aspect-ratio:5/4; }
}