.lens-card::before,
.audience-card::before { z-index: 0; }

.lens-card > *,
.audience-card > * { position: relative; z-index: 1; }

.lens-card::after,
.audience-card::after { z-index: 2; }

.steps li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  transition: transform 500ms cubic-bezier(.2,.65,.25,1);
}

.steps li::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  transform: translateX(18%);
  transition: opacity 560ms ease, transform 700ms cubic-bezier(.2,.65,.25,1);
}

.steps li:nth-child(1)::before { background: linear-gradient(90deg, transparent 15%, rgba(231, 200, 196, .55)); }
.steps li:nth-child(2)::before { background: linear-gradient(90deg, transparent 15%, rgba(200, 216, 215, .55)); }
.steps li:nth-child(3)::before { background: linear-gradient(90deg, transparent 15%, rgba(232, 213, 190, .58)); }

.steps li > * { position: relative; z-index: 1; transition: transform 500ms cubic-bezier(.2,.65,.25,1); }
.steps li:hover,
.steps li:focus-visible,
.steps li.is-active { transform: translateX(12px); outline: none; }
.steps li:hover::before,
.steps li:focus-visible::before,
.steps li.is-active::before { opacity: 1; transform: translateX(0); }
.steps li:hover > *,
.steps li:focus-visible > *,
.steps li.is-active > * { transform: translateX(7px); }

@media (max-width: 760px) {
  .steps li { cursor: default; }
  .steps li:hover { transform: none; }
  .steps li:hover > * { transform: none; }
}

.step-icon {
  display: flex;
  width: 48px;
  height: 48px;
  margin: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: #a87861;
}

