/* ════════════════════════════════
   WHO WE SERVE
   jotno.ai — serve.css
════════════════════════════════ */

#who-we-serve {
    position: relative;
    padding: var(--sec-y) var(--sec-x) var(--sec-y);
}

/* A paper wash instead of the coloured pools the two bands above use — the
   audience list is a quiet index, so it reads better on flat ground.
   The wash used to fade out at both edges, which at 0.62 white over a page
   this pale meant the band had no edge at all and simply merged into its
   neighbours. It now holds its tone all the way to the edge and closes with
   a hairline top and bottom, so it reads as an inset sheet. */
#who-we-serve::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.8) 34%,
            rgba(255, 255, 255, 0.8) 66%,
            rgba(255, 255, 255, 0.5) 100%);
}

/* Both edges of the sheet, drawn with the same fading hairline the chapter
   edges in common.css use */
#who-we-serve::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, var(--rule) 16%, var(--rule) 84%, transparent) top center / 90% 1px no-repeat,
        linear-gradient(90deg, transparent, var(--rule) 16%, var(--rule) 84%, transparent) bottom center / 90% 1px no-repeat;
}

.ws-inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

/* ════ HEAD ════ */
.ws-head {
    margin-bottom: 3.1rem;
}

.ws-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(14, 116, 144, 0.78);
    margin-bottom: 1.25rem;
}

.ws-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(8, 145, 178, 0.55);
    flex-shrink: 0;
}

.ws-title {
    font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
    font-size: clamp(1.95rem, 3vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.12;
    color: var(--text);
    max-width: 660px;
}

/* SERIF accent — see the accent map in common.css. This band is an index:
   you read it and move on, so the phrase shifts to the display italic and
   takes no decoration at all. */
.ws-title-accent {
    font-style: italic;
    font-weight: 700;
    color: var(--primary-dark);
}

/* ════ GRID ════
   Eight audiences, four up. No cards and no rules — a tinted icon tile sets
   each one off, so the grid stays as quiet as the rest of the page. */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.6rem 2.4rem;
    list-style: none;
}

.ws-item {
    min-width: 0;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ws-item:hover,
.ws-item:focus-within {
    transform: translateY(-3px);
}

.ws-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(8, 145, 178, 0.14);
    background: rgba(8, 145, 178, 0.08);
    color: var(--primary-dark);
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ws-icon svg {
    width: 20px;
    height: 20px;
}

/* The tile fills in on hover, the same move the core-solutions rows make */
.ws-item:hover .ws-icon,
.ws-item:focus-within .ws-icon {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
    transform: scale(1.06) rotate(-4deg);
}

.ws-name {
    font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.ws-item:hover .ws-name,
.ws-item:focus-within .ws-name {
    color: var(--primary-dark);
}

.ws-desc {
    font-size: 0.85rem;
    line-height: 1.68;
    font-weight: 500;
    color: var(--muted);
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {

    .ws-item,
    .ws-icon,
    .ws-name {
        transition: none;
    }
}