/* ================================================================
   Page-specific styles for GeG
   ================================================================ */

/* ---------- Logo ---------- */
.logo-mark {
  width: 40px;
  height: 40px;
  display: block;
}
.logo-word {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.182em;
  color: var(--color-navy);
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ================================================================
   HOME
   ================================================================ */

/* ----- Hero: le regole stanno piu sotto, nella sezione HOME ----- */
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
  letter-spacing: 0.143em;
  text-transform: uppercase;
}
.hero-scroll-line {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--color-ivory);
  animation: scrollPulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes scrollPulse {
  0%   { top: -50%; }
  100% { top: 100%; }
}

/* ----- Two worlds ----- */
.twoworlds {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 24px;
}
@media (max-width: 900px) { .twoworlds { grid-template-columns: 1fr; } }

.world-card {
  position: relative;
  overflow: hidden;
  display: block;
  color: var(--color-ivory);
  min-height: 620px;
  background: var(--ink-12);
}
.world-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1000ms var(--ease-editorial);
}
.world-card.in img { transform: scale(1); }
.world-card:hover img { transform: scale(1.08); }
.world-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 31, 46,0.0) 40%, rgba(17, 31, 46,0.85) 100%);
}
.world-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.world-content h3 {
  font-family: var(--font-display);
  font-size: clamp(3rem, calc(6 * var(--vw)), 5rem);
  color: var(--color-ivory);
  line-height: 1;
  font-weight: var(--fw-bold);
}
.world-sub {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 600ms var(--ease-editorial), opacity 400ms var(--ease-editorial), margin 400ms var(--ease-editorial);
  font-size: 14px;
  letter-spacing: 0.039em;
  color: var(--color-sand);
  text-transform: uppercase;
}
.world-card:hover .world-sub {
  max-height: 80px;
  opacity: 1;
  margin-top: 16px;
}
.world-desc {
  margin-top: 12px;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.85);
}
.world-cta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-sand);
}
/* Niente freccia appesa al link: il brief la vieta come tic decorativo.
   L'affordance la da' una sottolineatura che si estende all'hover. */
.world-cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-editorial);
}
.world-cta { position: relative; }
.world-card:hover .world-cta::after { transform: scaleX(1); }
@media (max-width: 640px) {
  .world-content { padding: 32px 24px; }
  .world-card { min-height: 460px; }
}

/* ----- Process ----- */
.process-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 60px;
  align-items: start;
}
.process-sticky {
  position: sticky;
  top: 120px;
  height: min-content;
}
.process-number {
  font-family: var(--font-display);
  font-size: clamp(8rem, calc(16 * var(--vw)), 14rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: -0.04em;
  transition: opacity 400ms var(--ease-editorial);
}
.process-heading {
  margin-top: 24px;
  max-width: 16ch;
}
.process-steps { display: flex; flex-direction: column; gap: 0; }
.process-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 80px 0;
  border-top: 1px solid rgba(17, 31, 46, 0.1);
  opacity: 0.45;
  transition: opacity 600ms var(--ease-editorial);
}
.process-step.active { opacity: 1; }
.process-step:first-child { border-top: none; }
.process-step h3 { margin-bottom: 16px; }
.process-step .micro { display: block; margin-bottom: 12px; }
.process-step-img {
  background: var(--ink-12);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.process-step-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-editorial);
}
.process-step:hover .process-step-img img { transform: scale(1.03); }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-sticky { position: static; }
  .process-number { font-size: 5.6rem; }
  .process-step { grid-template-columns: 1fr; padding: 48px 0; }
}

/* ----- Services ----- */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service-card {
  padding: 48px 36px;
  background: var(--white);
  border-radius: var(--radius);
  transition: transform 500ms var(--ease-editorial), background 500ms var(--ease-editorial);
}
.service-card:hover {
  background: var(--color-white);
}
.service-icon {
  margin-bottom: 32px;
  color: var(--color-navy);
}
.service-card h3 { margin-bottom: 16px; }
.service-card p { color: var(--color-earth); font-size: 15px; }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }

/* ----- Projects slider ----- */
.projects-slider-wrap {
  position: relative;
}
.projects-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--pad-gutter);
  margin: 0 calc(var(--pad-gutter) * -1);
  cursor: grab;
  scrollbar-width: none;
}
.projects-slider::-webkit-scrollbar { display: none; }
.projects-slider.dragging { cursor: grabbing; }
.projects-slider.dragging * { pointer-events: none; }
.project-slide {
  flex: 0 0 min(640px, calc(80 * var(--vw)));
  scroll-snap-align: start;
}
.project-slide-img {
  aspect-ratio: 16/9;
  background: var(--ink-12);
  overflow: hidden;
  margin-bottom: 20px;
}
.project-slide-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-editorial); }
.project-slide:hover .project-slide-img img { transform: scale(1.03); }
.project-slide .micro { display: block; margin-bottom: 8px; }
.project-slide h3 { font-size: 1.5rem; }

/* ----- Lookbook ----- */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 24px;
}
.lb-item { overflow: hidden; background: var(--ink-12); }
.lb-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-editorial); }
.lb-item:hover img { transform: scale(1.04); }
.lb-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-earth);
  line-height: 1.5;
  align-self: end;
}

.lb-1 { grid-column: span 7; grid-row: span 5; }
.lb-2 { grid-column: span 5; grid-row: span 3; }
.lb-text-1 { grid-column: span 5; grid-row: span 2; padding: 20px 0; }
.lb-3 { grid-column: span 4; grid-row: span 4; }
.lb-4 { grid-column: span 4; grid-row: span 4; }
.lb-text-2 { grid-column: span 4; grid-row: span 4; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; }
.lb-5 { grid-column: span 8; grid-row: span 3; }
.lb-6 { grid-column: span 4; grid-row: span 3; }

@media (max-width: 900px) {
  .lookbook-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .lb-1, .lb-2, .lb-3, .lb-4, .lb-5, .lb-6, .lb-text-1, .lb-text-2 { grid-column: span 1; grid-row: auto; aspect-ratio: 4/3; }
  .lb-text-1, .lb-text-2 { aspect-ratio: auto; }
}

/* ----- Testimonials ----- */
.testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  min-height: 420px;
}
.testimonial-slide {
  display: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-editorial);
}
.testimonial-slide.active { display: block; opacity: 1; }
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, calc(2.6 * var(--vw)), 2.2rem);
  line-height: 1.3;
  color: var(--color-navy);
}
.testimonial-author {
  margin-top: 32px;
  font-size: 13px;
  letter-spacing: 0.039em;
  text-transform: uppercase;
  color: var(--color-earth);
}
.testimonial-img {
  aspect-ratio: 4/5;
  background: var(--ink-12);
  overflow: hidden;
}
.testimonial-img img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-dots {
  display: flex; gap: 10px;
  margin-top: 48px;
  grid-column: 1 / -1;
}
.testimonial-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: none;
  background: rgba(17, 31, 46, 0.25);
  cursor: pointer;
  transition: background 300ms, transform 300ms;
  padding: 0;
}
.testimonial-dots button.active { background: var(--color-navy); transform: scale(1.2); }
@media (max-width: 900px) {
  .testimonials { grid-template-columns: 1fr; gap: 40px; }
}

/* ----- Partners strip ----- */
.partners-strip {
  background: var(--color-ivory);
  padding: 60px 0;
  border-top: 1px solid rgba(17, 31, 46, 0.08);
  border-bottom: 1px solid rgba(17, 31, 46, 0.08);
  overflow: hidden;
}
.partners-track {
  display: flex;
  gap: 80px;
  animation: marquee 40s linear infinite;
  width: max-content;
  align-items: center;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.partner-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.026em;
  color: var(--color-navy);
  opacity: 0.35;
  white-space: nowrap;
  transition: opacity 300ms var(--ease-editorial);
}
.partner-logo:hover { opacity: 1; }

/* ----- CTA final ----- */
.cta-final {
  background: var(--color-navy);
  color: var(--color-ivory);
  padding: var(--pad-section) var(--pad-gutter);
}
.cta-final .container { padding: 0; }
.cta-final h2 { color: var(--color-ivory); max-width: 14ch; margin-bottom: 24px; }
.cta-final p.lead { color: rgba(255, 255, 255,0.8); max-width: 48ch; margin-bottom: 56px; }
.cta-form {
  max-width: 880px;
}

/* ================================================================
   COMPANY
   ================================================================ */
.timeline {
  position: relative;
  padding: 40px 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(17, 31, 46, 0.15);
}
.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  padding: 32px 0;
  position: relative;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 115px;
  top: 44px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-ivory);
  border: 1px solid rgba(17, 31, 46, 0.3);
  transition: background 400ms, border 400ms, box-shadow 400ms;
}
.timeline-item.in::before {
  background: var(--color-sand);
  border-color: var(--color-earth);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-earth);
}
.timeline-content h3 { margin-bottom: 8px; }
.timeline-content p { color: var(--color-earth); }
@media (max-width: 640px) {
  .timeline::before { left: 10px; }
  .timeline-item { grid-template-columns: 80px 1fr; gap: 20px; }
  .timeline-item::before { left: 6px; top: 16px; }
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cert-item {
  aspect-ratio: 3/2;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-earth);
  cursor: pointer;
  transition: background 400ms, color 400ms;
}
.cert-item:hover { background: var(--color-navy); color: var(--color-ivory); }
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }

.workshop-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 24px;
}
.ws-1 { grid-column: span 8; grid-row: span 5; }
.ws-2 { grid-column: span 4; grid-row: span 3; }
.ws-3 { grid-column: span 4; grid-row: span 2; }
.ws-4 { grid-column: span 5; grid-row: span 4; }
.ws-5 { grid-column: span 7; grid-row: span 4; }
.workshop-grid > div { overflow: hidden; background: var(--ink-12); }
.workshop-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .workshop-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .workshop-grid > div { grid-column: 1; grid-row: auto; aspect-ratio: 4/3; }
}

/* ================================================================
   GRES / GLASS landings
   ================================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cat-card {
  display: block;
  overflow: hidden;
  background: var(--ink-12);
}
.cat-card-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink-12);
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-editorial); }
.cat-card:hover img { transform: scale(1.04); }
.cat-card-body { padding: 24px 0 8px; }
.cat-card-body h3 { font-size: 1.75rem; margin-bottom: 8px; }
.cat-card-body p { color: var(--color-earth); font-size: 15px; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; } }

.coll-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.coll-card {
  position: relative;
  aspect-ratio: 5/3;
  overflow: hidden;
  background: var(--ink-12);
  display: block;
}
.coll-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-editorial); }
.coll-card:hover img { transform: scale(1.05); }
.coll-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(17, 31, 46,0.85) 100%);
}
.coll-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-ivory);
}
.coll-content h3 {
  color: var(--color-ivory);
  font-size: clamp(2rem, calc(4 * var(--vw)), 3rem);
  margin-bottom: 8px;
}
.coll-content p { color: rgba(255, 255, 255, 0.85); max-width: 36ch; font-size: 14px; }
@media (max-width: 900px) { .coll-grid { grid-template-columns: 1fr; } }

.intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.intro-split h2 { max-width: 14ch; }
.intro-split p + p { margin-top: 20px; }
@media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; gap: 32px; } }

/* Glass/Pittori lookbook */
.pittori-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 24px;
}
.p-1 { grid-column: span 12; grid-row: span 6; }
.p-2 { grid-column: span 7; grid-row: span 5; }
.p-3 { grid-column: span 5; grid-row: span 5; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; }
.p-4 { grid-column: span 6; grid-row: span 4; }
.p-5 { grid-column: span 6; grid-row: span 4; }
.pittori-grid > div:not(.p-3) { overflow: hidden; background: var(--ink-12); }
.pittori-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-editorial); }
.pittori-grid > div:hover img { transform: scale(1.03); }
.p-3 h3 { margin-bottom: 16px; }
.p-3 p { color: var(--color-earth); }
@media (max-width: 900px) {
  .pittori-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pittori-grid > div { grid-column: 1; grid-row: auto; aspect-ratio: 4/3; }
  .p-3 { aspect-ratio: auto; padding: 20px 0; }
}

/* ================================================================
   PROGETTI
   ================================================================ */
.projects-filter {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 0;
  border-bottom: 1px solid rgba(17, 31, 46, 0.08);
  margin-bottom: 60px;
}
.projects-filter .container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.projects-filter .container::-webkit-scrollbar { display: none; }
.projects-filter button {
  border: none;
  background: none;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 300ms var(--ease-editorial);
  white-space: nowrap;
}
.projects-filter button:hover { color: var(--color-navy); }
.projects-filter button.active {
  background: var(--color-navy);
  color: var(--color-ivory);
}

.masonry {
  columns: 3;
  column-gap: 24px;
}
.masonry > * { break-inside: avoid; margin-bottom: 24px; }
@media (max-width: 1100px) { .masonry { columns: 2; } }
@media (max-width: 640px) { .masonry { columns: 1; } }

.project-card {
  position: relative;
  cursor: pointer;
  display: block;
  overflow: hidden;
  background: var(--ink-12);
}
.project-card img { width: 100%; display: block; transition: transform 800ms var(--ease-editorial); }
.project-card:hover img { transform: scale(1.03); }
.project-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(17, 31, 46,0.85) 100%);
  opacity: 0;
  transition: opacity 500ms var(--ease-editorial);
}
.project-card:hover::after { opacity: 1; }
.project-card-info {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  color: var(--color-ivory);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-editorial), transform 500ms var(--ease-editorial);
  z-index: 2;
}
.project-card:hover .project-card-info { opacity: 1; transform: translateY(0); }
.project-card-info .micro { color: var(--color-sand); display: block; margin-bottom: 4px; }
.project-card-info h3 { color: var(--color-ivory); font-size: 1.25rem; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(17, 31, 46, 0.95);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px;
  opacity: 0;
  transition: opacity 400ms var(--ease-editorial);
}
.lightbox.open { display: flex; opacity: 1; }
.lb-inner {
  max-width: 1100px;
  width: 100%;
  color: var(--color-ivory);
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: center;
}
.lb-img-wrap { background: var(--color-ink); overflow: hidden; aspect-ratio: 4/3; }
.lb-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.lb-title { font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 8px; }
.lb-loc { color: var(--color-sand); font-size: 12px; letter-spacing: var(--tracking-micro); text-transform: uppercase; margin-bottom: 28px; display: block; }
.lb-desc { color: rgba(255, 255, 255, 0.8); line-height: 1.6; }
.lb-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-ivory);
  width: 44px; height: 44px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  transition: background 300ms var(--ease-editorial);
}
.lb-close:hover { background: rgba(255, 255, 255, 0.15); }
@media (max-width: 900px) {
  .lb-inner { grid-template-columns: 1fr; gap: 24px; }
  .lightbox { padding: 20px; }
}

/* ================================================================
   PRESS
   ================================================================ */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(17, 31, 46, 0.1);
  border: 1px solid rgba(17, 31, 46, 0.1);
}
.partner-card {
  background: var(--color-ivory);
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  font-family: var(--font-display);
  font-size: clamp(1rem, calc(2 * var(--vw)), 1.5rem);
  color: var(--color-navy);
  text-align: center;
  transition: background 400ms var(--ease-editorial), color 400ms var(--ease-editorial);
}
.partner-card:hover { background: var(--color-navy); color: var(--color-ivory); }
@media (max-width: 900px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* Il video non e piu il protagonista della pagina: sta al centro, largo la
   meta abbondante della colonna, e parte da solo senza audio. */
.video-card { max-width: 760px; margin: 0 auto; }
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-ink);
  margin-bottom: 16px;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 400ms; }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity 400ms; }
.video-frame.in-onda img { opacity: 0; }
.video-frame.in-onda video { opacity: 1; }
/* unico comando: l audio, spento di partenza */
/* In alto, non in basso: appena si accende l audio il video mostra i comandi
   nativi, e quella barra occupa tutto il bordo inferiore — il bottone ci
   finiva sopra, coprendo schermo intero e avanti/indietro. */
.video-audio {
  position: absolute;
  right: 12px; top: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--color-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 400ms;
  backdrop-filter: blur(8px);
}
.video-frame:hover .video-audio { background: rgba(255, 255, 255, 0.32); }
.video-audio svg { color: var(--color-ivory); }
.video-cap {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-earth);
  font-size: 16px;
}
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } }

.press-list { border-top: 1px solid rgba(17, 31, 46, 0.15); }
.press-item {
  display: grid;
  grid-template-columns: 120px 160px 1fr 40px;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(17, 31, 46, 0.15);
  align-items: center;
  transition: padding 300ms var(--ease-editorial);
}
.press-item:hover { padding-left: 12px; }
.press-date {
  font-size: 12px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
}
.press-outlet {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-navy);
  font-size: 15px;
}
.press-title {
  font-size: 17px;
  color: var(--color-navy);
}
.press-arrow {
  text-align: right;
  font-size: 20px;
  color: var(--color-earth);
  transition: transform 300ms var(--ease-editorial), color 300ms;
}
.press-item:hover .press-arrow { transform: translateX(4px); color: var(--color-navy); }
@media (max-width: 740px) {
  .press-item { grid-template-columns: 1fr; gap: 4px; padding: 20px 0; }
  .press-arrow { display: none; }
}

/* ================================================================
   CONTATTI
   ================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

.showroom-info h3 { margin-bottom: 24px; font-family: var(--font-body); font-size: 11px; letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--color-earth); font-weight: 500; }
.showroom-info .address { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.4; margin-bottom: 16px; white-space: pre-line; }
.showroom-info .hours, .showroom-info .phone-line { color: var(--color-earth); margin-bottom: 8px; font-size: 15px; }

.map-frame {
  margin-top: 40px;
  aspect-ratio: 4/3;
  background: var(--ink-12);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(17, 31, 46, 0.1);
}
.map-svg { width: 100%; height: 100%; display: block; filter: grayscale(1) contrast(0.95); }
.map-pin {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  background: var(--color-navy);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(17, 31, 46, 0.15), 0 0 0 14px rgba(17, 31, 46, 0.08);
}
.map-pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--color-ivory);
  border-radius: 50%;
}

.quick-contacts {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.quick-contact {
  padding: 28px 24px;
  background: var(--white);
  border-radius: var(--radius);
  text-align: left;
  transition: background 400ms var(--ease-editorial);
}
.quick-contact:hover { background: var(--color-white); }
.quick-contact .micro { display: block; margin-bottom: 8px; }
.quick-contact .val { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-navy); display: block; }
@media (max-width: 640px) { .quick-contacts { grid-template-columns: 1fr; } }

.form-success {
  display: none;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--color-sand);
  color: var(--color-navy);
  font-size: 14px;
  letter-spacing: 0.013em;
}

/* ================================================================
   Shared small components
   ================================================================ */
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 72px;
  align-items: end;
}
.section-heading .micro { display: block; margin-bottom: 16px; }
.section-heading p { color: var(--color-earth); max-width: 48ch; }
@media (max-width: 900px) { .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; } }

/* ================================================================
   COLLECTION LOOKBOOK (Pittori & siblings)
   ================================================================ */
.coll-hero {
  position: relative;
  height: calc(80 * var(--vh));
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-gutter) 80px;
  color: var(--color-ivory);
}
.coll-hero-bg { position: absolute; inset: -10% 0 0 0; z-index: 0; will-change: transform; }
.coll-hero-bg img {
  width: 100%; height: 110%; object-fit: cover; display: block;
  transform: translateY(calc(var(--p, 0) * -10%));
  transition: transform 80ms linear;
}
.coll-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17, 31, 46,0.2) 0%, rgba(17, 31, 46,0.1) 40%, rgba(17, 31, 46,0.7) 100%);
}
.coll-hero-content { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; }
.coll-hero-content .micro { color: var(--color-sand); margin-bottom: 28px; display: block; }
.coll-hero-content h1 {
  color: var(--color-ivory);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(4rem, calc(10 * var(--vw)), 9rem);
  letter-spacing: -0.03em;
  animation: collTitleIn 1.2s var(--ease-editorial);
}
@keyframes collTitleIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}
.coll-hero-payoff {
  margin-top: 32px;
  max-width: 48ch;
  color: rgba(255, 255, 255,0.85);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, calc(1.6 * var(--vw)), 1.4rem);
  line-height: 1.5;
}

/* Editorial concept column */
.concept-col {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--pad-section) 0;
}
.concept-col .lead-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, calc(2 * var(--vw)), 1.65rem);
  line-height: 1.4;
  color: var(--color-navy);
  margin-bottom: 32px;
}
.concept-col p + p { margin-top: 24px; }
.concept-col p { color: var(--color-earth); font-size: 17px; }

