/* ============================================================================
   Worklane — About / Contact / Categories
   Reuses tokens + components + home.css patterns (home-section, home-head,
   home-benefit, home-steps, home-cats, home-ctaband, home-stats, home-chip).
   This file only adds the new patterns those three pages need.
   ========================================================================== */

/* ---------------- PAGE HERO (compact, contained) ---------------- */
.page-hero { position: relative; overflow: hidden; background: var(--color-base); border-bottom: 1px solid var(--color-neutral); }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 80% at 78% -20%, color-mix(in srgb, var(--color-accent-1) 14%, transparent), transparent 56%); }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000, transparent 62%); mask-image: radial-gradient(120% 100% at 70% 0%, #000, transparent 62%); }
.page-hero__in { position: relative; z-index: 1; padding-block: clamp(2.75rem, 6vw, 4.5rem); max-width: 52rem; }
.page-hero__crumb { display: flex; align-items: center; gap: var(--spacing-20); font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-contrast-subtle); margin-bottom: var(--spacing-40); }
.page-hero__crumb a { color: var(--color-contrast-muted); text-decoration: none; }
.page-hero__crumb a:hover { color: var(--color-contrast); }
.page-hero__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent-1); margin: 0 0 var(--spacing-30); }
.page-hero__title { font-size: var(--font-size-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1.05; margin: 0 0 var(--spacing-40); text-wrap: balance; }
.page-hero__title em { font-style: normal; color: var(--color-accent-1); }
.page-hero__lede { font-size: var(--font-size-md); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0; max-width: 46ch; }

/* ---------------- ABOUT · mission ---------------- */
.about-mission { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--spacing-80); align-items: start; }
.about-mission__body p { font-size: var(--font-size-md); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--spacing-40); }
.about-mission__body p:last-child { margin-bottom: 0; }
.about-quote { padding: var(--spacing-60); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-left: 2px solid var(--color-accent-1); border-radius: calc(var(--radius-md) * var(--radius-scale)); }
.about-quote__mark { font-size: 2.5rem; line-height: 0.6; color: var(--color-accent-1); font-family: Georgia, serif; }
.about-quote p { font-size: var(--font-size-lg); font-weight: var(--fw-medium); color: var(--color-contrast); line-height: var(--lh-normal); margin: var(--spacing-30) 0 var(--spacing-50); letter-spacing: var(--tracking-snug); text-wrap: balance; }
.about-quote__by { display: flex; align-items: center; gap: var(--spacing-30); }
.about-quote__name { font-weight: var(--fw-semibold); color: var(--color-contrast); font-size: var(--font-size-base); }
.about-quote__role { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }
@media (max-width: 900px) { .about-mission { grid-template-columns: 1fr; gap: var(--spacing-60); } }

/* ---------------- CONTACT ---------------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--spacing-70); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; gap: var(--spacing-60); } }

.contact-card { padding: var(--spacing-60); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); box-shadow: var(--shadow-sm); }
.contact-form { display: flex; flex-direction: column; gap: var(--spacing-40); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-40); }
@media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form[hidden] { display: none; }

.contact-success { text-align: center; padding: var(--spacing-50) 0; }
.contact-success[hidden] { display: none; }
.contact-success__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto var(--spacing-40); border-radius: var(--radius-full); display: grid; place-content: center; background: var(--color-success-bg); color: var(--color-success-fg); border: 1px solid var(--color-accent-border); }
.contact-success__title { font-size: var(--font-size-md); font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-20); }
.contact-success__text { color: var(--color-contrast-muted); margin: 0 auto var(--spacing-50); max-width: 34ch; }

/* segmented "I am a…" */
.contact-seg { display: flex; gap: var(--spacing-20); background: var(--color-surface-2); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-sm) * var(--radius-scale)); padding: var(--spacing-20); }
.contact-seg label { flex: 1; }
.contact-seg input { position: absolute; opacity: 0; pointer-events: none; }
.contact-seg__btn { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; border-radius: calc(var(--radius-sm) * var(--radius-scale) * 0.85); color: var(--color-contrast-muted); font-size: var(--font-size-sm); font-weight: var(--fw-medium); cursor: pointer; transition: all var(--transition); }
.contact-seg input:checked + .contact-seg__btn { background: var(--color-base-elevated); color: var(--color-contrast); box-shadow: var(--shadow-sm); }
.contact-seg input:focus-visible + .contact-seg__btn { box-shadow: var(--shadow-focus); }

