/* ════════════════════════════════════════════════
   iobé Design Lab — Main CSS
   Design system estratto dalla landing VOGUE
   ════════════════════════════════════════════════ */

/* ── FONTS (self-hosted) ── */
@font-face { font-family:'Verlag'; src:url('../fonts/Verlag-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:block; }
@font-face { font-family:'Verlag'; src:url('../fonts/Verlag-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:block; }
@font-face { font-family:'Verlag'; src:url('../fonts/Verlag-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:block; }
@font-face { font-family:'Verlag'; src:url('../fonts/Verlag-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:block; }
@font-face { font-family:'MinionPro'; src:url('../fonts/MinionPro-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:block; }

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

/* ── DESIGN TOKENS ── */
:root {
  --black:   #050505;
  --white:   #f5f2ee;
  --dim:     #a09890;
  --faint:   #2e2c28;
  --accent:  #d4b896;

  --font-display: 'Verlag', sans-serif;
  --font-body:    'Verlag', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --radius: 2px;
  --transition: 0.3s ease;
  --nav-h: 72px;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ── SCROLL BAR ── */
.scroll-bar {
  position: fixed; top:0; left:0; height:2px; width:0%;
  background: var(--white); z-index:200; pointer-events:none;
  transition: width .1s linear;
}


/* ════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════ */
.site-nav {
  position: fixed; top:0; left:0; right:0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 60px);
  z-index: 100;
  background: linear-gradient(to bottom, rgba(5,5,5,.85) 0%, transparent 100%);
  backdrop-filter: blur(0px);
  transition: background .4s ease, backdrop-filter .4s ease;
}
.site-nav.scrolled {
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(12px);
}

.nav-logo { display:flex; align-items:center; }
.nav-logo-img { height: 44px; width: auto; }

.nav-right { display:flex; align-items:center; gap: clamp(20px,2.5vw,40px); }

/* wp_nav_menu genera <ul class="nav-links"> */
.nav-links { display:flex; gap: clamp(20px,2.5vw,40px); list-style:none; }
.nav-links a,
.nav-link {
  font-family: var(--font-display); font-weight:400;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(245,242,238,.55); transition: color .25s;
}
.nav-links a:hover, .nav-link:hover { color: var(--white); }

.nav-hamburger { display:none; }

/* Drawer mobile */
.nav-drawer {
  display:none; position:fixed; inset:0; background:var(--black);
  z-index:99; flex-direction:column; align-items:center;
  justify-content:center; gap:36px;
}
.nav-drawer.open { display:flex; }
.drawer-links { list-style:none; text-align:center; display:flex; flex-direction:column; gap:28px; }
.drawer-links a {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,5vw,36px); letter-spacing:-.01em;
  color: rgba(245,242,238,.7);
}
.drawer-links a:hover { color: var(--white); }


/* ════════════════════════════════════════════════
   HERO (front-page) — identico a index.html
   ════════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh; min-height: 700px;
  overflow: hidden;
  background: #000; /* pure black — match esatto col nero dell'immagine prodotto */
}

/* Grain texture */
.hero-grain {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: .038;
  mix-blend-mode: screen;
}

/* Warm ambient glow behind product */
.hero-glow {
  position: absolute;
  top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  width: 85vw; height: 65vw;
  max-width: 1100px; max-height: 850px;
  background: radial-gradient(ellipse at center,
    rgba(215,190,155,.12) 0%,
    rgba(190,160,120,.05) 35%,
    transparent 70%);
  pointer-events: none; z-index: 1;
  opacity: 0;
  animation:
    glowBurst 3s cubic-bezier(.22,1,.3,1) .2s forwards,
    glowPulse 7s ease-in-out 3.6s infinite;
}

/* Bottom vignette */
.hero-vignette {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(to top,
    rgba(5,5,5,.95) 0%,
    rgba(5,5,5,.35) 55%,
    transparent 100%);
  z-index: 20; pointer-events: none;
}
/* Top vignette */
.hero-vignette-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to bottom,
    rgba(5,5,5,.7) 0%,
    transparent 100%);
  z-index: 20; pointer-events: none;
}


/* Product — above the ghost VOGUE */
.hero-product {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.hero-product img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0;
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 50% 50%,
    black 28%, rgba(0,0,0,.88) 52%, rgba(0,0,0,.38) 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 74% at 50% 50%,
    black 28%, rgba(0,0,0,.88) 52%, rgba(0,0,0,.38) 76%, transparent 100%);
  animation: productReveal 2.4s cubic-bezier(.22,1,.36,1) .45s both;
}
/* Desktop/mobile image switch */
.hero-product .hero-img-mobile { display: none !important; }
@media (max-width: 900px) {
  .hero-product .hero-img-mobile { display: block !important; }
  .hero-product .hero-img-desktop { display: none !important; }
}
/* Fallback: se non c'è immagine mobile, desktop resta visibile (no .hero-img-mobile nel DOM) */

/* Top label — collection info, top-left */
.hero-label-tl {
  position: absolute;
  top: calc(var(--nav-h) + 24px); left: clamp(24px,4vw,60px);
  z-index: 30;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(245,242,238,.3);
}

/* Thin rule */
.hero-rule {
  position: absolute;
  top: calc(var(--nav-h) + 52px); left: clamp(24px,4vw,60px);
  width: 28px; height: 1px;
  background: rgba(245,242,238,.12);
  z-index: 30;
}

/* Top-right: VOGUE payoff — stile brochure */
.hero-payoff-block {
  position: absolute;
  top: calc(var(--nav-h) + 10px); right: clamp(24px,4vw,60px);
  z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end;
}
.hero-payoff-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(72px, 10vw, 180px);
  line-height: .85;
  letter-spacing: -.035em; text-transform: uppercase;
  color: var(--white);
}
.hero-payoff-line {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px;
}
.hero-payoff-rule {
  display: block;
  width: 48px; height: 1px;
  background: var(--white);
  flex-shrink: 0;
}
.hero-payoff-sub {
  font-family: var(--font-body); font-style: normal;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: 1.3;
  color: var(--white); letter-spacing: .01em;
  white-space: nowrap;
}

/* Salone del Mobile — alto sinistra sotto label */
.hero-salone {
  position: absolute;
  top: calc(var(--nav-h) + 64px); left: clamp(24px,4vw,60px);
  z-index: 30;
}
.hero-salone-logo {
  height: 120px; width: auto;
  opacity: .55;
  transition: opacity .3s ease;
}
.hero-salone:hover .hero-salone-logo { opacity: .85; }

/* Bottom-left: captions */
.hero-captions {
  position: absolute;
  bottom: clamp(40px,6vh,80px); left: clamp(24px,4vw,60px);
  z-index: 30; max-width: 320px;
}
.hero-caption-item { margin-bottom: 18px; }
.hero-caption-item:last-child { margin-bottom: 0; }
.caption-title {
  font-size: 13px; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(245,242,238,.45); margin-bottom: 6px;
}
.caption-title span { color: rgba(245,242,238,.6); }
.caption-body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.6;
  color: rgba(245,242,238,.3);
}

/* Bottom-right: brand */
.hero-brand {
  position: absolute;
  bottom: clamp(40px,6vh,80px); right: clamp(24px,4vw,60px);
  z-index: 30;
  display: flex; align-items: center; gap: 14px;
}
.hero-brand-logo { height: 36px; width: auto; opacity: .85; }
.hero-per {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,242,238,.28);
}
.hero-zamagna { height: 33px; opacity: .72; }

/* Bottom-center: scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: clamp(36px,5vh,64px); left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll-label {
  font-size: 8px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(245,242,238,.2);
}
.hero-scroll-track {
  width: 1px; height: 44px; background: rgba(245,242,238,.08);
  border-radius: .5px; overflow: hidden;
}
.hero-scroll-bar {
  width: 100%; height: 40%;
  background: rgba(245,242,238,.25);
  animation: scrollPulse 2.4s ease-in-out infinite;
}

/* Right edge: vertical credit */
.hero-vertical-credit {
  position: absolute;
  right: 10px; top: 50%;
  z-index: 30;
  writing-mode: vertical-rl;
  font-size: 8px; letter-spacing: .14em;
  color: rgba(245,242,238,.12);
  transform: translateY(-50%);
}

/* Hero keyframes */
@keyframes productReveal {
  0%   { opacity:0; filter:blur(7px); }
  100% { opacity:1; filter:blur(0px); }
}
@keyframes vogueReveal {
  0%   { transform:scale(1.14); letter-spacing:-.058em; }
  100% { transform:scale(1);    letter-spacing:-.04em; }
}
@keyframes glowBurst {
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.6); }
  55% { opacity:1; transform:translate(-50%,-50%) scale(1.04); }
  100%{ opacity:.7;transform:translate(-50%,-50%) scale(1); }
}
@keyframes glowPulse {
  0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:.88;transform:translate(-50%,-50%) scale(1.07); }
}
@keyframes scrollPulse {
  0%   { transform:translateY(-100%); opacity:0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateY(200%);  opacity:0; }
}
@keyframes fadeIn { to { opacity:1; } }