/* Editorial lookbook — asymmetric, real magazine rhythm */
.editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
}
.ed-full {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink-12);
}
.ed-pair-l { grid-column: 2 / 7; aspect-ratio: 3/4; overflow: hidden; background: var(--ink-12); }
.ed-pair-r { grid-column: 7 / 12; aspect-ratio: 3/4; overflow: hidden; background: var(--ink-12); margin-top: 64px; }
.ed-60 { grid-column: 1 / 8; aspect-ratio: 3/2; overflow: hidden; background: var(--ink-12); }
.ed-cap-40 {
  grid-column: 9 / 13;
  align-self: end;
  padding-bottom: 16px;
}
.ed-portrait {
  grid-column: 4 / 10;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--ink-12);
}
.ed-bleed {
  grid-column: 1 / -1;
  margin-left: calc(50% - calc(50 * var(--vw)));
  width: calc(100 * var(--vw));
  aspect-ratio: 21/9;
  overflow: hidden;
  background: var(--ink-12);
}
.ed-third { grid-column: span 4; aspect-ratio: 3/4; overflow: hidden; background: var(--ink-12); }
.editorial img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1200ms var(--ease-editorial);
}
.editorial [class^="ed-"]:hover img { transform: scale(1.03); }
.ed-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--color-earth);
  line-height: 1.5;
  max-width: 32ch;
}
.ed-caption .micro { display: block; color: var(--color-sand); margin-bottom: 8px; color: var(--color-earth); letter-spacing: var(--tracking-micro); }
.ed-caption-left { text-align: left; padding: 12px 0 0; }
.ed-caption-right { text-align: right; padding: 12px 0 0; justify-self: end; }
.ed-caption-offset { grid-column: 2 / 6; padding: 16px 0 0; }
.ed-caption-offset-r { grid-column: 8 / 12; padding: 16px 0 0; }

@media (max-width: 900px) {
  .editorial { gap: 24px; }
  .ed-full, .ed-pair-l, .ed-pair-r, .ed-60, .ed-portrait, .ed-bleed, .ed-third,
  .ed-cap-40, .ed-caption-offset, .ed-caption-offset-r {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-left: 0;
    width: auto;
  }
  .ed-bleed { aspect-ratio: 16/9; }
}

/* Inspirations / Materia blocks */
.insp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.insp-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.insp-chip { aspect-ratio: 1; overflow: hidden; background: var(--ink-12); }
.insp-chip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); transition: filter 500ms, transform 700ms var(--ease-editorial); }
.insp-chip:hover img { filter: grayscale(0); transform: scale(1.05); }
.insp-names { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-family: var(--font-display); font-style: italic; color: var(--color-earth); }
@media (max-width: 900px) { .insp-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Materia block (Gres/Tavoli spessori) */
.materia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 20px 0;
}
.materia-item .num {
  font-family: var(--font-display);
  font-size: clamp(4rem, calc(8 * var(--vw)), 7rem);
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: -0.04em;
  font-weight: 400;
}
.materia-item .num small { font-size: 0.4em; letter-spacing: 0; color: var(--color-earth); margin-left: 4px; }
.materia-item .divider { margin: 20px 0 16px; }
.materia-item h4 { margin-bottom: 8px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.4rem; }
.materia-item p { color: var(--color-earth); font-size: 15px; }
@media (max-width: 900px) { .materia-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Custom 3-column (finiture / sistema) */
.custom-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 20px 0;
}
.custom-3 .icon { color: var(--color-navy); margin-bottom: 24px; }
.custom-3 h4 { margin-bottom: 10px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.25rem; }
.custom-3 p { color: var(--color-earth); font-size: 15px; }
@media (max-width: 900px) { .custom-3 { grid-template-columns: 1fr; gap: 32px; } }

/* Other collections strip */
.other-coll-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.other-coll {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--ink-12);
  color: var(--color-ivory);
}
.other-coll img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-editorial);
}
.other-coll:hover img { transform: scale(1.04); }
.other-coll::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(17, 31, 46,0.8) 100%);
}
.other-coll .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-ivory);
}
@media (max-width: 1100px) { .other-coll-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .other-coll-strip { grid-template-columns: repeat(2, 1fr); } }

/* ================================================================
   PROGETTI counters + FLIP transition hook
   ================================================================ */
.counters-row {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 48px;
  margin-top: 48px;
}
.counter .n {
  font-family: var(--font-display);
  font-size: clamp(3rem, calc(5 * var(--vw)), 4.5rem);
  line-height: 1;
  color: var(--color-navy);
  font-weight: 400;
}
.counter .l {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
}
@media (max-width: 640px) { .counters-row { grid-template-columns: 1fr; gap: 24px; } }

.project-card.fading {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 200ms, transform 200ms;
}
.project-card.entering {
  opacity: 0;
  transform: translateY(12px);
}
.project-card.enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms var(--ease-editorial), transform 400ms var(--ease-editorial);
}

/* Lightbox slider */
.lb-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-ink);
}
.lb-slider-track { display: flex; height: 100%; transition: transform 500ms var(--ease-editorial); }
.lb-slider-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.lb-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(17, 31, 46,0.6);
  border: 1px solid rgba(255, 255, 255,0.3);
  color: var(--color-ivory);
  cursor: pointer;
  font-size: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 300ms;
}
.lb-arrow:hover { background: rgba(255, 255, 255,0.2); }
.lb-arrow.prev { left: 16px; }
.lb-arrow.next { right: 16px; }
.lb-meta { font-size: 13px; color: rgba(255, 255, 255,0.7); line-height: 1.8; margin: 24px 0; }
.lb-meta strong { color: var(--color-sand); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: var(--tracking-micro); display: inline-block; min-width: 100px; }

/* ================================================================
   PRESS video + rassegna upgrade
   ================================================================ */
.video-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ================================================================
   CONTATTI FAQ
   ================================================================ */
.faq-list { border-top: 1px solid rgba(17, 31, 46,0.15); }
.faq-item { border-bottom: 1px solid rgba(17, 31, 46,0.15); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 28px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, calc(1.8 * var(--vw)), 1.5rem);
  color: var(--color-navy);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 300ms;
}
.faq-q:hover { color: var(--color-earth); }
.faq-q .chev {
  flex: 0 0 auto;
  transition: transform 300ms var(--ease-editorial);
  color: var(--color-earth);
}
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ease-editorial);
}
.faq-a-inner {
  padding: 0 0 28px;
  color: var(--color-earth);
  font-size: 16px;
  line-height: 1.6;
  max-width: 64ch;
}
.faq-item.open .faq-a { max-height: 240px; }

/* Contatti form grid (60/40) */
.contact-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; gap: 48px; } }

/* ================================================================
   COMPANY values expanded
   ================================================================ */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.value-card { }
.value-card-img { aspect-ratio: 4/5; overflow: hidden; background: var(--ink-12); margin-bottom: 24px; }
.value-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-editorial); }
.value-card:hover .value-card-img img { transform: scale(1.04); }
.value-card h3 { margin-bottom: 12px; }
.value-card p { color: var(--color-earth); }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }

/* Cert modal */
.cert-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 31, 46,0.92);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.cert-modal.open { display: flex; }
.cert-modal-inner {
  max-width: 560px;
  background: var(--color-ivory);
  padding: 56px 48px;
  color: var(--color-navy);
  position: relative;
}
.cert-modal h3 { margin-bottom: 16px; }
.cert-modal p { color: var(--color-earth); }
.cert-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--color-navy);
  color: var(--color-navy);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* ================================================================
   PROGETTI grid (intentional ratio variation, not masonry)
   ================================================================ */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  align-items: start;
}
.proj-grid .project-card { width: 100%; }
.proj-grid .project-card img { aspect-ratio: 4/5; object-fit: cover; }
.proj-grid .proj-4-5 img { aspect-ratio: 4/5; }
.proj-grid .proj-3-4 img { aspect-ratio: 3/4; }
.proj-grid .proj-1-1 img { aspect-ratio: 1/1; }
@media (max-width: 900px) { .proj-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; } }
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }

/* FAQ max-height override (some answers are longer) */
.faq-item.open .faq-a { max-height: 400px; }

/* ================================================================
   ADDITIONAL COMPONENTS (press premium, contact, map, video quote)
   ================================================================ */

/* Press — partners premium (large editorial grid) */
.partners-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(17, 31, 46, 0.12);
  border: 1px solid rgba(17, 31, 46, 0.12);
}
.partner-premium {
  background: var(--color-ivory);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, calc(2 * var(--vw)), 1.875rem);
  color: var(--color-navy);
  text-align: center;
  letter-spacing: -0.01em;
  transition: background 400ms var(--ease-editorial), color 400ms var(--ease-editorial), letter-spacing 400ms var(--ease-editorial);
}
.partner-premium:hover { background: var(--color-navy); color: var(--color-ivory); letter-spacing: 0.007em; }
@media (max-width: 900px) { .partners-grid-premium { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .partners-grid-premium { grid-template-columns: 1fr; } }

/* Press — video quote */
.video-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-navy);
  margin: 24px 0 12px;
  max-width: 40ch;
  text-wrap: pretty;
}

/* Contact split form + info */
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form .form-field { display: flex; flex-direction: column; gap: 8px; }
.contact-form label {
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
  font-weight: 500;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(17, 31, 46, 0.25);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-navy);
  border-radius: 0;
  transition: border-color 300ms var(--ease-editorial);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
}
.contact-form textarea { resize: vertical; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--color-earth);
  line-height: 1.5;
  cursor: pointer;
}
.checkbox-line input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--color-navy);
  cursor: pointer;
}
.contact-form .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 640px) { .contact-form .form-row { grid-template-columns: 1fr; } }

.contact-info h3 {
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
  font-weight: 500;
}
.contact-info .address {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 20px;
  white-space: pre-line;
  color: var(--color-navy);
}
.contact-info .hours,
.contact-info .phone-line {
  color: var(--color-earth);
  margin-bottom: 8px;
  font-size: 15px;
}
.contact-info .phone-line a { color: var(--color-navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 300ms; }
.contact-info .phone-line a:hover { border-bottom-color: var(--color-earth); }

/* Map full-width */
/* La mappa non e piu una fascia a tutta pagina: sta in un riquadro dentro
   il contenuto, come le schede delle informazioni. */
.map-full {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 280px;
  overflow: hidden;
  border: 1px solid var(--ink-12);
  border-radius: 0;
  background: var(--ink-12);
}
.map-pin-abs {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.map-pin-abs .map-pin {
  position: relative;
  transform: none;
  top: auto; left: auto;
}
.map-pin-label {
  background: var(--color-navy);
  color: var(--color-ivory);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

/* CTA form — dark variant (styles inputs properly) */
.form-dark .form-field { display: flex; flex-direction: column; gap: 8px; }
.form-dark .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.form-dark label {
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-sand);
  font-weight: 500;
}
.form-dark input,
.form-dark textarea {
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ivory);
  border-radius: 0;
  transition: border-color 300ms var(--ease-editorial);
}
.form-dark input:focus,
.form-dark textarea:focus {
  outline: none;
  border-bottom-color: var(--color-sand);
}
.form-dark .form-field { margin-bottom: 24px; }
.form-dark .btn { margin-top: 8px; }
.form-dark .form-success { color: var(--color-sand); }
@media (max-width: 640px) { .form-dark .form-row { grid-template-columns: 1fr; } }

/* ================================================================
   CATALOG DOWNLOAD (profiling)
   ================================================================ */
.catalog {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, calc(6 * var(--vw)), 96px);
  align-items: center;
}
.catalog-visual {
  position: relative;
  align-self: center;
}
/* La copertina e la pagina vera del catalogo. Il file e quasi bianco: senza
   un filo di bordo sul fondo bianco della sezione non si capirebbe dove
   finisce il foglio. */
.catalog-visual { margin: 0; }
.catalog-visual img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ink-12);
}

.catalog-panel { max-width: 620px; }
.catalog-lead {
  margin-top: 24px;
  color: var(--color-earth);
  font-size: 18px;
  line-height: 1.6;
}
.catalog-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 36px 0 44px;
  padding: 0;
}
.catalog-meta li { display: flex; flex-direction: column; gap: 4px; }
.catalog-meta-n {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--color-navy);
}
.catalog-meta-l {
  font-size: 12px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
}
@media (max-width: 900px) {
  .catalog { grid-template-columns: 1fr; gap: 48px; }
  .catalog-visual { max-width: 320px; }
}
@media (max-width: 640px) {
  .catalog-meta { gap: 28px; }
}

/* ================================================================
   HOME — versione rivista
/* ----- Hero: solo fotografia -----
   Cinque scatti (cartella "Foto per Prima pagina Home") a tutto campo, che si
   danno il cambio in dissolvenza. Sopra non c e nessun testo: la prima
   schermata deve far vedere il prodotto, non spiegarlo. Le parole cominciano
   nella sezione sotto.
   Riferimento Rimadesio / Henry Glass: immagine piena, nessun ornamento. */
.hero {
  position: relative;
  min-height: calc(100 * var(--vh));
  overflow: hidden;
  background: var(--ink);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* la dissolvenza e lunga un quarto della permanenza: le due immagini si
     attraversano invece di alternarsi a scatto */
  transition: opacity 900ms var(--ease-editorial);
}
/* Niente movimento sulla prima schermata: la fotografia sta ferma.
   Prima c era un respiro (scale 1 → 1.06) che allo scorrere leggeva come se
   l immagine scivolasse via verso l alto. Richiesta cliente: togliere.
   La sequenza resta, ma il cambio e solo dissolvenza. */
.hero-slide.on { opacity: 1; z-index: 1; }
/* La foto uscente resta opaca sotto quella entrante: senza, a meta
   dissolvenza si vedrebbero due immagini al 50% e il fondo scuro sotto. */
.hero-slide.prev { opacity: 1; z-index: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition-duration: 400ms; }
}

/* Il velo si e alleggerito: non deve piu proteggere un titolo, deve solo far
   leggere la barra in alto e i due segnali in basso. In mezzo la fotografia
   resta scoperta. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(17, 31, 46, 0.58) 0%,
    rgba(17, 31, 46, 0.10) 20%,
    rgba(17, 31, 46, 0) 55%,
    rgba(17, 31, 46, 0.34) 100%);
}
.hero-scroll { color: rgba(255, 255, 255, 0.8); }
.hero-scroll-line { background: rgba(255, 255, 255, 0.35); }
.hero-scroll-line::after { background: var(--white); }

/* Cinque trattini in basso a destra: dicono a che punto e la sequenza e
   permettono di saltare a uno scatto. */
.hero-punti {
  position: absolute;
  right: var(--pad-gutter);
  bottom: clamp(40px, calc(6 * var(--vh)), 72px);
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero-punti button {
  width: 34px; height: 2px;
  padding: 12px 0;              /* area di click alta 26px, il tratto resta fine */
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.hero-punti button::after {
  content: "";
  position: absolute;
  inset: 12px 0;
  background: rgba(255, 255, 255, 0.55);
  /* le foto sotto non sono sempre scure: senza un filo di ombra i trattini
     sparirebbero sopra una parete chiara */
  box-shadow: 0 0 6px rgba(17, 31, 46, 0.5);
  transition: background 320ms var(--ease-editorial);
}
.hero-punti button[aria-current="true"]::after { background: var(--white); }
@media (max-width: 900px) {
  .hero-punti { display: none; }   /* su telefono ruba spazio al segnale di scorrimento */
}
/* ----- Il testo, subito sotto le foto -----
   Centrato e con molta aria: e la prima cosa che si legge, deve arrivare da
   sola. Entra riga per riga mentre la sezione sale, con una messa a fuoco:
   la timeline e quella nativa dello scroll, quindi lo scaglionamento nasce
   dal fatto che ogni riga entra in campo un istante dopo la precedente,
   senza delay scritti a mano. */
.manifesto {
  padding: clamp(96px, calc(16 * var(--vh)), 220px) 0 clamp(80px, calc(12 * var(--vh)), 180px);
  /* dietro il testo scorrono gli spezzoni di prodotto: la sezione e il loro
     contenitore e li ritaglia */
  position: relative;
  overflow: hidden;
  background: var(--deep);
}
.manifesto .container { text-align: center; position: relative; z-index: 2; }
/* ----- Il video di sfondo -----
   Spezzoni del video Valcucine senza persone: solo superfici, bordi e isole.
   Non e un filmato da guardare, e una materia che si muove piano dietro le
   parole: per questo e scuro, desaturato e senza comandi. */
.manifesto-media { position: absolute; inset: 0; z-index: 0; }
.manifesto-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.46) saturate(0.72) contrast(1.04);
}
.manifesto-video::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* il centro e piu scuro del bordo: il titolo ci sta sopra */
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, rgba(11, 22, 34, 0.55) 0%, rgba(11, 22, 34, 0.12) 100%),
    linear-gradient(180deg, rgba(11, 22, 34, 0.5) 0%, rgba(11, 22, 34, 0) 26% 74%, rgba(11, 22, 34, 0.5) 100%);
}
.manifesto-video h1 { color: var(--white); }
/* Sopra il video il titolo e piu contenuto: la materia che scorre dietro deve
   vedersi, il testo l accompagna e non la copre. */
.manifesto-video h1 { font-size: clamp(2rem, calc(4.2 * var(--vw)), 3.25rem); }
.manifesto-video .manifesto-sub {
  color: var(--on-dark-70);
  font-size: var(--fs-base);
  max-width: 46ch;
}
.manifesto .divider { margin-left: auto; margin-right: auto; }
.manifesto h1 {
  max-width: 20ch;
  margin: var(--s6) auto 0;
}
.manifesto-sub {
  max-width: 52ch;
  margin: var(--s6) auto var(--s7);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-70);
}
.manifesto .hero-ctas { justify-content: center; }

@keyframes manifesto-entra {
  from { opacity: 0; transform: translateY(40px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifesto .container > * {
      animation: manifesto-entra linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 62%;
    }
  }
}

/* ----- Passaggio dall hero a "Due famiglie di prodotto" -----
   Il testo dell hero si smorza salendo mentre esce, le due card entrano dai
   due bordi dello schermo. Timeline nativa dello scroll: nessun listener,
   nessun requestAnimationFrame. Dove non c e (Firefox oggi) non succede
   niente e tutto resta visibile: e un di piu, non un requisito. */
@keyframes hero-esce    { to   { opacity: 0; transform: translateY(-90px) scale(0.93); } }
/* La fotografia dell hero non si muove piu allo scorrere: niente uscita verso
   l alto, niente arretramento. Richiesta cliente: la prima schermata sta
   ferma e la pagina le passa davanti. */
@keyframes blocco-entra { from { opacity: 0; transform: translateY(80px) scale(0.97); } }
/* Le due card arrivano da fuori campo, una per lato. La sezione ha
   overflow-x: clip, altrimenti la card che parte da -55% aprirebbe una barra
   di scorrimento orizzontale. */
@keyframes carta-da-sinistra { from { opacity: 0; transform: translateX(-55%); } }
@keyframes carta-da-destra   { from { opacity: 0; transform: translateX(55%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* La timeline la porta l hero e i figli la referenziano per nome: dentro
       .hero non si puo usare view(), perche .hero ha overflow: hidden ed e
       quindi lo scroll container dei suoi figli — la loro view() non avanza
       mai e l animazione resta ferma al primo fotogramma. */
    .hero { view-timeline-name: --hero; }
    .hero-scroll, .hero-punti {
      animation: hero-esce linear both;
      animation-timeline: --hero;
      animation-range: exit 12% exit 78%;
    }
    #cosa-produciamo .section-heading {
      animation: blocco-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    #cosa-produciamo .world-card:first-child {
      animation: carta-da-sinistra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    #cosa-produciamo .world-card:last-child {
      animation: carta-da-destra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}


/* ----- Card delle due famiglie -----
   Le fotografie si alternano ogni due secondi in dissolvenza. */
.fam-foto-wrap { position: absolute; inset: 0; }
.world-card .fam-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 2000ms var(--ease-editorial), transform 1000ms var(--ease-editorial);
}
/* la foto uscente resta opaca sotto quella entrante: senza questo, a meta
   dissolvenza si vedrebbero due immagini al 50% e il fondo grigio sotto */
.world-card .fam-foto.prev { opacity: 1; z-index: 1; transition: none; }
/* Solo dissolvenza: prima la foto nuova entrava con una tendina da destra,
   ora si accende sopra quella vecchia e basta. Il cambio e lento (vedi PASSO
   in app.js), cosi ogni scatto si guarda. */
.world-card .fam-foto.on { opacity: 1; z-index: 2; }
.world-card:hover .fam-foto.on { transform: none; }

/* ----- I nostri materiali -----
   Entrata alternata da sinistra e da destra. */
.mat-griglia {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;   /* i buchi lasciati dai riquadri grandi si riempiono da soli */
  gap: var(--s2);
  margin-top: var(--s7);
}
.mat-item { margin: 0; grid-column: span 2; grid-row: span 2; }
/* Gli scatti migliori occupano due o tre moduli: e l'asimmetria della
   griglia, non un ordine casuale. La classe sta nel markup, foto per foto. */
.mat-item.grande { grid-column: span 4; grid-row: span 4; }
.mat-item.alta   { grid-row: span 4; }
.mat-item.larga  { grid-column: span 4; }
.mat-item img {
  width: 100%;
  height: 100%;          /* senza questo, l attributo height del markup vince */
  object-fit: cover;
  display: block;
  background: var(--ink-12);
}
/* Entrata legata allo scroll, in CSS puro: niente JavaScript e niente
   IntersectionObserver. Dove animation-timeline non e supportato le immagini
   restano semplicemente visibili, che e il comportamento giusto. */
@supports (animation-timeline: view()) {
  .mat-item {
    animation: entra-da-sinistra linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 32%;
  }
  .mat-item[data-lato="destra"] { animation-name: entra-da-destra; }
}
@keyframes entra-da-sinistra {
  from { opacity: 0; transform: translateX(-56px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes entra-da-destra {
  from { opacity: 0; transform: translateX(56px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
  .mat-griglia { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 80px; }
  .mat-item { grid-column: span 2; grid-row: span 2; }
  .mat-item.grande { grid-column: span 4; grid-row: span 4; }
  .mat-item.alta { grid-column: span 2; grid-row: span 3; }
  .mat-item.larga { grid-column: span 4; grid-row: span 2; }
}
@media (max-width: 640px) {
  .mat-griglia { grid-auto-rows: 60px; }
}


/* ----- Settori in cui operiamo -----
   Sei riquadri, tre per riga. Il titolo sta sulla fotografia, su un velo
   scuro che tiene il bianco leggibile qualunque sia lo scatto sotto. */
.settori-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s7);
}
.settore-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-12);
}
.settore-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-editorial);
}
.settore-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,31,46,0.15) 0%, rgba(17,31,46,0.5) 100%);
  transition: background 400ms var(--ease-editorial);
}
.settore-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-ivory);
  font-size: var(--fs-md);
  text-align: center;
  padding: 0 var(--s4);
  text-shadow: 0 1px 12px rgba(17,31,46,0.5);
}
.settore-card:hover img { transform: scale(1.08); }
.settore-card:hover::after { background: linear-gradient(180deg, rgba(17,31,46,0.25) 0%, rgba(17,31,46,0.6) 100%); }
@media (max-width: 900px) { .settori-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .settori-griglia { grid-template-columns: 1fr; } }

