/* ===== services-compact.css — #services as a short orientation beat before Selected Work ===== */
.services-sec{padding:clamp(72px,10vh,120px) 0 clamp(64px,9vh,110px)}
/* header: smaller, two-column, one line of intent */
.services-sec .sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,64px);align-items:end;margin-bottom:clamp(32px,5vh,56px)}
.services-sec .sec-head .kick{grid-column:1/-1}
.services-sec .sec-head h2{margin:0;font-size:clamp(30px,3.2vw,54px);line-height:1;letter-spacing:-.03em;max-width:16ch}
.services-sec .sec-head .svc-link{justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:10px;margin:0 0 .35em;padding-bottom:6px;border-bottom:1px solid rgba(245,245,240,.28);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color 400ms var(--ease),border-color 400ms var(--ease)}
.services-sec .sec-head .svc-link i{font-style:normal;display:inline-block;transition:transform 500ms var(--ease)}
.services-sec .sec-head .svc-link:hover{color:var(--ink);border-color:var(--ink)}.services-sec .sec-head .svc-link:hover i{transform:translateX(5px)}
/* cards: half the height, image as a band, one sentence each */
.services-sec .outs{gap:clamp(14px,1.4vw,22px)}
.services-sec .out{min-height:0;aspect-ratio:auto;height:auto;display:flex;flex-direction:column;border-radius:20px}
.services-sec .out image-slot{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/9;min-height:0;display:block;flex:none;transform:none}
.services-sec .out:hover image-slot{transform:none}
.services-sec .out image-slot img,.services-sec .out image-slot::part(img){transition:transform 1200ms var(--ease)}
.services-sec .out::before{background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.55) 100%)}
.services-sec .out-top{position:absolute;top:18px;left:20px;right:20px;z-index:2;display:flex;justify-content:space-between;color:#fff}
.services-sec .out-body{position:static;inset:auto;left:auto;right:auto;top:auto;bottom:auto;z-index:2;display:flex;flex-direction:column;gap:8px;padding:clamp(18px,1.6vw,24px) clamp(18px,1.8vw,26px) clamp(20px,1.8vw,26px);background:#0d0d0d;border-top:1px solid rgba(245,245,240,.08);flex:1}
.services-sec .out h3{margin:0;font-size:clamp(19px,1.4vw,24px);line-height:1.12;letter-spacing:-.02em}
.services-sec .out p{margin:0;font-size:clamp(14px,1vw,16px);line-height:1.5;color:rgba(245,245,240,.72);max-width:32ch;text-wrap:pretty}
.services-sec .out .chips{display:none}
/* hand-off into Selected Work: shorter breath, the ivory curtain does the transition */
.services-sec + .work-sec{padding-top:clamp(80px,11vh,140px)}
@media (max-width:1024px){.services-sec .sec-head{grid-template-columns:1fr}.services-sec .sec-head .svc-link{justify-self:start;margin:0}}
@media (max-width:900px){.services-sec .outs{grid-template-columns:1fr}.services-sec .out{min-height:0}.services-sec .out image-slot{aspect-ratio:2/1}}