/*
 * Web Development (/capabilities/web-development/, also /capabilities/websites/) — extras on top of
 * components/kosh-page.css. Only what the shared Kosh page system doesn't already cover; classes are prefixed .kp-x-wd-.
 */

/* Platforms: cards carry the platform logo and name, a tag line and a button (the whole card is the link) */
.kp-x-wd-head { display: flex; align-items: center; gap: 14px; }
.kp-x-wd-tag {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.kp-x-wd-tags { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-primary); }
.kp-x-wd-cardlink { align-self: flex-start; margin-top: auto; }
/* The button is a span inside the card link, so it follows the card's hover (site-wide maroon button hover) */
.kp-svc:hover .kp-x-wd-cardlink { background: var(--color-secondary); border-color: var(--color-secondary); }

/* Core principles: heading, then the pinned photo-card row */
.kp-x-wd-matters { padding-top: 0; }

/* Selected work: client names set a touch larger */
.kp-x-wd-work { font-family: var(--font-heading); font-size: var(--fs-h5); font-weight: 400; }

/* Beyond the launch */
.kp-x-wd-start { padding-top: 0; }
.kp-x-wd-start__body { margin-top: 22px; max-width: 460px; color: var(--text-secondary); }

/* How we collaborate (dark band) */
.kp-x-wd-dark__side p { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--text-on-dark-2); }

/* FAQ follows the dark band, so it keeps its top padding */
.kp-x-wd-faq { padding-top: var(--section-y); }