/* ════════════════════════════════════════════════
   ANIMATE ON SCROLL
   ════════════════════════════════════════════════ */
.rv {
  opacity:0; transform:translateY(28px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.rv.on { opacity:1; transform:translateY(0); }
.rv-d1 { transition-delay:.1s; }
.rv-d2 { transition-delay:.22s; }
.rv-d3 { transition-delay:.34s; }

.rv-clip {
  opacity:0;
  clip-path: polygon(0 105%, 100% 105%, 100% 105%, 0 105%);
  transition: clip-path 1.5s cubic-bezier(.16,1,.3,1), opacity 0s .02s;
}
.rv-clip.on { opacity:1; clip-path:polygon(0 0,100% 0,100% 105%,0 105%); }
.rv-clip-d1 { transition-delay:.06s; }
.rv-clip-d2 { transition-delay:.2s; }


/* ════════════════════════════════════════════════
   § SEGNO — Titolo grande sx, testo dx
   ════════════════════════════════════════════════ */
#segno {
  padding: clamp(80px,10vw,140px) clamp(32px,5vw,90px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px); align-items:start;
  border-top:1px solid var(--faint);
}
.segno-left {}
.segno-headline {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(52px,7.5vw,112px);
  line-height:.95; letter-spacing:-.025em; color:var(--white);
}
.segno-right { padding-top:12px; }
.segno-body {
  font-family:var(--font-body);
  font-size:clamp(17px,1.35vw,21px); line-height:2; color:var(--dim);
}
.segno-body p { margin-bottom:22px; }
.segno-body p:last-child { margin-bottom:0; }
.segno-body strong { color:var(--white); font-family:var(--font-display); font-weight:400; font-style:normal; font-size:.9em; letter-spacing:.02em; }
.segno-statement {
  margin-top:40px; padding-top:32px;
  border-top:1px solid var(--faint);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(10px,0.96vw,13px); letter-spacing:.04em;
  line-height:1.6; color:var(--white); text-transform:uppercase;
  white-space:pre-line;
}


/* ════════════════════════════════════════════════
   § INTERIOR — foto fullscreen con citazione
   ════════════════════════════════════════════════ */
#interior {
  position:relative; height:100vh; overflow:hidden;
}
.int-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  transform:scale(1.05);
  transition:transform 2s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
