*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#F5EFE0;--cream2:#EDE4D0;
  --espresso:#180903;--walnut:#3A1F0D;
  --gold:#A87832;--gold-l:#C49A50;
  --warm:#6B5C4E;--offwhite:#FDFAF4;
}
html{scroll-behavior:smooth}
body{font-family:'Raleway',sans-serif;background:var(--cream);color:var(--walnut);font-weight:400;line-height:1.7}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 4rem;display:flex;align-items:center;justify-content:space-between;transition:background .3s,box-shadow .3s}
nav.scrolled{background:var(--cream);box-shadow:0 1px 0 rgba(58,31,13,.12)}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;letter-spacing:.15em;color:var(--offwhite);text-decoration:none;text-transform:uppercase;transition:color .3s;cursor:pointer}
nav.scrolled .nav-logo{color:var(--espresso)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s;cursor:pointer}
.nav-links a:hover,.nav-links a.active{color:var(--gold-l)}
nav.scrolled .nav-links a{color:var(--warm)}
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active{color:var(--gold)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--offwhite);transition:background .3s}
nav.scrolled .nav-toggle span{background:var(--espresso)}

/* PAGES */
.page{display:none}.page.active{display:block}

/* HERO */
.hero{height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,8,2,.5) 0%,rgba(20,8,2,.25) 45%,rgba(20,8,2,.7) 100%),url('immagini/interno-soffitto-travi.jpg') center/cover no-repeat}
.hero-content{position:relative;text-align:center;padding:0 2rem;animation:fadeUp 1.2s ease both}
.hero-eyebrow{font-size:.65rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-l);margin-bottom:1.5rem}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(3.5rem,8vw,7rem);font-weight:300;color:#FDFAF4;line-height:1;letter-spacing:-.01em;margin-bottom:1.5rem}
.hero-title em{font-style:italic;color:var(--gold-l)}
.hero-sub{font-size:.85rem;font-weight:300;letter-spacing:.12em;color:rgba(255,255,255,.7);margin-bottom:3rem}
.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-indicator span{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);animation:scrollPulse 2s ease infinite}

/* BUTTONS */
.btn{display:inline-block;font-size:.65rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;padding:1rem 2.5rem;cursor:pointer;border:none;transition:all .3s;font-family:'Raleway',sans-serif;text-decoration:none}
.btn-outline-light{border:1px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-gold{background:var(--gold);color:var(--offwhite);border:1px solid var(--gold)}
.btn-gold:hover{background:var(--walnut);border-color:var(--walnut)}
.btn-outline-dark{border:1px solid var(--walnut);color:var(--walnut);background:transparent}
.btn-outline-dark:hover{background:var(--walnut);color:var(--offwhite)}

/* SECTIONS */
section{padding:7rem 4rem}
.section-eyebrow{font-size:.6rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:400;color:var(--espresso);line-height:1.1;margin-bottom:1.5rem}
.section-title em{font-style:italic}
.section-body{font-size:.9rem;font-weight:300;color:var(--warm);line-height:1.9;max-width:60ch}

/* MANIFESTO */
.manifesto{background:var(--espresso);padding:7rem 4rem}
.manifesto-inner{max-width:900px;margin:0 auto;text-align:center}
.manifesto-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3.5vw,3rem);font-weight:300;color:var(--offwhite);line-height:1.4;font-style:italic;margin-bottom:2.5rem}
.manifesto-quote em{color:var(--gold-l);font-style:normal}
.manifesto-author{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}

/* SERVICES */
.services-section{background:var(--offwhite)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:4rem}
.service-card{position:relative;overflow:hidden;aspect-ratio:3/4;cursor:pointer}
.service-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.service-card:hover .service-card-bg{transform:scale(1.05)}
.service-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,8,2,.85) 0%,rgba(20,8,2,.2) 60%)}
.service-card-content{position:absolute;bottom:0;left:0;right:0;padding:2rem}
.service-card-num{font-family:'Cormorant Garamond',serif;font-size:.75rem;font-weight:400;letter-spacing:.2em;color:var(--gold-l);margin-bottom:.75rem}
.service-card-title{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:400;color:#fff;line-height:1.1}
.service-card-desc{font-size:.8rem;color:rgba(255,255,255,.65);margin-top:.75rem;font-weight:300;line-height:1.6;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.service-card:hover .service-card-desc{opacity:1;transform:translateY(0)}

/* VALUES */
.values-section{background:var(--cream2)}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;margin-top:4rem}
.value-item{text-align:center}
.value-number{font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:300;color:var(--gold);line-height:1;margin-bottom:.5rem}
.value-label{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--warm)}

