/* Home page — signature components */

/* Hero slant motif (echoes the parallelogram logo) */
.hero__slant {
  position: absolute; top: 0; right: -8%; bottom: 0; width: 46%;
  background: linear-gradient(120deg, transparent 0%, rgba(63,139,148,.16) 40%, rgba(63,139,148,.05) 100%);
  transform: skewX(-14deg); transform-origin: top right;
  pointer-events: none;
}
.hero__slant::after {
  content: ""; position: absolute; top: 0; left: 40%; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(195,227,227,.35), transparent);
}

/* Method deconstruction visual */
.method-visual {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 44px 36px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.method-visual__one {
  display: inline-block; background: var(--ink); color: #fff;
  font-weight: 600; font-size: .92rem; padding: 12px 26px; border-radius: var(--radius);
  transform: skewX(-12deg);
}
.method-visual__one { position: relative; }
.method-visual__fan {
  display: flex; gap: 10px; height: 96px; align-items: flex-start; justify-content: center;
  padding: 4px 0;
}
.method-visual__fan span {
  display: block; width: 2px; background: var(--teal); border-radius: 2px;
  transform-origin: top center; opacity: .8;
}
.method-visual__fan span:nth-child(1) { height: 88px; transform: rotate(-24deg); }
.method-visual__fan span:nth-child(2) { height: 92px; transform: rotate(-12deg); }
.method-visual__fan span:nth-child(3) { height: 96px; transform: rotate(0deg); }
.method-visual__fan span:nth-child(4) { height: 92px; transform: rotate(12deg); }
.method-visual__fan span:nth-child(5) { height: 88px; transform: rotate(24deg); }
.method-visual__row {
  background: var(--teal-wash); color: var(--ink); font-size: .92rem;
  padding: 12px 26px; border-radius: var(--radius); transform: skewX(-12deg);
}
.method-visual__row b { color: var(--teal-deep); font-family: var(--serif); font-size: 1.25rem; }

/* Carrier wall */
.carrier-wall {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px;
}
.carrier-wall span {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink);
  padding: 18px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; min-width: 150px; text-align: center; letter-spacing: .01em;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.carrier-wall span:hover { border-color: var(--teal); color: var(--teal-deep); }