.step-icon svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.steps li:nth-child(1) .step-icon { color: #a87861; }
.steps li:nth-child(2) .step-icon { color: #a18a73; }
.steps li:nth-child(3) .step-icon { color: #7e9295; }

@media (max-width: 760px) {
  .step-icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .step-icon svg { width: 38px; height: 38px; }
}

.step-icon {
  position:relative;
  isolation:isolate;
  width: 76px;
  height: 76px;
  margin-bottom: 21px;
  background:
    radial-gradient(circle at 27% 23%, rgba(255, 246, 221, .38), transparent 31%),
    radial-gradient(circle at 70% 74%, rgba(110, 96, 87, .25), transparent 58%),
    linear-gradient(145deg, #c0b5a6, #aaa197);
  box-shadow: inset 0 0 23px rgba(77, 73, 67, .10), 0 12px 27px rgba(111, 94, 83, .12);
  color: #ecd39b;
}

.step-icon::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-24px;
  background:
    radial-gradient(circle at 36% 38%, rgba(244, 222, 179, .37), transparent 40%),
    radial-gradient(circle at 70% 64%, rgba(210, 190, 179, .31), transparent 46%);
  filter:blur(18px);
  opacity:.88;
}

.step-icon::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(ellipse 65% 50% at 42% 36%, rgba(255, 243, 216, .16), transparent 72%);
  mix-blend-mode:screen;
  pointer-events:none;
}

.step-icon svg {
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  opacity:.80;
  filter:drop-shadow(0 0 10px rgba(255, 229, 171, .38)) saturate(.74) blur(.08px);
}
.steps li:nth-child(1) .step-icon,
.steps li:nth-child(2) .step-icon,
.steps li:nth-child(3) .step-icon { color: #ecd39b; }

@media (max-width: 760px) {
  .step-icon { width: 62px; height: 62px; margin-bottom: 16px; }
  .step-icon svg { width: 47px; height: 47px; }
}

.steps h3 { font-size: 34px; }
.steps p { max-width: 640px; font-size: 16px; line-height: 1.78; }

@media (max-width: 760px) {
  .steps h3 { font-size: 29px; }
  .steps p { font-size: 15px; }
}

.bio-opening { display:grid; grid-template-columns:.72fr 1.15fr; gap:10vw; padding-bottom:82px; border-bottom:1px solid rgba(70, 89, 99, .18); }
.bio-opening h2 { margin:0; }
.bio-lead { max-width:610px; margin:8px 0 0; color:#465963; font-family:var(--serif); font-size:clamp(24px,2.4vw,34px); line-height:1.3; letter-spacing:-.025em; }
.bio-narrative { display:grid; grid-template-columns:1.08fr .7fr; gap:10vw; padding:96px 0 110px; }
.bio-chapter { max-width:680px; }
.bio-index { margin:0 0 28px; color:#7d888d!important; font-size:10px!important; font-family:var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.bio-image-space { min-height:520px; position:relative; overflow:hidden; background:linear-gradient(145deg, rgba(235, 209, 205, .6), rgba(205, 216, 216, .56)); }
.bio-image-space::before { content:""; position:absolute; width:115%; height:70%; left:-32%; bottom:-18%; border:1px solid rgba(70, 89, 99, .24); border-radius:50%; transform:rotate(-18deg); }
.bio-image-space::after { content:""; position:absolute; inset:15% 18%; border-left:1px solid rgba(70, 89, 99, .28); transform:rotate(28deg); }
.bio-image-space span { position:absolute; width:10px; height:10px; top:23%; right:18%; border-radius:50%; background:#d9b58b; }
.bio-today { display:grid; grid-template-columns:.72fr 1.15fr; gap:10vw; padding-top:82px; border-top:1px solid rgba(70, 89, 99, .18); }
.bio-today h3 { margin:0; color:#465963; font-family:var(--serif); font-size:clamp(31px,3.3vw,48px); line-height:1.03; letter-spacing:-.04em; }

.bio-image-space {
  margin:0;
  background:#d4c6bc;
}
.bio-image-space::before {
  inset:0;
  width:auto;
  height:auto;
  left:0;
  bottom:auto;
  border:0;
  border-radius:0;
  transform:none;
  background:linear-gradient(145deg, rgba(244, 232, 220, .22), transparent 55%, rgba(79, 91, 94, .10));
  z-index:1;
  pointer-events:none;
}
.bio-image-space::after { display:none; }
.bio-image-space img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 52%;
  filter:saturate(.68) contrast(.91) brightness(1.04);
}

@media (max-width:760px) {
  .bio-opening,.bio-narrative,.bio-today { grid-template-columns:1fr; gap:35px; }
  .bio-opening { padding-bottom:58px; }
  .bio-narrative { padding:66px 0 72px; }
  .bio-image-space { min-height:260px; }
  .bio-today { padding-top:58px; }
}

/* Segni editoriali: parole-soglia e linee d'orizzonte, volutamente rare. */
.intro,
.analysis-section,
.journey,
.approach { position:relative; overflow:hidden; }

.intro > :not(.editorial-word),
.analysis-section > :not(.editorial-word),
.journey > :not(.editorial-word),
.approach > :not(.editorial-word) { position:relative; z-index:1; }

.editorial-word {
  position:absolute;
  z-index:0;
  display:block;
  color:rgba(58, 77, 89, .075);
  font-family:var(--serif);
  font-size:clamp(88px, 10.5vw, 170px);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.78;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.editorial-word::after {
  content:"";
  position:absolute;
  top:54%;
  left:6%;
  width:130%;
  border-top:1px solid rgba(65, 86, 94, .18);
}

.editorial-word--ascolto { top:45%; right:5%; }
.approach .editorial-word--trasformazione {
  position:relative;
  top:auto;
  right:auto;
  height:138px;
  margin:34px 0 0;
  color:rgba(160, 102, 107, .075);
  font-size:clamp(78px, 8.5vw, 138px);
  text-align:right;
}
.approach .quote-right { margin-top:12px; }
.editorial-word--orizzonte { top:22%; right:4%; color:rgba(103, 121, 111, .085); }

@media (max-width:760px) {
  .editorial-word { font-size:clamp(54px, 17vw, 74px); opacity:.72; }
  .editorial-word--ascolto { top:48%; right:3%; }
  .approach .editorial-word--trasformazione { height:74px; margin-top:27px; font-size:clamp(42px, 12vw, 58px); }
  .editorial-word--orizzonte { top:19%; right:2%; }
}

/* La feritoia come controcampo: un'immagine verticale accanto alla lettura. */
.approach-layout {
  grid-template-columns:minmax(0, 1.08fr) minmax(300px, .72fr);
  gap:clamp(52px, 8vw, 126px);
  align-items:stretch;
}
.approach-layout .aperture {
  position:relative;
  isolation:isolate;
  inset:auto;
  z-index:1;
  width:100%;
  min-height:100%;
  margin:0;
  opacity:1;
  border-radius:0;
  background:#f3e5e1;
}
.approach-layout .aperture::before {
  z-index:2;
  background:linear-gradient(180deg, rgba(252, 239, 235, .22), rgba(234, 205, 204, .18));
}
.approach-layout .aperture::after {
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  inset:-22px;
  background:linear-gradient(145deg, rgba(250, 225, 220, .68), rgba(190, 211, 216, .44)), url("assets/images/soglia-mare.jpg") center 58% / cover no-repeat;
  background-blend-mode:screen;
  filter:saturate(.72) brightness(1.3) contrast(.62) blur(20px);
  transform:scale(1.08);
  opacity:.78;
}
.approach-layout .aperture img {
  position:relative;
  z-index:1;
  object-position:center 58%;
  filter:saturate(.43) brightness(1.12) contrast(.79);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite:intersect;
}

@media (max-width:760px) {
  .approach-layout { grid-template-columns:1fr; gap:42px; }
  .approach-layout .aperture {
    min-height:330px;
    order:-1;
  }
  .approach-layout .aperture img {
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}

/* Immagine pulita: la dissolvenza CSS alterava troppo le tonalità della fotografia. */
.approach-layout .aperture { background:#d5c7be; }
.approach-layout .aperture::before {
  background:linear-gradient(180deg, rgba(248, 235, 231, .12), rgba(61, 84, 98, .10));
}
.approach-layout .aperture::after { display:none; }
.approach-layout .aperture img {
  -webkit-mask-image:none;
  mask-image:none;
  filter:saturate(.43) brightness(1.12) contrast(.79);
}

/* Tre immagini-simbolo per rendere la sezione “Per chi” più presente e leggibile. */
.audience .cards { gap:26px; align-items:stretch; }
.audience-card {
  min-height:390px!important;
  padding:34px 32px 36px!important;
}
.audience-icon {
  display:block;
  width:100%;
  height:132px;
  margin:0 0 31px;
  overflow:hidden;
  background:#aaa099;
  box-shadow:inset 0 0 26px rgba(69, 62, 58, .12);
}
.audience-icon svg {
  display:block;
  width:100%;
  height:100%;
}
.audience-icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.74) contrast(.9) brightness(1.05);
}
.audience-card h3 { margin-top:0; }

@media (max-width:760px) {
  .audience-card { min-height:0!important; padding:29px 25px 32px!important; }
  .audience-icon { height:118px; margin-bottom:27px; }
}

/* Tre immagini-simbolo per “Perché si chiama così?”. */
.analysis-section .three-columns {
  gap:24px;
  border-top:0;
}
.analysis-section .lens-card {
  min-height:408px;
  margin-right:0;
  padding:30px 29px 34px!important;
  border:1px solid rgba(154, 124, 121, .23)!important;
  background:rgba(255, 250, 247, .48);
}
.lens-icon {
  display:block;
  width:100%;
  height:124px;
  margin:0 0 28px;
  overflow:hidden;
  box-shadow:inset 0 0 25px rgba(62, 68, 70, .13);
}
.lens-icon svg { display:block; width:100%; height:100%; }
.lens-card h4 { margin-top:0; }

@media (max-width:760px) {
  .analysis-section .three-columns { gap:0; border-top:1px solid #ddc9c3; }
  .analysis-section .lens-card {
    min-height:0;
    padding:29px 25px 32px!important;
    border:0!important;
    border-bottom:1px solid #ddc9c3!important;
    background:transparent;
  }
  .analysis-section .lens-card:last-child { border-bottom:0!important; }
  .lens-icon { height:114px; margin-bottom:26px; }
}