/* ==========================================================================
   Why BYC? — dedicated subpage
   Hero -> Capabilities -> Where do you fit in -> Closing.
   Colours and type come from the shared tokens in global.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared heading block
   -------------------------------------------------------------------------- */

.wb-heading {
    position: relative;
    z-index: 1;
    max-width: 940px;
    margin: 0 0 clamp(38px, calc(var(--public-layout-vw, 1vw) * 5), 64px);
}

.wb-heading--centred {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* Type comes from home.css (global h2). Only spacing is set here. */
.wb-heading h2 {
    margin: 0 0 20px;
}

/* Matches the section paragraph scale used by .connected-ecosystem__copy p. */
.wb-heading__copy {
    max-width: 66ch;
    margin: 0;
    color: rgba(244, 241, 232, 0.82);
    font-size: clamp(
        1.06rem,
        calc(var(--public-layout-vw, 1vw) * 1.08),
        1.28rem
    );
    font-weight: 750;
    line-height: 1.58;
}

.wb-heading--centred .wb-heading__copy {
    margin-right: auto;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.wb-hero {
    position: relative;
    display: grid;
    align-items: center;
    overflow: hidden;
    min-height: clamp(460px, 58vh, 620px);
    /* Left/right match .hero-shell on the home page: the layout column is
       capped at --public-layout-max (public-layout.css) and centred, with the
       clamp(20px, 4vw, 64px) gutter from home.css inside it. */
    padding: clamp(150px, 16vh, 190px) clamp(22px, calc(var(--public-layout-vw, 1vw) * 6), 92px) clamp(74px, calc(var(--public-layout-vw, 1vw) * 9), 104px);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(
            120% 90% at 12% 0%,
            rgba(75, 158, 199, 0.2),
            transparent 58%
        ),
        linear-gradient(160deg, #081521 0%, #07121b 52%, #05090d 100%);
    isolation: isolate;
}

/* .wb-hero__grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(rgba(116, 184, 215, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 184, 215, 0.05) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 88%);
} */

/* Same measure as .hero-content on the home page. */
.wb-hero__content {
    justify-self: start;
    /* max-width: 820px; */
    min-width: 0;
}

/* public-layout.css centres every direct child of a section
   (margin-inline: auto), which pushed this 820px box to the middle. Keep it
   on the left edge like the home hero. The extra element selectors outrank
   that rule, which loads after this file. */
.public-site > main > section.wb-hero > div.wb-hero__content {
    width: 100%;
    margin-inline: 0;
}

/* h1 type comes from home.css. Only the bottom margin is adjusted. */
.wb-hero h1 {
    margin-bottom: 22px;
}

/* Supporting headline: sits between the global h1 and .hero-copy. */
.wb-hero__standfirst {
    margin: 0 0 26px;
    max-width: 820px;
    color: var(--amber);
    font-size: clamp(
        1.75rem,
        calc(var(--public-layout-vw, 1vw) * 1.9),
        2.35rem
    );
    font-weight: 950;
    line-height: 1.22;
}

.wb-hero__actions {
    margin-bottom: 0;
}

.wb-scroll-cue {
    gap: 12px;
}

.wb-scroll-cue__arrow {
    display: inline-block;
    animation: wb-nudge 2.2s ease-in-out infinite;
}

@keyframes wb-nudge {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* --------------------------------------------------------------------------
   2. Capabilities — alternating text / visual rows
   -------------------------------------------------------------------------- */

.wb-capabilities {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, calc(var(--public-layout-vw, 1vw) * 7), 96px)
        clamp(22px, calc(var(--public-layout-vw, 1vw) * 6), 92px)
        clamp(70px, calc(var(--public-layout-vw, 1vw) * 8), 110px);
    background:
        linear-gradient(rgba(116, 184, 215, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 184, 215, 0.035) 1px, transparent 1px),
        var(--bg);
    background-size: 88px 88px;
}

/* Heading uses the shared .section-heading grid from global.css, as on the
   home page: eyebrow on the left, uppercase h2 right-aligned. The standfirst
   sits under the h2 in the right-hand column. */
.wb-capabilities__standfirst {
    grid-column: 2;
    justify-self: end;
    max-width: 66ch;
    margin: 0;
    text-align: right;
    color: rgba(244, 241, 232, 0.84);
    font-size: clamp(1.4rem, calc(var(--public-layout-vw, 1vw) * 1.2), 1.7rem);
    font-weight: 400;
    line-height: 1.34;
}

.wb-capability-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(64px, calc(var(--public-layout-vw, 1vw) * 8), 132px);
}

.wb-capability {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, calc(var(--public-layout-vw, 1vw) * 5), 76px);
    align-items: center;
}

/* Alternating rows flip on desktop only. The copy always comes first in the
   DOM, so the reading and tab order stays text -> visual at every width. */
.wb-capability--reversed .wb-capability__copy {
    order: 2;
}

.wb-capability--reversed .wb-capability__media {
    order: 1;
}

.wb-capability__copy {
    display: grid;
    min-width: 0;
    justify-items: start;
    gap: 18px;
}

/* Matches .connected-ecosystem__audience h3 in home.css. */
.wb-capability__title {
    margin: 0;
    color: var(--amber);
    font-size: clamp(1.4rem, calc(var(--public-layout-vw, 1vw) * 1.3), 1.8rem);
    font-weight: 950;
    letter-spacing: 0.18em;
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

/* Description and points match the System Overview section on the home page
   (.video-showcase__copy p / ul / li in home.css), using the same global.css
   variables so both pages change together. */
.wb-capability__lede {
    margin: 0;
    color: var(--section-header-subtext-colour);
    font-size: var(--section-copy-size);
}

.wb-capability__points {
    display: grid;
    width: 100%;
    gap: 12px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.wb-capability__points li {
    position: relative;
    padding: 14px 16px 14px 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(13, 29, 41, 0.72);
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wb-capability__points li::before {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--amber);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

/* Visual frame. Carries either artwork (--image) or the styled placeholder,
   so both variants share the same border, ratio and inset hairline grid. */
.wb-capability__media {
    min-width: 0;
    margin: 0;
}

.wb-capability__frame {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 10;
    align-content: center;
    justify-items: center;
    gap: 14px;
    overflow: hidden;
    padding: clamp(24px, calc(var(--public-layout-vw, 1vw) * 3), 44px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(
        140deg,
        rgba(19, 40, 56, 0.96),
        rgba(13, 29, 41, 0.96) 62%,
        rgba(9, 22, 32, 0.96)
    );
    box-shadow: 0 24px 82px rgba(2, 10, 16, 0.34);
    text-align: center;
}

/* Inset hairline grid, matching the framing used across the site visuals. */
.wb-capability__frame::after {
    position: absolute;
    z-index: 0;
    inset: 18px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(116, 184, 215, 0.2);
    background:
        linear-gradient(rgba(116, 184, 215, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 184, 215, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
}

.wb-capability__frame-tag,
.wb-capability__frame-title {
    position: relative;
    z-index: 1;
}

.wb-capability__frame-tag {
    color: rgba(167, 189, 196, 0.9);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.wb-capability__frame-title {
    max-width: 24ch;
    color: var(--text);
    font-size: clamp(
        1.05rem,
        calc(var(--public-layout-vw, 1vw) * 1.25),
        1.5rem
    );
    font-weight: 950;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Artwork variant — the image fills the frame the placeholder would occupy. */
.wb-capability__frame--image {
    display: block;
    padding: 0;
}

.wb-capability__frame--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Portrait sources set --wb-focus inline to pick their crop band. */
    object-position: var(--wb-focus, center);
}

/* Scrim settles photography into the page's dark palette, following the
   treatment .audience-fit-panel uses in home.css. */
.wb-capability__frame--image::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba(7, 18, 27, 0.6) 0%,
        rgba(7, 18, 27, 0.14) 52%,
        rgba(7, 18, 27, 0.36) 100%
    );
}

/* Lift the hairline grid over the artwork and warm it so it reads on photos. */
.wb-capability__frame--image::after {
    z-index: 2;
    border-color: rgba(173, 209, 224, 0.28);
    background-image:
        linear-gradient(rgba(244, 241, 232, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 241, 232, 0.05) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   3. Where do you fit in? — audience cards
   Three image cards; clicking one opens its details in a pop-up (a
   Bootstrap modal in why_byc.php).
   Colours are the global.css tokens only: the gold glow is --amber
   (199, 162, 83) and the bar above each label mirrors
   .reporting-domain-card__content::before in home.css.
   -------------------------------------------------------------------------- */

.wb-audience {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, calc(var(--public-layout-vw, 1vw) * 7), 96px)
        clamp(22px, calc(var(--public-layout-vw, 1vw) * 6), 92px)
        clamp(70px, calc(var(--public-layout-vw, 1vw) * 8), 110px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(120deg, rgba(199, 162, 83, 0.04), transparent 30%),
        var(--bg);
}

/* Heading uses the shared .section-heading grid from global.css, as on the
   home page: eyebrow on the left, h2 right-aligned. */
.wb-audience__standfirst {
    max-width: 38ch;
    margin: 0;
    color: rgba(244, 241, 232, 0.84);
    line-height: 1.5;
}

.wb-audience-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, calc(var(--public-layout-vw, 1vw) * 1.8), 30px);
    scroll-margin-top: 110px;
}

.wb-audience-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: clamp(500px, calc(var(--public-layout-vw, 1vw) * 40), 620px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 24px 82px rgba(2, 10, 16, 0.34);
}

.wb-audience-card__media {
    position: absolute;
    inset: 0 0 auto;
    height: 62%;
    margin: 0;
    overflow: hidden;
}

/* The audience photos fade to dark on their left, so crop towards the right
   to keep the people in frame. */
.wb-audience-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% center;
    filter: saturate(1.06) contrast(1.08);
    transition: transform 420ms ease;
}

/* Hover matches .reporting-domain-card on the home page: the photo zooms in
   slightly (about 4% over 420ms) and nothing else changes. */
.wb-audience-card:not(.is-open):hover .wb-audience-card__media img,
.wb-audience-card:not(.is-open):focus-visible .wb-audience-card__media img {
    transform: scale(1.04);
}

/* Scrim settles the photo into the card's panel colour (--panel). */
.wb-audience-card__media::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(13, 29, 41, 0.08) 0%,
        rgba(13, 29, 41, 0.36) 55%,
        var(--panel) 100%
    );
}

.wb-audience-card__body {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 1;

    /* Label, title and summary start at the same height in every card, so
       the three cards line up whatever the description length. The top
       inset places them low in the card, where the photo fades out
       (about 58% of the card height). */
    grid-template-rows: auto auto auto;
    align-content: start;
    justify-items: start;
    gap: 14px;
    padding: clamp(290px, calc(var(--public-layout-vw, 1vw) * 23.2), 360px)
        clamp(24px, calc(var(--public-layout-vw, 1vw) * 2.4), 40px)
        clamp(24px, calc(var(--public-layout-vw, 1vw) * 2.4), 40px);
}

.wb-audience-card__label {
    display: block;
    color: var(--amber);
    font-size: clamp(1.2rem, calc(var(--public-layout-vw, 1vw) * 1.05), 1.5rem);
    font-weight: 950;
    letter-spacing: 0.26em;
    line-height: 1.2;
    text-transform: uppercase;
}

.wb-audience-card__label::before {
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: 14px;
    background: var(--amber);
    content: "";
    box-shadow: 0 0 18px rgba(199, 162, 83, 0.38);
}

.wb-audience-card__title {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.2rem, calc(var(--public-layout-vw, 1vw) * 2), 3.2rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: capitalize;
}

/* Only the opened panel picks out the last words of the tagline in amber. */
.wb-audience-card__highlight {
    color: inherit;
}

.wb-audience-card__summary {
    max-width: 40ch;
    margin: 0;
    color: rgba(244, 241, 232, 0.84);
    line-height: 1.5;
}

/* The whole card is clickable, like .reporting-domain-card on the home page,
   with the same keyboard focus ring. */
.wb-audience-card:not(.is-open) {
    cursor: pointer;
}

.wb-audience-card:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: -12px;
}

.wb-audience-card__close:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

/* Pop-up panel: photo left, copy and topics right. */
.wb-audience-card.is-open {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    grid-template-rows: auto 1fr;
    min-height: clamp(440px, calc(var(--public-layout-vw, 1vw) * 32), 560px);
    border-color: var(--line-strong);
    animation: wb-audience-reveal 360ms ease both;
}

.wb-audience-card.is-open .wb-audience-card__media {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / -1;
    height: auto;
}

.wb-audience-card.is-open .wb-audience-card__media::after {
    background: linear-gradient(
        90deg,
        rgba(13, 29, 41, 0) 55%,
        rgba(13, 29, 41, 0.6) 100%
    );
}

.wb-audience-card.is-open .wb-audience-card__body {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: none;
    align-content: start;
    gap: 16px;
    padding: clamp(32px, calc(var(--public-layout-vw, 1vw) * 3.4), 56px)
        clamp(72px, calc(var(--public-layout-vw, 1vw) * 6), 104px) 0
        clamp(28px, calc(var(--public-layout-vw, 1vw) * 3.4), 56px);
}

.wb-audience-card.is-open .wb-audience-card__label::before {
    display: none;
}

.wb-audience-card.is-open .wb-audience-card__title {
    font-size: clamp(2.6rem, calc(var(--public-layout-vw, 1vw) * 2.6), 4rem);
    font-weight: 950;
    line-height: 1.04;
    text-transform: uppercase;
}

.wb-audience-card.is-open .wb-audience-card__highlight {
    color: var(--amber);
}

.wb-audience-card.is-open .wb-audience-card__summary {
    max-width: 60ch;
}

.wb-audience-card.is-open .wb-audience-card__detail {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    align-content: start;
    padding: clamp(24px, calc(var(--public-layout-vw, 1vw) * 2.6), 40px)
        clamp(28px, calc(var(--public-layout-vw, 1vw) * 3.4), 56px)
        clamp(32px, calc(var(--public-layout-vw, 1vw) * 3.4), 56px);
}

.wb-audience-card__close {
    position: absolute;
    z-index: 3;
    top: clamp(16px, calc(var(--public-layout-vw, 1vw) * 1.6), 28px);
    right: clamp(16px, calc(var(--public-layout-vw, 1vw) * 1.6), 28px);
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 2.4rem;
    line-height: 1;
    transition:
        color 220ms ease,
        border-color 220ms ease;
}

.wb-audience-card__close:hover,
.wb-audience-card__close:focus-visible {
    border-color: rgba(199, 162, 83, 0.5);
    background: transparent;
    color: var(--amber);
}

.wb-audience-card__topics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.wb-audience-card__topics li {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 12px;
    margin: 0;
    padding: 0 clamp(16px, calc(var(--public-layout-vw, 1vw) * 2), 32px);
    border-left: 1px solid var(--line);
}

.wb-audience-card__topics li:first-child {
    padding-left: 0;
    border-left: 0;
}

.wb-audience-card__icon {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    margin-bottom: 6px;
    border: 1px solid var(--amber);
    font-size: 2.6rem;
}

.wb-audience-card__topic-title {
    color: var(--text);
    font-size: clamp(1.1rem, calc(var(--public-layout-vw, 1vw) * 1), 1.3rem);
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.wb-audience-card__topic-copy {
    color: rgba(244, 241, 232, 0.72);
    font-size: clamp(1.3rem, calc(var(--public-layout-vw, 1vw) * 1.1), 1.5rem);
    font-weight: 400;
    line-height: 1.5;
}

@keyframes wb-audience-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   3a. Legacy audience tabs — no longer used on the live page. Kept because
   the CMS live preview (templates/Admin/cms.php) still renders this markup.
   -------------------------------------------------------------------------- */

.wb-audience-detail[hidden] {
    display: none;
}

/* The shared .audience-fit-panel scrim in home.css fades out by 42%, which is
   where this page's benefit descriptions sit. Hold the dark further right so
   the copy stays legible, then release it over the photo. */
#wb-audience .audience-fit-panel::before {
    background:
        linear-gradient(
            90deg,
            rgba(7, 18, 27, 0.94) 0%,
            rgba(7, 18, 27, 0.9) 44%,
            rgba(7, 18, 27, 0.74) 58%,
            rgba(7, 18, 27, 0.4) 72%,
            rgba(7, 18, 27, 0.14) 86%,
            rgba(7, 18, 27, 0.06) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 18, 27, 0.54) 0%,
            rgba(7, 18, 27, 0.04) 50%,
            rgba(7, 18, 27, 0.34) 100%
        );
}

.wb-audience-tagline {
    margin: 0 0 24px;
    color: var(--amber);
    font-size: clamp(0.9rem, calc(var(--public-layout-vw, 1vw) * 0.9), 1.1rem);
    font-weight: 950;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

#wb-audience .audience-fit-panel__topics {
    gap: 20px;
}

#wb-audience .audience-fit-panel__topics li {
    display: grid;
    gap: 6px;
}

