/* ══════════════════════════════════════════════════════════════════
   About us page only (about-us.html). Loaded after css/style.css: rules keep
   the order they have in the design, so the cascade is the same.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Effect A — editorial reveal, image + text ---------- */
.editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100svh;align-items:stretch}
.editorial__text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s7);padding:var(--s30) var(--s24) var(--s30) var(--pad)}
.editorial__text>*{max-width:560px}
.editorial__text>.t-title,.editorial__text>.t-display{max-width:none}
.editorial__text>.t-title{font-size:clamp(40px,4.4vw,76px)}
.editorial__text p{margin:0;color:var(--grigio)}
.s-nero .editorial__text p{color:#B5B0A6}
.editorial__media{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;margin:0}
.editorial--reverse .editorial__media{order:-1}
.editorial--reverse .editorial__text{padding-left:var(--s24);padding-right:var(--pad)}
.js .editorial__media{clip-path:inset(0 0 0 100%);transition:clip-path 1.6s var(--ease)}
.js .editorial--reverse .editorial__media{clip-path:inset(0 100% 0 0)}
.js .editorial__media.is-in{clip-path:inset(0 0 0 0)}
.parallax{position:absolute;inset:-12% 0;will-change:transform}
.zoom{position:absolute;inset:0;transition:transform 2.2s var(--ease)}
.js .editorial__media .zoom{transform:scale(1.1)}
.js .editorial__media.is-in .zoom{transform:scale(1)}
.zoom>.ph{position:absolute;inset:0}

/* ---------- Effect B — arc text before the editorial section ---------- */
/* declared twice in the design with the same values: kept once */
.arc--before{padding:var(--s24) 0 0;margin-bottom:calc(-1 * var(--s12))}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(184,151,90,.45);margin-top:var(--s24)}
.value{padding:var(--s10) var(--s8) 0 0;display:flex;flex-direction:column;gap:var(--s4)}
.value+.value{border-left:1px solid rgba(184,151,90,.45);padding-left:var(--s8)}
.value h3{font:300 clamp(32px,3vw,46px)/1 var(--serif);margin:0}
.value h3 em{font-style:italic}
.value p{color:#B5B0A6;margin:0;font-size:16px}
.atelier-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(184,151,90,.5);width:100%}
.atelier-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid rgba(184,151,90,.5)}
.atelier-list span{font:italic 300 26px/1 var(--serif);color:var(--oro-testo)}
.atelier-list b{display:block;font:400 22px/1.2 var(--serif);margin-bottom:var(--s1)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .value:nth-child(3){border-left:0;padding-left:0}
  .editorial__text{padding-right:var(--s16)}
  .editorial--reverse .editorial__text{padding-left:var(--s16)}
}
@media (max-width:960px){
  .editorial{grid-template-columns:1fr;min-height:0}
  .editorial__media,.editorial--reverse .editorial__media{order:-1;min-height:78vh;min-height:78svh}
  .editorial__text,.editorial--reverse .editorial__text{padding:var(--s16) var(--pad) var(--s24)}
}
@media (max-width:760px){
  .values{grid-template-columns:1fr}
  .value+.value{border-left:0;padding-left:0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .editorial__media,.js .editorial--reverse .editorial__media{clip-path:none!important;opacity:0;transition:opacity 1s ease!important}
  .js .editorial__media.is-in{opacity:1}
  .zoom,.js .editorial__media .zoom{transform:none!important}
}

/* ---------- Former inline styles (last, so they win as the inline styles did) ---------- */
.values__head{display:flex;flex-direction:column;gap:var(--s6);max-width:760px}