/* /services/ — hero, family index with a keycap that follows the pointer, service stories */
.phub { position: relative; overflow: clip; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem; padding: calc(var(--nav-h) + 3rem) var(--gutter) clamp(3rem, 7svh, 5rem); }
.phub .crumbs { position: absolute; top: calc(var(--nav-h) + 2rem); left: var(--gutter); }
.phub__title { position: relative; font-size: clamp(3.5rem, 13vw, 15rem); line-height: 0.86; letter-spacing: -0.07em; font-weight: 500; }
.phub__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--orange); letter-spacing: -0.03em; }
.phub__foot { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.phub__lede { max-width: 52ch; color: var(--paper-dim); font-size: clamp(1rem, 1.25vw, 1.2rem); }
.phub__count { color: var(--paper-dim); }
.phub__count span { color: var(--orange); }

.pindex { position: relative; padding: 0 var(--gutter) var(--section-y); }
.pindex__list { border-top: 1px solid var(--line); }
.pindex__row {
  position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 22rem) 2.5rem; align-items: center; gap: 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--line);
}
.pindex__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.pindex__row:hover::after, .pindex__row:focus-visible::after { transform: scaleX(1); }
.pindex__num { color: var(--paper-dim); }
.pindex__name { font-size: clamp(2rem, 5.6vw, 5.8rem); line-height: 0.95; letter-spacing: -0.055em; font-weight: 500; transition: transform 0.7s var(--ease), color 0.4s var(--ease); }
.pindex__kids { color: var(--paper-dim); line-height: 1.6; transition: color 0.4s var(--ease); }
.pindex__arrow { font-size: 1.8rem; justify-self: end; transition: transform 0.6s var(--ease), color 0.4s var(--ease); }
.pindex__row:hover .pindex__name { transform: translateX(1.25rem); color: var(--orange); }
.pindex__row:hover .pindex__kids { color: var(--paper); }
.pindex__row:hover .pindex__arrow { transform: rotate(45deg); color: var(--orange); }
.pindex__follow { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0; transform: scale(0.4); }
.pindex__cap { translate: -50% -50%; --cap: 7.5rem; }
.pindex__cap .svc__cap { box-shadow: inset 0 0 0 1px rgba(255, 176, 138, 0.6), 0 calc(var(--cap) * 0.07) 0 -1px #8a3210, 0 2rem 4rem -1rem rgba(255, 100, 40, 0.55); }
@media (hover: none), (max-width: 899px) { .pindex__follow { display: none; } }
@media (max-width: 899px) {
  .pindex__row { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; }
  .pindex__kids { grid-column: 2; grid-row: 2; }
  .pindex__arrow { grid-column: 3; grid-row: 1; }
}

.pstory { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: var(--section-y) var(--gutter); }
.pstory--flip .pstory__media { order: 2; }
.pstory__frame { overflow: hidden; border-radius: 1.25rem; aspect-ratio: 4 / 3.2; }
.pstory__frame img { width: 100%; height: 120%; object-fit: cover; }
.pstory__keys { display: grid; place-items: center; aspect-ratio: 4 / 3.2; border-radius: 1.25rem; --cap: clamp(7rem, 12vw, 11rem); background: radial-gradient(closest-side, rgba(255, 100, 40, 0.25), transparent); }
.pstory__text { margin-top: 1.25rem; color: var(--fg-dim); max-width: 56ch; line-height: 1.65; }
.pstory__copy .display-2 { max-width: 14ch; }
@media (max-width: 899px) { .pstory { grid-template-columns: 1fr; } .pstory--flip .pstory__media { order: 0; } }