/* ----- Chi ci commissiona -----
   Al passaggio del cursore la fotografia sale dal basso. */
.comm-griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-top: var(--s7);
}
.comm-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: var(--s6);
  display: flex;
  align-items: flex-end;
  background: var(--white);
  border: 1px solid var(--ink-12);
  transition: border-color 400ms var(--ease-editorial);
}
.comm-sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateY(100%);
  transition: transform 700ms var(--ease-editorial);
}
.comm-sfondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm-sfondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,31,46,0.25) 0%, rgba(17,31,46,0.82) 100%);
}
.comm-card:hover .comm-sfondo,
.comm-card:focus-within .comm-sfondo { transform: translateY(0); }
.comm-card:hover { border-color: transparent; }
.comm-testo { position: relative; z-index: 1; }
.comm-testo h3 { margin-bottom: var(--s3); transition: color 500ms var(--ease-editorial); }
.comm-testo p { color: var(--ink-70); transition: color 500ms var(--ease-editorial); max-width: none; }
.comm-card:hover .comm-testo h3,
.comm-card:focus-within .comm-testo h3 { color: var(--white); }
.comm-card:hover .comm-testo p,
.comm-card:focus-within .comm-testo p { color: var(--on-dark-70); }
@media (max-width: 1100px) { .comm-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .comm-griglia { grid-template-columns: 1fr; } .comm-card { min-height: 260px; } }
@media (prefers-reduced-motion: reduce) {
  .comm-sfondo { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mat-item, .cta-final .cta-form { animation: none; opacity: 1; transform: none; }
}

/* ----- CTA finale: invito a sinistra, modulo che entra da destra ----- */
.cta-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s9);
  align-items: start;
}
.cta-invito h2 { color: var(--white); }
.cta-invito .lead { color: var(--on-dark-70); }
.cta-contatti { margin-top: var(--s6); font-size: var(--fs-md); line-height: 1.8; }
.cta-contatti a { color: var(--white); border-bottom: 1px solid var(--on-dark-12); }
.cta-contatti a:hover { border-bottom-color: var(--white); }
/* Il modulo entra da destra, stessa meccanica. */
@supports (animation-timeline: view()) {
  .cta-final .cta-form {
    animation: entra-da-destra linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 38%;
  }
}
@media (max-width: 900px) {
  .cta-split { grid-template-columns: 1fr; gap: var(--s7); }
  .cta-final .cta-form { animation: none; }
}


/* ================================================================
   CHI SIAMO
   ================================================================ */

/* ----- Hero: il logo, il titolo, una riga -----
   Dietro, un collage di scatti d officina sparsi ai bordi. Entrano per primi
   (sfocati -> a fuoco), poi arrivano i testi: stessa regola delle sezioni di
   gres, qui a tempo perche in cima alla pagina non c e scroll da leggere. */
.chi-hero {
  position: relative;
  padding: 190px var(--pad-gutter) var(--s8);
  min-height: 640px;
  display: flex;
  align-items: center;
  background: var(--paper);
  text-align: center;
  overflow: hidden;
}
.chi-hero .container { position: relative; z-index: 2; width: 100%; }
.chi-sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.chi-sfondo img {
  position: absolute;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--ink-12);
  box-shadow: 0 24px 50px -28px rgba(9, 13, 19, 0.45);
  /* Solo l entrata: dopo, le fotografie restano ferme. */
  animation: chi-sfondo-entra 1100ms var(--ease-editorial) both;
  animation-delay: var(--d, 0ms);
}
.chi-sfondo img:nth-child(1) { left: 1%;   top: 26%;    width: 21%; --d: 0ms;   }
.chi-sfondo img:nth-child(2) { left: 12%;  bottom: 7%;  width: 17%; --d: 90ms;  }
.chi-sfondo img:nth-child(3) { right: 1%;  top: 30%;    width: 20%; --d: 180ms; }
.chi-sfondo img:nth-child(4) { right: 11%; bottom: 5%;  width: 16%; --d: 270ms; }
.chi-sfondo img:nth-child(5) { left: 24%;  top: 23%;    width: 12%; --d: 360ms; }
.chi-sfondo img:nth-child(6) { right: 23%; top: 21%;    width: 12%; --d: 450ms; }
@keyframes chi-sfondo-entra {
  from { opacity: 0; filter: blur(14px); transform: translateY(40px) scale(0.94); }
  to   { opacity: 0.78; filter: none; transform: none; }
}
/* il velo tiene leggibili titolo e payoff sopra le fotografie */
.chi-sfondo-velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 46% at 50% 55%, var(--paper) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, var(--paper) 0%, rgba(0, 0, 0, 0) 14% 92%, var(--paper) 100%);
}
@media (max-width: 900px) { .chi-sfondo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .chi-sfondo img { animation: none; opacity: 0.78; }
}
.chi-logo {
  display: block;
  /* il file sorgente e 122px: oltre questa misura sgrana.
     ponytail: si sostituisce con il vettoriale appena il cliente lo manda */
  height: 96px;
  width: auto;
  margin: 0 auto var(--s6);
}
.chi-hero h1 { max-width: none; }
.chi-hero-payoff {
  margin: var(--s4) auto 0;
  font-size: var(--fs-md);
  color: var(--ink-70);
  max-width: 42ch;
}

/* ----- I blocchi di testo entrano da destra -----
   Stesso meccanismo dei materiali in home: animation-timeline in CSS puro.
   Dove non e supportato il testo e semplicemente visibile. */
.chi-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: var(--s8);
  align-items: start;
}
.chi-foto { margin: 0; position: sticky; top: 120px; }
.chi-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--ink-12);
}
@media (max-width: 900px) {
  .chi-split { grid-template-columns: 1fr; gap: var(--s7); }
  .chi-foto { position: static; }
}
.chi-testo { max-width: 62ch; }
.chi-testo > * + * { margin-top: var(--s6); }
@supports (animation-timeline: view()) {
  [data-entra] {
    animation: entra-da-destra linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
}
.chi-missione {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--ink);
  border-left: 3px solid var(--blue);
  padding-left: var(--s5);
}
/* Sul fondo notte la missione e la riga piu importante della sezione: resta
   bianca piena, non al 70% come il resto. Il bordo 280 C su --deep avrebbe
   1,4:1 di contrasto — spariva — quindi diventa una lama chiara. */
.bg-deep .chi-missione,
.bg-ink .chi-missione {
  color: var(--white);
  border-left-color: var(--on-dark-50);
}

@keyframes entra-dal-basso {
  from { opacity: 0; transform: translateY(72px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ----- Certificazioni: border glow -----
   Portato da React Bits (BorderGlow) al CSS del sito, senza React. Il JS
   passa due sole variabili: --cursor-angle, la direzione in cui sta il
   cursore rispetto al centro della scheda, e --edge-proximity 0-100, quanto
   e vicino al bordo. Una maschera conica accende il solo arco rivolto verso
   il cursore; l alone esterno e una pila di box-shadow. */
.cert-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
  margin-top: var(--s7);
}
.cert-card {
  --cursor-angle: 45deg;
  --edge-proximity: 0;
  --edge-sensitivity: 26;
  --glow: 42deg 76% 82%;      /* sabbia calda: si stacca dal blu 280 C */
  --glow-padding: 34px;

  position: relative;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  transform: translate3d(0, 0, 0.01px);
}
.cert-inner {
  position: relative;
  z-index: 1;
  padding: var(--s7) var(--s6);
}
/* il filo luminoso sul bordo */
.cert-card::before,
.cert-card > .edge-light {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 250ms ease-out;
}
.cert-card::before {
  inset: 0;
  z-index: 0;
  border: 1px solid transparent;
  background: linear-gradient(hsl(var(--glow)) 0 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: calc(var(--edge-proximity) / 100);
}
/* l alone, dentro e fuori il bordo */
.cert-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 2;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center,
    #000 2.5%, transparent 12%, transparent 88%, #000 97.5%);
          mask-image: conic-gradient(from var(--cursor-angle) at center,
    #000 2.5%, transparent 12%, transparent 88%, #000 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.cert-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow) / 1),
    inset 0 0 3px 0 hsl(var(--glow) / 0.5),
    inset 0 0 15px 0 hsl(var(--glow) / 0.3),
    inset 0 0 40px 2px hsl(var(--glow) / 0.14),
    0 0 3px 0 hsl(var(--glow) / 0.5),
    0 0 15px 0 hsl(var(--glow) / 0.3),
    0 0 40px 2px hsl(var(--glow) / 0.16);
}
/* Testo: sul blu 280 C il grigio non si legge. Tutto sale di contrasto. */
.cert-card .micro { display: block; margin-bottom: var(--s4); color: hsl(var(--glow) / 0.9); }
.cert-card h3 { color: var(--white); margin-bottom: var(--s5); }
.cert-card p { color: var(--on-dark); }
.cert-card .figure { color: var(--white); font-weight: var(--fw-bold); }
.cert-card p + p { margin-top: var(--s4); }
#certificazioni .lead { color: var(--on-dark-70); }
/* Il logo e blu su trasparente: sul fondo scuro si appiattisce in bianco,
   come nel footer. ponytail: sparisce quando arriva la versione monocromatica. */
.cert-logo {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: var(--s5);
  filter: brightness(0) invert(1);
}
@media (max-width: 900px) { .cert-griglia { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cert-card > .edge-light { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-entra] { animation: none; opacity: 1; transform: none; }
}

/* ================================================================
   GLASS — pagina delle collezioni
   ================================================================ */

/* ----- Hero: la fotografia si muove piano, i testi salgono in sequenza ----- */
.glass-hero {
  position: relative;
  min-height: calc(88 * var(--vh));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 200px var(--pad-gutter) var(--s8);
  background: var(--ink);
  color: var(--color-ivory);
}
.glass-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.glass-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 60% 45%;
  animation: deriva-foto 26s ease-in-out infinite alternate;
}
@keyframes deriva-foto {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2.2%, -1.4%, 0); }
}
.glass-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(17,31,46,0.5) 0%, rgba(17,31,46,0.12) 34%, rgba(17,31,46,0.9) 100%),
    /* velo diagonale: tiene leggibile il titolo a sinistra */
    linear-gradient(100deg, rgba(17,31,46,0.62) 0%, rgba(17,31,46,0.3) 46%, rgba(17,31,46,0) 74%);
}
.glass-hero .container { position: relative; z-index: 2; }
.glass-logo {
  position: absolute;
  top: 150px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  height: 116px;
  width: auto;
  /* il logo e blu su trasparente: sulla fotografia scura va in bianco */
  filter: brightness(0) invert(1);
}
.glass-hero .micro { display: block; margin-bottom: var(--s4); color: var(--on-dark-70); }
.glass-hero h1 { color: var(--color-ivory); max-width: 16ch; }
.glass-hero .lead { color: var(--on-dark-70); max-width: 46ch; margin-top: var(--s5); }

/* I testi compaiono uno dopo l altro: --i e l ordine, nel markup. */
.appare {
  animation: appare-su 900ms var(--ease-editorial) both;
  animation-delay: calc(var(--i, 0) * 140ms + 180ms);
}
@keyframes appare-su {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ----- Accordion gallery -----
   Portata da React Bits (AccordionGallery) al CSS del sito, senza React ne
   GSAP: i pannelli sono una riga flex, l attivo cresce con flex-grow e gli
   altri si inclinano di qualche grado. La fotografia dentro il pannello e
   piu larga del pannello stesso, cosi restringendosi non si schiaccia. */
.ag {
  --ag-tilt: 8deg;
  display: flex;
  gap: 10px;
  height: 520px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  margin-top: var(--s7);
}
.ag-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  display: block;
  background: var(--ink);
  transform-style: preserve-3d;
  transform-origin: center center;
  box-shadow: 0 10px 30px -18px rgba(9, 13, 19, 0.8);
  transition: flex-grow 900ms var(--ease-editorial), transform 900ms var(--ease-editorial);
}
.ag-panel.prima { transform: rotateY(var(--ag-tilt)); }
.ag-panel.dopo  { transform: rotateY(calc(var(--ag-tilt) * -1)); }
.ag-panel.on    { transform: none; }   /* la crescita la imposta il JS */
.ag-media {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--ag-media, 820px);
  height: 100%;
  transform: translate(-50%, -50%) translateX(var(--ag-shift, 0px));
  filter: grayscale(1);
  transition: transform 900ms var(--ease-editorial), filter 900ms var(--ease-editorial);
}
.ag-panel.on .ag-media { filter: grayscale(0); --ag-shift: 0px; }
.ag-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(17, 31, 46, 0.8) 100%),
    rgba(17, 31, 46, 0.42);
  transition: background 900ms var(--ease-editorial);
}
.ag-panel.on .ag-velo {
  background: linear-gradient(180deg, transparent 45%, rgba(17, 31, 46, 0.82) 100%);
}
.ag-eti {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
}
.ag-filo {
  flex: 0 0 auto;
  width: 3px; height: 26px;
  border-radius: 3px;
  background: var(--white);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 900ms var(--ease-editorial), transform 900ms var(--ease-editorial);
}
.ag-testo {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, calc(1.4 * var(--vw)), 1.4rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 900ms var(--ease-editorial) 60ms, transform 900ms var(--ease-editorial) 60ms;
  text-shadow: 0 2px 14px rgba(9, 13, 19, 0.55);
}
.ag-panel.on .ag-filo,
.ag-panel.on .ag-testo { opacity: 1; transform: none; }
.ag-num {
  position: absolute;
  top: 20px; left: 22px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  color: var(--on-dark-70);
}
@media (max-width: 900px) {
  .ag { flex-direction: column; height: auto; perspective: none; }
  .ag-panel { min-height: 96px; transform: none !important; flex: 0 0 auto; }
  .ag-panel.on { min-height: 300px; }
  .ag-media { width: 100%; height: 100%; --ag-shift: 0px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-hero-media img { animation: none; }
  .appare { animation: none; }
}

/* ----- Come si apre: due schede con il border glow ----- */
.aperture-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
  margin-top: var(--s7);
}
@media (max-width: 900px) { .aperture-griglia { grid-template-columns: 1fr; } }

/* ----- Shared element gallery -----
   Ripresa da 21st.dev (@jahed/shared-element-gallery): mosaico che rispetta
   le proporzioni originali; al clic la fotografia si apre a schermo intero
   partendo dalla posizione della miniatura (tecnica FLIP), su un fondo
   sfocato, e si chiude trascinandola in verticale. */
.sg {
  columns: 4;
  column-gap: var(--s3);
  margin-top: var(--s7);
}
@media (max-width: 1100px) { .sg { columns: 3; } }
@media (max-width: 800px) { .sg { columns: 2; } }
@media (max-width: 520px) { .sg { columns: 1; } }
.sg-item {
  break-inside: avoid;
  margin: 0 0 var(--s3);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ink-12);
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  line-height: 0;
}
.sg-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 700ms var(--ease-editorial), opacity 200ms linear;
}
.sg-item:hover img { transform: scale(1.03); }
.sg-item.in-volo img { opacity: 0; }

.sg-scena {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  touch-action: none;
}
.sg-fondo {
  position: absolute;
  inset: 0;
  background: rgba(17, 31, 46, 0.82);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity 320ms var(--ease-editorial);
}
.sg-scena.aperta .sg-fondo { opacity: 1; }
.sg-volo {
  position: fixed;
  margin: 0;
  will-change: transform;
  transform-origin: top left;
}
.sg-volo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 12px; }
.sg-chiudi,
.sg-passo {
  position: absolute;
  z-index: 2;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--on-dark-25, rgba(255,255,255,0.28));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transition: opacity 320ms var(--ease-editorial), background 240ms var(--ease-editorial);
}
.sg-scena.aperta .sg-chiudi,
.sg-scena.aperta .sg-passo { opacity: 1; }
.sg-chiudi:hover, .sg-passo:hover { background: rgba(255, 255, 255, 0.18); }
.sg-chiudi { top: 24px; right: 24px; }
.sg-passo.prec { left: 24px; top: 50%; margin-top: -23px; }
.sg-passo.succ { right: 24px; top: 50%; margin-top: -23px; }
.sg-conta {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12px;
  letter-spacing: var(--tracking-micro);
  color: var(--on-dark-70);
  opacity: 0;
  transition: opacity 320ms var(--ease-editorial);
}
.sg-scena.aperta .sg-conta { opacity: 1; }
@media (max-width: 640px) { .sg-passo { display: none; } }

/* ----- Le altre collezioni: le card ora hanno la fotografia ----- */
.other-coll img { filter: grayscale(0.35); transition: transform 700ms var(--ease-editorial), filter 500ms var(--ease-editorial); }
.other-coll:hover img { filter: grayscale(0); }

/* ----- Intestazione delle pagine collezione ----- */
.coll-intro {
  padding: 190px var(--pad-gutter) var(--s7);
  background: var(--paper);
}
.coll-intro .micro { display: block; margin-bottom: var(--s4); color: var(--ink-50); }
.coll-intro h1 { margin-bottom: var(--s5); }
.coll-intro .lead { color: var(--ink-70); max-width: 60ch; }

/* ================================================================
   GRES
   ================================================================ */

/* ----- Galleria d apertura -----
   Portata da 21st.dev (animated-gallery) senza React ne motion: al posto di
   useScroll ci sono le scroll-driven animation del CSS. Il piano parte
   coricato a 75 gradi e si rialza mentre la sezione attraversa lo schermo;
   poi rientra di scala, e le tre colonne scorrono a velocita diverse.
   Dove le scroll-driven animation non ci sono, la griglia resta piatta e
   ferma: si vede comunque tutto. */
.gres-apertura { position: relative; background: var(--paper); overflow: clip; }
.gres-intro {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 190px var(--pad-gutter) 0;
  margin-bottom: -calc(6 * var(--vh));
}
.gres-logo { display: block; height: 58px; width: auto; margin: 0 auto var(--s6); }
.gres-intro h1 { max-width: 18ch; margin: 0 auto; }
.gres-intro .lead { max-width: 56ch; margin: var(--s5) auto 0; color: var(--ink-70); }

.gres-scroll {
  position: relative;
  height: calc(170 * var(--vh));
}
/* La prospettiva sta su un livello solo: annidarla su tre, con preserve-3d
   a ogni passo, obbliga il browser a comporre ognuno in un contesto 3D
   separato e blocca il thread principale. Qui il piano e planare, basta la
   prospettiva del contenitore. */
