/* PORTFOLIO (css/pages/portfolio.css): the canonical service index. */
.pf__g { position: relative; }
.pf__anchor { position: absolute; left: 0; top: calc((var(--hdr) + 120px) * -1); width: 1px; height: 1px; pointer-events: none; }
.pf__go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 600; color: var(--ink); }
.pf__go svg { width: 15px; height: 15px; }
.pf__toggle { display: none; }
.pf__name { font-size: var(--t-4); }
.pf__desc { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .pf__fig { display: none; }
  .pf__g { padding-block: 28px; gap: 16px; }
  .pf__n { font-size: 2.6rem; }
  .pf__g h2 { font-size: 1.6rem; }
  .pf__toggle { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: none; color: var(--ink); font: 600 .9375rem var(--f); cursor: pointer; }
  .pf__toggle i { position: relative; width: 12px; height: 12px; }
  .pf__toggle i::before, .pf__toggle i::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1.5px; background: currentColor; transition: transform .3s; }
  .pf__toggle i::after { transform: rotate(90deg); }
  .pf__toggle[aria-expanded="true"] i::after { transform: rotate(0); }
  .pf__g.is-folded .pf__items { display: none; }
  .pf__g.is-folded .pf__go { display: none; }
}

/* ---------- Capability rows: a green fill sweeps in under the row ---------- */
.pf__i { isolation: isolate; transition: padding .5s var(--e-out), color .3s; }
.pf__i::before { inset: 0 -18px; border-radius: 16px; background: var(--green); opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--e-out); }
.pf__i:hover::before { opacity: 1; transform: scaleX(1); }
.pf__i:hover { padding-inline: 14px 4px; }
.pf__i:hover .pf__name { color: var(--bone); }
.pf__i:hover .pf__desc { color: var(--on-night-2); }
.pf__i:hover .pf__ix { color: var(--apricot); }
.pf__desc { transition: color .3s; }
.pf__n { background: linear-gradient(180deg, var(--green), #3A7A5A 60%, var(--apricot-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf__g:nth-of-type(even) .pf__fig { transform: rotate(1.5deg); }
.pf__g:nth-of-type(odd) .pf__fig { transform: rotate(-1.5deg); }
.pf__fig { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(15, 23, 18, .5); transition: transform .8s var(--e-out); }
.pf__g:hover .pf__fig { transform: rotate(0); }
@media (hover: none) { .pf__i::before { display: none; } }