/* ==========================================================================
   Blum — main.css
   Porta 1:1 gli stili inline del design approvato (Claude Design handoff).
   Valori (colori, clamp, spaziature) copiati letteralmente dal design.
   ========================================================================== */

:root{
  --ink:#111111;         /* sfondo principale, deciso nell'ultima revisione del design */
  --ink-2:#191919;       /* sfondo alternato di alcune sezioni */
  --bone:#F7F4EF;        /* testo chiaro / bianco caldo */
  --bone-70:rgba(247,244,239,0.7);
  --ecru:#EFEAE3;        /* testo secondario chiaro */
  --taupe:#A8937C;       /* accento */
  --espresso:#17130F;    /* colore testo "storico" usato in due CTA della homepage */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--ink); }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Archivo', sans-serif;
  font-weight:400;
  overflow-x:clip;
  position:relative;
  text-wrap:pretty;
}
body.home{ overflow-x:hidden; } /* la homepage usa hidden per il preloader a pannelli */

img{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--taupe); }
button{ font-family:inherit; }

body.home ::selection{ background:var(--taupe); color:var(--espresso); }
body:not(.home) ::selection{ background:var(--taupe); color:var(--ink); }

input::placeholder, textarea::placeholder{ color:rgba(239,234,227,0.35); }

[data-drag]::-webkit-scrollbar,
[data-rail]::-webkit-scrollbar{ display:none; }
[data-drag], [data-rail]{ scrollbar-width:none; }

@keyframes blum-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes blum-scrollhint{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(100%); } }
@keyframes blum-fadein{ from{ opacity:0; } to{ opacity:1; } }

/* --------------------------------------------------------------------------
   Header / navigazione — identico su tutte le pagine
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(14px,2.2vw,26px) clamp(16px,4vw,56px);
  mix-blend-mode:difference; color:var(--bone);
}
.site-header .brand{ font-size:clamp(17px,1.6vw,22px); font-weight:600; letter-spacing:-0.03em; }
.site-header nav{
  display:flex; align-items:center; gap:clamp(12px,2vw,30px);
  font-size:11px; letter-spacing:0.16em;
  max-width:78vw; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.site-header nav::-webkit-scrollbar{ display:none; }
.site-header nav a{ white-space:nowrap; }
.site-header nav a.is-current{ color:var(--taupe); }
.site-header .lang-switch{
  display:flex; gap:8px; padding-left:clamp(4px,1.5vw,18px);
  border-left:1px solid rgba(247,244,239,0.3); flex:0 0 auto;
}
.site-header .lang-switch button{
  background:none; border:none; padding:0; font:inherit; letter-spacing:0.16em;
  color:rgba(247,244,239,0.4); cursor:pointer;
}
.site-header .lang-switch button.is-active{ color:var(--bone); }

/* Custom cursor dot */
.blum-cursor{
  position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%;
  border:1px solid var(--bone); z-index:250; pointer-events:none;
  mix-blend-mode:difference; transform:translate3d(-60px,-60px,0); opacity:0;
}
body.home .blum-cursor{ width:14px; height:14px; transform:translate3d(-50px,-50px,0); }

/* --------------------------------------------------------------------------
   Kicker (numero + etichetta di sezione)
   -------------------------------------------------------------------------- */