/* info column */
.contact-info { display: flex; flex-direction: column; gap: var(--spacing-40); }
.contact-info__item { display: flex; gap: var(--spacing-40); padding: var(--spacing-50); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); }
.contact-info__icon { width: 2.5rem; height: 2.5rem; flex: none; border-radius: calc(var(--radius-sm) * var(--radius-scale)); display: grid; place-content: center; background: var(--color-accent-weak); color: var(--color-accent-1); border: 1px solid var(--color-accent-border); }
.contact-info__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-contrast-subtle); margin: 0 0 0.25rem; }
.contact-info__value { font-size: var(--font-size-base); color: var(--color-contrast); font-weight: var(--fw-medium); margin: 0; }
.contact-info__value a { color: var(--color-accent-1); text-decoration: none; }
.contact-info__value a:hover { text-decoration: underline; }
.contact-info__sub { font-size: var(--font-size-sm); color: var(--color-contrast-muted); margin: 0.25rem 0 0; line-height: var(--lh-normal); }

/* support quick-links */
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-40); }
@media (max-width: 760px) { .support-grid { grid-template-columns: 1fr; } }
.support-card { display: flex; flex-direction: column; gap: var(--spacing-30); padding: var(--spacing-50); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); text-decoration: none; transition: transform var(--transition), border-color var(--transition); }
.support-card:hover { transform: translateY(-3px); border-color: var(--color-accent-border); }
.support-card__icon { width: 2.75rem; height: 2.75rem; border-radius: calc(var(--radius-sm) * var(--radius-scale)); display: grid; place-content: center; background: var(--color-surface-2); color: var(--color-accent-1); border: 1px solid var(--color-neutral); }
.support-card h3 { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0; }
.support-card p { font-size: var(--font-size-sm); color: var(--color-contrast-muted); margin: 0; line-height: var(--lh-normal); }
.support-card__link { font-size: var(--font-size-sm); color: var(--color-accent-1); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: var(--spacing-20); margin-top: auto; }

/* ---------------- CATEGORIES (rich page cards) ---------------- */
.catpage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-50); }
@media (max-width: 1000px) { .catpage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .catpage-grid { grid-template-columns: 1fr; } }
.catpage-card { display: flex; flex-direction: column; gap: var(--spacing-40); padding: var(--spacing-60); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.catpage-card:hover { transform: translateY(-4px); border-color: var(--color-neutral-strong); box-shadow: var(--shadow-md); }
.catpage-card__top { display: flex; align-items: center; gap: var(--spacing-40); }
.catpage-card__icon { width: 3rem; height: 3rem; flex: none; border-radius: calc(var(--radius-sm) * var(--radius-scale)); display: grid; place-content: center; background: var(--color-accent-weak); color: var(--color-accent-1); border: 1px solid var(--color-accent-border); }
.catpage-card__title { font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0; }
.catpage-card__count { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin: 0.15rem 0 0; }
.catpage-card__subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-20); border-top: 1px solid var(--color-neutral); padding-top: var(--spacing-40); }
.catpage-card__subs a { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-30); color: var(--color-contrast-muted); text-decoration: none; font-size: var(--font-size-sm); padding: 0.3rem 0; transition: color var(--transition); }
.catpage-card__subs a:hover { color: var(--color-accent-1); }
.catpage-card__subs a span:last-child { color: var(--color-contrast-subtle); font-family: var(--font-mono); font-size: 0.72rem; }
.catpage-card__subs a:hover span:last-child { color: var(--color-accent-1); }
.catpage-card__foot { margin-top: auto; }

/* category search bar */
.catpage-search { display: flex; gap: var(--spacing-20); padding: var(--spacing-20); background: var(--color-base-elevated); border: 1px solid var(--color-neutral-strong); border-radius: calc(var(--radius-md) * var(--radius-scale)); box-shadow: var(--shadow-md); max-width: 34rem; }
.catpage-search__field { position: relative; flex: 1; display: flex; align-items: center; }
.catpage-search__field svg { position: absolute; left: var(--spacing-40); top: 50%; transform: translateY(-50%); color: var(--color-contrast-subtle); }
.catpage-search .wl-input { border: 0; background: transparent; padding-left: 2.85rem; }
.catpage-search .wl-input:focus-visible { box-shadow: none; }