.wb-topic__title {
    display: block;
}

.wb-topic__copy {
    display: block;
    max-width: 48ch;
    color: rgba(244, 241, 232, 0.72);
    font-size: clamp(
        0.94rem,
        calc(var(--public-layout-vw, 1vw) * 0.96),
        1.08rem
    );
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-transform: none;
}

.audience-fit {
    position: relative;
    display: flex;
    min-height: clamp(560px, calc(var(--public-layout-vw, 1vw) * 46), 700px);
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: clamp(40px, calc(var(--public-layout-vw, 1vw) * 5), 68px)
        clamp(22px, calc(var(--public-layout-vw, 1vw) * 6), 92px)
        clamp(42px, calc(var(--public-layout-vw, 1vw) * 5), 62px);
    border-bottom: 1px solid var(--line);
    background: #07121b;
}

.audience-fit::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(199, 162, 83, 0.04), transparent 30%),
        linear-gradient(180deg, rgba(7, 18, 27, 0.04), rgba(7, 18, 27, 0.24));
    content: "";
    pointer-events: none;
}

.audience-fit__heading,
.audience-fit-controls {
    position: relative;
    z-index: 3;
}

.audience-fit-controls {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(260px, 470px);
    align-items: center;
    gap: clamp(34px, calc(var(--public-layout-vw, 1vw) * 5), 68px);
    margin: clamp(24px, calc(var(--public-layout-vw, 1vw) * 3.6), 48px) 0 0;
}