.kicker-row{
  display:flex; gap:clamp(12px,3vw,40px); align-items:baseline;
}
.kicker-row .num{ font-size:11px; letter-spacing:0.24em; color:var(--taupe); }
.kicker-row .label{ font-size:11px; letter-spacing:0.24em; }
.kicker-row.with-rule{
  border-bottom:2px solid rgba(247,244,239,0.28); padding-bottom:14px;
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Archivo', sans-serif; font-size:11px; letter-spacing:0.2em; font-weight:600;
  padding:16px 26px; border:0; cursor:pointer; text-decoration:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid:hover{ background:var(--taupe); color:var(--ink); }
.btn--solid-ink{ background:var(--bone); color:var(--espresso); }
.btn--solid-ink:hover{ background:var(--taupe); color:var(--espresso); }
.btn--outline{ background:transparent; border:1px solid rgba(247,244,239,0.45); color:var(--bone); }
.btn--outline:hover{ background:var(--bone); color:var(--ink); }
.btn--outline-soft{ background:transparent; border:1px solid rgba(247,244,239,0.5); color:var(--bone); }
.btn--outline-soft:hover{ background:var(--bone); color:var(--espresso); }
.btn--pill{ background:transparent; border:1px solid rgba(247,244,239,0.35); color:var(--bone); padding:14px 22px; }

/* --------------------------------------------------------------------------
   Reveal / word-reveal — stato iniziale impostato da JS, qui solo un aiuto
   -------------------------------------------------------------------------- */
[data-reveal], [data-rv]{ will-change:opacity, transform; }
[data-words] span{ display:inline-block; white-space:pre; }

/* --------------------------------------------------------------------------
   Loader (preloader homepage)
   -------------------------------------------------------------------------- */
.blum-loader{ position:fixed; inset:0; z-index:300; pointer-events:none; }
.blum-loader .panels{ position:absolute; inset:0; display:flex; }
.blum-loader .panels > div{ flex:1; background:var(--ink); border-right:1px solid rgba(247,244,239,0.06); }
.blum-loader .panels > div:last-child{ border-right:0; }
.blum-loader .inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; padding:clamp(20px,4vw,56px);
}
.blum-loader .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.blum-loader .chars{ display:flex; gap:0.01em; overflow:hidden; padding-bottom:0.06em; }
.blum-loader .chars span{
  display:block; font-size:clamp(64px,17vw,260px); line-height:0.8; font-weight:600;
  letter-spacing:-0.045em; color:var(--bone); transform:translateY(110%);
}
.blum-loader .meta{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding-bottom:0.5em; }
.blum-loader .count{ font-size:13px; letter-spacing:0.18em; color:var(--taupe); font-variant-numeric:tabular-nums; }
.blum-loader .tagline{ font-size:11px; letter-spacing:0.24em; color:rgba(247,244,239,0.62); }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee{ position:relative; border-top:1px solid rgba(247,244,239,0.16); overflow:hidden; padding:14px 0; }
.marquee .track{ display:flex; width:max-content; animation:blum-marquee 38s linear infinite; will-change:transform; }
.marquee .set{
  display:flex; gap:clamp(28px,5vw,64px); padding-right:clamp(28px,5vw,64px);
  font-size:11px; letter-spacing:0.26em; color:rgba(239,234,227,0.62); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Rail trascinabile (prodotti / campionario tessuti)
   -------------------------------------------------------------------------- */
.drag-rail{
  display:flex; gap:clamp(10px,1.4vw,20px); overflow-x:auto; cursor:grab;
  padding:0 clamp(16px,4vw,56px); scroll-snap-type:x proximity;
}
.drag-rail.is-tight{ gap:clamp(8px,1vw,14px); }
.drag-progress-track{
  flex:1; height:1px; background:rgba(247,244,239,0.18); position:relative; overflow:hidden;
}
.drag-progress-bar{ position:absolute; top:0; left:0; height:1px; width:12%; background:var(--taupe); }
.drag-hint{ padding:clamp(20px,4vh,44px) clamp(16px,4vw,56px) 0; display:flex; align-items:center; gap:16px; }
.drag-hint span{ font-size:10px; letter-spacing:0.22em; color:rgba(239,234,227,0.62); }

/* Card prodotto (homepage) */
.product-card{ flex:0 0 auto; width:clamp(230px,24vw,360px); margin:0; scroll-snap-align:start; }
.product-card .frame{ position:relative; overflow:hidden; background:#1A1A1A; aspect-ratio:0.66; }
.product-card .frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.15); transition:transform .9s cubic-bezier(0.16,1,0.3,1); }
.product-card .frame .n{ position:absolute; top:12px; left:12px; font-size:10px; letter-spacing:0.2em; color:rgba(247,244,239,0.85); }
.product-card figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid rgba(247,244,239,0.2); margin-top:12px; }
.product-card .name{ font-size:clamp(15px,1.3vw,20px); letter-spacing:-0.02em; font-weight:500; }
.product-card .kind{ font-size:10px; letter-spacing:0.18em; color:var(--taupe); }

/* Tile modello (Catalogo) */
.model-tile{ margin:0; display:flex; flex-direction:column; gap:12px; }
.model-tile .frame{ position:relative; overflow:hidden; background:#1A1A1A; aspect-ratio:0.72; }
.model-tile .frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(0.16,1,0.3,1); }
.model-tile .frame .n{ position:absolute; top:12px; left:12px; font-size:10px; letter-spacing:0.2em; color:rgba(247,244,239,0.9); }
.model-tile figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-top:1px solid rgba(247,244,239,0.2); padding-top:12px; }
.model-tile .name{ font-family:'Bebas Neue', sans-serif; font-size:clamp(20px,2vw,32px); letter-spacing:-0.025em; }
.model-tile .kind{ font-size:10px; letter-spacing:0.18em; color:var(--taupe); }