#interior.revealed .int-img { transform:scale(1); }

.int-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(5,5,5,.85) 0%, rgba(5,5,5,.4) 45%, transparent 70%);
}
.int-text {
  position:absolute; left:clamp(32px,6vw,90px); bottom:10vh;
  max-width:480px;
}
.int-caption-label {
  font-size:9px; font-weight:400; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:16px; display:block;
  font-family:var(--font-display);
}
.int-quote {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,3.8vw,54px); line-height:1.05;
  letter-spacing:-.02em; color:var(--white);
  opacity:0; transform:translateY(20px);
  transition:opacity 1.2s ease .1s, transform 1.2s ease .1s;
}
#interior.revealed .int-quote { opacity:1; transform:translateY(0); }
.int-attribution {
  margin-top:20px; display:flex; align-items:center; gap:14px;
  opacity:0; transition:opacity 1s ease .5s;
}
#interior.revealed .int-attribution { opacity:1; }
.int-attr-line { width:28px; height:1px; background:rgba(255,255,255,.3); flex-shrink:0; }
.int-attr-text {
  font-size:11px; font-weight:400; letter-spacing:.25em; text-transform:uppercase;
  color:var(--dim); font-family:var(--font-display);
}


/* ════════════════════════════════════════════════
   § SERIGRAFIA — immagine sx, testo dx
   ════════════════════════════════════════════════ */