.audience-fit-tabs {
    display: grid;
    width: 100%;
    margin: 0;
    gap: 10px;
}

.audience-fit-tab {
    position: relative;
    display: grid;
    align-items: center;
    min-width: 0;
    min-height: 68px;
    padding: 0 clamp(16px, calc(var(--public-layout-vw, 1vw) * 2), 22px);
    border: 1px solid rgba(173, 209, 224, 0.22);
    border-radius: 2px;
    background: rgba(7, 18, 27, 0.54);
    box-shadow: 0 18px 48px rgba(2, 10, 16, 0.22);
    color: rgba(244, 241, 232, 0.84);
    cursor: pointer;
    font: inherit;
    overflow: hidden;
    text-align: center;
    backdrop-filter: blur(12px);
    transition:
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease,
        transform 220ms ease;
}

.audience-fit-tab strong {
    min-width: 0;
    font-size: clamp(
        1.08rem,
        calc(var(--public-layout-vw, 1vw) * 1.18),
        1.34rem
    );
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1.15;
    text-transform: uppercase;
    transition: color 220ms ease;
}

.audience-fit-tab:hover,
.audience-fit-tab:focus-visible {
    border-color: rgba(199, 162, 83, 0.5);
    color: var(--text);
    background: rgba(173, 209, 224, 0.08);
    transform: translateX(4px);
}