/* STORIA */
.storia-hero{height:60vh;position:relative;display:flex;align-items:flex-end;padding:5rem 4rem}
.storia-hero-bg{position:absolute;inset:0;background:linear-gradient(to right,rgba(20,8,2,.8) 40%,rgba(20,8,2,.3) 100%),url('immagini/rivestimento-frassino.jpg') center/cover}
.storia-hero-content{position:relative;max-width:600px}
.timeline{background:var(--offwhite);padding:7rem 4rem}
.timeline-inner{max-width:800px;margin:0 auto}
.timeline-item{display:grid;grid-template-columns:120px 1px 1fr;gap:0 2.5rem;margin-bottom:4rem;position:relative}
.timeline-year{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--gold);text-align:right;padding-top:.1rem}
.timeline-line{background:var(--cream2);position:relative}
.timeline-dot{position:absolute;top:.4rem;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid var(--offwhite)}
.timeline-content h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:500;color:var(--espresso);margin-bottom:.5rem}
.timeline-content p{font-size:.85rem;font-weight:300;color:var(--warm);line-height:1.8}

/* PRODOTTI */
.prodotti-hero{background:var(--espresso);padding:10rem 4rem 5rem;text-align:center}
.prodotti-hero .section-title{color:var(--offwhite)}
.prodotti-hero .section-body{color:rgba(255,255,255,.5);margin:0 auto;text-align:center}
.prodotti-grid-section{background:var(--offwhite);padding:6rem 4rem}
.prodotti-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:3rem;background:var(--cream2)}
.prodotto-card{background:var(--offwhite);padding:3rem 2.5rem;transition:background .3s;cursor:pointer}
.prodotto-card:hover{background:var(--cream)}
.prodotto-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:2rem;display:block;background:var(--cream2)}
.prodotto-card-cat{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem}
.prodotto-card-title{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:400;color:var(--espresso);margin-bottom:.75rem}
.prodotto-card-desc{font-size:.8rem;color:var(--warm);font-weight:300;line-height:1.8}
.prodotto-card-toggle{display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:1.25rem;font-weight:500}
.prodotto-card-toggle .chev{display:inline-block;transition:transform .35s ease;font-size:.7rem}
.prodotto-card.open .prodotto-card-toggle .chev{transform:rotate(180deg)}
.prodotto-card-detail{max-height:0;overflow:hidden;transition:max-height .45s ease}
.prodotto-card.open .prodotto-card-detail{max-height:520px}
.prodotto-card-detail p{font-size:.78rem;color:var(--warm);font-weight:300;line-height:1.8;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--cream2)}
.prodotto-card-detail p+p{margin-top:.8rem;padding-top:0;border-top:none}
.prodotto-card-detail ul{list-style:none;margin:.6rem 0 0;padding:0}
.prodotto-card-detail li{font-size:.78rem;color:var(--warm);font-weight:300;line-height:1.7;padding-left:1rem;position:relative}
.prodotto-card-detail li::before{content:"—";position:absolute;left:0;color:var(--gold)}

/* PROGETTI */
.progetti-hero{height:50vh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center}
.progetti-hero-bg{position:absolute;inset:0;background:linear-gradient(rgba(20,8,2,.5),rgba(20,8,2,.5)),url('immagini/scala-frassino-vetro.jpg') center/cover}
.progetti-gallery{background:var(--espresso);padding:6rem 4rem}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.gallery-item{overflow:hidden;background:var(--walnut);position:relative;cursor:pointer}
.gallery-item:nth-child(1){grid-column:span 2}
.gallery-placeholder{width:100%;display:flex;align-items:center;justify-content:center;transition:transform .5s ease}
.gallery-item:nth-child(1) .gallery-placeholder{aspect-ratio:2/1}
.gallery-placeholder{aspect-ratio:1/1;transition:transform .5s ease}
.gallery-item:hover .gallery-placeholder{transform:scale(1.04)}
.gallery-caption{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;color:rgba(255,255,255,.25);text-align:center;padding:0 1.5rem}

/* MATERIOTECA */
.materioteca-intro{background:var(--cream2);padding:10rem 4rem 5rem}
.materioteca-intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;max-width:1100px;margin:0 auto}
.mat-species{background:var(--offwhite);padding:6rem 4rem}
.species-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:4rem}
.species-card{border:1px solid var(--cream2);overflow:hidden;transition:border-color .3s,transform .3s}
.species-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.species-swatch{height:120px;width:100%}
.species-info{padding:1.25rem}
.species-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:500;color:var(--espresso);margin-bottom:.25rem}
.species-latin{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.8rem;color:var(--warm);margin-bottom:.75rem}
.species-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.species-tag{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;padding:.25rem .6rem;background:var(--cream2);color:var(--warm)}