#serigrafia {
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--faint); border-bottom:1px solid var(--faint);
  min-height:50vh;
}
.ser-image { position:relative; overflow:hidden; }
.ser-image img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:contrast(1.05) brightness(.9);
  will-change:transform; transform:scale(1.08);
}
.ser-text {
  padding:clamp(60px,7vw,80px) clamp(40px,7vw,100px);
  display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid var(--faint);
}
.ser-num {
  font-size:11px; font-weight:400; letter-spacing:.35em;
  color:rgba(255,255,255,.2); margin-bottom:28px;
  font-family:var(--font-display); text-transform:uppercase;
}
.ser-title {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px,4vw,58px); line-height:1;
  letter-spacing:-.02em; margin-bottom:20px;
}
.ser-dash-line { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.ser-dash      { width:24px; height:1px; background:rgba(255,255,255,.2); flex-shrink:0; }
.ser-sub       { font-family:var(--font-body); font-style:italic; font-size:20px; color:var(--dim); }
.ser-body      { font-family:var(--font-body); font-size:19px; line-height:1.9; color:var(--dim); }


/* ════════════════════════════════════════════════
   § DIREZIONE
   ════════════════════════════════════════════════ */
#direzione {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,100px);
  padding: clamp(80px,10vw,160px) clamp(32px,5vw,90px);
  background:var(--black);
}
.dir-headline {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(52px,6.5vw,110px); line-height:.95;
  letter-spacing:-.03em; display:flex; flex-direction:column; gap:.15em;
}
.dir-italic { font-style:italic; color:var(--dim); }
.dir-intro { font-family:var(--font-body); font-size:clamp(17px,1.3vw,21px); line-height:1.7; color:var(--dim); margin-bottom:32px; }
.dir-manifesto { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.dir-col { font-family:var(--font-body); font-size:clamp(15px,1.1vw,17px); color:rgba(160,152,144,.7); line-height:1.8; }


/* ════════════════════════════════════════════════
   § DESIGNERS
   ════════════════════════════════════════════════ */
#designers { position:relative; }

.des-photo-wrap { position:relative; height:90vh; overflow:hidden; }
.des-img {
  width:110%; height:110%;
  margin-left:-5%; margin-top:-5%;
  object-fit:cover; object-position:center 20%;
  filter:contrast(1.08) brightness(1.05) saturate(1.1); will-change:transform;
}
.des-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(5,5,5,.15) 30%, rgba(5,5,5,.95) 100%);
}
.des-content {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  padding: 0 clamp(32px,5vw,90px) clamp(60px,7vw,100px);
  border-top:1px solid rgba(255,255,255,.07);
  background:var(--black);
}
.des-col { padding:40px 40px 0 0; border-right:1px solid rgba(255,255,255,.07); }
.des-col:last-child { padding:40px 0 0 40px; border-right:none; }
.des-role { font-size:9px; font-weight:400; letter-spacing:.4em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.des-name { font-family:var(--font-display); font-weight:400; font-size:26px; letter-spacing:-.01em; margin-bottom:12px; }
.des-text { font-family:var(--font-body); font-size:18px; line-height:1.8; color:var(--dim); }


/* ════════════════════════════════════════════════
   § CONTATTI
   ════════════════════════════════════════════════ */
.contatti {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,100px);
  padding: clamp(80px,10vw,160px) clamp(32px,5vw,90px);
  background:var(--black);
}
.contatti--page { min-height:80vh; }

