/* home.css */
/* Page-specific styles for the Home template */

/*.home-hero {}
.home-services-overview {}
.home-cycle-preview {}
.home-why {}
.home-engagements-preview {}
.home-proof-preview {}
.home-about-preview {}*/

/* =========================================================
   HOME — WHO WE ARE
   usa tipografia globale: h2 / h3 / p
   ========================================================= */

.positioning-section {
  position: relative;
  overflow: hidden;
}

.positioning-block {
  position: relative;
  max-width: 760px;
  margin-left: auto; /* blocco spostato a destra */
  padding: clamp(1rem, 1.6vw, 1.5rem) 0;
  z-index: 2;
}

.positioning-block h2 {
  margin-bottom: 0.75rem;
}

.positioning-block h3 {
  max-width: 60ch;
  margin-bottom: 0.25rem;
}

.positioning-block p:not(.positioning-block__tagline) {
  max-width: 66ch;
}

.positioning-block__tagline {
  margin-top: 1.15rem;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 28, 40, 0.58);
}

/* eventuale area grafica futura a sinistra */
/*.positioning-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: min(42vw, 640px);
  height: 100%;
  pointer-events: none;
  z-index: 1;
}*/
.positioning-section::before {
  left: 30%;
} 

/* =========================================================
   HOME — HOW WE WORK
   usa tipografia globale: h2 / h3 / p
   ========================================================= */

.how-we-work-section {
  position: relative;
  overflow: hidden;
}

.how-we-work {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "intro"
    "split"
    "paths";
  row-gap: clamp(2rem, 2.8vw, 2.75rem);
  align-items: start;
}

.how-we-work__intro {
  grid-area: intro;
  max-width: 760px;
}

.how-we-work__intro h2 {
  margin-bottom: 0.75rem;
}

.how-we-work__intro h3 {
  margin-bottom: 0.3rem;
  max-width: 40ch;
}

.how-we-work__bridge {
  margin: 0.9rem 0 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 28, 40, 0.56);
}

.how-we-work__intro p:not(.how-we-work__bridge) {
  max-width: 60ch;
}

.how-we-work__intro strong {
  font-weight: 700;
  color: rgba(10, 22, 42, 0.98);
}

/* biforcazione */
.how-we-work__split {
  grid-area: split;
  position: relative;
  min-height: 240px;
  align-self: stretch;
}

.how-we-work__split-line {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(26, 45, 78, 0.65), rgba(120, 132, 148, 0.24));
}

.how-we-work__split-line--stem {
  top: 16px;
  left: 50%;
  width: 2px;
  height: 84px;
  transform: translateX(-50%);
}

.how-we-work__split-line--left {
  top: 100px;
  left: 50%;
  width: 135px;
  height: 2px;
  transform-origin: left center;
  transform: rotate(28deg);
}

.how-we-work__split-line--right {
  top: 100px;
  left: calc(50% - 135px);
  width: 135px;
  height: 2px;
  transform-origin: right center;
  transform: rotate(-28deg);
}

.how-we-work__split-node {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(18, 36, 64, 0.92), rgba(67, 86, 116, 0.82));
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.82),
    0 10px 22px rgba(18, 30, 52, 0.10);
}

.how-we-work__split-node--center {
  top: 92px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
}

.how-we-work__split-node--left {
  top: 158px;
  left: calc(50% - 122px);
  width: 12px;
  height: 12px;
}

.how-we-work__split-node--right {
  top: 158px;
  right: calc(50% - 122px);
  width: 12px;
  height: 12px;
}

/* cards */
.how-we-work__paths {
  grid-area: paths;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.8rem);
  align-items: start;
}

.how-we-work__path {
  position: relative;
  padding: 1.45rem 1.4rem 1.35rem;
  border: 1px solid rgba(16, 32, 56, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(250,251,253,0.94));
  box-shadow:
    0 10px 30px rgba(14, 24, 40, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.65);
  overflow: hidden;
}

.how-we-work__path::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(22, 43, 76, 0.92), rgba(121, 132, 148, 0.22));
}

.how-we-work__path h3 {
  margin-bottom: 0.65rem;
}

.how-we-work__path p {
  max-width: 52ch;
}

.how-we-work__path--focused {
  transform: translateY(10px);
}

.how-we-work__path--broader {
  transform: translateY(-4px);
}

.card-why {
  background: none;
  backdrop-filter: blur(10px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .positioning-block {
    max-width: 820px;
    margin-left: 0;
  }

  .positioning-section::before {
    display: none;
  }

  .how-we-work {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "split"
      "paths";
  }

  .how-we-work__split {
    min-height: 170px;
    /*max-width: 520px;*/
    max-width: 100%;
  }

  .how-we-work__paths {
    /*grid-template-columns: 1fr;*/
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-we-work__path--focused,
  .how-we-work__path--broader {
    transform: none;
  }
}

@media (max-width: 640px) {
  .how-we-work__split {
    min-height: 130px;
  }

  .how-we-work__split-line--stem {
    height: 56px;
  }

  .how-we-work__split-line--left {
    top: 66px;
    width: 104px;
  }

  .how-we-work__split-line--right {
    top: 66px;
    left: calc(50% - 104px);
    width: 104px;
  }

  .how-we-work__split-node--center {
    top: 56px;
  }

  .how-we-work__split-node--left,
  .how-we-work__split-node--right {
    top: 108px;
  }

  .how-we-work__split-node--left {
    left: calc(50% - 92px);
  }

  .how-we-work__split-node--right {
    right: calc(50% - 92px);
  }
}