/* Swatch tessuto */
.swatch{ flex:0 0 auto; width:clamp(160px,17vw,250px); margin:0; scroll-snap-align:start; }
.swatch .frame{ overflow:hidden; background:#1A1A1A; aspect-ratio:0.66; }
.swatch .frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(0.16,1,0.3,1); }
.swatch figcaption{ padding-top:10px; font-size:10px; letter-spacing:0.18em; color:rgba(239,234,227,0.62); }

/* Render tile (Realizzazioni) */
.render-tile{ margin:0; display:flex; flex-direction:column; gap:10px; }
.render-tile .frame{ overflow:hidden; background:#1A1A1A; aspect-ratio:0.66; }
.render-tile .frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(0.16,1,0.3,1); }
.render-tile figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.render-tile .name{ font-size:clamp(14px,1.1vw,17px); font-weight:500; letter-spacing:-0.01em; }
.render-tile .n{ font-size:10px; letter-spacing:0.18em; color:var(--taupe); }

/* Fig galleria (colonne scrolling) */
.gallery-fig{ margin:0; display:flex; flex-direction:column; gap:10px; }
.gallery-fig .frame{ overflow:hidden; background:#181818; aspect-ratio:0.68; }
.gallery-fig .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-fig figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.gallery-fig .name{ font-family:'Bebas Neue', sans-serif; font-size:clamp(16px,1.5vw,26px); letter-spacing:-0.025em; }
.gallery-fig .n{ font-size:10px; letter-spacing:0.2em; color:rgba(239,234,227,0.62); }

/* --------------------------------------------------------------------------
   Footer condiviso (Blum Footer)
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--ink); color:var(--bone); font-family:'Archivo', sans-serif;
  padding:clamp(56px,12vh,140px) clamp(16px,4vw,56px) clamp(24px,4vh,48px);
  border-top:1px solid rgba(247,244,239,0.14); text-wrap:pretty;
}
.site-footer h2{
  margin:0 0 clamp(40px,8vh,96px); font-family:'Bebas Neue', sans-serif;
  font-size:clamp(42px,10vw,182px); line-height:0.88; letter-spacing:-0.025em; font-weight:400;
}
.site-footer h2 span{ color:rgba(239,234,227,0.55); }
.site-footer .grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(24px,4vw,56px); border-top:1px solid rgba(247,244,239,0.2); padding-top:clamp(24px,4vh,48px);
}
.site-footer .col{ display:flex; flex-direction:column; gap:12px; }
.site-footer .col .eyebrow{ font-size:10px; letter-spacing:0.24em; color:var(--taupe); }
.site-footer .col p, .site-footer .col a{ margin:0; font-size:15px; line-height:1.6; color:var(--ecru); }
.site-footer .col .logo{ width:clamp(120px,12vw,190px); height:auto; display:block; margin-top:12px; }
.site-footer .bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:clamp(32px,6vh,72px); font-size:10px; letter-spacing:0.18em; color:rgba(239,234,227,0.45);
}
.site-footer .bottom a{ color:rgba(239,234,227,0.7); }

/* --------------------------------------------------------------------------
   Sezione "contatti" della homepage (variante propria, 2 colonne)
   -------------------------------------------------------------------------- */
.home-contact{ background:var(--ink); color:var(--bone); padding:clamp(56px,12vh,140px) clamp(16px,4vw,56px) clamp(24px,4vh,48px); }
.home-contact h2{ margin:0 0 clamp(40px,8vh,96px); font-family:'Bebas Neue', sans-serif; font-size:clamp(42px,10vw,182px); line-height:0.88; letter-spacing:-0.025em; font-weight:400; }
.home-contact h2 span{ color:rgba(239,234,227,0.55); }
.home-contact .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(24px,4vw,56px); border-top:1px solid rgba(247,244,239,0.2); padding-top:clamp(24px,4vh,48px); }
.home-contact .col{ display:flex; flex-direction:column; gap:12px; }
.home-contact .col.logo-col{ align-items:flex-start; justify-content:flex-start; }
.home-contact .eyebrow{ font-size:10px; letter-spacing:0.24em; color:var(--taupe); }
.home-contact p, .home-contact a{ margin:0; font-size:15px; line-height:1.6; color:var(--ecru); }
.home-contact .logo{ width:clamp(120px,14vw,220px); height:auto; display:block; }
.home-contact .bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:clamp(32px,6vh,72px); font-size:10px; letter-spacing:0.18em; color:rgba(239,234,227,0.62); }

/* --------------------------------------------------------------------------
   Cursor-reveal zone (Atelier)
   -------------------------------------------------------------------------- */