.ct-eyebrow { font-family:var(--font-display); font-size:9px; letter-spacing:.4em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; }
.ct-headline { font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4vw,64px); letter-spacing:-.025em; margin-bottom:24px; line-height:1.05; }
.ct-body { font-family:var(--font-body); font-size:clamp(16px,1.2vw,19px); color:var(--dim); line-height:1.8; margin-bottom:32px; }
.ct-contact-row { display:flex; flex-direction:column; gap:4px; margin-bottom:20px; }
.ct-contact-label { font-family:var(--font-display); font-size:9px; letter-spacing:.35em; text-transform:uppercase; color:var(--dim); }
.ct-contact-value { font-family:var(--font-body); font-size:17px; color:var(--white); transition:color var(--transition); }
.ct-contact-value:hover { color:var(--dim); }

.ct-form { display:flex; flex-direction:column; gap:32px; }
.ct-row  { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ct-field { display:flex; flex-direction:column; gap:10px; }
.ct-label { font-family:var(--font-display); font-size:9px; letter-spacing:.35em; text-transform:uppercase; color:var(--dim); }
.ct-opt   { color:rgba(160,152,144,.5); }
.ct-input {
  background:transparent; border:none; border-bottom:1px solid var(--faint);
  color:var(--white); font-family:var(--font-body); font-size:17px; padding:10px 0;
  outline:none; transition:border-color .25s; resize:none; width:100%;
}
.ct-input::placeholder { color:rgba(160,152,144,.4); }
.ct-input:focus { border-bottom-color:rgba(245,242,238,.4); }
.ct-submit { display:flex; align-items:center; gap:32px; }

.ct-btn {
  display:inline-block; padding:16px 42px;
  background:var(--white); color:var(--black);
  font-family:var(--font-display); font-size:11px; letter-spacing:.25em; text-transform:uppercase;
  border:none; cursor:pointer; transition:background .3s, color .3s, transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform; white-space:nowrap; text-align:center;
}
.ct-btn:hover { background:var(--dim); color:var(--black); }

.ct-privacy { font-family:var(--font-body); font-size:12px; color:rgba(160,152,144,.5); line-height:1.6; max-width:28ch; }
.ct-success { padding:32px 0; }
.ct-success p { font-family:var(--font-body); font-style:italic; font-size:20px; color:var(--dim); }


/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
.site-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(32px,4vw,60px) clamp(32px,5vw,90px);
  border-top:1px solid var(--faint);
  background:var(--black);
}
.ft-brand    { display:flex; align-items:center; gap:20px; }
.ft-logo-img { height:33px; width:auto; opacity:.7; transition:opacity var(--transition); }
.ft-logo-img:hover { opacity:1; }
.ft-per      { font-family:var(--font-display); font-size:10px; letter-spacing:.3em; color:var(--faint); }
.ft-zamagna  { height:24px; width:auto; opacity:.5; transition:opacity var(--transition); }
.ft-zamagna:hover { opacity:.8; }
.ft-right    { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.ft-nav      { display:flex; gap:24px; list-style:none; }
.ft-nav a    { font-family:var(--font-display); font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--dim); transition:color var(--transition); }
.ft-nav a:hover { color:var(--white); }
.ft-social      { display:flex; gap:16px; }
.ft-social-link { color:var(--dim); transition:color var(--transition); }
.ft-social-link:hover { color:var(--white); }
.ft-credits  { font-family:var(--font-body); font-size:15px; color:rgba(160,152,144,.45); }
.ft-copy     { font-family:var(--font-display); font-size:11px; letter-spacing:.15em; color:rgba(160,152,144,.35); }