.gres-sticky {
  position: sticky;
  top: 0;
  height: calc(100 * var(--vh));
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: center 30%;
  display: grid;
  place-items: center;
  padding: 0 var(--pad-gutter);
}
.gres-piano {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  /* stretta e centrata: le fotografie si leggono meglio e l inclinazione
     del piano si vede tutta invece di uscire dai bordi */
  max-width: 900px;
  /* l altezza e vincolata al riquadro fisso: le fotografie si dividono lo
     spazio, altrimenti la colonna sborda e il piano esce dallo schermo */
  height: calc(82 * var(--vh));
  transform: rotateX(0deg) scale(1);
}
.gres-col { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.gres-col:nth-child(2) { margin-top: -14%; }
.gres-col img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  background: var(--ink-12);
}
/* Il progresso lo calcola il JS (initGresGalleria): una view-timeline CSS
   resta inattiva quando il soggetto e piu alto del viewport, che e proprio
   il caso di questo contenitore da calc(170 * var(--vh)). */

@media (max-width: 900px) {
  .gres-scroll { height: calc(140 * var(--vh)); }
  .gres-piano { grid-template-columns: repeat(2, 1fr); }
  .gres-col:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gres-piano, .gres-col { animation: none !important; transform: none !important; }
  .gres-scroll { height: auto; }
  .gres-sticky { position: static; height: auto; padding-bottom: var(--s8); }
}

/* ----- Sezioni di prodotto -----
   Il testo sta a sinistra e resta fermo mentre le fotografie scorrono; le
   sue righe compaiono una dopo l altra. */
.gp-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}
.gp-testo { position: sticky; top: 140px; }
.gp-testo .micro { display: block; margin-bottom: var(--s4); color: var(--ink-50); }
.gp-testo h2 { margin-bottom: var(--s6); }
.gp-riga { margin-bottom: var(--s5); color: var(--ink-70); max-width: 46ch; }
.gp-riga.forte { color: var(--ink); font-size: var(--fs-md); }
.gp-elenco { list-style: none; padding: 0; margin: 0; }
.gp-elenco li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s3);
  color: var(--ink-70);
}
.gp-elenco li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--ink-50);
}
/* le righe entrano una alla volta, sfalsate lungo lo scroll — ma partono
   dopo che le fotografie hanno finito di mettersi a fuoco */
@supports (animation-timeline: view()) {
  [data-riga] {
    animation: gp-riga-entra linear both;
    animation-timeline: view();
    animation-range: entry 50% entry 88%;
  }
  [data-riga]:nth-of-type(2) { animation-range: entry 58% entry 92%; }
  [data-riga]:nth-of-type(3) { animation-range: entry 66% entry 96%; }
  [data-riga]:nth-of-type(4) { animation-range: entry 74% entry 100%; }
}
@keyframes gp-riga-entra {
  from { opacity: 0; transform: translateX(38px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* le fotografie: mosaico sfalsato ripreso da cta-section-with-gallery
   (21st.dev). Due colonne, cinque fasce d altezza diversa, e quattro celle
   che si incastrano scavallando le fasce: nessuna e allineata all altra.
   Le celle compaiono una dopo l altra mentre la sezione entra in vista. */
.gp-carte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 64px 200px 64px 200px 64px;
  gap: var(--s4);
}
.gp-carta:nth-child(1) { grid-column: 2 / 3; grid-row: 1 / 3; }
.gp-carta:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 4; }
.gp-carta:nth-child(3) { grid-column: 1 / 2; grid-row: 4 / 6; }
.gp-carta:nth-child(4) { grid-column: 2 / 3; grid-row: 3 / 5; }
/* Tavoli e Navale hanno tre scatti in cartella: le celle si ridistribuiscono
   su quattro fasce invece di cinque, cosi restano sfalsate senza buchi. */
.gp-carte.tre { grid-template-rows: 64px 200px 64px 200px; }
.gp-carte.tre .gp-carta:nth-child(1) { grid-column: 2 / 3; grid-row: 1 / 3; }
.gp-carte.tre .gp-carta:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 4; }
.gp-carte.tre .gp-carta:nth-child(3) { grid-column: 2 / 3; grid-row: 3 / 5; }
@supports (animation-timeline: view()) {
  .gp-carta {
    animation: gp-cella-appare linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
  .gp-carta:nth-child(2) { animation-range: entry 3% entry 44%; }
  .gp-carta:nth-child(3) { animation-range: entry 6% entry 50%; }
  .gp-carta:nth-child(4) { animation-range: entry 9% entry 56%; }
}
@keyframes gp-cella-appare {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
.gp-carta {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  cursor: zoom-in;
  height: 100%;
  border-radius: 14px;
  background: var(--ink-12);
  box-shadow: 0 18px 40px -30px rgba(9, 13, 19, 0.5);
  transition: transform 520ms var(--ease-editorial), box-shadow 520ms var(--ease-editorial);
}
.gp-carta img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.97);
  transition: transform 900ms var(--ease-editorial), filter 520ms var(--ease-editorial);
}
.gp-carta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 31, 46, 0.14);
  transition: background 520ms var(--ease-editorial);
}
.gp-carte:hover .gp-carta { opacity: 0.72; }
.gp-carta:hover {
  opacity: 1 !important;
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 26px 60px -28px rgba(9, 13, 19, 0.55);
}
.gp-carta:hover img { transform: scale(1.06); filter: none; }
.gp-carta:hover::after { background: rgba(17, 31, 46, 0); }
.gp-carta .didascalia {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--s5) var(--s4) var(--s4);
  font-size: var(--fs-sm);
  color: var(--white);
  background: linear-gradient(180deg, transparent, rgba(17, 31, 46, 0.78));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-editorial), transform 420ms var(--ease-editorial);
}
.gp-carta:hover .didascalia { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .gp-split { grid-template-columns: 1fr; gap: var(--s6); }
  .gp-testo { position: static; }
}

/* ----- La fotografia ingrandita al centro ----- */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--vh)) calc(5 * var(--vw));
  background: rgba(9, 13, 19, 0.9);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.zoom.on { display: flex; animation: zoom-entra 260ms var(--ease-editorial) both; }
@keyframes zoom-entra { from { opacity: 0; } to { opacity: 1; } }
.zoom figure { margin: 0; text-align: center; max-width: 100%; }
.zoom img {
  max-width: 100%;
  max-height: calc(82 * var(--vh));
  width: auto; height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  animation: zoom-sale 320ms var(--ease-editorial) both;
}
@keyframes zoom-sale {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.zoom figcaption {
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
}
.zoom-close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  font-size: 28px; line-height: 1;
  color: var(--color-ivory);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
}
.zoom-close:hover { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 900px) { .gp-carte { grid-template-rows: 52px 160px 52px 160px 52px; } }
@media (max-width: 560px) {
  .gp-carte { grid-template-columns: 1fr; grid-template-rows: none; }
  .gp-carta { grid-column: 1 / 2 !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
}

/* ================================================================
   CONTATTI
   ================================================================ */

/* ----- Apertura: logo, titolo, una riga ----- */
.ct-hero { padding: 180px var(--pad-gutter) var(--s7); background: var(--paper); }
/* titolo a sinistra, riquadro della mappa in alto a destra */
.ct-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s8);
  align-items: start;
}
@media (max-width: 900px) {
  .ct-hero-split { grid-template-columns: 1fr; gap: var(--s6); }
}
.ct-logo {
  display: block;
  height: 62px;
  width: auto;
  margin-bottom: var(--s6);
}
.ct-hero h1 { max-width: 20ch; }
.ct-hero .lead { max-width: 52ch; margin-top: var(--s5); color: var(--ink-70); }

/* ----- Informazioni a sinistra, modulo a destra -----
   Impianto del contact-01 di shadcn (griglia 6 / 1 / 5), rivestito con i
   colori del sito: navy sul testo, carta sul fondo, blu 280 C sull accento. */
.ct-split {
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
  align-items: start;
}
.ct-split > .ct-vuoto { display: block; }
.ct-info :is(h1, h2) { margin-bottom: var(--s5); max-width: 16ch; }
.ct-info .lead { color: var(--ink-70); max-width: 46ch; margin-bottom: var(--s7); }

.ct-voci { display: grid; gap: var(--s4); max-width: 34rem; }
.ct-voce {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--ink-12);
  border-radius: 0;
  background: var(--white);
  color: inherit;
  transition: border-color 320ms var(--ease-editorial), transform 320ms var(--ease-editorial), box-shadow 320ms var(--ease-editorial);
}
a.ct-voce:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(9, 13, 19, 0.5);
}
.ct-icona {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--paper);
  color: var(--blue);
}
.ct-icona svg { width: 19px; height: 19px; }
.ct-voce .etichetta {
  display: block;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 4px;
}
.ct-voce .valore { display: block; color: var(--ink); font-weight: var(--fw-med); }
.ct-voce .valore small { display: block; font-weight: 400; color: var(--ink-70); margin-top: 2px; }
.ct-orari {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--ink-12);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  max-width: 34rem;
}

/* la scheda del modulo */
.ct-scheda {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-12);
  border-radius: 0;
  /* un velo di 280 C che si spegne subito: da colore alla scheda senza
     rubare leggibilita ai campi */
  background:
    linear-gradient(180deg, rgba(29, 50, 119, 0.05) 0%, rgba(29, 50, 119, 0) 220px),
    var(--white);
  padding: var(--s7) var(--s6) var(--s6);
  box-shadow: 0 1px 2px rgba(29, 50, 119, 0.06), 0 18px 40px -34px rgba(29, 50, 119, 0.35);
}
/* la fotografia del macchinario, sfocata, dietro ai campi */
.ct-scheda::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/officina/chi-macchinario-1280.webp") center / cover no-repeat;
  filter: blur(13px) saturate(0.7);
  opacity: 0.32;
  transform: scale(1.14);
  pointer-events: none;
}
.ct-scheda > * { position: relative; z-index: 1; }
/* il filo in cima: e il segno di colore piu netto della pagina */
.ct-scheda::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: 3px;
  background: var(--blue);
}
.ct-scheda h3 { color: var(--blue); }
.ct-scheda h3 { font-size: var(--fs-md); margin-bottom: var(--s2); color: var(--blue); }
.ct-scheda .sotto { color: var(--ink-70); font-size: var(--fs-sm); margin-bottom: var(--s6); }
/* i campi qui sono riquadri, non righe: e la forma del componente originale */
.ct-scheda .form-field input,
.ct-scheda .form-field textarea,
.ct-scheda .form-field select {
  border: 1px solid var(--ink-12);
  border-radius: 0;
  padding: 11px 12px;
  background: var(--paper);
  transition: border-color 280ms var(--ease-editorial), background 280ms var(--ease-editorial);
}
.ct-scheda .form-field label { color: var(--blue); }
.ct-scheda .form-field input:focus,
.ct-scheda .form-field textarea:focus,
.ct-scheda .form-field select:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(29, 50, 119, 0.12);
}
.ct-scheda .form-field { margin-bottom: var(--s5); }
.ct-scheda .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ct-scheda .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--s2);
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.ct-scheda .btn:hover { background: #17275e; border-color: #17275e; }
.ct-consenso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-70);
  margin-bottom: var(--s4);
  cursor: pointer;
}
.ct-consenso input {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .ct-split { grid-template-columns: 1fr; gap: var(--s8); }
  .ct-split > .ct-vuoto { display: none; }
}
@media (max-width: 560px) { .ct-scheda .form-row { grid-template-columns: 1fr; } }

/* ================================================================
   PRODOTTI — la pagina che raccoglie porte, gres e sistemi
   + i due blocchi nuovi della home (catalogo, striscia collezioni)
   ================================================================ */

/* ----- Catalogo: il riquadro al centro dello schermo -----
   E un <dialog>: centratura, velo, chiusura con Esc, focus intrappolato e
   pagina bloccata sotto li fa il browser. Qui c e solo il vestito. */
.cat-modal {
  border: none;
  padding: 0;
  margin: auto;          /* il reset globale azzera il margin del dialog, e senza auto non si centra */
  background: var(--paper);
  color: var(--ink);
  width: min(520px, calc(100 * var(--vw) - 2 * var(--pad-gutter)));
  max-height: calc(100 * var(--vh) - 2 * var(--pad-gutter));
  box-shadow: 0 40px 90px -40px rgba(9, 13, 19, 0.55);
  /* niente position qui: il browser mette da solo un dialog modale al centro
     della finestra, e quel position e anche il riferimento della crocetta */
  overflow: auto;
}
.cat-modal::backdrop {
  background: rgba(17, 31, 46, 0.62);
  backdrop-filter: blur(3px);
}
.cat-modal[open] { animation: cat-modal-entra 340ms var(--ease-editorial); }
.cat-modal[open]::backdrop { animation: cat-velo-entra 340ms var(--ease-editorial); }
@keyframes cat-modal-entra { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes cat-velo-entra  { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cat-modal[open], .cat-modal[open]::backdrop { animation: none; }
}
.cat-modal-x {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-50);
  cursor: pointer;
  padding: 6px 10px;
  transition: color 300ms var(--ease-editorial);
}
.cat-modal-x:hover { color: var(--ink); }
.cat-modal-corpo,
.cat-modal-ok { padding: clamp(28px, calc(3.4 * var(--vw)), 44px); text-align: center; }
/* il logo e il file a 610px: oltre non sgrana, qui sta molto sotto */
.cat-modal-logo {
  display: block;
  height: 52px;
  width: auto;
  margin: 0 auto var(--s4);
}
.cat-modal-lead {
  margin: var(--s4) auto var(--s6);
  max-width: 38ch;
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
/* i campi sono allineati a sinistra anche se il blocco e centrato: un campo
   con l etichetta centrata non si capisce dove inizia */
.cat-modal .form-field { text-align: left; }
.cat-modal .btn { width: 100%; margin-top: var(--s4); }
/* L avviso sulla email: lo accende :user-invalid, cioe il browser, e solo
   dopo che l utente ha finito di scrivere — non mentre digita. Lo spazio e
   sempre riservato, cosi il riquadro non salta quando l avviso appare. */
.form-errore {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #B23A2E;
  opacity: 0;
  transition: opacity 260ms var(--ease-editorial);
}
.form-field input:user-invalid { border-bottom-color: #B23A2E; }
.form-field input:user-invalid ~ .form-errore { opacity: 1; }
.cat-modal-ok .micro { display: inline-block; margin-bottom: 14px; color: var(--ink-50); }
.cat-modal-ok h2 { margin-bottom: var(--s4); }
.cat-modal-ok p {
  color: var(--ink-70);
  max-width: 40ch;
  margin: 0 auto var(--s6);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* ----- Striscia orizzontale delle collezioni -----
   Lo scorrimento e nativo: overflow-x + scroll-snap. Nessuno slider scritto
   a mano, nessun listener, e la rotella orizzontale del trackpad funziona
   subito. Sotto, la barra di scorrimento resta visibile: e la sola cosa che
   dice che ci sono altre schede a destra. */
.striscia {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* i margini negativi portano la striscia fino ai bordi dello schermo,
     il padding rimette il contenuto in colonna: cosi la sesta scheda si
     intravede tagliata dal bordo, non dal container */
  margin: 0 calc(var(--pad-gutter) * -1);
  padding: 0 var(--pad-gutter) 28px;
  scrollbar-width: thin;
}
.striscia-carta {
  flex: 0 0 clamp(260px, calc(26 * var(--vw)), 380px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.striscia-foto {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ink-12);
  margin-bottom: 20px;
}
.striscia-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease-editorial);
}
.striscia-carta:hover .striscia-foto img { transform: scale(1.05); }
.striscia-num {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  color: var(--ink-70);
  margin-bottom: 8px;
}
.striscia-nome {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}
.striscia-modelli {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-70);
  line-height: 1.5;
}

/* Link di riga, senza freccia: la sottolineatura si estende al passaggio. */
.link-freccia {
  align-self: end;
  justify-self: end;
  position: relative;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
}
.link-freccia::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-editorial);
}
.link-freccia:hover::after { transform: scaleX(1); }
.bg-ink .link-freccia { color: var(--on-dark); }
@media (max-width: 900px) {
  .link-freccia { justify-self: start; align-self: start; }
}

/* ----- I due prodotti, uno accanto all altro ----- */
.twoworlds.pari { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .twoworlds.pari { grid-template-columns: 1fr; } }

/* ----- Le collezioni, una riga per collezione -----
   Fotografia e testo si scambiano di lato a ogni riga. La riga e una griglia
   di due colonne: per invertire basta spostare la figura in coda. */
.riga-coll {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, calc(5 * var(--vw)), 88px);
  align-items: center;
  padding: clamp(48px, calc(6 * var(--vw)), 104px) 0;
  border-top: 1px solid var(--ink-12);
}
.riga-coll:nth-child(even) .riga-coll-foto { order: 2; }
.riga-coll-foto {
  margin: 0;
  overflow: hidden;
  background: var(--ink-12);
}
.riga-coll-foto img {
  width: 100%;
  /* height: auto e obbligatorio: gli attributi width/height dell img valgono
     come stile, e senza questo il browser userebbe l altezza del file invece
     dell aspect-ratio */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 1100ms var(--ease-editorial);
}
.riga-coll:hover .riga-coll-foto img { transform: scale(1.03); }
.riga-coll-num {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  color: var(--ink-50);
  margin-bottom: 14px;
}
.riga-coll h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, calc(4 * var(--vw)), 3.25rem);
  line-height: 1.02;
  margin-bottom: 22px;
}
.riga-coll p { color: var(--ink-70); max-width: 46ch; }
/* il bottone sta staccato dalla descrizione: prima lo distanziavano i
   riquadri dei modelli, tolti su richiesta del cliente */
.riga-coll-testo .btn { margin-top: 40px; }
@media (max-width: 900px) {
  .riga-coll { grid-template-columns: 1fr; gap: 28px; }
  .riga-coll:nth-child(even) .riga-coll-foto { order: 0; }
}

/* ----- Systems: Easy e Frame -----
   Le misure sono quelle del catalogo. Sono una lista di coppie
   soluzione/misura: una tabella vera qui non aggiunge niente, e su telefono
   andrebbe in overflow. */
.sistemi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, calc(3 * var(--vw)), 48px);
}
.sistema-foto {
  margin: 0 0 28px;
  overflow: hidden;
  background: var(--on-dark-12);
}
.sistema-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.sistema h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, calc(3 * var(--vw)), 2.5rem);
  line-height: 1;
  margin-bottom: 10px;
}
.sistema-sub {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--on-dark-50);
  margin-bottom: 32px;
}
.misure { list-style: none; margin: 0; padding: 0; }
.misure li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--on-dark-12);
  font-size: var(--fs-sm);
  color: var(--on-dark-70);
}
.misure b {
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
  white-space: nowrap;
}
.misure-nota {
  margin-top: 20px;
  font-size: var(--fs-xs);
  color: var(--on-dark-50);
}
@media (max-width: 900px) {
  .sistemi { grid-template-columns: 1fr; gap: 64px; }
}

/* ================================================================
   PAGINE COLLEZIONE — ambienti, decori, finiture
   Impaginate come le pagine del catalogo: prima gli ambienti, poi un
   decoro per volta con la sua scheda, in fondo le finiture.
   ================================================================ */

/* ----- Ambienti -----
   Una fotografia per riga, larga quanto la colonna, con la didascalia
   stampata sotto come nel catalogo. */
.coll-ambienti .container { display: flex; flex-direction: column; gap: clamp(48px, calc(6 * var(--vw)), 96px); }
.ambiente { margin: 0; }
.ambiente img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ink-12);
}
/* gli scatti verticali riempirebbero tre schermate: si ritagliano in 4:3 */
.ambiente-alta img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; }
.ambiente figcaption {
  margin-top: var(--s4);
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-50);
}

/* ----- I decori -----
   Stessa griglia delle righe collezione in Prodotti: fotografia e testo si
   scambiano di lato a ogni blocco, cosi lo scorrimento ha un ritmo. */
.decori { display: flex; flex-direction: column; }
.decoro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, calc(5 * var(--vw)), 88px);
  align-items: center;
  padding: clamp(48px, calc(6 * var(--vw)), 104px) 0;
  position: relative;
}
/* La riga che separa due decori: non un filo grigio ma un tratto di 280 C
   sfocato, che sfuma ai due capi invece di finire di netto. */
.decoro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(29, 50, 119, 0) 0%, rgba(29, 50, 119, 0.9) 16%,
    rgba(29, 50, 119, 0.9) 84%, rgba(29, 50, 119, 0) 100%);
  filter: blur(2.5px);
  pointer-events: none;
}
.decoro:first-child { padding-top: 0; }
.decoro:first-child::before { display: none; }
.decoro:nth-child(even) .decoro-foto { order: 2; }
.decoro-foto { display: flex; flex-direction: column; gap: var(--s3); }
/* dentro il blocco del decoro le foto non hanno il raggio del mosaico: il
   resto del sito e a spigolo vivo */
.decoro .sg-item { border-radius: 0; }
/* Le foto secondarie sono una striscia bassa sotto la principale: con
   l altezza libera uno scatto verticale faceva crescere il blocco di tre
   schermate e il testo restava appeso in mezzo al vuoto. */