.audience-fit-tab:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

.audience-fit-tab.is-active {
    border-color: rgba(199, 162, 83, 0.86);
    background: rgba(199, 162, 83, 0.94);
    box-shadow:
        0 20px 56px rgba(2, 10, 16, 0.28),
        inset 0 0 0 1px rgba(244, 241, 232, 0.22);
    color: #07121b;
    transform: translateX(10px);
}

.audience-fit-tab.is-active strong {
    color: #07121b;
}

.audience-fit-stage {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border: 0;
    background: var(--panel);
    box-shadow: none;
    pointer-events: none;
}

.audience-fit-panel {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 360ms ease;
}

.audience-fit-panel[hidden] {
    display: none;
}

.audience-fit-panel.is-active {
    opacity: 1;
}

.audience-fit-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.06) contrast(1.08);
}

.audience-fit-panel::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7, 18, 27, 0.72) 0%,
            rgba(7, 18, 27, 0.28) 42%,
            rgba(7, 18, 27, 0.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 18, 27, 0.54) 0%,
            rgba(7, 18, 27, 0.04) 50%,
            rgba(7, 18, 27, 0.34) 100%
        );
    content: "";
}

.audience-fit-panel__topics {
    display: grid;
    gap: 36px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.audience-fit-panel__topics[hidden] {
    display: none;
}

.audience-fit-panel__topics li {
    position: relative;
    min-height: 0;
    padding: 0 0 0 36px;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
    color: var(--text);
    font-weight: 950;
    font-size: clamp(0.95rem, calc(var(--public-layout-vw, 1vw) * 1), 1.12rem);
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.audience-fit-panel__topics li::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--amber);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------
   4. Closing band
   -------------------------------------------------------------------------- */

.wb-closing {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, calc(var(--public-layout-vw, 1vw) * 8), 116px)
        clamp(22px, calc(var(--public-layout-vw, 1vw) * 6), 92px)
        clamp(80px, calc(var(--public-layout-vw, 1vw) * 9), 120px);
    border-top: 1px solid var(--line);
    background:
        radial-gradient(
            85% 65% at 50% 8%,
            rgba(75, 158, 199, 0.14),
            transparent 60%
        ),
        var(--bg);
    text-align: center;
}