/* CONTATTI */
.contatti-section{background:var(--espresso);padding:10rem 4rem 7rem;min-height:100vh}
.contatti-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:7rem;max-width:1100px;margin:0 auto}
.contact-detail{margin-bottom:2rem}
.contact-detail-label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.4rem}
.contact-detail-value{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:rgba(253,250,244,.82);font-weight:300;line-height:1.6}
.contact-detail-value a{color:inherit;text-decoration:none;transition:color .2s}
.contact-detail-value a:hover{color:var(--gold-l)}
.contact-form{display:flex;flex-direction:column;gap:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.form-group{display:flex;flex-direction:column}
.form-label{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.5rem}
.form-input,.form-textarea,.form-select{background:rgba(253,250,244,.06);border:1px solid rgba(253,250,244,.18);color:rgba(253,250,244,.9);padding:.875rem 1rem;font-family:'Raleway',sans-serif;font-size:.85rem;font-weight:300;outline:none;transition:border-color .2s}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--gold-l)}
.form-textarea{resize:vertical;min-height:140px}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(253,250,244,.25)}
.form-select option{background:#1C0E06}

/* PHOTO GRID & FILTER */
.filter-btn{font-family:'Raleway',sans-serif;font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:.6rem 1.5rem;background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);cursor:pointer;transition:all .25s}
.filter-btn:hover{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.8)}
.filter-btn.active{background:var(--gold);border-color:var(--gold);color:var(--offwhite)}
.pg-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pg-item:hover img{transform:scale(1.07)}
.pg-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,8,2,.75) 0%,transparent 60%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:1rem}
.pg-item:hover .pg-overlay{opacity:1}
.pg-overlay span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.3}
.pg-item.hidden{display:none}
#lightbox{display:none}
#lightbox.open{display:flex!important}
@media(max-width:900px){#photoGrid{grid-template-columns:repeat(2,1fr)!important}}

/* FOOTER */
footer{background:#0F0602;padding:3rem 4rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.footer-copy{font-size:.65rem;color:rgba(255,255,255,.2);letter-spacing:.1em}
.footer-social{display:flex;gap:1.5rem}
.footer-social a{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s}
.footer-social a:hover{color:var(--gold-l)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:.8}}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:900px){
  nav{padding:1.25rem 1.5rem}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--espresso);align-items:center;justify-content:center;gap:2.5rem;z-index:99}
  .nav-links.open a{font-size:1.2rem;color:rgba(255,255,255,.7)}
  .nav-toggle{display:flex;z-index:101}
  section{padding:5rem 1.5rem}
  .manifesto,.prodotti-grid-section,.mat-species{padding:5rem 1.5rem}
  .storia-hero,.prodotti-hero,.progetti-hero{padding:5rem 1.5rem 3rem}
  .timeline{padding:5rem 1.5rem}
  .projects-gallery,.materioteca-intro,.contatti-section{padding:5rem 1.5rem}
  .contatti-inner,.materioteca-intro-inner{grid-template-columns:1fr;gap:3rem}
  .form-row{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item:nth-child(1){grid-column:span 1}
  .gallery-item:nth-child(5){grid-column:span 1}
  footer{flex-direction:column;align-items:flex-start;padding:2rem 1.5rem}
  .timeline-item{grid-template-columns:80px 1px 1fr;gap:0 1.5rem}
}

.lang-switch{display:flex;align-items:center;gap:.45rem}
.lang-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.7rem;font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.55);padding:0;transition:color .2s}
.lang-btn:hover{color:#fff}
.lang-btn.active{color:var(--gold-l)}
.lang-sep{color:rgba(255,255,255,.35);font-size:.7rem}
nav.scrolled .lang-btn{color:rgba(107,92,78,.65)}
nav.scrolled .lang-btn:hover{color:var(--gold)}
nav.scrolled .lang-btn.active{color:var(--gold)}
nav.scrolled .lang-sep{color:rgba(107,92,78,.4)}
.nav-links.open .lang-switch{margin-top:.5rem}
.nav-links.open .lang-btn{color:rgba(255,255,255,.6);font-size:1.1rem}
.nav-links.open .lang-btn.active{color:var(--gold-l)}
.nav-links.open .lang-sep{color:rgba(255,255,255,.3);font-size:1.1rem}


/* BREADCRUMB (pagine prodotto dedicate) */
.breadcrumb{position:relative;padding:8.5rem 4rem 0;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}
.breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--gold-l)}
.breadcrumb span{color:rgba(255,255,255,.3);margin:0 .5rem}
.breadcrumb em{color:var(--gold-l);font-style:normal}
@media(max-width:900px){.breadcrumb{padding:6.5rem 1.5rem 0}}

/* FEATURE LIST (pagine prodotto dedicate) */
.feature-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.feature-list li{font-size:.85rem;color:var(--warm);font-weight:300;line-height:1.7;padding-left:1.4rem;position:relative}
.feature-list li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.feature-list strong{font-weight:500;color:var(--espresso)}