.decoro-extra { display: flex; gap: var(--s3); container-type: inline-size; }
/* Foto intere, mai ritagliate: tutte alla stessa altezza, quella che riempie
   la riga (--s = somma dei rapporti larghezza/altezza, --n = quante sono,
   li scrive initDecoroExtra). Tetto all altezza di uno scatto orizzontale a tutta riga, cosi uno scatto verticale da
   solo non diventa piu alto di uno orizzontale: resta centrato. */
.decoro-extra:has(.sg-item:only-child) { justify-content: center; }
.decoro-extra .sg-item { flex: 0 0 auto; width: auto; margin: 0; }
.decoro-extra img {
  width: auto;
  height: min(calc(100cqw / 1.5), calc((100cqw - (var(--n, 1) - 1) * var(--s3)) / var(--s, 1.5)));
}
/* Una sola foto extra e verticale (Rigato): va di fianco alla principale,
   alla stessa altezza. Le larghezze seguono i rapporti delle due foto
   (flex-grow scritto da initDecoroExtra). */
.decoro-foto.affianca { flex-direction: row; align-items: flex-start; }
.decoro-foto.affianca > .sg-item { flex: var(--r) 1 0; min-width: 0; }
.decoro-foto.affianca .decoro-extra { flex: var(--r) 1 0; min-width: 0; container-type: normal; }
.decoro-foto.affianca .decoro-extra .sg-item { width: 100%; }
.decoro-foto.affianca .decoro-extra img { width: 100%; height: auto; }
.decoro-num {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  color: var(--ink-70);
  margin-bottom: 12px;
}
.decoro-gruppo {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.decoro h3 {
  font-size: clamp(1.75rem, calc(3.4 * var(--vw)), 2.75rem);
  line-height: 1.02;
  margin-bottom: 20px;
}
.decoro p { color: var(--ink-70); max-width: 46ch; }
/* la scheda tecnica: piu piccola, staccata da una riga, come la didascalia
   sotto le tavole del catalogo */
.decoro-scheda {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-12);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-50);
}
/* Descrizione in alto, accanto alla foto, mentre il titolo resta centrato
   alla stessa altezza dei decori che hanno solo il titolo (Inserti, River).
   ponytail: il titolo resta al centro finche la descrizione e piu corta di
   meta foto; oltre, scende. */
.decoro-testo.in-alto { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; }
.decoro-testo.in-alto > p { grid-row: 1; align-self: start; }
.decoro-testo.in-alto > .decoro-titolo { grid-row: 2; }
@media (max-width: 900px) {
  .decoro { grid-template-columns: 1fr; gap: 28px; }
  .decoro-testo.in-alto { display: block; }
  .decoro:nth-child(even) .decoro-foto { order: 0; }
}

/* ----- Finiture -----
   Nomi, non campioni: i colori veri stanno su cartelle stampate e inventarli
   in esadecimale sarebbe peggio che non mostrarli. */
.finiture {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  max-width: 90ch;
}
.finiture li {
  border: 1px solid var(--ink-12);
  padding: 8px 14px;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}
.finiture-nota {
  margin-top: var(--s6);
  max-width: 70ch;
  font-size: var(--fs-sm);
  color: var(--ink-50);
}

/* ----- Home: le due famiglie a fasce -----
   Due rettangoli bassi, uno sopra l altro, ciascuno attaccato al proprio
   bordo dello SCHERMO, non del container: il margine negativo
   calc(50% - 50 * var(--vw)) e la formula del full-bleed — il 50% si misura sul
   container, quindi la somma e esattamente l offset che il container ha dal
   bordo della finestra, gutter compreso.
   La griglia a due colonne resta a Prodotti, dove le card sono affiancate. */
#cosa-produciamo { overflow-x: clip; }   /* clip e non hidden: non crea uno scroll container e non spegne le view() */
.twoworlds.a-fasce {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(3 * var(--vw)), 48px);
}
.twoworlds.a-fasce .world-card {
  /* l altezza tiene conto della riga dei modelli che compare al passaggio del
     cursore: piu bassa, il pannello la schiaccerebbe a zero */
  min-height: clamp(260px, calc(35 * var(--vh)), 390px);
  width: min(86%, 1120px);
}
.twoworlds.a-fasce .world-card:first-child {
  align-self: flex-start;
  margin-left: calc(50% - 50 * var(--vw));
}
.twoworlds.a-fasce .world-card:last-child {
  align-self: flex-end;
  margin-right: calc(50% - 50 * var(--vw));
}
/* su un rettangolo basso il titolo da 5rem non ci sta */
.twoworlds.a-fasce .world-content { padding: clamp(24px, calc(3 * var(--vw)), 44px); }
.twoworlds.a-fasce .world-content h3 { font-size: clamp(1.6rem, calc(3.4 * var(--vw)), 2.75rem); }
.twoworlds.a-fasce .world-desc { margin-top: 8px; font-size: var(--fs-sm); max-width: 44ch; }
.twoworlds.a-fasce .world-cta { margin-top: 14px; }
/* niente flex-shrink: in colonna le righe si schiacciavano invece di stare */
.twoworlds.a-fasce .world-content > * { flex: none; }

/* Il testo non sta piu sopra la fotografia: ha il suo pannello pieno, e la
   fotografia occupa il resto della card. Al passaggio del cursore il pannello
   si allarga e si mangia un altro pezzo di foto.
   Il pannello e attaccato al bordo esterno (schermo) di ciascuna card, la
   fotografia guarda verso il centro della pagina. */
@media (min-width: 901px) {
  .twoworlds.a-fasce .world-content {
    width: 44%;
    justify-content: center;
    transition: width 700ms var(--ease-editorial);
  }
  .twoworlds.a-fasce .world-card:hover .world-content,
  .twoworlds.a-fasce .world-card:focus-visible .world-content { width: 62%; }
  /* Richiesta cliente: il taglio fra pannello e fotografia e netto, come il
     bordo di una lastra. Niente sfumatura. */
  .twoworlds.a-fasce .world-card:first-child .world-content {
    right: auto;
    align-items: flex-start;   /* senza, la sottolineatura della CTA si stira su tutto il pannello */
    padding-left: max(var(--pad-gutter), clamp(24px, calc(3 * var(--vw)), 44px));
    background: var(--ink);
  }
  .twoworlds.a-fasce .world-card:last-child .world-content {
    left: auto;
    align-items: flex-end;
    text-align: right;
    padding-right: max(var(--pad-gutter), clamp(24px, calc(3 * var(--vw)), 44px));
    background: var(--ink);
  }
  .twoworlds.a-fasce .world-card:last-child .world-desc { margin-left: auto; }
  /* il testo ha il suo fondo: sulla fotografia serve solo un filo di velo che
     tenga insieme i due scatti */
  .twoworlds.a-fasce .world-card::after {
    background: linear-gradient(180deg, rgba(17, 31, 46, 0) 45%, rgba(17, 31, 46, 0.28) 100%);
  }
}
@media (max-width: 900px) {
  .twoworlds.a-fasce .world-card { width: 100%; align-self: stretch; }
  .twoworlds.a-fasce .world-card:first-child { margin-left: 0; }
  .twoworlds.a-fasce .world-card:last-child { margin-right: 0; }
  /* su telefono la card e stretta: il pannello non ci sta accanto alla foto,
     quindi il testo torna sopra la fotografia con il velo di prima */
  .twoworlds.a-fasce .world-card::after {
    background:
      linear-gradient(90deg, rgba(17, 31, 46, 0.88) 0%, rgba(17, 31, 46, 0.6) 32%, rgba(17, 31, 46, 0) 66%),
      linear-gradient(180deg, rgba(17, 31, 46, 0) 40%, rgba(17, 31, 46, 0.45) 100%);
  }
}

/* ================================================================
   HERO A TUTTO SCHERMO, SENZA TESTO
   Prodotti e le sei pagine collezione: prima la fotografia piena, le
   parole cominciano scorrendo.
   ================================================================ */
.hero-piena {
  position: relative;
  min-height: calc(100 * var(--vh));
  overflow: hidden;
  background: var(--ink);
}
.hero-piena-media { position: absolute; inset: 0; z-index: 0; }
.hero-piena-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Una fascia in cima perche la barra si legga sopra qualsiasi scatto, una in
   fondo sotto il segnale di scorrimento. In mezzo la foto resta scoperta. */
.hero-piena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(17, 31, 46, 0.58) 0%,
    rgba(17, 31, 46, 0.10) 20%,
    rgba(17, 31, 46, 0) 55%,
    rgba(17, 31, 46, 0.34) 100%);
}

/* Variante delle pagine collezione: si apre da uno schermo nero e la
   fotografia si mette a fuoco, come quando si accende un proiettore. */
.hero-piena-nera { background: #000; }
.hero-piena-nera .hero-piena-media img {
  animation: fuoco-da-nero 2000ms var(--ease-editorial) both;
}
@keyframes fuoco-da-nero {
  0%   { opacity: 0; filter: blur(36px) brightness(0.12); transform: scale(1.10); }
  45%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
}
/* anche il velo e il segnale entrano dopo, se no galleggiano sul nero */
.hero-piena-nera::before,
.hero-piena-nera .hero-scroll { animation: velo-entra 2000ms var(--ease-editorial) both; }
@keyframes velo-entra { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-piena-nera .hero-piena-media img,
  .hero-piena-nera::before,
  .hero-piena-nera .hero-scroll { animation: none; }
}

/* Le due card di Prodotti sbucano dal basso appena si comincia a scorrere. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .twoworlds.a-entrata .world-card {
      animation: blocco-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .twoworlds.a-entrata .world-card:last-child { animation-range: entry 8% entry 56%; }
  }
}

/* ==================================================================
   FASE 5 — richieste cliente 11/09
   Componenti nuovi: fasce prodotto a tutto schermo, palette di decoro
   accanto alla foto, fotografie velate, tipologie in sovraimpressione,
   carosello delle collezioni.
   ================================================================== */

/* ------------------------------------------------------------------
   1. FASCE PRODOTTO A TUTTO SCHERMO
   Le due porte d ingresso di prodotti.html. Prima erano due card dentro
   il container, con il gutter bianco intorno; ora ognuna e una fascia
   piena: la fotografia parte attaccata al bordo dello schermo e corre
   fino al testo, e nella fascia sotto il verso si specchia.

   Niente container, niente padding esterno: il bordo dello schermo e il
   bordo della fotografia. Il testo sta nella meta opposta, su fondo di
   brand — e li che si legge, non sopra l immagine. */
.prod-fasce { display: flex; flex-direction: column; }
.prod-fascia {
  display: grid;
  grid-template-columns: 58fr 42fr;
  align-items: stretch;
  min-height: min(76 * var(--vh), 720px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
/* La seconda fascia si specchia: foto a destra, testo a sinistra. L ordine
   visivo si cambia con order, non riscrivendo il markup. */
.prod-fascia.specchiata { grid-template-columns: 42fr 58fr; }
.prod-fascia.specchiata .prod-fascia-foto  { order: 2; }
.prod-fascia.specchiata .prod-fascia-testo { order: 1; }

.prod-fascia-foto { position: relative; overflow: hidden; background: var(--ink-12); }
.prod-fascia-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform 1200ms var(--ease-editorial);
}
.prod-fascia:hover .prod-fascia-foto img { transform: scale(1.07); }

.prod-fascia-testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  padding: clamp(32px, calc(4.5 * var(--vw)), 80px);
}
/* Le due fasce hanno fondo diverso: la prima il blu notte, la seconda il
   bianco panna. Cosi si distinguono anche a colpo d occhio, e i due Pantone
   non si toccano mai perche in mezzo c e la fotografia. */
.prod-fascia.su-scuro  .prod-fascia-testo { background: var(--ink);  color: var(--on-dark); }
.prod-fascia.su-chiaro .prod-fascia-testo { background: var(--paper); color: var(--ink); }
.prod-fascia.su-scuro  .prod-fascia-testo :is(h1, h2) { color: var(--white); }

.prod-fascia-num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  opacity: 0.55;
}
/* Corpo ridotto rispetto a un h2 di sezione: qui il titolo e un etichetta di
   prodotto, non l apertura di un capitolo. */
.prod-fascia-testo :is(h1, h2) { font-size: clamp(1.75rem, calc(2.4 * var(--vw)), 2.25rem); }
.prod-fascia-desc { font-size: var(--fs-base); max-width: 38ch; }
.prod-fascia-elenco {
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  opacity: 0.7;
  max-width: 34ch;
  line-height: 1.7;
}
.prod-fascia-cta {
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s2);
}
.prod-fascia-cta::after {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  transition: width 360ms var(--ease-editorial);
}
.prod-fascia:hover .prod-fascia-cta::after { width: 48px; }

@media (max-width: 900px) {
  .prod-fascia,
  .prod-fascia.specchiata { grid-template-columns: 1fr; min-height: 0; }
  .prod-fascia-foto { aspect-ratio: 4 / 3; }
  .prod-fascia-foto img { position: static; }
  .prod-fascia.specchiata .prod-fascia-foto  { order: 0; }
  .prod-fascia.specchiata .prod-fascia-testo { order: 0; }
}

/* ------------------------------------------------------------------
   2. PALETTE DEL DECORO
   Come nel Catalogo Porte 2026: la palette non sta in fondo alla pagina in
   una lista di nomi, sta accanto alla fotografia del decoro a cui appartiene.
   Ogni voce porta il nome italiano e, sotto, quello inglese — le due righe
   che il catalogo stampa una sull altra.

   Le voci si dispongono in riga e vanno a capo da sole: sono da due a sei per
   decoro, una griglia fissa lascerebbe buchi. */
.decoro-palette { margin-top: var(--s5); }
.decoro-palette-t {
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--ink-50);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--ink-12);
  margin-bottom: var(--s4);
}
.decoro-palette ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
}
.decoro-palette li { min-width: 88px; }
.decoro-palette .nome {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.decoro-palette .nome-en {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-50);
  line-height: 1.4;
}
/* Il campione fotografico, quando c e: la cartella colore vera e stampata,
   e nessun rettangolo inventato in CSS puo sostituirla. Se un giorno
   arrivano le foto dei campioni si aggiunge una img.campione dentro il li
   e il posto e gia apparecchiato.
   ponytail: nessun colore hardcoded, i campioni entrano come immagini */
.decoro-palette .campione {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--s2);
}
.decoro-palette-nota {
  margin-top: var(--s4);
  font-size: var(--fs-xs);
  color: var(--ink-50);
  max-width: 46ch;
}

/* ------------------------------------------------------------------
   3. FOTOGRAFIA VELATA A TUTTO SCHERMO
   Una fotografia piena, tenuta scura e leggermente sfocata: il testo sopra
   sta in penombra e si accende al passaggio del cursore — il velo si alza,
   la sfocatura se ne va, le lettere prendono luce.

   Il blur va sull immagine, mai sul testo: sfocare e poi rimettere a fuoco
   una scritta la rende illeggibile per meta della transizione. */
.foto-velata {
  position: relative;
  min-height: min(88 * var(--vh), 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--deep);
  text-align: center;
}
.foto-velata-media { position: absolute; inset: 0; z-index: 0; }
.foto-velata-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* riposo: scura e fuori fuoco. La scala serve a non far vedere i bordi
     trasparenti che il blur crea ai margini. */
  filter: brightness(0.62);
  transform: scale(1.06);
  transition: transform 1400ms var(--ease-editorial), opacity 900ms var(--ease-editorial);
  will-change: transform;
}
/* la copia sfocata (la crea initFotoVelate): la sfocatura e ferma, si
   anima solo la sua opacita */
.foto-velata-media img.velo {
  position: absolute; inset: 0;
  filter: brightness(0.42) saturate(0.75) blur(7px);
  will-change: transform, opacity;
}
.foto-velata::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center,
    rgba(11, 22, 34, 0.35) 0%,
    rgba(11, 22, 34, 0.78) 100%);
  transition: opacity 900ms var(--ease-editorial);
}
.foto-velata-testo {
  position: relative;
  z-index: 2;
  padding: var(--pad-gutter);
  max-width: 44ch;
  /* in penombra: si intuisce che c e scritto qualcosa, non si legge ancora */
  color: rgba(255, 255, 255, 0.42);
  transition: color 700ms var(--ease-editorial), transform 900ms var(--ease-editorial);
}
.foto-velata-testo :is(h1, h2) {
  color: inherit;
  font-size: clamp(1.75rem, calc(3 * var(--vw)), 2.5rem);
  transition: color 700ms var(--ease-editorial), text-shadow 700ms var(--ease-editorial);
}
.foto-velata-testo p {
  margin-top: var(--s4);
  font-size: var(--fs-base);
  color: inherit;
}
.foto-velata-eyebrow {
  display: block;
  margin-bottom: var(--s4);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: inherit;
}
/* Si accende: hover col mouse, focus da tastiera, e su telefono — dove
   l hover non esiste — quando la fascia entra nello schermo (.accesa la
   mette initFotoVelate in app.js). */
.foto-velata:hover .foto-velata-media img,
.foto-velata:focus-within .foto-velata-media img,
.foto-velata.accesa .foto-velata-media img { transform: scale(1); }
.foto-velata:hover .foto-velata-media img.velo,
.foto-velata:focus-within .foto-velata-media img.velo,
.foto-velata.accesa .foto-velata-media img.velo { opacity: 0; }
.foto-velata:hover::before,
.foto-velata:focus-within::before,
.foto-velata.accesa::before { opacity: 0.55; }
.foto-velata:hover .foto-velata-testo,
.foto-velata:focus-within .foto-velata-testo,
.foto-velata.accesa .foto-velata-testo { color: var(--white); }
.foto-velata:hover .foto-velata-testo :is(h1, h2),
.foto-velata:focus-within .foto-velata-testo :is(h1, h2),
.foto-velata.accesa .foto-velata-testo :is(h1, h2) {
  color: var(--white);
  text-shadow: 0 2px 28px rgba(11, 22, 34, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .foto-velata-media img,
  .foto-velata-testo { transition-duration: 1ms; }
}

/* ------------------------------------------------------------------
   4. TIPOLOGIE IN SOVRAIMPRESSIONE
   Nelle pagine collezione: appena finita la prima fotografia, le tipologie
   della collezione salgono sopra l immagine, ognuna su un fondo diverso.
   E una fascia che sborda sull hero (margin-top negativo), cosi le due cose
   non sono due sezioni impilate ma un unico passaggio.

   I fondi li assegna data-fondo nel markup: si alternano i due Pantone e i
   due chiari, mai due uguali di fila. */
.tipologie-sovra {
  position: relative;
  z-index: 5;
  margin-top: min(-14 * var(--vh), -96px);
  padding: 0 var(--pad-gutter);
}
.tipologie-griglia {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* nessun gap: le tessere si toccano e formano una barra sola, come le
     fasce colore in fondo alle tavole del catalogo */
  gap: 0;
  box-shadow: var(--shadow-modal);
}
.tipologia {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s6) var(--s5) var(--s7);
  text-decoration: none;
  transition: transform 420ms var(--ease-editorial);
}
.tipologia:hover { transform: translateY(-6px); }
.tipologia[data-fondo="ink"]   { background: var(--ink);   color: var(--on-dark); }
.tipologia[data-fondo="blue"]  { background: var(--blue);  color: var(--on-dark); }
.tipologia[data-fondo="deep"]  { background: var(--deep);  color: var(--on-dark); }
.tipologia[data-fondo="mist"]  { background: var(--mist);  color: var(--ink); }
.tipologia[data-fondo="azure"] { background: var(--azure); color: var(--ink); }
.tipologia[data-fondo="paper"] { background: var(--paper); color: var(--ink); }
.tipologia[data-fondo="white"] { background: var(--white); color: var(--ink); }
.tipologia-num {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  opacity: 0.55;
}
.tipologia-nome {
  font-size: var(--fs-md);
  font-weight: var(--fw-med);
  letter-spacing: -0.01em;
  color: inherit;
}
.tipologia-nota { font-size: var(--fs-xs); opacity: 0.7; line-height: 1.5; }
@media (max-width: 900px) {
  .tipologie-sovra { margin-top: 0; padding: 0; }
  .tipologie-griglia { box-shadow: none; }
}

/* ------------------------------------------------------------------
   5. CAROSELLO DELLE COLLEZIONI
   "Le altre collezioni": prima erano cinque riquadri quasi quadrati in
   griglia, e la collezione corrente veniva esclusa. Ora ci sono tutte e
   sei, sempre, in card rettangolari verticali che scorrono in orizzontale.
   Quella su cui si sta e marcata, non nascosta.

   Scorrimento nativo con scroll-snap: niente libreria di caroselli per
   trascinare sei card. ponytail: overflow-x + snap, JS zero */