/* Matches .final-cta h2 in home.css. */
.wb-closing__line {
    margin: 0 0 30px;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
}

.wb-closing__highlight {
    color: var(--amber);
}

.wb-closing__actions {
    justify-content: center;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    /* .section-heading collapses to one column here (global.css). */
    .wb-capabilities__standfirst {
        grid-column: 1 / -1;
    }

    .wb-audience__standfirst {
        max-width: 66ch;
    }

    .wb-audience-card {
        min-height: 480px;
    }

    .audience-fit {
        min-height: 640px;
    }

    .audience-fit-controls {
        grid-template-columns: minmax(260px, 390px) minmax(260px, 420px);
        gap: 28px;
    }
}

/* Same size steps as the .connected-ecosystem overrides in home.css. */
@media (min-width: 961px) and (max-width: 1440px) {
    .wb-capability__title {
        font-size: 1.6rem;
    }

    .wb-capabilities__standfirst {
        font-size: 1.6rem;
    }
}

@media (max-width: 960px) {
    /* Cards stack; an opened card stacks photo -> copy -> topics. */
    .wb-audience-grid {
        grid-template-columns: 1fr;
    }

    .wb-audience-card {
        min-height: clamp(440px, 70vw, 540px);
    }

    /* One card per row here, so there's nothing to line up: keep the text
       at the bottom of the card. */
    .wb-audience-card__body {
        align-content: end;
    }

    .wb-audience-card.is-open {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: 0;
    }

    .wb-audience-card.is-open .wb-audience-card__media {
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    .wb-audience-card.is-open .wb-audience-card__media::after {
        background: linear-gradient(
            180deg,
            rgba(13, 29, 41, 0) 55%,
            var(--panel) 100%
        );
    }

    .wb-audience-card.is-open .wb-audience-card__body,
    .wb-audience-card.is-open .wb-audience-card__detail {
        grid-column: 1;
        grid-row: auto;
    }

    .wb-audience-card.is-open .wb-audience-card__body {
        padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px) 0;
    }

    .wb-audience-card.is-open .wb-audience-card__detail {
        padding: clamp(24px, 4vw, 32px) clamp(24px, 4vw, 40px) clamp(28px, 5vw, 40px);
    }

    /* The close button now sits over the photo, so give it a backing. */
    .wb-audience-card__close {
        background: rgba(7, 18, 27, 0.72);
    }

    .wb-audience-card__topics {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .wb-audience-card__topics li,
    .wb-audience-card__topics li:first-child {
        padding: 24px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .wb-audience-card__topics li:first-child {
        padding-top: 0;
        border-top: 0;
    }

    /* Mirrors the .section-heading h2 step in home.css. */
    .wb-heading h2 {
        font-size: clamp(2.7rem, 5.4vw, 3.55rem);
    }

    /* Single column from tablet down; the DOM order already puts text first,
       so the reversed row simply falls back into source order. */
    .wb-capability {
        grid-template-columns: 1fr;
        gap: clamp(26px, 4vw, 40px);
    }

    .wb-capability--reversed .wb-capability__copy,
    .wb-capability--reversed .wb-capability__media {
        order: 0;
    }

    /* Placeholders gain height on one column; artwork keeps a single ratio at
       every width so each photo's chosen crop band stays predictable. */
    .wb-capability__frame {
        aspect-ratio: 16 / 9;
    }

    .wb-capability__frame--image {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 620px) {
    .wb-audience {
        padding-right: 16px;
        padding-left: 16px;
    }

    .wb-audience-card__body {
        padding: clamp(180px, 46vw, 220px) 22px 22px;
    }

    .wb-audience-card__label {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
    }

    .wb-audience-card__title,
    .wb-audience-card.is-open .wb-audience-card__title {
        font-size: 2.4rem;
    }

    /* Same reason as the capability ledes below: outrank the global p clamp. */
    .wb-audience__standfirst,
    .wb-audience-card__summary {
        font-size: 1.6rem !important;
        line-height: 1.48;
    }

    .wb-audience-card__topic-title {
        font-size: 1.3rem;
    }

    .wb-audience-card__topic-copy {
        font-size: 1.5rem;
    }

    /* Mirrors the .section-heading h2 step in home.css. The hero h1 is left
       alone so home.css's own mobile h1 rule governs it. */
    .wb-heading h2 {
        font-size: clamp(1.28rem, 5.6vw, 2.48rem);
    }

    /* One column on mobile, so hand the scrim back to home.css's vertical
       treatment instead of the horizontal one set above. */
    #wb-audience .audience-fit-panel::before {
        background: linear-gradient(
            0deg,
            rgba(7, 18, 27, 0.8) 0%,
            rgba(7, 18, 27, 0.42) 54%,
            rgba(7, 18, 27, 0.24) 100%
        );
    }

    .wb-hero {
        min-height: 0;
        padding-top: clamp(128px, 20vh, 156px);
    }

    .wb-capabilities {
        padding-right: 16px;
        padding-left: 16px;
    }

    .wb-capability-list {
        gap: clamp(48px, 12vw, 64px);
    }

    .wb-capability__title {
        font-size: 1.7rem;
        letter-spacing: 0.16em;
    }

    /* home-mobile.css lifts every main p to 1.6rem on the home page, but this
       page doesn't load it, so the global p clamp would drop these to 10px.
       !important is needed to outrank that rule in global.css, as with
       .legal__prose p in home.css. */
    .wb-capabilities__standfirst {
        font-size: 1.6rem !important;
        line-height: 1.48;
    }

    .wb-capability__frame {
        aspect-ratio: 4 / 3;
    }

    .wb-capability__frame--image {
        aspect-ratio: 16 / 10;
    }

    .wb-capability__frame::after {
        inset: 10px;
    }

    .wb-capability__frame-tag {
        font-size: 0.68rem;
        letter-spacing: 0.24em;
    }

    .wb-capability__frame-title {
        letter-spacing: 0.1em;
    }

    .wb-topic__copy {
        max-width: none;
        font-size: 0.9rem;
    }

    .audience-fit {
        padding-right: 16px;
        padding-left: 16px;
        min-height: 640px;
        justify-content: flex-start;
    }

    .audience-fit-tabs {
        width: 100%;
        gap: 8px;
    }

    .audience-fit-controls {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 22px;
    }

    .audience-fit-tab {
        min-height: 52px;
        padding: 0 12px;
        transform: none;
    }

    .audience-fit-tab:hover,
    .audience-fit-tab:focus-visible,
    .audience-fit-tab.is-active {
        transform: none;
    }

    .audience-fit-tab strong {
        font-size: 0.84rem;
        letter-spacing: 0.08em;
    }

    .audience-fit-panel::before {
        background: linear-gradient(
            0deg,
            rgba(7, 18, 27, 0.74) 0%,
            rgba(7, 18, 27, 0.34) 54%,
            rgba(7, 18, 27, 0.2) 100%
        );
    }

    .audience-fit-panel__topics {
        gap: 24px;
        max-width: none;
    }

    .audience-fit-panel__topics li {
        min-height: 0;
        padding: 0 0 0 30px;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    .audience-fit-panel__topics li::before {
        left: 2px;
        width: 12px;
        height: 12px;
        border-width: 1px;
    }
}

/* Matches global.css, where .section-heading h2 goes back to the left. */
@media (max-width: 768px) {
    .wb-capabilities__standfirst {
        justify-self: start;
        text-align: left;
    }
}

/* Hero gutters follow .hero-shell in home.css below the desktop breakpoint. */
@media (max-width: 1024px) {
    .wb-hero {
        padding-right: 22px;
        padding-left: 22px;
    }
}

@media (max-width: 620px) {
    .wb-hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    /* Phone text sizes copied from home-mobile.css, which this page doesn't
       load. Without them global.css shrinks paragraphs and buttons to 10px. */
    main p {
        font-size: 1.6rem !important;
    }

    main .eyebrow {
        font-size: 1.4rem;
    }

    main .btn {
        font-size: 1.4rem;
        white-space: normal;
        line-height: 1.5;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .hero-copy {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-audience-card,
    .wb-audience-card__media img,
    .wb-audience-card__close {
        transition: none;
    }

    .wb-audience-card.is-open {
        animation: none;
    }

    .wb-scroll-cue__arrow {
        animation: none;
    }

    .wb-capability__frame {
        transition: none;
    }
}