/* =========================================================
   Section 4 — Services (interactive index)
   Giant numbered rows. Hover: lime wipe, others dim, deliverables
   open, project preview follows the cursor.
   + Section 5 — Selected work (homepage portfolio, reuses work.css cards)
   ========================================================= */

.services{position:relative;padding-block:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.services__head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;padding:0 var(--margin);margin-bottom:clamp(28px,3vw,48px);align-items:end}
.services__idx{grid-column:1/-1;color:var(--acid)}
.services__title{grid-column:1/-1;font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);letter-spacing:-.04em;line-height:.92;text-transform:uppercase}
.services__meta{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;color:var(--mute-2);font-size:15px;max-width:44ch}
.services__meta .label{color:var(--paper)}
@media (min-width:900px){
	.services__idx{grid-column:1/span 2;align-self:start;padding-top:.6em}
	.services__title{grid-column:3/span 6}
	.services__meta{grid-column:9/span 4}
}

/* compact two-column index */
.svc-list{list-style:none;margin:0 var(--margin);padding:0;display:grid;grid-template-columns:1fr;column-gap:var(--gutter);border-top:1px solid var(--line-strong)}
@media (min-width:900px){.svc-list{grid-template-columns:1fr 1fr}}
.svc-row{border-bottom:1px solid var(--line)}
.svc-row__link{display:grid;grid-template-columns:32px 1fr auto 20px;column-gap:12px;align-items:center;padding:16px 0;transition:padding .5s var(--expo)}
.svc-row__i{font-family:var(--f-mono);font-size:11px;color:var(--mute-2)}
.svc-row__name{font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.35vw,21px);letter-spacing:-.015em;line-height:1.2;transition:color .3s}
.svc-row__count{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-2);white-space:nowrap}
.svc-row__ar{font-family:var(--f-mono);font-size:14px;color:var(--mute-2);justify-self:end;transition:transform .5s var(--expo),color .3s}
.svc-row__body,.svc-row__thumb{display:none}
.svc-row__link:hover,.svc-row__link:focus-visible{padding-left:8px}
.svc-row__link:hover .svc-row__name,.svc-row__link:focus-visible .svc-row__name,
.svc-row__link:hover .svc-row__ar,.svc-row__link:focus-visible .svc-row__ar{color:var(--acid)}
.svc-row__link:hover .svc-row__ar,.svc-row__link:focus-visible .svc-row__ar{transform:translate(3px,-3px)}

/* ---------- Section 5 — Selected work ---------- */
.portfolio{padding-top:clamp(72px,9vw,144px);border-top:1px solid var(--line)}
.portfolio__head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;padding:0 var(--margin);margin-bottom:clamp(28px,3vw,48px);align-items:end}
.portfolio__idx{grid-column:1/-1;color:var(--acid)}
.portfolio__title{grid-column:1/-1;font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);letter-spacing:-.04em;line-height:.92;text-transform:uppercase}
.portfolio__all{grid-column:1/-1;justify-self:start}
@media (min-width:900px){
	.portfolio__idx{grid-column:1/span 2;align-self:start;padding-top:.6em}
	.portfolio__title{grid-column:3/span 6}
	.portfolio__all{grid-column:11/span 2;justify-self:end;padding-bottom:.6em}
}
.pf-tabs .svc-tab{background:none;border:0;cursor:pointer}
.portfolio .card[hidden]{display:none}
.portfolio__foot{border-top:1px solid var(--line)}
.pf-more{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:end;padding:clamp(40px,5vw,72px) var(--margin);transition:background .5s var(--expo),color .5s var(--expo)}
.pf-more__k{grid-column:1/-1;color:var(--acid);transition:color .5s}
.pf-more__t{font-family:var(--f-display);font-weight:700;font-size:clamp(36px,6vw,112px);letter-spacing:-.055em;line-height:.9;text-transform:uppercase;text-wrap:balance}
.pf-more__ar{font-family:var(--f-display);font-size:clamp(40px,6vw,104px);line-height:.9;transition:transform .6s var(--expo)}
.pf-more:hover{background:var(--acid);color:var(--ink)}
.pf-more:hover .pf-more__k{color:var(--ink)}
.pf-more:hover .pf-more__ar{transform:translateX(12px)}

.pf-empty{display:grid;grid-template-columns:1fr;gap:16px;padding:clamp(32px,4vw,64px) var(--margin) clamp(48px,6vw,96px);align-items:end}
.pf-empty[hidden]{display:none}
.pf-empty__big{font-family:var(--f-display);font-weight:700;font-size:clamp(80px,16vw,280px);letter-spacing:-.07em;line-height:.8;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--mute)}
.pf-empty__big sup{font-size:.2em;-webkit-text-stroke:0;color:var(--acid);vertical-align:top;position:relative;top:.4em}
.pf-empty__t{color:var(--mute-2);max-width:44ch}
@media (min-width:900px){.pf-empty{grid-template-columns:2fr 1fr}}