.coll-carosello {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-gutter);
  padding-bottom: var(--s4);
  /* la barra di scorrimento resta, ma sottile: dice che c e altro a destra */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-12) transparent;
}
.coll-carta {
  position: relative;
  flex: 0 0 clamp(220px, calc(20 * var(--vw)), 300px);
  /* rettangolo verticale, come un anta: e la forma del prodotto */
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  overflow: hidden;
  text-decoration: none;
  background: var(--ink-12);
}
.coll-carta img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.82);
  transform: scale(1.02);
  transition: transform 900ms var(--ease-editorial), filter 600ms var(--ease-editorial);
}
.coll-carta:hover img { filter: grayscale(0) brightness(0.92); transform: scale(1.06); }
.coll-carta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17, 31, 46, 0) 45%, rgba(17, 31, 46, 0.88) 100%);
}
.coll-carta-testo {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.coll-carta-num {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  color: var(--on-dark-50);
}
.coll-carta-nome {
  font-size: var(--fs-md);
  font-weight: var(--fw-med);
  letter-spacing: -0.01em;
  color: var(--white);
}
.coll-carta-sotto { font-size: var(--fs-xs); color: var(--on-dark-70); }
/* La collezione della pagina in cui si sta: resta in fila, ma si dichiara. */
.coll-carta[aria-current="page"] { outline: 2px solid var(--blue); outline-offset: -2px; }
.coll-carta[aria-current="page"] img { filter: grayscale(0) brightness(0.95); }

/* ------------------------------------------------------------------
   6. FONDI DI COLLEZIONE
   Ogni riga collezione, in prodotti.html, ha il suo fondo: la pagina non e
   piu una colonna di bianchi. Il fondo arriva ai due bordi dello SCHERMO
   (formula del full-bleed: il 50% si misura sul container, quindi la somma e
   esattamente l offset che il container ha dalla finestra) e il padding
   rimette il contenuto nella colonna del testo.
   Il blu chiaro (mist, azure) non si usa piu qui: richiesta cliente.
   I valori li assegna data-fondo, gli stessi nomi di .tipologia. */
#porte, #gres { overflow-x: clip; }   /* la barra di scorrimento non conta in 100vw: il filo che avanza si taglia qui */
.riga-coll[data-fondo] {
  padding: clamp(40px, calc(5 * var(--vw)), 72px) calc(50 * var(--vw) - 50%);
  margin-left: calc(50% - 50 * var(--vw));
  margin-right: calc(50% - 50 * var(--vw));
}
.riga-coll[data-fondo="ink"]   { background: var(--ink);   color: var(--on-dark); }
.riga-coll[data-fondo="blue"]  { background: var(--blue);  color: var(--on-dark); }
.riga-coll[data-fondo="deep"]  { background: var(--deep);  color: var(--on-dark); }
.riga-coll[data-fondo="mist"]  { background: var(--mist); }
.riga-coll[data-fondo="azure"] { background: var(--azure); }
.riga-coll[data-fondo="paper"] { background: var(--paper); }
.riga-coll[data-fondo="white"] { background: var(--white); }
.riga-coll[data-fondo="ink"] h3,
.riga-coll[data-fondo="blue"] h3,
.riga-coll[data-fondo="deep"] h3 { color: var(--white); }
.riga-coll[data-fondo="ink"] p,
.riga-coll[data-fondo="blue"] p,
.riga-coll[data-fondo="deep"] p { color: var(--on-dark-70); }
.riga-coll[data-fondo="ink"] .riga-coll-num,
.riga-coll[data-fondo="blue"] .riga-coll-num,
.riga-coll[data-fondo="deep"] .riga-coll-num { color: var(--on-dark-50); }
.riga-coll[data-fondo="ink"] .link-freccia,
.riga-coll[data-fondo="blue"] .link-freccia,
.riga-coll[data-fondo="deep"] .link-freccia { color: var(--on-dark); }
/* "Scopri la collezione" e un .btn-outline, cioe inchiostro su inchiostro:
   sui tre fondi scuri spariva. Qui diventa bianco, l unico colore che
   contrasta con entrambi i Pantone. */
.riga-coll[data-fondo="ink"] .btn-outline,
.riga-coll[data-fondo="blue"] .btn-outline,
.riga-coll[data-fondo="deep"] .btn-outline {
  color: var(--white);
  border-color: var(--white);
}
.riga-coll[data-fondo="ink"] .btn-outline:hover,
.riga-coll[data-fondo="blue"] .btn-outline:hover,
.riga-coll[data-fondo="deep"] .btn-outline:hover {
  background: var(--white);
  color: var(--ink);
}

/* ------------------------------------------------------------------
   7. SCALA RIDOTTA NELLE PAGINE PRODOTTO
   Richiesta cliente: in queste pagine le scritte devono essere piu piccole e
   piu ordinate. Non si tocca la scala globale (la home deve restare quella):
   si abbassano i corpi sul solo corpo di queste pagine, via classe.
   Meno corpo, piu aria: e cosi che una pagina sembra ordinata. */
.pagina-prodotto h2, .pagina-prodotto h1:where(.come-h2) { font-size: clamp(1.625rem, calc(2.2 * var(--vw)), 2.125rem); }
.pagina-prodotto h3 { font-size: clamp(1.125rem, calc(1.4 * var(--vw)), 1.375rem); }
.pagina-prodotto .lead { font-size: var(--fs-base); max-width: 56ch; }
.pagina-prodotto .section-heading { margin-bottom: var(--s7); }
.pagina-prodotto .riga-coll p,
.pagina-prodotto .decoro p { font-size: var(--fs-sm); line-height: 1.72; }
.pagina-prodotto .decoro-scheda { font-size: var(--fs-xs); }

/* ------------------------------------------------------------------
   8. FINITURE ACCANTO ALLA MATERIA
   L elenco dei vetri e dei colori non sta piu da solo: a fianco c e la
   fotografia dei campioni. Nel catalogo la tavola dei colori non e mai
   staccata dalla superficie che descrive, e questo e il motivo per cui
   funziona — un nome di finitura, letto da solo, non dice niente. */
.finiture-blocco {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: clamp(24px, calc(3.5 * var(--vw)), 64px);
  align-items: start;
}
.finiture-foto {
  margin: 0;
  overflow: hidden;
  /* la foto e alta: si ritaglia su una proporzione fissa, cosi la colonna
     dell elenco non deve inseguirla */
  aspect-ratio: 3 / 4;
  background: var(--ink-12);
}
.finiture-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1200ms var(--ease-editorial);
}
.finiture-blocco:hover .finiture-foto img { transform: scale(1.06); }
.finiture-elenco { min-width: 0; }
@media (max-width: 900px) {
  .finiture-blocco { grid-template-columns: 1fr; }
  .finiture-foto { aspect-ratio: 4 / 3; }
}

/* ================================================================
   PAGINE SISTEMA — easy.html e frame.html
   Le tavole tecniche del catalogo (pagine 143-155) rimontate per lo
   schermo: ogni disegno e un ritaglio del PDF, la didascalia e testo
   vero — cosi si traduce e si legge anche da screen reader.
   ================================================================ */

/* ----- Nome del sistema e misure massime, affiancate ----- */
.sistema-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(32px, calc(5 * var(--vw)), 88px);
  align-items: start;
}
@media (max-width: 900px) { .sistema-intro { grid-template-columns: 1fr; gap: var(--s7); } }
/* .sistema-sub e .misure nascono sul fondo scuro della home: qui il fondo
   e chiaro e i colori vanno riportati sull inchiostro. */
.sistema-intro .sistema-sub { color: var(--ink-50); margin-bottom: var(--s5); }
.sistema-misure .micro { display: block; color: var(--ink-50); margin-bottom: var(--s4); }
.sistema-misure .misure li { color: var(--ink-70); border-top-color: var(--ink-12); }
.sistema-misure .misure b { color: var(--ink); }
.sistema-misure .misure-nota { color: var(--ink-50); }

/* ----- Sottotitolo di gruppo dentro una sezione ----- */
.tav-sotto {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: var(--fw-med);
  margin: var(--s8) 0 var(--s5);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-12);
}
.tav-sotto:first-of-type { margin-top: 0; }

/* ----- La tavola dei disegni tecnici -----
   Le sezioni dei binari hanno proporzioni molto diverse fra loro: il
   riquadro e alto uguale per tutti e il disegno ci sta dentro con
   object-fit, cosi la griglia resta allineata senza deformare niente. */
.tavola {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(20px, calc(2.5 * var(--vw)), 40px) clamp(16px, calc(2 * var(--vw)), 32px);
}
.tav-voce { margin: 0; }
.tav-voce img {
  width: 100%;
  height: clamp(120px, calc(15 * var(--vw)), 190px);
  object-fit: contain;
  object-position: center bottom;
  display: block;
  /* i ritagli hanno il fondo bianco del catalogo: su carta stampata si
     confonderebbe con la sezione, quindi il riquadro e sempre bianco */
  background: var(--white);
  padding: 10px;
}
.tavola .tav-voce figcaption { margin-top: 12px; }
.tav-nome {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  line-height: 1.3;
}
.tav-nota {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--ink-50);
  line-height: 1.35;
}

/* ----- I campioni di colore -----
   Qui il riquadro NON e contain: il campione e un rettangolo di materia e
   deve riempire la sua casella, come nella tavola stampata. */
.campioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(18px, calc(2.2 * var(--vw)), 32px) clamp(14px, calc(1.8 * var(--vw)), 28px);
}
/* Richiesta cliente: il campione e un quadrato esatto, e il nome sta
   centrato sotto di lui. */
.campioni { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.campioni .tav-voce img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  padding: 0;
  /* i campioni chiarissimi (bianco, RAL 9010) sparirebbero sulla carta */
  outline: 1px solid var(--ink-12);
  outline-offset: -1px;
}
.campioni .tav-voce figcaption { margin-top: 10px; text-align: center; }

.tav-avvertenza {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-50);
  max-width: 90ch;
}

/* Le due schede dei sistemi ora sono link alle pagine easy.html e frame.html:
   l elenco delle categorie e il bottone stanno sotto le misure. */
.sistema { display: block; color: inherit; }
.sistema-elenco {
  display: block;
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  color: var(--on-dark-50);
}
.sistema-cta { margin-top: var(--s5); }

/* ================================================================
   PAGINE COLLEZIONE — apertura a tutto schermo
   Richiesta cliente: via le tessere colorate che sbucavano sopra la
   fotografia; al loro posto la fotografia d ambiente della collezione,
   piena e nitida, con il nome e la descrizione in basso a sinistra.
   Il testo sta in penombra e si accende col cursore, e sotto di lui —
   solo sotto di lui — la fotografia si scurisce: cosi il bianco si
   legge senza velare tutto lo scatto.
   ================================================================ */
.coll-apertura {
  position: relative;
  min-height: calc(100 * var(--vh));
  overflow: hidden;
  background: var(--deep);
  display: flex;
  align-items: flex-end;
}
.coll-apertura-media { position: absolute; inset: 0; z-index: 0; }
.coll-apertura-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Due veli distinti, e la distinzione conta:
   ::after tiene leggibile la barra in alto e non si muove mai — la barra
   deve leggersi anche senza cursore sulla pagina.
   ::before e il velo del testo: sale dall angolo in basso a sinistra e si
   infittisce al passaggio del cursore. La fotografia, sopra, resta pulita. */
.coll-apertura::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 26%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 22, 34, 0.52) 0%, rgba(11, 22, 34, 0) 100%);
}
.coll-apertura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(15deg,
    rgba(11, 22, 34, 0.92) 0%, rgba(11, 22, 34, 0.5) 34%, rgba(11, 22, 34, 0) 62%);
  opacity: 0.6;
  transition: opacity 700ms var(--ease-editorial);
}
.coll-apertura:hover::before,
.coll-apertura:focus-within::before { opacity: 1; }

.coll-apertura-testo {
  position: relative;
  z-index: 2;
  padding: var(--pad-gutter);
  padding-bottom: clamp(64px, calc(12 * var(--vh)), 132px);
  max-width: min(58ch, 92%);
  /* in penombra: si vede che c e scritto, si legge avvicinandosi */
  color: rgba(255, 255, 255, 0.62);
  transition: color 700ms var(--ease-editorial);
}
.coll-apertura:hover .coll-apertura-testo,
.coll-apertura:focus-within .coll-apertura-testo { color: rgba(255, 255, 255, 0.95); }
.coll-apertura-testo .micro { display: block; color: inherit; opacity: 0.8; margin-bottom: var(--s4); }
.coll-apertura-testo h1 {
  color: var(--white);
  margin-bottom: var(--s5);
  text-shadow: 0 2px 24px rgba(11, 22, 34, 0.5);
}
.coll-apertura-testo .lead { color: inherit; max-width: 52ch; }
.coll-apertura-didascalia {
  display: block;
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: inherit;
  opacity: 0.72;
  max-width: 52ch;
}
.coll-apertura .hero-scroll { z-index: 2; }
/* Senza cursore non c e hover: il testo sta gia acceso. */
@media (hover: none) {
  .coll-apertura::before { opacity: 1; }
  .coll-apertura-testo { color: rgba(255, 255, 255, 0.95); }
}
@media (max-width: 640px) {
  .coll-apertura-testo { max-width: none; }
}

/* ----- Le finiture: prima qualche esempio, poi tutte -----
   Il pannello lo apre <details>: apertura e chiusura le fa il browser,
   niente JavaScript. Il riassunto e gia un bottone del sistema. */
.finiture-assaggio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(18px, calc(2.2 * var(--vw)), 32px) clamp(14px, calc(1.8 * var(--vw)), 28px);
  margin-bottom: var(--s7);
}
.fin-tutte > summary { list-style: none; display: inline-flex; cursor: pointer; }
.fin-tutte > summary::-webkit-details-marker { display: none; }
.fin-tutte > summary::marker { content: ""; }
.fin-tutte[open] > summary { display: none; }
.fin-tutte[open] { animation: fin-apre 360ms var(--ease-editorial); }
@keyframes fin-apre { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .fin-tutte[open] { animation: none; } }
.fin-gruppo { margin-top: var(--s8); }
.fin-gruppo:first-child { margin-top: var(--s6); }
.fin-gruppo > h3 {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: var(--fw-med);
  margin-bottom: var(--s5);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-12);
}
.fin-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(18px, calc(2.2 * var(--vw)), 32px) clamp(14px, calc(1.8 * var(--vw)), 28px);
}
.fin-voce { margin: 0; }
.fin-voce img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  /* i campioni chiarissimi sparirebbero sul fondo della sezione */
  outline: 1px solid rgba(17, 31, 46, 0.14);
  outline-offset: -1px;
}
.fin-voce figcaption {
  margin-top: 10px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-70);
}
.fin-voce figcaption b {
  display: block;
  font-weight: var(--fw-med);
  color: var(--ink);
}
.fin-voce figcaption span { display: block; }

/* I decori dei Pittori e le configurazioni sono disegni al tratto su carta
   bianca, alti e stretti come un anta: qui il campione non si ritaglia, ci
   sta dentro intero. */
.fin-griglia.disegni { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.fin-griglia.disegni .fin-voce img {
  aspect-ratio: 2 / 5;
  object-fit: contain;
  background: var(--white);
  outline: none;
  padding: 8px;
}

/* Un .btn-outline su fondo scuro: inchiostro su inchiostro non si vede. */
.btn-outline.su-scuro { color: var(--white); border-color: var(--white); }
.btn-outline.su-scuro:hover { background: var(--white); color: var(--ink); }

/* .foto-velata ora e un link (porta ai sistemi): l elemento cambia, il
   vestito no. */
a.foto-velata { text-decoration: none; }

/* La fascia dopo l ultima collezione: richiesta cliente, piu grande — prende
   tutta l altezza dello schermo invece di 88vh. */
.foto-velata.grande { min-height: calc(100 * var(--vh)); }

/* ================================================================
   PRODOTTI — la sezione dei due sistemi
   Le due tavole del catalogo (pagine 142-143) sono blu notte: la sezione
   sotto diventa bianca, altrimenti scuro su scuro. Testo al centro, e il
   bottone entra dal basso quando il cursore arriva sulla tavola.
   ================================================================ */
/* Variante centrata: una colonna sola, tutto in asse. Con le due colonne
   della griglia base il blocco restava schiacciato a sinistra. */
.section-heading.centrato { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.section-heading.centrato > div { max-width: 62ch; }
.section-heading.centrato .divider { margin-left: auto; margin-right: auto; }
.section-heading.centrato p { max-width: 58ch; margin-left: auto; margin-right: auto; }
.sistemi-sez .sistemi { text-align: center; }
.sistemi-sez .sistema-foto {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  margin-bottom: var(--s6);
}
.sistemi-sez .sistema-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease-editorial);
}
.sistemi-sez .sistema:hover .sistema-foto img { transform: scale(1.03); }
/* Il bottone sta gia al centro della tavola, fuori campo in basso: al
   passaggio del cursore sale al suo posto. Sotto, dove il cursore non c e,
   resta visibile — un bottone che non compare mai e un bottone che non
   esiste. */
.sistemi-sez .sistema-cta {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, calc(4 * var(--vw)), 48px);
  transform: translate(-50%, calc(100% + clamp(24px, calc(4 * var(--vw)), 48px)));
  margin: 0;
  white-space: nowrap;
  opacity: 0;
  transition: transform 520ms var(--ease-editorial), opacity 380ms var(--ease-editorial);
}
.sistemi-sez .sistema:hover .sistema-cta,
.sistemi-sez .sistema:focus-visible .sistema-cta {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (hover: none) {
  .sistemi-sez .sistema-cta { transform: translate(-50%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sistemi-sez .sistema-cta { transition: opacity 200ms linear; }
  .sistemi-sez .sistema-foto img { transition: none; }
}
/* In fondo alle pagine Easy e Frame la card e una sola: resta al centro,
   larga come una colonna. */
.sistemi-sez .sistemi.uno { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
.sistemi-sez .sistema h3 { margin-bottom: 8px; }
.sistemi-sez .sistema-sub { color: var(--ink-50); margin-bottom: var(--s4); }
.sistemi-sez .sistema-elenco { color: var(--ink-70); margin-top: 0; }

/* ================================================================
   BARRA — il sottomenu di Prodotti
   Si apre al passaggio del cursore e con il fuoco da tastiera. Niente
   JavaScript: :hover e :focus-within bastano, e il ponte invisibile sopra
   il pannello evita che si chiuda mentre il cursore lo raggiunge.
   ================================================================ */
.nav-menu li[data-sottomenu] { position: relative; }
.nav-sotto {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  margin-top: 14px;
  min-width: 230px;
  padding: 10px 0;
  background: var(--white);
  box-shadow: 0 24px 48px -24px rgba(9, 13, 19, 0.35);
  border: 1px solid var(--ink-12);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-editorial), transform 260ms var(--ease-editorial), visibility 0s 260ms;
  z-index: 30;
}
/* il ponte: senza, fra la voce e il pannello c e un vuoto di 14px e il
   sottomenu si chiude appena si scende */
.nav-sotto::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px;
  height: 16px;
}
.nav-menu li[data-sottomenu]:hover .nav-sotto,
.nav-menu li[data-sottomenu]:focus-within .nav-sotto {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav-sotto a {
  display: block;
  padding: 10px 22px;
  font-size: var(--fs-sm);
  color: var(--ink-70);
  white-space: nowrap;
  transition: color 240ms var(--ease-editorial), background 240ms var(--ease-editorial);
}
.nav-sotto a:hover { color: var(--ink); background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .nav-sotto { transition: none; } }
/* Sotto i 1100px il menu centrale non c e: le tre voci stanno nel cassetto,
   rientrate sotto Prodotti. */
.nav-drawer-sotto {
  padding-left: var(--s5);
  font-size: var(--fs-sm);
  color: var(--ink-70);
}

/* La seconda fotografia dentro una collezione: stesso taglio dell apertura,
   ma senza titolo — c e solo la didascalia del catalogo, e non serve tutta
   l altezza dello schermo. */
.coll-apertura-mezza { min-height: min(86 * var(--vh), 900px); }
.coll-apertura-didascalia.grande {
  margin-top: 0;
  font-size: var(--fs-sm);
  opacity: 0.88;
  max-width: 56ch;
}

/* Nella colour palette di un decoro, accanto al nome c e il campione vero:
   un nome di finitura, letto da solo, non dice niente. Piccolo di proposito
   — e un riferimento, non una tavola. */
.decoro-palette li img {
  display: block;
  width: clamp(40px, calc(3.4 * var(--vw)), 52px);
  height: clamp(40px, calc(3.4 * var(--vw)), 52px);
  object-fit: cover;
  margin-bottom: 8px;
  outline: 1px solid var(--ink-12);
  outline-offset: -1px;
}


/* Variante "intera": la fotografia non si ritaglia, prende la larghezza
   dello schermo e decide lei l altezza. Il testo resta sopra, in basso a
   sinistra, sul velo di sempre. */
.coll-apertura.intera {
  display: block;
  min-height: 0;
}
.coll-apertura.intera .coll-apertura-media { position: relative; inset: auto; }
.coll-apertura.intera .coll-apertura-media img { height: auto; }
.coll-apertura.intera .coll-apertura-testo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: min(58ch, 92%);
}

/* Il video di apertura prende tutta la prima schermata: la fotografia sotto
   si vede solo scorrendo. */
.manifesto-video {
  min-height: calc(100 * var(--vh));
  display: flex;
  align-items: center;
}
.manifesto-video > .container { width: 100%; }

/* La striscia "altre categorie" e un rimando, non una vetrina: fotografie
   piccole, in fila. */
.other-coll-strip.piccola {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(16px, calc(2 * var(--vw)), 28px);
  max-width: 760px;
}
/* Nella striscia piccola la card e il solo riquadro della fotografia: il
   nome sta sotto, in nero, e non c e piu il velo scuro in sovraimpressione
   — con una fotografia alta 120px il velo copriva mezzo soggetto. */
.other-coll-strip.piccola .other-coll {
  aspect-ratio: auto;
  background: none;
  color: var(--ink);
}
.other-coll-strip.piccola .other-coll img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--ink-12);
}
.other-coll-strip.piccola .other-coll::after { display: none; }
.other-coll-strip.piccola .label {
  position: static;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* Contatti: la pagina comincia dalla sezione, non piu da un apertura, e
   sotto la barra fissa serve aria. */
/* Prima sezione di una pagina che parte senza fotografia: sotto la barra
   fissa serve piu aria del padding normale. */
.prima-sezione { padding-top: clamp(140px, calc(18 * var(--vh)), 220px); }
/* La mappa ora sta nella colonna delle informazioni, sotto gli orari. */
.ct-info .map-full, .ct-orari + .map-full, .ct-orari ~ .map-full {
  margin-top: var(--s6);
  height: 320px;
}

/* ================================================================
   CHI SIAMO — rifacimento
   ================================================================ */

/* ----- Apertura: il video delle lavorazioni dietro il nome ----- */
.chi-apertura {
  position: relative;
  min-height: calc(100 * var(--vh));
  overflow: hidden;
  background: var(--deep);
  display: flex;
  align-items: center;
  text-align: center;
}
.chi-apertura-media { position: absolute; inset: 0; z-index: 0; }
.chi-apertura-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.42) saturate(0.7) contrast(1.04);
}
.chi-apertura::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 56% at 50% 50%, rgba(11, 22, 34, 0.6) 0%, rgba(11, 22, 34, 0.16) 100%),
    linear-gradient(180deg, rgba(11, 22, 34, 0.55) 0%, rgba(11, 22, 34, 0) 28% 76%, rgba(11, 22, 34, 0.5) 100%);
}
.chi-apertura > .container { position: relative; z-index: 2; width: 100%; }
.chi-apertura h1 { color: var(--white); }
.chi-apertura .chi-hero-payoff { color: var(--on-dark-70); margin-left: auto; margin-right: auto; }
.chi-apertura .chi-logo { filter: brightness(0) invert(1); }