/* ════════════════════════════════════════════════
   PAGINE INTERNE — Page Hero
   ════════════════════════════════════════════════ */
.page-hero {
  position:relative; height:70vh; min-height:480px;
  overflow:hidden; display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,6vw,90px);
  padding-left:clamp(32px,5vw,90px);
  padding-right:clamp(32px,5vw,90px);
}
.page-hero-bg { position:absolute; inset:0; }
.page-hero-img,
.page-hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.55); }
.page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,5,5,.88) 0%, transparent 60%);
}
.page-hero-content { position:relative; z-index:2; max-width:800px; }
.page-eyebrow { font-family:var(--font-display); font-size:9px; letter-spacing:.4em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; }
.page-hero-title { font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4.5vw,72px); letter-spacing:-.025em; line-height:1.05; margin-bottom:20px; }
.page-hero-sub { font-family:var(--font-body); font-size:clamp(16px,1.3vw,20px); color:var(--dim); }


/* ════════════════════════════════════════════════
   COLLEZIONE
   ════════════════════════════════════════════════ */
.prodotti { padding: clamp(80px,10vw,140px) clamp(32px,5vw,90px); background:var(--black); }
.prodotti-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:60px 40px; }
.prodotto-card { display:flex; flex-direction:column; gap:28px; }
.prodotto-img-wrap { aspect-ratio:4/3; overflow:hidden; background:var(--faint); }
.prodotto-img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.prodotto-card:hover .prodotto-img { transform:scale(1.04); }
.prodotto-img-placeholder { width:100%; height:100%; background:var(--faint); }
.prodotto-categoria { font-family:var(--font-display); font-size:9px; letter-spacing:.35em; text-transform:uppercase; color:var(--dim); }
.prodotto-nome { font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2vw,32px); letter-spacing:-.015em; margin-top:8px; }
.prodotto-desc { font-family:var(--font-body); font-size:16px; color:var(--dim); line-height:1.75; margin-top:8px; }
.prodotto-cta { font-family:var(--font-display); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--white); margin-top:12px; opacity:.55; transition:opacity var(--transition); }
.prodotto-cta:hover { opacity:1; }
.prodotti-placeholder { text-align:center; padding:120px 0; display:flex; flex-direction:column; align-items:center; gap:32px; }
.placeholder-label { font-family:var(--font-display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

.page-cta {
  text-align:center;
  padding: clamp(80px,10vw,140px) clamp(32px,5vw,90px);
  background:var(--black); border-top:1px solid var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.page-cta-title { font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4vw,60px); letter-spacing:-.025em; }
.page-cta-sub   { font-family:var(--font-body); font-size:clamp(16px,1.3vw,20px); color:var(--dim); }


/* ════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════ */
.about-manifesto { padding:clamp(80px,10vw,160px) clamp(32px,5vw,90px); background:var(--black); }
.about-manifesto-inner { max-width:900px; }
.about-manifesto-title { font-family:var(--font-display); font-weight:400; font-size:clamp(36px,4.5vw,72px); letter-spacing:-.025em; margin-bottom:40px; line-height:1.05; }
.about-manifesto-body { font-family:var(--font-body); font-size:clamp(17px,1.3vw,21px); color:var(--dim); line-height:1.85; display:flex; flex-direction:column; gap:20px; }

.about-valori { padding:clamp(60px,8vw,120px) clamp(32px,5vw,90px); background:var(--black); border-top:1px solid var(--faint); }
.about-valori-eyebrow { font-family:var(--font-display); font-size:9px; letter-spacing:.4em; text-transform:uppercase; color:var(--dim); margin-bottom:48px; }
.about-valori-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.about-valore-num { font-family:var(--font-display); font-size:9px; letter-spacing:.3em; color:var(--faint); margin-bottom:20px; }
.about-valore-titolo { font-family:var(--font-display); font-weight:400; font-size:clamp(20px,2vw,30px); letter-spacing:-.01em; margin-bottom:16px; }
.about-valore-testo { font-family:var(--font-body); font-size:16px; color:var(--dim); line-height:1.8; }

.about-founders { display:grid; grid-template-columns:1fr 1fr; min-height:70vh; }
.about-founders-img-wrap { position:relative; overflow:hidden; }
.about-founders-img { width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.about-founders-content { padding:clamp(60px,7vw,120px) clamp(32px,5vw,80px); display:flex; flex-direction:column; gap:0; background:var(--black); justify-content:center; }
.about-founder { padding:40px 0; }
.about-founder--border { border-top:1px solid var(--faint); }


/* ════════════════════════════════════════════════
   RESPONSIVE — Tablet (max 900px)
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-logo-img { height:36px; }
  .nav-right .nav-links { display:none; }
  .nav-hamburger {
    display:flex; flex-direction:column; gap:6px; background:none; border:none;
    cursor:pointer; padding:8px;
  }
  .nav-hamburger span { display:block; width:22px; height:1px; background:var(--white); transition:transform .3s; }

  /* Hero — mobile: madia full-bleed + VOGUE grande dietro, tagliato ai lati */
  #hero { overflow: hidden; }

  .hero-product img {
    width: 100%; height: 100%; max-height: none;
    object-fit: cover; object-position: center 42%;
    -webkit-mask-image: none; mask-image: none;
  }

  .hero-vogue-wrap {
    bottom: auto; top: 50%; left: 50%;
    transform: translate(-50%, -65%);
    width: max-content;
  }
  .hero-vogue {
    font-size: 30vw;
    -webkit-text-stroke: 1.2px rgba(245,242,238,.14);
  }

  .hero-label-tl  { display: none; }
  .hero-rule      { display: none; }
  .hero-captions  { display: none; }
  .hero-vertical-credit { display: none; }
  .hero-payoff-block {
    top: calc(var(--nav-h) + 10px); right: 5vw;
  }
  .hero-payoff-title { font-size: clamp(50px, 14vw, 100px); }
  .hero-payoff-sub   { font-size: clamp(17px, 4.2vw, 26px); }
  .hero-payoff-rule  { width: 42px; }

  .hero-salone {
    top: auto; left: 5vw;
    bottom: calc(clamp(36px,5vh,64px) - 10px);
  }
  .hero-salone-logo  { height: 33px; }
  .hero-brand { bottom: 5vh; }
  .hero-brand-logo { height: 28px; }
  .hero-zamagna   { height: 26px; }
  .hero-per       { font-size: 9px; }
  .hero-scroll    { bottom: 5vh; }

  /* Segno */
  #segno { grid-template-columns:1fr; gap:40px; padding:80px 5vw 60px; }
  .segno-body { font-size:clamp(16px,2.5vw,20px); }

  /* Interior */
  #interior .int-quote { font-size:clamp(24px,5vw,44px); }
  #interior .int-text  { left:5vw; right:5vw; }

  /* Serigrafia */
  #serigrafia { grid-template-columns:1fr; }
  .ser-image  { height:56vw; }
  .ser-text   { border-left:none; border-top:1px solid var(--faint); padding:48px 5vw; }

  /* Direzione */
  #direzione { grid-template-columns:1fr; gap:40px; padding:90px 5vw; }
  .dir-headline { font-size:clamp(52px,10vw,110px); }
  .dir-manifesto { grid-template-columns:1fr; gap:20px; }

  /* Designers */
  .des-photo-wrap { height:85vh; }
  .des-img { transform: scale(1.2); }
  .des-content { grid-template-columns:1fr; }
  .des-col { border-right:none; padding:28px 0 0; border-top:1px solid rgba(255,255,255,.07); }
  .des-col:last-child { padding:28px 0 0; }

  /* Contatti */
  .contatti { grid-template-columns:1fr; gap:48px; padding:80px 5vw; }
  .ct-row  { grid-template-columns:1fr; }

  /* Page hero */
  .page-hero { height:55vh; }

  /* About */
  .about-valori-grid { grid-template-columns:1fr; gap:32px; }
  .about-founders { grid-template-columns:1fr; }
  .about-founders-img-wrap { height:56vw; }

  /* Footer */
  .site-footer { flex-direction:column; gap:28px; align-items:flex-start; }
  .ft-right { align-items:flex-start; }
}


/* ════════════════════════════════════════════════
   RESPONSIVE — Mobile (max 600px)
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Hero — small mobile */
  .hero-vogue { font-size: 32vw; }
  .hero-brand { gap: 8px; bottom: 4vh; right: 5vw; }
  .hero-brand-logo { height: 24px; }
  .hero-zamagna    { height: 22px; }
  .hero-scroll { bottom: 4vh; }

  /* Segno mobile — titoli ridotti, body leggibile */
  #segno { grid-template-columns:1fr; padding:60px 5vw 48px; gap:28px; }
  .segno-headline { font-size:clamp(34px,9vw,52px); }
  .segno-body     { font-size:17px; line-height:1.85; }
  .segno-statement { font-size:10px; }

  /* Interior mobile */
  #interior { height:80vh; }
  #interior .int-quote { font-size:clamp(22px,6vw,34px); }
  #interior .int-text  { left:5vw; right:5vw; bottom:8vh; }
  .int-caption-label   { font-size:10px; }
  .int-attr-text       { font-size:10px; }

  /* Serigrafia mobile */
  .ser-image { height:70vw; }
  .ser-title { font-size:clamp(26px,7vw,40px); }
  .ser-body  { font-size:17px; line-height:1.85; }
  .ser-sub   { font-size:17px; }
  .ser-text  { padding:40px 5vw; }

  /* Direzione mobile */
  #direzione { grid-template-columns:1fr; padding:60px 5vw; gap:28px; }
  .dir-headline { font-size:clamp(38px,10vw,60px); }
  .dir-intro    { font-size:17px; line-height:1.85; }
  .dir-manifesto { grid-template-columns:1fr; gap:18px; }
  .dir-col      { font-size:16px; }

  /* Designers — layout verticale */
  #designers .des-photo-wrap { height:70vh; overflow:hidden; }
  #designers .des-img {
    width:100%; height:100%;
    object-fit:cover; object-position:center 30%;
    transform: scale(1.3);
  }
  #designers .des-overlay { display:none; }
  #designers .des-content {
    position:static; padding:44px 5vw 52px;
    background:var(--black); border-top:1px solid rgba(255,255,255,.07);
    grid-template-columns:1fr;
  }
  #designers .des-col,
  #designers .des-col:last-child { padding:28px 0 0; border-right:none; border-top:1px solid rgba(255,255,255,.07); }
  #designers .des-col:first-child { border-top:none; padding-top:0; }
  .des-name  { font-size:22px; }
  .des-text  { font-size:17px; line-height:1.85; }
  .des-role  { font-size:10px; }

  /* Contatti mobile */
  .ct-headline { font-size:clamp(28px,7vw,40px); }
  .ct-body     { font-size:17px; }
  .ct-eyebrow  { font-size:10px; }
  .ct-label    { font-size:10px; }
  .ct-submit   { flex-direction:column; align-items:flex-start; gap:18px; }
  .ct-btn      { width:100%; text-align:center; }
  .ct-input, .ct-field input, .ct-field textarea { font-size:16px; } /* iOS no-zoom */

  /* Footer mobile */
  footer, .site-footer { flex-direction:column; gap:28px; padding:36px 5vw; }
  .ft-right { align-items:flex-start; }
  .ft-logo-img { height:26px; }
  .ft-credits  { font-size:14px; }
  .ft-copy     { font-size:10px; }

  /* Parallax off */
  .ser-image img, .des-img { will-change:auto; transform:none !important; }

  /* Pagine interne */
  .prodotti-grid { grid-template-columns:1fr; }
}