/* =========================================================
   08 How we work together (Figma 292:539) — white section, rounded 60px
   ========================================================= */
.hww { border-radius: 60px; }

/* ---------- header ---------- */
.hww__title { max-width: 708px; }
.hww__body  { max-width: 628px; margin-top: 14px; }

/* ---------- cards ---------- */
.hww__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.hww__card {
  /* per-card fluted image params (Figma px), overridden per modifier below */
  --img-w: 1385.8px; --img-h: 1108.9px; --img-x: -390px; --img-y: -26px; --img-step: 19.6px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 580px; padding: 32px 32px 28px;
  border-radius: 24px; background: var(--black); color: var(--white);
}
.hww__card--fractional { --img-w: 1492.4px; --img-h: 1194.2px; --img-x: -336px; --img-y: -336px; --img-step: 19.6px; }
.hww__card--advisory   { --img-w: 1172.6px; --img-h: 938.3px;  --img-x: -440px; --img-y: -88px;  --img-step: 25.2px; }

/* lift on hover — extra specificity so it wins over .reveal.is-in { transform: none } */
.hww .hww__card {
  transition: opacity .8s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.hww .hww__card:hover,
.hww .hww__card:focus-within { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); }

/* fluted glass: 16 vertical strips, each showing a blurred, progressively offset slice of the same image */
.hww__flutes { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--black); }
.hww__flutes span {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--i) * 6.25%); width: 6.25%;
  overflow: hidden;
}
.hww__flutes span::before {
  content: ""; position: absolute;
  left: calc(var(--img-x) - var(--i) * var(--img-step));
  top: var(--img-y);
  width: var(--img-w); height: var(--img-h);
  background: url("../../assets/08-how-we-work/fluted-source.jpg") center / cover no-repeat;
  filter: blur(4px);
  transition: transform .9s var(--ease);
  will-change: transform;
}
.hww__flutes span:nth-child(even)::before { top: calc(var(--img-y) + 8px); }
.hww__flutes span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%, rgba(255,255,255,.05) 100%);
}
/* bottom fade so copy sits on solid black */
.hww__flutes::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 32%, rgba(0,0,0,.9) 60%, #000 100%);
}
/* hover: the image slides behind the flutes, so the refraction shimmers */
.hww__card:hover .hww__flutes span::before { transform: translate3d(-24px, -10px, 0); }
.hww__card:hover .hww__flutes span:nth-child(even)::before { transform: translate3d(-30px, -10px, 0); }

/* tag pill */
.hww__tag {
  display: inline-flex; align-items: center; height: 36px; padding: 0 15.5px;
  border-radius: 999px; background: rgba(255,255,255,.14);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  font-size: 15px; line-height: 1; letter-spacing: -0.02em; color: var(--white); white-space: nowrap;
}
.hww__tag--active { background: linear-gradient(90deg, var(--blue-2), var(--blue-1)); color: var(--black); }

/* copy */
.hww__content { margin-top: auto; padding-top: 48px; width: 100%; max-width: 384px; }
.hww__card-title { color: var(--white); }
.hww__price { margin-top: 6px;  font-size: 16px; line-height: 1;   color: rgba(255,255,255,.8); }
.hww__desc  { margin-top: 10px; font-size: 16px; line-height: 1.3; color: rgba(255,255,255,.65); }
.hww__price + .hww__desc { margin-top: 13px; }
.hww__note  { margin-top: 16px; font-size: 13px; line-height: 1.3; letter-spacing: -0.02em; color: var(--w-45); }

.hww__btn { height: 36px; padding: 0 13px 0 16px; gap: 8px; margin-top: 24px; margin-bottom: 4px; }
.hww__btn img { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.hww__btn:hover img { transform: translateX(3px); }

/* ---------- tablet: stack ---------- */
@media (max-width: 1100px) {
  .hww { border-radius: 40px; }
  .hww__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 48px; }
  .hww__card { min-height: 520px; }
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .hww { border-radius: 28px; }
  .hww__card { min-height: 500px; padding: 24px 24px 24px; border-radius: 20px; }
  .hww__content { padding-top: 40px; }
}