/* ----- Il video dell azienda a tutta larghezza ----- */
.manifattura-video { background: var(--deep); }
.video-frame.piena {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  /* i sorgenti sono 2,38:1 (le bande nere sono state tagliate in codifica):
     con 16/9 il riquadro ne avanzava sopra e sotto */
  aspect-ratio: 1440 / 606;
}
/* Il video dell azienda prende tutta la schermata: l altezza vince sul
   rapporto del sorgente, che e' 2,38:1 e viene quindi ritagliato ai lati.
   Sul telefono lo schermo e' verticale e il ritaglio mangerebbe quasi tutto:
   li' resta la fascia larga. */
.manifattura-video .video-frame.piena {
  aspect-ratio: auto;
  height: calc(100 * var(--vh));
}
@media (max-width: 700px) {
  .manifattura-video .video-frame.piena {
    height: auto;
    aspect-ratio: 1440 / 606;
  }
}
.video-frame.piena img,
.video-frame.piena video { width: 100%; height: 100%; object-fit: cover; }
/* il video dei testimonial: piu grande, come chiesto */
.video-card.grande { max-width: none; }

/* ----- I materiali: una fotografia per volta, a tutta larghezza -----
   Lo scorrimento e nativo (overflow-x + scroll-snap): le frecce chiamano
   scrollBy, il dito funziona da solo e non c e nessuno slider scritto. */
.materiali-sez { overflow-x: clip; }
/* Le fotografie dei materiali sono 13 verticali 2:3 e 7 orizzontali 3:2.
   In una fascia larga come lo schermo (quasi 2:1) le verticali perdevano due
   terzi dell altezza. Ora la striscia ha una sola altezza e ogni fotografia
   tiene la larghezza che le spetta: nessun ritaglio, e su uno schermo grande
   se ne vedono tre insieme — le verticali strette, le orizzontali larghe.
   Le frecce spostano di una fotografia per volta, non di una schermata. */
.materiali-sez .mat-pista {
  gap: 3px;
  /* Qui le slide hanno larghezze diverse: con "mandatory" ogni minimo
     trascinamento forza l agganciamento alla slide vicina e non si puo'
     restare fermi a meta' per guardare due fotografie insieme.
     "proximity" aggancia solo quando si e' quasi in posizione. */
  scroll-snap-type: x proximity;
}
.materiali-sez .mat-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.materiali-sez .mat-slide img {
  width: auto;
  max-width: none;
  height: clamp(300px, calc(68 * var(--vh)), 720px);
  object-fit: contain;
}
@media (max-width: 700px) {
  .materiali-sez .mat-slide img { height: clamp(260px, calc(46 * var(--vh)), 420px); }
}
.mat-scorri { position: relative; margin-top: var(--s7); }
.mat-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.mat-pista::-webkit-scrollbar { display: none; }
.mat-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  position: relative;
}
.mat-slide img {
  width: 100%;
  height: clamp(320px, calc(74 * var(--vh)), 780px);
  object-fit: cover;
  display: block;
  background: var(--ink-12);
}
.mat-slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(16px, calc(2.4 * var(--vw)), 32px) var(--pad-gutter);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(11, 22, 34, 0) 0%, rgba(11, 22, 34, 0.72) 100%);
}
.mat-freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background 260ms var(--ease-editorial);
}
.mat-freccia:hover { background: var(--white); }
.mat-freccia.prec { left: clamp(12px, calc(2 * var(--vw)), 28px); }
.mat-freccia.succ { right: clamp(12px, calc(2 * var(--vw)), 28px); }
@media (prefers-reduced-motion: reduce) { .mat-pista { scroll-behavior: auto; } }

/* ----- Certificazioni: lo stesso video scuro dietro le schede ----- */
.cert-sez { position: relative; overflow: hidden; }
.cert-media { position: absolute; inset: 0; z-index: 0; }
.cert-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.3) saturate(0.62);
}
.cert-sez::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(11, 22, 34, 0.62);
}
.cert-sez > .container { position: relative; z-index: 2; }
/* i testi delle schede al centro, come chiesto */
.cert-sez .cert-inner { text-align: center; }
.cert-sez .cert-inner .micro { display: block; }
.cert-sez .section-heading.centrato .cert-logo { margin-left: auto; margin-right: auto; display: block; }

/* Sulla tavola dei sistemi, al passaggio del cursore, sale anche lo scatto
   che apre la pagina del sistema: la tavola tecnica dice com e fatto, la
   fotografia dice com e in un ambiente. */
/* Il selettore porta "img" perche' .sistemi-sez .sistema-foto img (0,2,1)
   batte .sistemi-sez .sistema-scatto (0,2,0): l elemento pesa piu' della
   classe che manca, e la sua transition sul solo transform cancellava
   quella sull opacity. Era il motivo per cui la fotografia non sfumava
   affatto, ma compariva di scatto. */
.sistemi-sez .sistema-foto img.sistema-scatto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* esce per prima, senza attesa */
  transition: opacity 300ms var(--ease-editorial),
              transform 900ms var(--ease-editorial);
}
/* Non un incrocio diretto delle due immagini ma un passaggio dal nero: la
   tavola si spegne, il fondo resta nero un istante, poi la fotografia si
   accende. Il nero e il fondo del riquadro, non un velo in piu. */
.sistemi-sez .sistema-foto { background: #000; }
.sistemi-sez .sistema-foto img:not(.sistema-scatto) {
  /* rientra per seconda, dopo che la fotografia si e spenta */
  transition: opacity 300ms var(--ease-editorial) 150ms,
              transform 900ms var(--ease-editorial);
}
.sistemi-sez .sistema:hover .sistema-foto img:not(.sistema-scatto),
.sistemi-sez .sistema:focus-visible .sistema-foto img:not(.sistema-scatto) {
  opacity: 0;
  transition-delay: 0ms;
}
.sistemi-sez .sistema:hover .sistema-foto img.sistema-scatto,
.sistemi-sez .sistema:focus-visible .sistema-foto img.sistema-scatto {
  opacity: 1;
  transition-delay: 150ms, 0ms;
}
/* il bottone deve restare sopra la fotografia */
.sistemi-sez .sistema-cta { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .sistemi-sez .sistema-foto img.sistema-scatto,
  .sistemi-sez .sistema-foto img:not(.sistema-scatto) { transition: opacity 200ms linear; }
  .sistemi-sez .sistema:hover .sistema-foto img.sistema-scatto,
  .sistemi-sez .sistema:hover .sistema-foto img:not(.sistema-scatto) { transition-delay: 0ms; }
}

/* Sulla fotografia intera — piu alta dello schermo — il velo di lettura
   finiva dove si chiudeva la prima schermata, cioe' a meta' campo, con uno
   stacco netto in mezzo all immagine. Ora parte sempre dal lato basso della
   fotografia e sale sfumando. */
.coll-apertura.intera::before {
  top: auto;
  bottom: 0;
  height: 100%;
  /* un velo solo, non due sovrapposti: queste aperture sono fotografie di
     ambienti molto chiari e due veli le annerivano invece di accompagnarle.
     La densita' e' nel gradiente, quindi qui l opacita' e' piena. */
  opacity: 1;
  background: linear-gradient(0deg,
    rgba(11, 22, 34, 0.92) 0%,
    rgba(11, 22, 34, 0.62) 26%,
    rgba(11, 22, 34, 0.34) 52%,
    rgba(11, 22, 34, 0.12) 76%,
    rgba(11, 22, 34, 0) 100%);
}

/* Dove l apertura ha il titolo (e' un <header>) il testo resta in cima, al
   fondo della prima schermata: chi apre la pagina deve poterlo leggere
   subito, senza scorrere. */
header.coll-apertura.intera .coll-apertura-testo {
  top: 0;
  bottom: auto;
  height: min(100%, calc(100 * var(--vh)));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Il titolo cade intorno a un terzo dal basso della fotografia, dove il
   velo qui sopra vale ancora circa 0,55: non serve un secondo velo. */

/* Le aperture intere senza titolo (<section>: Pittori 2, Trame 2) portano
   solo la didascalia, che torna in fondo alla fotografia — dove ora c e il
   velo — invece di fermarsi a meta'. */
section.coll-apertura.intera .coll-apertura-testo {
  top: auto;
  bottom: 0;
  height: auto;
}

/* ================================================================
   ARREDI IN GRES — la fascia della descrizione e le fotografie
   ================================================================ */
/* Descrizione e fotografie affiancate: a sinistra cos'e' la categoria, a
   destra gli scatti da sfogliare. La colonna delle fotografie e' la piu'
   larga — sono loro il prodotto — e il testo resta su una misura leggibile
   invece di allargarsi per riempire. */
.concetto-fascia { padding: clamp(56px, calc(8 * var(--vh)), 104px) 0; }
.concetto-fascia .gres-split {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(28px, calc(3.4 * var(--vw)), 64px);
  align-items: center;
}
.concetto-fascia .concept-col {
  max-width: 48ch;
  margin: 0;
  padding: 0;
}
.concetto-fascia .concept-col > * + * { margin-top: var(--s5); }
/* Sotto i 900px le due colonne si impilano: il testo sopra, le fotografie
   larghe come la pagina. */
@media (max-width: 900px) {
  .concetto-fascia .gres-split { grid-template-columns: 1fr; gap: var(--s6); }
  .concetto-fascia .concept-col { max-width: 64ch; }
}

/* Le fotografie: stessa meccanica dei materiali di Chi siamo. */
.gres-scatti { background: var(--paper); overflow-x: clip; }
.gres-scatti .mat-scorri { margin-top: 0; }
/* Ma qui gli scatti sono verticali: ritagliarli in una fascia orizzontale
   mangiava meta del prodotto. Si vedono interi — l altezza la decide lo
   schermo, la larghezza la decide la fotografia. Ora che stanno in colonna
   accanto al testo, il tetto e' piu' basso: la fotografia deve entrare
   nella schermata insieme alla descrizione. */
.gres-scatti .mat-slide {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}
.gres-scatti .mat-slide img {
  grid-area: 1 / 1;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(66 * var(--vh));
  object-fit: contain;
}
@media (max-width: 900px) {
  .gres-scatti .mat-slide img { max-height: calc(76 * var(--vh)); }
}
/* La didascalia esce da sopra la fotografia: il velo scuro che la rendeva
   leggibile oscurava il basso dell immagine, cioe' proprio la superficie.
   Ora sta nella riga sotto, in nero sul fondo chiaro della sezione. */
.gres-scatti .mat-slide figcaption {
  grid-area: 2 / 1;
  position: static;
  background: none;
  color: var(--ink);
  text-align: center;
  max-width: 62ch;
  padding: var(--s4) 0 0;
}

/* "Altre categorie" in maiuscoletto e al centro. */
.titolo-maiuscolo {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.1rem, calc(1.5 * var(--vw)), 1.45rem);
}
/* Nelle card della striscia la fotografia era decentrata: ora riempie il
   riquadro e il nome sta sotto, in asse. */
.other-coll-strip.piccola { justify-items: center; margin-left: auto; margin-right: auto; }
.other-coll-strip.piccola .other-coll {
  display: block;
  width: 100%;
  text-align: center;
}
.other-coll-strip.piccola .other-coll img { object-position: center; }
.other-coll-strip.piccola .label { display: block; margin-top: 10px; text-align: center; }

/* ================================================================
   PAGINE SISTEMA — Easy e Frame
   Sono tavole tecniche una dietro l altra: sezioni corte, spesso una riga
   sola di disegni. Con il respiro delle pagine editoriali (128px per lato,
   256px fra due sezioni) il vuoto pesava piu del contenuto. Qui il passo e
   circa la meta.
   ================================================================ */
.pagina-sistema .section { padding: clamp(40px, calc(4.5 * var(--vw)), 72px) 0; }
.pagina-sistema .section-heading { margin-bottom: var(--s6); }
/* l avvertenza e una riga di testo piccolo: sta stretta fra le due sezioni */
.pagina-sistema .section:has(.tav-avvertenza) { padding: var(--s6) 0 var(--s7); }
/* i gruppi dentro una tavola (Maniglie, Cerniere, Laminati...) */
.pagina-sistema .tav-sotto { margin-top: var(--s7); }

/* ----- Titolo della pagina appoggiato sulla fotografia di apertura -----
   Porte e Gres si aprono con la fascia velata: il titolo e la descrizione
   stanno in basso a sinistra, sopra la fotografia, mentre il testo del
   catalogo resta al centro e si accende col cursore. Il velo in basso serve
   a tenere il testo leggibile anche quando la fotografia si accende. */
.foto-velata.con-angolo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 22, 34, 0.88), rgba(11, 22, 34, 0));
  pointer-events: none;
}
.foto-velata-angolo {
  position: absolute;
  z-index: 2;
  left: var(--pad-gutter);
  right: var(--pad-gutter);
  bottom: clamp(32px, calc(4 * var(--vw)), 72px);
  max-width: 52ch;
  text-align: left;
  color: var(--white);
}
.foto-velata-angolo :is(h1, h2) {
  color: var(--white);
  font-size: clamp(1.75rem, calc(2.6 * var(--vw)), 2.5rem);
  margin: 0;
}
.foto-velata-angolo p {
  margin-top: var(--s3);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--on-dark-70);
}
@media (max-width: 700px) {
  .foto-velata-angolo { max-width: none; }
}

/* ================================================================
   Rifiniture touch
   Solo sotto i 900px: sopra non cambia niente. Menu mobile e suo
   bottone stanno in system.css, accanto al resto della barra.
   ================================================================ */
@media (max-width: 900px) {

  /* Etichette funzionali sotto i 12px: in maiuscolo e spaziate si
     leggono male su uno schermo piccolo. Salgono a 12px solo quelle
     che servono a capire o a compilare qualcosa.
     ponytail: lasciate com'erano .hero-scroll, .logo-word, .counter .l,
     .ag-num, .lb-meta strong e .map-pin-label — sono segni grafici,
     ingrandirli imbruttisce e non fa leggere niente di piu'. */
  .contact-form label,
  .form-dark label,
  .ct-voce .etichetta {
    font-size: 13px;
  }
}

/* ================================================================
   Home e footer sul telefono
   Tutto sotto i 640px: e' un ripasso di proporzioni, non di impianto.
   Sul telefono lo stesso testo occupa il triplo dell'altezza, e quello
   che sul monitor e' respiro qui diventa scroll a vuoto.
   ================================================================ */
