/* Services + Work with Himank pages (Oct 2026). Loaded after ghostwriting.css, whose
   tabs, steps, why, FAQ and CTA styles these pages reuse. */
.side-note{ color:var(--mute); margin-top:18px; max-width:34ch }

/* Services: picker items carry the company that delivers them */
.wk-gets li{ display:grid; gap:2px }
.wk-gets small{ font-size:.8rem; color:var(--accent); letter-spacing:.02em }

/* Services: staffing-agency note under the picker */
.wk-note{ margin-top:16px; border:1px solid var(--line); border-radius:22px; padding:20px clamp(18px,3vw,36px); color:var(--mute); max-width:none }
.wk-note b{ color:var(--fg); font-weight:500 }

/* Services: packages */
.wk-packs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.wk-pack{ display:grid; grid-template-rows:auto auto 1fr auto auto auto; gap:14px; background:var(--bg-2); border-radius:22px; padding:26px 24px 28px; min-width:0; transition:transform .5s var(--ease-out); transition-delay:calc(var(--d) * 60ms) }
.wk-pack__for{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
.wk-pack h3{ font-size:clamp(1.35rem,1.9vw,1.75rem); letter-spacing:-.02em }
.wk-pack__does{ color:var(--mute); font-size:.95rem }
.wk-pack .chips li{ background:var(--bg) }
.wk-pack__cos{ font-size:.9rem; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:4px }
.wk-pack .ulink{ justify-self:start; font-size:.92rem }
@media (hover:hover) and (pointer:fine){ .wk-pack:hover{ transform:translateY(-6px) } }

/* Services: companies list */
.wk-cos{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.wk-cos li{ display:grid; grid-template-columns:3ch minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); transition-delay:calc(var(--d) * 50ms) }
.wk-cos__n{ font-size:.85rem; color:var(--accent); font-variant-numeric:tabular-nums }
.wk-cos b{ font-weight:500; font-size:clamp(1.25rem,2.2vw,1.9rem); letter-spacing:-.02em }
.wk-cos li > span:last-child{ color:var(--mute) }

/* Work with Himank: reasons */
.wk-reasons{ list-style:none; margin:clamp(40px,5vw,70px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.wk-reasons li{ background:var(--bg-2); border-radius:22px; padding:26px 24px 28px; display:grid; gap:10px; align-content:start; transition-delay:calc(var(--d) * 70ms) }
.wk-reasons__n{ font-size:.85rem; color:var(--accent); font-variant-numeric:tabular-nums }
.wk-reasons h3{ font-size:1.3rem; letter-spacing:-.015em }
.wk-reasons p{ color:var(--mute); font-size:.95rem }

/* Work with Himank: engagement models */
.wk-models{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.wk-model{ display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; border:1px solid var(--line); border-radius:22px; padding:26px 24px; min-width:0; transition-delay:calc(var(--d) * 60ms) }
.wk-model.is-feat{ background:var(--night); color:var(--on-night); border-color:var(--night) }
.wk-model.is-feat .wk-model__does,.wk-model.is-feat .label{ color:var(--on-night-mute) }
.wk-model.is-feat dl{ border-color:var(--night-line) }
.wk-model__time{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
.wk-model.is-feat .wk-model__time{ color:#5fd3a6 }
.wk-model h3{ font-size:clamp(1.3rem,1.8vw,1.65rem); letter-spacing:-.02em }
.wk-model__does{ color:var(--mute); font-size:.95rem }
.wk-model dl{ margin:0; display:grid; gap:12px; border-top:1px solid var(--line); padding-top:16px }
.wk-model dd{ margin:4px 0 0; font-size:.95rem }

/* Work with Himank: pay */
.wk-pay{ display:grid; gap:clamp(28px,3vw,40px) }
.wk-bar{ display:grid; grid-template-columns:7fr 3fr; height:76px; border-radius:18px; overflow:hidden; font-size:.95rem }
.wk-bar span{ display:flex; align-items:center; gap:.5em; padding:0 22px; white-space:nowrap; overflow:hidden }
.wk-bar b{ font-weight:500 }
.wk-bar__basic{ background:var(--fg); color:var(--bg) }
.wk-bar__var{ background:var(--accent); color:#fff }
.wk-pay__part{ display:grid; gap:12px; border-top:1px solid var(--line); padding-top:24px }
.wk-pay__part h3{ font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-.02em }
.wk-pay__part > p:not(.label){ color:var(--mute); max-width:60ch }
.wk-var{ list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.wk-var li{ background:var(--bg-2); border-radius:18px; padding:20px 20px 22px; display:grid; gap:6px; align-content:start }
.wk-var b{ font-weight:500; font-size:1.05rem }
.wk-var__amt{ font-size:clamp(1.3rem,2vw,1.6rem); letter-spacing:-.02em; color:var(--accent) }
.wk-var p{ color:var(--mute); font-size:.92rem }

@media (max-width:1080px){
  .wk-packs,.wk-models{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .wk-reasons{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:860px){
  .wk .split{ grid-template-columns:minmax(0,1fr) }
  .wk .sticky{ position:static }
}
@media (max-width:640px){
  .wk-packs,.wk-models,.wk-reasons,.wk-var{ grid-template-columns:minmax(0,1fr) }
  .wk-cos li{ grid-template-columns:3ch minmax(0,1fr) }
  .wk-cos li > span:last-child{ grid-column:2 }
  .wk-bar{ grid-template-columns:65fr 35fr; height:auto; font-size:.85rem }
  .wk-bar span{ flex-direction:column; align-items:flex-start; gap:2px; padding:14px 16px }
}

/* Fractional roles (/services) */
.ro-backed{ display:grid; gap:10px; background:var(--bg); border-radius:18px; padding:18px 20px; margin:22px 0 }
.ro-backed p{ line-height:1.5 }
.ro-backed .label{ display:block; margin-bottom:4px }
.wk-reasons--top{ margin-top:0 }