.reveal-zone{ position:relative; overflow:hidden; }
.reveal-zone .reveal-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .45s ease; }
.reveal-zone .reveal-layer .img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(0.2) contrast(1.03); }
.reveal-zone .reveal-layer .tint{ position:absolute; inset:0; background:rgba(17,17,17,0.18); }
.reveal-zone .reveal-layer .caption{ position:absolute; left:clamp(16px,4vw,56px); bottom:clamp(16px,4vw,56px); color:var(--bone); font-size:11px; letter-spacing:0.22em; }

/* --------------------------------------------------------------------------
   Galleria — traccia a due colonne
   -------------------------------------------------------------------------- */
.gallery-track{ position:relative; }
.gallery-track .sticky{
  position:sticky; top:0; height:100svh; overflow:hidden; display:grid;
  grid-template-columns:1fr 1fr; gap:clamp(10px,1.6vw,26px); padding:0 clamp(10px,1.6vw,26px);
}
.gallery-track .col-wrap{ position:relative; overflow:hidden; }
.gallery-track .col{ position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:clamp(10px,1.6vw,26px); will-change:transform; }
.gallery-counter{
  position:fixed; left:clamp(16px,4vw,56px); bottom:clamp(16px,3vw,40px); z-index:180;
  font-size:11px; letter-spacing:0.2em; color:rgba(239,234,227,0.62); mix-blend-mode:difference;
  font-variant-numeric:tabular-nums; opacity:0; transition:opacity .5s ease;
}

/* --------------------------------------------------------------------------
   Form contatti
   -------------------------------------------------------------------------- */
.contact-form{ display:flex; flex-direction:column; gap:clamp(16px,2.5vh,26px); }
.contact-form label{ display:flex; flex-direction:column; gap:8px; }
.contact-form label > span{ font-size:10px; letter-spacing:0.22em; color:var(--taupe); }
.contact-form input, .contact-form textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(247,244,239,0.3);
  padding:12px 0; font-family:'Archivo', sans-serif; font-size:16px; color:var(--bone); outline:none;
  transition:border-color .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ border-bottom-color:var(--taupe); }
.contact-form textarea{ resize:vertical; }
.contact-form button{ align-self:flex-start; }
.contact-form .msg{ font-size:12px; letter-spacing:0.12em; color:var(--taupe); min-height:16px; }
.contact-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --------------------------------------------------------------------------
   Agenti per area (pagina Contatti)
   -------------------------------------------------------------------------- */
.agents{ border-top:1px solid rgba(247,244,239,0.14); padding:clamp(56px,12vh,130px) clamp(16px,4vw,56px); text-align:center; }
.agents-title{ margin:0 0 clamp(36px,7vh,72px); font-size:clamp(16px,1.5vw,20px); font-weight:600; letter-spacing:0.01em; color:#F7F4EF; }
.agents-grid{ display:flex; flex-wrap:wrap; justify-content:center; text-align:left; }
.agents-grid .agent{ flex:1 1 200px; max-width:280px; padding:0 clamp(16px,2.2vw,32px); border-left:1px solid rgba(247,244,239,0.25); }
.agents-grid .agent:first-child{ border-left:0; }
.agents-grid .area{ margin:0 0 10px; font-family:'Bebas Neue', sans-serif; font-size:clamp(19px,2vw,27px); line-height:1.05; letter-spacing:-0.01em; color:#F7F4EF; }
.agents-grid .contact{ margin:0; font-size:13px; line-height:1.5; color:rgba(239,234,227,0.78); }
.agents-grid .email{ display:inline-block; margin-top:14px; font-size:13px; font-weight:600; letter-spacing:0.02em; color:#A8937C; }
@media (max-width: 860px){
	.agents-grid{ flex-direction:column; align-items:stretch; }
	.agents-grid .agent{ max-width:none; padding:20px 0; border-left:0; border-top:1px solid rgba(247,244,239,0.25); }
	.agents-grid .agent:first-child{ border-top:0; padding-top:0; }
}

/* --------------------------------------------------------------------------
   Grayscale utility (usata sugli sfondi con filtro fotografico)
   -------------------------------------------------------------------------- */
.bw-55{ filter:grayscale(0.55) contrast(1.05) brightness(0.78); }

/* --------------------------------------------------------------------------
   Responsive safety net (non modifica l'estetica ai breakpoint di design,
   evita solo overflow orizzontale su viewport estremamente piccoli)
   -------------------------------------------------------------------------- */
@media (max-width: 380px){
  .site-header nav{ gap:10px; }
}