/* Fashion Manufacture — feuille de style v4 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #eadadd;
}
body {
  overflow-x: hidden;
}
.page {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.page-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  image-rendering: auto;
}
.hotspot {
  position: absolute;
  display: block;
  z-index: 5;
  background: transparent;
  border: 0;
  text-decoration: none;
}
.hotspot:focus-visible {
  outline: 2px solid rgba(120, 70, 85, .55);
  outline-offset: 2px;
}
/* Common navigation hotspots, expressed in percentages so they scale with the image */
.hs-home-logo { left: 2.3%; top: 1.7%; width: 28%; height: 8.5%; }
.hs-chi-siamo { left: 37.0%; top: 2.1%; width: 6.8%; height: 5.5%; }
.hs-competenze { left: 46.1%; top: 2.1%; width: 7.8%; height: 5.5%; }
.hs-processo { left: 54.2%; top: 2.1%; width: 6.5%; height: 5.5%; }
.hs-tecnologie { left: 61.4%; top: 2.1%; width: 7.7%; height: 5.5%; }
.hs-produzione { left: 69.6%; top: 2.1%; width: 7.7%; height: 5.5%; }
.hs-contatti { left: 78.6%; top: 2.1%; width: 6.5%; height: 5.5%; }
.hs-contact-top { left: 87.3%; top: 2.0%; width: 10.2%; height: 6.4%; }
.hs-phone { left: 38.0%; top: 91.2%; width: 12.5%; height: 7.4%; }
.hs-email { left: 50.5%; top: 91.2%; width: 17.0%; height: 7.4%; }
/* Sequential calls-to-action */
.hs-cta-home { left: 3.2%; top: 50.4%; width: 15.2%; height: 4.7%; }
.hs-cta-competenze { left: 3.0%; top: 39.6%; width: 14.8%; height: 4.6%; }
.hs-cta-tecnologie { left: 3.2%; top: 38.5%; width: 15.3%; height: 4.9%; }
/* Page 4: Thierry Bruno card */
.hs-thierry-bruno { left: 3.7%; top: 38.2%; width: 22.2%; height: 37.4%; }
@media (max-width: 700px) {
  /* Preserve the complete artwork on mobile; no cover/cropping. */
  .page-image { width: 100%; height: auto; object-fit: contain; }
}

/* Technologie: real browser text replaces the small rasterised captions. */
.page-tecnologie,
.page-competenze,
.page-produzione,
.page-marchi,
.page-home {
  --ink: #303137;
  --rose: #955f70;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}
.real-nav {
  position: absolute;
  z-index: 7;
  left: 36.5%;
  top: 0;
  width: 63.5%;
  height: 9.5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1%;
  padding: 0 3.4% 0 1.2%;
  background: rgba(216, 202, 206, .99);
}
.real-nav a {
  color: #343238;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, .82vw, 16px);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.real-nav a.active {
  color: var(--rose);
  border-bottom: 1px solid var(--rose);
  padding-bottom: .9em;
  margin-bottom: -.9em;
}
.real-nav .contact-button {
  border: 1px solid #a77a87;
  color: var(--rose);
  padding: 1.15em 2.25em;
}
.tech-intro {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 9.45%;
  width: 36.55%;
  height: 34.25%;
  box-sizing: border-box;
  padding: 1.9% 3.25%;
  background: rgba(224, 213, 217, .99);
}
.tech-intro h1 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(28px, 3vw, 58px)/.98 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}
.tech-intro .short-rule {
  display: block;
  width: 2.1em;
  height: 1px;
  margin: 1.25em 0 1.05em;
  background: var(--rose);
}
.tech-intro h2 {
  margin: 0 0 .65em;
  color: var(--rose);
  font: 400 clamp(12px, 1.15vw, 22px)/1.25 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}
.tech-intro p {
  margin: 0;
  font-size: clamp(11px, .84vw, 16px);
  line-height: 1.48;
}
.tech-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 13em;
  margin-top: 1.1em;
  padding: .8em 1.15em;
  background: #9b6475;
  color: white;
  font: 400 clamp(10px, .72vw, 14px)/1 Georgia, "Times New Roman", serif;
  text-decoration: none;
  text-transform: uppercase;
}
.tech-card-copy,
.tech-benefit-copy {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  overflow: hidden;
}
.tech-card-copy {
  top: 58.55%;
  height: 8.65%;
  padding: .65% .35%;
  background: rgba(228, 218, 221, .99);
}
.tech-card-copy h3,
.tech-benefit-copy h3 {
  margin: 0 0 .5em;
  color: var(--rose);
  font: 400 clamp(12px, .9vw, 17px)/1.08 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}
