/* Selected editorial layout: one white panel with three columns. */
.portfolio-home .pf-approach{background:transparent}
.portfolio-home .pf-approach .pf-steps{background:#fff;border-color:var(--pf-line);border-radius:0;box-shadow:none}
.portfolio-home .pf-approach .pf-step{padding:28px;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:minmax(44px,auto) auto;column-gap:10px;row-gap:14px;align-content:start;background:transparent}
.portfolio-home .pf-approach .pf-step+.pf-step:before{top:28px;bottom:28px;background:var(--pf-line)}
.portfolio-home .pf-approach .pf-step h3{margin:0;align-self:center;font-size:19px;font-weight:400;line-height:1.3;max-width:none;color:#202020}
.portfolio-home .pf-approach .pf-step>p{grid-column:1/-1;margin-top:0;font-size:14px;line-height:1.85;min-height:0;margin-bottom:0}
.portfolio-home .pf-approach .pf-inline-sticker{--sticker-angle:-1.5deg;--sticker-hover-turn:3deg;display:inline-block;vertical-align:baseline;margin:1px 2px;padding:1px 6px;border:1px solid #efd1b9;border-radius:6px;background:#fff4e9;color:#a63a08;font-size:.9em;font-weight:500;line-height:1.4;white-space:nowrap;box-shadow:0 2px 0 #e8c8b4,0 3px 5px #29292908;transform:rotate(var(--sticker-angle))}
.portfolio-home .pf-approach .pf-inline-sticker--2{--sticker-angle:1.5deg;--sticker-hover-turn:-3deg}
.portfolio-home .pf-approach .pf-inline-sticker--3{--sticker-angle:-1deg;--sticker-hover-turn:2.5deg}
.portfolio-home .pf-approach-symbol{display:flex;align-items:center;align-self:center;margin-bottom:0}
.portfolio-home .pf-approach-symbol img{width:18px;height:18px;object-fit:contain;padding:10px;box-sizing:content-box;border:1px solid #e6e6e1;border-radius:8px;background:#f8f8f6;box-shadow:inset 0 1px #fff,0 3px 8px #29292906}
@media(max-width:1000px){.portfolio-home .pf-approach .pf-step{padding:22px 16px}}
@media(max-width:700px){
  .portfolio-home .pf-approach .pf-steps{grid-template-columns:1fr}
  .portfolio-home .pf-approach .pf-step{padding:24px 20px}
  .portfolio-home .pf-approach .pf-step+.pf-step:before{top:0;bottom:auto}
  .portfolio-home .pf-approach .pf-step h3{max-width:none}
}

/* Reveal the panel after 1.8 seconds, then stagger its columns. */
@keyframes home-approach-panel{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes home-approach-rise{from{opacity:0;visibility:hidden;transform:translateY(10px)}to{opacity:1;visibility:visible;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .portfolio-home .pf-approach .pf-steps{--home-approach-entry-delay:1.8s;animation:home-approach-panel .4s ease-out var(--home-approach-entry-delay) both}
  .portfolio-home .pf-approach .pf-step{animation:home-approach-rise .7s cubic-bezier(.2,.75,.25,1) calc(var(--home-approach-entry-delay,1.8s) + var(--home-card-offset,0s)) both}
  .portfolio-home .pf-approach .pf-step:nth-child(2){--home-card-offset:.12s}
  .portfolio-home .pf-approach .pf-step:nth-child(3){--home-card-offset:.24s}
}

/* Each column has its own quiet response; entrance and automatic loops stay independent. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .portfolio-home .pf-approach .pf-approach-symbol img{transition:transform .38s cubic-bezier(.2,.7,.3,1)}
  .portfolio-home .pf-approach .pf-inline-sticker{transition:transform .38s cubic-bezier(.2,.9,.3,1.25),box-shadow .3s ease}
  .portfolio-home .pf-approach .pf-step:hover .pf-inline-sticker{transform:translateY(-2px) rotate(calc(var(--sticker-angle) + var(--sticker-hover-turn))) scale(1.035);box-shadow:0 3px 0 #e8c8b4,0 5px 9px #29292912}
  .portfolio-home .pf-approach .pf-step:hover .pf-inline-sticker--2{transition-delay:55ms}
  .portfolio-home .pf-approach .pf-step:hover .pf-inline-sticker--3{transition-delay:110ms}
  .portfolio-home .pf-approach .pf-step:nth-child(1):hover .pf-approach-symbol img{transform:translate(2px,-3px) rotate(-4deg)}
  .portfolio-home .pf-approach .pf-step:nth-child(2):hover .pf-approach-symbol img{transform:translateY(-3px) scale(1.05)}
  .portfolio-home .pf-approach .pf-step:nth-child(3):hover .pf-approach-symbol img{transform:translateY(-4px) rotate(3deg)}
}