@media (max-width: 640px) {

  /* ----- Due famiglie di prodotto -----
     Erano quasi quadrate (86% di larghezza per 35vh d'altezza). Piu' basse
     e piu' larghe si legge il taglio orizzontale, e lo sfalsamento
     sinistra/destra che gia' c'e' sul desktop si vede davvero. */
  .twoworlds.a-fasce .world-card {
    min-height: 210px;
    width: 92%;
  }
  .twoworlds.a-fasce .world-content { padding: 20px; }
  .twoworlds.a-fasce .world-content h3 { font-size: 1.68rem; }
  .twoworlds.a-fasce .world-desc { font-size: 15px; margin-top: 6px; }
  .twoworlds.a-fasce .world-cta { margin-top: 10px; font-size: 13px; }

  /* ----- Il catalogo delle porte -----
     Testo centrato e piu' piccolo. Il bottone passa in cima al pannello
     (order: -1) e risale con un margine negativo: si appoggia sul bordo
     basso della copertina invece di stare in fondo a tutto. Niente
     altezze fisse — l'aggancio e' il bordo della fotografia, non un
     numero che si rompe al primo testo piu' lungo. */
  /* --cover-l e' la larghezza della copertina: la usano sia la figura sia
     il bottone, che ci si centra sopra. E' l'unico numero da cambiare. */
  .catalog { gap: 0; position: relative; --cover-l: 260px; }
  .catalog-visual { width: var(--cover-l); max-width: 100%; margin-inline: auto; }
  /* il file e' 672x812: fissando il rapporto, l'altezza della copertina e'
     nota e la meta' esatta si calcola invece di indovinarla */
  .catalog-visual img { aspect-ratio: 672 / 812; object-fit: cover; }
  .catalog-panel { display: flex; flex-direction: column; text-align: center; }
  .catalog-panel .divider { margin-inline: auto; }
  .catalog-panel h2 { font-size: 1.79rem; }
  .catalog-lead { font-size: 16px; margin-top: 14px; }
  .catalog-meta { justify-content: center; gap: 24px; margin: 20px 0 0; }
  .catalog-meta-n { font-size: 25px; }
  /* in sovraimpressione al centro della copertina: meta' altezza della
     figura, che e' la prima cosa dentro .catalog e parte da 0
     ponytail: se la copertina cambia proporzioni, si aggiorna il rapporto
     qui sopra e il centro torna giusto da solo */
  .catalog-panel .btn {
    position: absolute;
    top: calc(var(--cover-l) * 812 / 672 / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    font-size: 15px;
    padding: 12px 22px;
    box-shadow: 0 6px 20px rgba(17, 31, 46, 0.28);
  }

  /* Il riquadro del modulo: era largo 520px con 44px di padding. */
  .cat-modal { width: min(320px, calc(100 * var(--vw) - 2 * var(--pad-gutter))); }
  .cat-modal-corpo,
  .cat-modal-ok { padding: 22px 18px; }
  .cat-modal-logo { width: 44px; }
  .cat-modal h2 { font-size: 1.51rem; }
  .cat-modal-lead { font-size: 15px; }
  .cat-modal .form-field { margin-bottom: 14px; }

  /* ----- Le collezioni (sei modi di trattare la superficie) ----- */
  #collezioni .section-heading { text-align: center; }
  #collezioni .section-heading .divider { margin-inline: auto; }
  #collezioni .section-heading h2 { font-size: 1.79rem; }
  #collezioni .section-heading .lead { font-size: 16px; }
  /* justify-self: end lo tiene a destra: in una colonna sola va centrato */
  #collezioni .link-freccia { justify-self: center; font-size: 15px; }
  #collezioni .section-heading { margin-bottom: 24px; }
  .striscia-carta { flex-basis: 210px; }
  .striscia-foto { margin-bottom: 12px; }
  .striscia-nome { font-size: 1.23rem; }
  .striscia-modelli { font-size: 13px; margin-top: 6px; }

  /* ----- Chi ci commissiona un lavoro -----
     Sul desktop la fotografia sale al passaggio del cursore. Sul telefono
     il cursore non esiste: la fotografia resta ferma sotto la card e non
     la vede nessuno. Qui sta su da subito, col testo gia' in chiaro. */
  .comm-sfondo { transform: none; }
  .comm-card { min-height: 200px; border-color: transparent; padding: 20px; }
  .comm-testo h3 { font-size: 1.34rem; margin-bottom: 6px; color: var(--white); }
  .comm-testo p { font-size: 15px; color: var(--on-dark-70); }

  /* ----- Parliamo del tuo progetto -----
     Vale ovunque compaia: e' la stessa sezione su tutte e 17 le pagine. */
  .cta-final { padding: 26px var(--pad-gutter); }
  .cta-final h2 { font-size: 1.46rem; margin-bottom: 8px; }
  .cta-final p.lead { font-size: 15px; margin-bottom: 14px; }
  .cta-contatti { font-size: 15px; }
  .cta-split { gap: 18px; }
  .form-dark .form-field { margin-bottom: 10px; gap: 4px; }
  /* Nome ed Email stanno su una riga sola: sono due campi corti e messi in
     colonna allungavano il modulo senza guadagnare leggibilita'. La regola
     che li impilava sotto i 640px sta piu' su nel file, quindi va ridetta. */
  .form-dark .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .form-dark .form-row label { font-size: 11px; letter-spacing: 0.04em; }
  .form-dark .form-row input { font-size: 15px; }
  .form-dark input,
  .form-dark textarea { padding: 9px 0; font-size: 16px; }
  .form-dark textarea { min-height: 62px; }
  .form-dark .btn { padding: 11px 22px; font-size: 15px; }

  /* ----- Footer -----
     Era alto piu' di uno schermo: 100px di padding, 60 di gap e 80 di
     stacco prima della riga finale. Le tre colonne stanno in due, il
     marchio si rimpicciolisce, e il blocco sta in una schermata. */
  .footer { padding: 14px var(--pad-gutter) 8px; }
  .footer-grid { gap: 6px 14px; margin-bottom: 8px; }
  .footer-logo-img { height: 22px; }
  /* il pay-off sparisce: e' la stessa frase dell'apertura del sito, e qui
     costava due righe piene su tre colonne di link */
  .footer-tagline { display: none; }
  .footer h3 { font-size: 10px; margin-bottom: 2px; }
  /* 3px sopra e sotto: il link arriva a 24px, il minimo per il dito */
  .footer a { padding: 3px 0; font-size: 12px; line-height: 18px; }
  .footer-address { font-size: 12px; line-height: 1.35; margin-top: 4px; }
  .footer-social-icone { margin-top: 6px; }
  .footer .social-icona { width: 24px; height: 24px; border-radius: 6px; }
  .footer .social-icona svg { width: 12px; height: 12px; }
  .footer-bottom { padding-top: 7px; gap: 2px; font-size: 10px; }
  .footer-social { gap: 10px; }

  /* ----- Pagina prodotti -----
     Le tre fasce restano attaccate, come da desktop: niente stacco chiaro
     fra l'una e l'altra (richiesta di Simone, 17/10/2026). */
  .prod-fascia-foto { aspect-ratio: 16 / 10; }
  .prod-fascia-testo { padding: 18px 20px 22px; gap: 8px; }
  .prod-fascia-testo :is(h1, h2) { font-size: 1.51rem; }
  .prod-fascia-desc { font-size: 15px; max-width: none; }
  .prod-fascia-elenco { font-size: 13px; line-height: 1.5; max-width: none; }
  .prod-fascia-cta { margin-top: 4px; font-size: 12px; }
  .prod-fascia-cta::after { width: 20px; }

  /* ----- Pagina porte: le righe delle collezioni -----
     La fotografia d'apertura resta com'e'. Qui sotto cambiano solo le
     proporzioni del testo.
     I riquadri coi nomi dei modelli (Biscuit, Diviso, Barcode...) spariscono:
     su una colonna sola andavano a capo in due o tre file di etichette
     maiuscole da 11px, piu' ingombranti dei nomi che contenevano. I nomi
     restano nella pagina della collezione, a un tocco di distanza. */
  .riga-coll { padding: 26px 0; gap: 16px; }
  .riga-coll-num { font-size: 12px; margin-bottom: 8px; }
  .riga-coll h3 { font-size: 1.68rem; margin-bottom: 10px; }
  .riga-coll p { font-size: 15px; max-width: none; }
  .riga-coll .btn { margin-top: 28px; padding: 11px 20px; font-size: 15px; }

  /* ----- Pagine delle collezioni -----
     Le tavole dei campioni (finiture, tessuti, vetri, palette) stavano a due
     per riga: con minmax(150px) su 350px di larghezza utile non ce ne
     entrano di piu'. Qui le colonne sono cinque dichiarate, non dedotte:
     la richiesta e' cinque in riga, e un numero fisso la garantisce a
     qualsiasi larghezza invece di sperare nel calcolo. */
  .finiture-assaggio,
  .fin-griglia,
  .tavola,
  .campioni {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 6px;
  }
  /* "River Collection, i tracciati" e "I decori, anta singola" usano la
     variante .disegni, piu' specifica: restavano a due per riga con i
     disegni alti 325px. Sono ante intere, quindi verticali: quattro per
     riga invece di cinque, se no la fila diventa una striscia altissima. */
  .fin-griglia.disegni { grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
  .fin-griglia.disegni .fin-voce img { padding: 4px; }
  /* I binari: a cinque per riga "Controsoffitto" non ci stava e la tavola
     usciva dallo schermo. Tre per riga, e una parola lunga va a capo. */
  .tavola { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tavola .tav-nome { overflow-wrap: anywhere; }
  .fin-voce figcaption,
  .tav-voce figcaption { margin-top: 4px; font-size: 11px; line-height: 1.25; }
  .fin-gruppo { margin-top: 26px; }
  .fin-gruppo:first-child { margin-top: 18px; }
  .fin-gruppo > h3 { margin-bottom: 12px; padding-bottom: 6px; }
  .finiture-assaggio { margin-bottom: 26px; }

  /* la colour palette dentro ogni decoro: stessa logica, campioni piccoli */
  .decoro-palette { margin-top: 16px; }
  .decoro-palette ul { gap: 12px 14px; }
  .decoro-palette li { min-width: 0; }
  .decoro-palette li img { width: 46px; height: 46px; margin-bottom: 5px; }
  .decoro-palette .nome { font-size: 11px; }

  /* ----- Un solo corpo per il testo corrente -----
     Sulle pagine collezione convivevano tre misure diverse: l'apertura a
     13px, l'introduzione di sezione a 17 e la descrizione dei decori a 14.
     Non era voluto: le regole .pagina-prodotto (0,2,x) sono piu' specifiche
     di quelle che avevo scritto io e vincevano senza darlo a vedere.
     Qui ci si riallinea tutto a 13px, con selettori di pari specificita'
     che arrivano dopo. Le didascalie tecniche restano piu' piccole: sono
     note di catalogo, non descrizioni. */
  .pagina-prodotto .lead,
  .pagina-prodotto .decoro p,
  .pagina-prodotto .section-heading p,
  .coll-apertura-testo .lead,
  .coll-intro .lead,
  .glass-hero .lead { font-size: 15px; }

  /* Le quattro pagine degli arredamenti in gres (tavoli, lavabi, top
     cucina, navale) portavano il testo a 17px e l'attacco in corsivo a 21:
     stesso ruolo, corpo diverso da quello delle collezioni. Qui si
     allineano a 13px. Il corsivo resta corsivo, nel carattere del display e
     in blu: si distingue per stile, non per dimensione. */
  .concept-col p,
  .concept-col li { font-size: 15px; }
  .concept-col .list-plain { margin: 10px 0; }
  .concept-col .list-plain li { margin-bottom: 6px; padding-left: 18px; }
  .concept-col .lead-italic { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
  .concept-col p + p { margin-top: 12px; }
  .concetto-fascia { padding: 26px 0; }
  .concetto-fascia .concept-col > * + * { margin-top: 12px; }
  .mat-slide figcaption { font-size: 12px; }

  /* ----- Pagina sistemi di chiusura -----
     Ogni card ha due immagini sovrapposte: la tavola tecnica, visibile, e la
     fotografia vera, che sul desktop prende il suo posto al passaggio del
     cursore. Sul telefono il cursore non c'e', quindi la fotografia non si
     vedeva mai. Qui si invertono: davanti sta la fotografia. */
  .sistemi-sez .sistema-foto img.sistema-scatto { opacity: 1; }
  .sistemi-sez .sistema-foto img:not(.sistema-scatto) { opacity: 0; }
  .sistemi-sez .sistema-foto { margin-bottom: 14px; }
  .sistemi { gap: 28px; }
  .sistema h3 { font-size: 1.57rem; margin-bottom: 6px; }
  .sistema-sub { font-size: 12px; }
  .sistema-elenco { font-size: 13px; line-height: 1.5; }
  .sistemi-sez .sistema-cta { font-size: 13px; padding: 10px 18px; bottom: 14px; }

  /* ----- Pagina chi siamo -----
     Lo scorrimento laterale: i 13 elementi con [data-entra] entrano
     traslati di 56px verso destra. Durante quel tratto sporgono oltre il
     bordo e il telefono lascia trascinare la pagina. Sul desktop non si
     vede perche' la finestra e' piu' larga del contenuto.
     La cura non e' tappare l'overflow ma togliere lo spostamento
     orizzontale: qui entrano dal basso, stessa animazione delle altre
     schede del sito. */
  [data-entra] { animation-name: entra-dal-basso; }

  .chi-testo p,
  .chi-testo li,
  .chi-missione,
  .chi-testo .lead { font-size: 15px; line-height: 1.55; }
  .chi-testo > * + * { margin-top: 14px; }
  .chi-missione { padding-left: 14px; border-left-width: 2px; }
  .chi-split { gap: 20px; }

  /* le due certificazioni affiancate */
  .cert-griglia { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .cert-card { border-radius: 12px; }
  .cert-inner { padding: 14px 12px; }
  .cert-inner h3 { font-size: 1.12rem; margin-bottom: 8px; }
  .cert-inner p { font-size: 12px; line-height: 1.45; }
  .cert-logo { max-width: 90px; }

  /* la prima schermata di chi siamo: stesso corpo del resto */
  .chi-apertura .chi-logo { height: 48px; margin-bottom: 14px; }
  .chi-apertura h1 { font-size: 2.13rem; }
  .chi-hero-payoff { font-size: 15px; margin-top: 10px; }

  /* ----- Pagina contatti -----
     Tutto centrato e ridotto ancora. Le etichette dei campi restano a
     sinistra sopra il loro campo: centrate su un campo il cui testo si
     scrive da sinistra sembrerebbero fuori asse. */
  .ct-info,
  .ct-info :is(h1, h2),
  .ct-info .lead,
  .ct-orari,
  .ct-consenso { text-align: center; }
  .ct-info :is(h1, h2) { font-size: 1.4rem; max-width: none; margin-bottom: 10px; }
  .ct-info .lead { font-size: 13px; max-width: none; margin-bottom: 16px; }
  .ct-voci { gap: 8px; margin-inline: auto; }
  .ct-voce { padding: 10px; gap: 10px; justify-content: center; }
  .ct-voce .etichetta { font-size: 11px; margin-bottom: 2px; }
  .ct-voce .valore { font-size: 15px; }
  .ct-voce .valore small { font-size: 12px; }
  .ct-icona { width: 30px; height: 30px; border-radius: 0; }
  .ct-icona svg { width: 15px; height: 15px; }
  .ct-orari { margin-top: 14px; padding-top: 10px; font-size: 12px; max-width: none; }
  .ct-consenso { font-size: 12px; justify-content: center; }
  .ct-split { gap: 18px; }
  .ct-scheda { padding: 16px 14px; text-align: center; }
  .ct-scheda h2, .ct-scheda h3 { font-size: 1.29rem; }
  .contact-form .form-field { gap: 3px; margin-bottom: 8px; text-align: left; }
  .contact-form .form-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .contact-form label { font-size: 11px; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select { padding: 7px 0; font-size: 15px; }
  .contact-form textarea { min-height: 54px; }
  .contact-form .btn { padding: 10px 20px; font-size: 13px; }

  .decoro h3 { margin-bottom: 10px; }
  .decoro p { max-width: none; }
  .decoro-num { font-size: 12px; margin-bottom: 8px; }
  .pagina-prodotto .decoro-scheda { margin-top: 14px; padding-top: 10px; font-size: 13px; }

  /* i titoli di sezione delle pagine interne: "I tessuti.", "Le finiture."… */
  .section-heading :is(h1, h2) { font-size: 1.79rem; }
  .section-heading p { font-size: 15px; }

  /* ----- Apertura "intera" (Pittori) -----
     Il testo va in sovraimpressione come su ogni altra collezione. Il guaio
     da evitare e' quello che si vedeva: in versione "intera" la fotografia
     non si ritaglia e tiene le sue proporzioni, cioe' 390x260 sul telefono —
     dentro non ci stanno occhiello, titolo e cinquanta parole, che ne
     chiedono almeno 350. Il testo sbordava e .coll-apertura ha
     overflow: hidden, quindi veniva tagliato.
     Qui sotto i 640px l'apertura torna a comportarsi come le altre: la
     fotografia si ritaglia e riempie l'altezza dello schermo. Lo spazio per
     il testo c'e' sempre, qualunque sia la sua lunghezza, e la sovrapposizione
     resta. */
  header.coll-apertura.intera {
    display: flex;
    align-items: flex-end;
    min-height: calc(100 * var(--vh));
  }
  header.coll-apertura.intera .coll-apertura-media { position: absolute; inset: 0; }
  header.coll-apertura.intera .coll-apertura-media img { height: 100%; object-fit: cover; }
  header.coll-apertura.intera .coll-apertura-testo {
    position: relative;
    top: auto;
    bottom: auto;
    height: auto;
    max-width: none;
  }
  .coll-apertura-testo h1 { font-size: 2.13rem; margin-bottom: 10px; }
  .coll-apertura-testo .lead { font-size: 15px; }
  .coll-apertura-testo .micro { margin-bottom: 8px; }
  .coll-apertura-didascalia { margin-top: 12px; font-size: 12px; }
}

/* ----- Home: le due famiglie affiancate, quadrate -----
   Tornano una accanto all altra (.pari) e quadrate. Il testo e spento e si
   accende al passaggio del cursore; su touch, dove l hover non c e, resta acceso.
   Il punto di fuoco di ogni fotografia sta nell HTML (object-position inline):
   in un quadrato il taglio cambia, e per le foto verticali il centro geometrico
   non e il soggetto. */
.twoworlds.quadrate .world-card { aspect-ratio: 1; min-height: 0; }
.twoworlds.quadrate .world-content { padding: clamp(24px, calc(3 * var(--vw)), 44px); }
.twoworlds.quadrate .world-content h3 { font-size: clamp(1.6rem, calc(2.3 * var(--vw)), 2.25rem); }
.twoworlds.quadrate .world-desc { margin-top: 8px; font-size: var(--fs-sm); }
/* Lo stesso velo dell apertura delle collezioni (.coll-apertura::before):
   sale dall angolo in basso a sinistra, dove sta il testo, e al passaggio
   del cursore si infittisce. Il testo e gia leggibile da fermo. */
.twoworlds.quadrate .world-card::after {
  /* piu fitto e piu alto di quello delle collezioni: qui le foto scorrono,
     e una foto chiara che arriva non deve mangiarsi il testo */
  background: linear-gradient(15deg,
    rgba(11, 22, 34, 0.96) 0%, rgba(11, 22, 34, 0.86) 34%, rgba(11, 22, 34, 0.5) 58%, rgba(11, 22, 34, 0) 82%);
  opacity: 0.7;
  transition: opacity 700ms var(--ease-editorial);
  /* sopra le foto: la foto accesa (.fam-foto.on) ha z-index 2 e il velo
     senza z-index le finiva sotto, cioe spariva proprio quando serviva */
  z-index: 3;
}
.twoworlds.quadrate .world-content { z-index: 4; }
.twoworlds.quadrate .world-card:hover::after,
.twoworlds.quadrate .world-card:focus-visible::after { opacity: 1; }
.twoworlds.quadrate .world-content h3 { text-shadow: 0 2px 24px rgba(11, 22, 34, 0.5); }
@media (hover: hover) {
  .twoworlds.quadrate .world-content > * {
    opacity: 0.85;
    transition: opacity 500ms var(--ease-editorial);
  }
  .twoworlds.quadrate .world-card:hover .world-content > *,
  .twoworlds.quadrate .world-card:focus-visible .world-content > * { opacity: 1; }
}
/* tre famiglie: porte, gres, navale. Sotto i 900px una per riga. */
.twoworlds.tre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .twoworlds.tre { grid-template-columns: 1fr; } }

/* ----- Chi siamo: la striscia dell officina -----
   Sostituisce il collage. Foto tutte alte uguali, a spigolo vivo e attaccate,
   velate di scuro; quella sotto il cursore si accende, il nastro non si ferma.
   Il fondo e quello di .bg-deep, messo nell HTML: stesso blu della sezione
   sopra, nessuno stacco. */
.lab-striscia {
  padding: clamp(28px, calc(4 * var(--vw)), 56px) 0;
  overflow: hidden;
}
.lab-nastro, .lab-copia { display: flex; width: max-content; }
.lab-nastro { animation: lab-scorre 70s linear infinite; }
.lab-nastro img {
  display: block;
  height: clamp(220px, calc(26 * var(--vw)), 380px);
  width: auto;
  border-radius: 0;
  filter: brightness(0.55);
  transition: filter 400ms var(--ease-editorial);
}
.lab-nastro img:hover { filter: none; }
@keyframes lab-scorre { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lab-striscia { overflow-x: auto; }
  .lab-nastro { animation: none; }
  .lab-copia { display: none; }
}

/* ================================================================
   PRIVACY E COOKIE — nota sotto i form, mappa su richiesta, banner,
   pagine legali
   ================================================================ */
.form-nota { font-size: var(--fs-xs); color: var(--ink-70); margin: 0 0 var(--s4); }
.form-nota a { color: inherit; text-decoration: underline; }
.form-dark .form-nota { color: var(--on-dark-70); }

.mappa-consenso {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); padding: var(--s5);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-70);
  background: var(--mist);
}
.mappa-consenso p { max-width: 40ch; }

.cookie-banner {
  position: fixed; z-index: 1000;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 460px;
  padding: var(--s5);
  background: var(--white); color: var(--ink);
  border: var(--rule); box-shadow: var(--shadow-modal);
  font-size: var(--fs-sm);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 var(--s5) var(--s4) 0; color: var(--ink-70); }
.cookie-banner a, .cookie-banner summary { color: inherit; text-decoration: underline; cursor: pointer; }
.cookie-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; padding: 4px;
  font-size: 22px; line-height: 1; color: var(--ink-70); cursor: pointer;
}
.cookie-banner details { margin-bottom: var(--s4); }
.cookie-banner summary { margin-bottom: var(--s3); }
.cookie-banner label { display: flex; gap: 10px; align-items: center; margin-bottom: var(--s2); }
.cookie-banner input { width: 16px; height: 16px; accent-color: var(--blue); }
.cookie-banner details .btn { margin-top: var(--s2); }
.cookie-bottoni { display: flex; gap: var(--s3); }
.cookie-bottoni .btn { flex: 1; }  /* stesso peso ad Accetta e Rifiuta */

.footer-social button {
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: var(--tracking-micro); text-transform: uppercase;
}

.testo-legale { padding-bottom: var(--pad-section); }
.testo-legale .container { max-width: 760px; }
.testo-legale h1 { font-size: var(--fs-xl); margin: var(--s3) 0; }
.testo-legale h2 { font-size: var(--fs-md); margin: var(--s7) 0 var(--s3); }
.testo-legale h3 { font-size: var(--fs-base); margin: var(--s5) 0 var(--s2); }
.testo-legale p, .testo-legale li { color: var(--ink-70); line-height: 1.6; margin-bottom: var(--s3); }
.testo-legale ul { padding-left: 1.2em; margin-bottom: var(--s4); }
.testo-legale a:not(.btn) { color: var(--blue); text-decoration: underline; }
.legale-sotto { font-size: var(--fs-sm); }
.legale-tabella { overflow-x: auto; margin: var(--s4) 0; }
.legale-tabella table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legale-tabella th, .legale-tabella td { text-align: left; padding: 10px 12px 10px 0; border-bottom: var(--rule); vertical-align: top; }