.tech-card-copy p,
.tech-benefit-copy p {
  margin: 0;
  color: #313136;
  font-size: clamp(11px, .76vw, 14px);
  line-height: 1.32;
}
.card-copy-1 { left: 5.95%; width: 13.35%; }
.card-copy-2 { left: 22.55%; width: 10.2%; }
.card-copy-3 { left: 36.35%; width: 13.65%; }
.card-copy-4 { left: 53.05%; width: 12%; }
.card-copy-5 { left: 68.35%; width: 11.65%; }
.card-copy-6 { left: 83.55%; width: 13.2%; }
.tech-benefit-copy {
  top: 82.4%;
  height: 9.2%;
  padding: .4% .3%;
  background: rgba(226, 214, 218, .99);
}
.benefit-copy-1 { left: 11.35%; width: 14.2%; }
.benefit-copy-2 { left: 33.55%; width: 14.1%; }
.benefit-copy-3 { left: 55.65%; width: 13.7%; }
.benefit-copy-4 { left: 77.75%; width: 14.2%; }

/* Home: live, larger typography while preserving the original art direction. */
.page-home .real-nav {
  left: 36.4%;
  width: 63.6%;
  height: 11.4%;
}
.home-intro {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 11.35%;
  width: 40.3%;
  height: 45.7%;
  box-sizing: border-box;
  padding: 1.55% 3.35%;
  background: rgba(224, 212, 216, .99);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
.home-intro h1 {
  margin: 0;
  font: 400 clamp(38px, 4.4vw, 84px)/.98 Georgia, "Times New Roman", serif;
}
.home-intro .short-rule { display: block; width: 2.1em; height: 1px; margin: .35em 0 .55em; background: var(--rose); }
.home-intro h2 { margin: 0 0 .8em; color: var(--rose); font: 400 clamp(13px, 1.18vw, 22px)/1.35 Georgia, "Times New Roman", serif; text-transform: uppercase; }
.home-intro p { margin: 0 0 .75em; font-size: clamp(12px, .92vw, 17px); line-height: 1.45; }
.home-intro strong { display: block; color: var(--rose); font: 400 clamp(11px, .82vw, 16px)/1 Georgia, "Times New Roman", serif; text-transform: uppercase; }
.home-cta { display: inline-flex; justify-content: space-between; min-width: 13em; margin-top: .8em; padding: .8em 1.15em; background: #9b6475; color: #fff; font: 400 clamp(10px, .72vw, 14px)/1 Georgia, "Times New Roman", serif; text-decoration: none; text-transform: uppercase; }
.home-card-copy,
.home-benefit-copy { position: absolute; z-index: 6; box-sizing: border-box; overflow: hidden; padding: .45% .35%; background: rgba(228, 218, 221, .99); }
.home-card-copy { top: 71.25%; height: 8.9%; }
.home-card-copy h3,
.home-benefit-copy h3 { margin: 0 0 .45em; color: var(--rose); font: 400 clamp(12px, .88vw, 17px)/1.08 Georgia, "Times New Roman", serif; text-transform: uppercase; }
.home-card-copy p,
.home-benefit-copy p { margin: 0; font-size: clamp(11px, .72vw, 14px); line-height: 1.35; }
.home-card-1 { left: 6.75%; width: 12.05%; }
.home-card-2 { left: 22.35%; width: 11.15%; }
.home-card-3 { left: 37.7%; width: 11.1%; }
.home-card-4 { left: 53.45%; width: 11.15%; }
.home-card-5 { left: 68.75%; width: 11.2%; }
.home-card-6 { left: 83.9%; width: 12.2%; }
.home-benefit-copy { top: 82.45%; height: 8.85%; background: rgba(225, 213, 217, .99); }
.home-benefit-1 { left: 9.5%; width: 11.9%; }
.home-benefit-2 { left: 27.4%; width: 13.5%; }
.home-benefit-3 { left: 48.45%; width: 12.2%; }
.home-benefit-4 { left: 67.75%; width: 12.35%; }
.home-benefit-5 { left: 85.15%; width: 11.7%; }

/* Competenze: larger live text over the seven small raster captions. */
.competence-copy {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  overflow: hidden;
  padding: .45% .45%;
  background: rgba(228, 218, 221, .99);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
.competence-copy h3 {
  margin: 0 0 .55em;
  color: var(--rose);
  font: 400 clamp(13px, .95vw, 18px)/1.08 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}
.competence-copy p {
  margin: 0;
  font-size: clamp(11px, .78vw, 15px);
  line-height: 1.35;
}
.competence-copy-1 { left: 16.7%; top: 46.2%; width: 8.4%; height: 16.8%; }
.competence-copy-2 { left: 40.2%; top: 46.2%; width: 8.3%; height: 16.8%; }
.competence-copy-3 { left: 64.2%; top: 46.2%; width: 8.3%; height: 16.8%; }
.competence-copy-4 { left: 87.9%; top: 46.2%; width: 8.9%; height: 16.8%; }
.competence-copy-5 { left: 16.7%; top: 64.2%; width: 10%; height: 15.8%; }
.competence-copy-6 { left: 59.7%; top: 64.2%; width: 9.3%; height: 15.8%; }
.competence-copy-7 { left: 87.9%; top: 64.2%; width: 9%; height: 15.8%; }
@media (max-width: 900px) {
  .real-nav a { font-size: 9px; }
  .real-nav .contact-button { padding: 1em 1.2em; }
  .tech-intro h1 { font-size: 26px; }
  .tech-intro h2 { font-size: 11px; }
  .tech-intro p { font-size: 9px; }
  .tech-cta { font-size: 8px; }
  .tech-card-copy h3, .tech-benefit-copy h3 { font-size: 8px; }
  .tech-card-copy p, .tech-benefit-copy p { font-size: 7px; }
  .competence-copy h3 { font-size: 9px; }
  .competence-copy p { font-size: 8px; }
  .home-intro h1 { font-size: 30px; }
  .home-intro h2 { font-size: 10px; }
  .home-intro p { font-size: 9px; }
  .home-card-copy h3, .home-benefit-copy h3 { font-size: 8px; }
  .home-card-copy p, .home-benefit-copy p { font-size: 7px; }
}

/* Standalone editorial pages: Processo and Produzione. */
.editorial-page {
  min-height: 100vh;
  background: #eadadd;
  color: #303137;
  font-family: Arial, Helvetica, sans-serif;
}
.editorial-header {
  height: 108px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.4%;
  background: #ddcdd1;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #333238;
  font: 400 20px/1.35 Georgia, "Times New Roman", serif;
  letter-spacing: .28em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand-monogram {
  padding-right: 20px;
  border-right: 1px solid #a9818c;
  color: #8b6872;
  font-size: 54px;
  letter-spacing: -.12em;
  text-shadow: 0 2px 3px rgba(255,255,255,.7);
}
.editorial-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 34px);
}
.editorial-nav a {
  color: #343238;
  font: 400 clamp(11px, .78vw, 15px)/1 Georgia, "Times New Roman", serif;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.editorial-nav a.active { color: #955f70; border-bottom: 1px solid #955f70; padding-bottom: 12px; margin-bottom: -12px; }
.editorial-nav .editorial-contact { border: 1px solid #a77a87; color: #955f70; padding: 16px 24px; }
.editorial-hero { position: relative; width: 100%; overflow: hidden; background: #eadadd; }
.editorial-hero > img { display: block; width: 100%; height: auto; }
.editorial-hero-copy {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.2% 4.2%;
  background: linear-gradient(90deg, rgba(235,220,223,.98) 0%, rgba(235,220,223,.94) 72%, rgba(235,220,223,0) 100%);
}
.editorial-hero-copy .eyebrow { color: #955f70; font: 400 clamp(12px, .86vw, 16px)/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; text-transform: uppercase; }
.editorial-hero-copy h1 { margin: .28em 0; font: 400 clamp(42px, 4.2vw, 82px)/.96 Georgia, "Times New Roman", serif; }
.editorial-hero-copy i { width: 52px; height: 1px; margin: .25em 0 1.15em; background: #955f70; }
.editorial-hero-copy h2 { margin: 0 0 .8em; color: #955f70; font: 400 clamp(15px, 1.12vw, 22px)/1.28 Georgia, "Times New Roman", serif; text-transform: uppercase; }
.editorial-hero-copy p { max-width: 390px; margin: 0 0 1.25em; font-size: clamp(13px, .92vw, 18px); line-height: 1.5; }
.editorial-hero-copy > a { display: inline-flex; align-self: flex-start; gap: 28px; padding: 13px 18px; background: #985f70; color: #fff; font: 400 13px/1 Georgia, "Times New Roman", serif; text-decoration: none; text-transform: uppercase; }
.process-steps,
.production-values { display: grid; background: #eee1e4; border-top: 10px solid #eadadd; }
.process-steps { grid-template-columns: repeat(6, 1fr); }
.production-values { grid-template-columns: repeat(4, 1fr); }
.process-steps article,
.production-values article { min-height: 142px; box-sizing: border-box; padding: 25px 24px; border-right: 1px solid #d2bbc1; }
.process-steps article:last-child,
.production-values article:last-child { border-right: 0; }
.process-steps span { color: #a06b79; font: 400 15px/1 Georgia, "Times New Roman", serif; }
.process-steps h3,
.production-values h3 { margin: .55em 0 .5em; color: #955f70; font: 400 clamp(14px, .95vw, 18px)/1.15 Georgia, "Times New Roman", serif; text-transform: uppercase; }
.process-steps p,
.production-values p { margin: 0; font-size: clamp(12px, .76vw, 15px); line-height: 1.42; }
.editorial-footer { min-height: 72px; display: flex; align-items: center; justify-content: space-around; gap: 25px; padding: 0 4%; border-top: 1px solid rgba(255,255,255,.65); background: #ddcdd1; font: 400 14px/1.3 Georgia, "Times New Roman", serif; }
.editorial-footer a { color: #343238; text-decoration: none; }
@media (max-width: 1000px) {
  .editorial-header { height: auto; padding: 18px 4%; align-items: flex-start; }
  .brand-lockup { font-size: 13px; }
  .brand-monogram { font-size: 38px; }
  .editorial-nav { flex-wrap: wrap; justify-content: flex-end; }
  .editorial-hero-copy { width: 42%; padding: 3%; }
  .editorial-hero-copy h1 { font-size: 42px; }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .production-values { grid-template-columns: repeat(2, 1fr); }
}