/* ==========================================================================
   Clients page elements (bdn-core)
   [bdn_clients_intro] [bdn_trust_bar] [bdn_client_logos]
   [bdn_client_spotlight] [bdn_client_stories] [bdn_client_story]

   Everything is scoped to .onc-sec. Colours read the Impreza theme variables
   with the live values as fallbacks. The :where() resets only undo Impreza's
   default margins and quote styling inside these sections, at a specificity
   the component rules below can override.
   ========================================================================== */

.onc-sec {
	--onc-pink: var(--color-content-primary, #F21967);
	--onc-pink-dark: #c90d54;
	--onc-pink-soft: rgba(242, 25, 103, .10);
	--onc-navy: var(--color-content-secondary, #141841);
	--onc-violet: var(--color-alt-content-secondary, #7145B8);
	--onc-heading: #363335;
	--onc-ink: #000;
	--onc-text: var(--color-content-text, #61676D);
	--onc-muted: var(--color-alt-content-faded, #63799B);
	--onc-line: var(--color-content-border, #e8e8e8);
	--onc-surface: var(--color-alt-content-bg-alt, #F3F5F7);
	--onc-green: #00b67a;
	--onc-radius: 8px;
	--onc-radius-lg: 12px;
	--onc-shadow-card: 0 18px 55px rgba(26, 22, 40, .10);
	position: relative;
	color: var(--onc-text);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
}

.onc-sec,
.onc-sec *,
.onc-sec *::before,
.onc-sec *::after { box-sizing: border-box; }

.onc-sec :where(h1, h2, h3, p, ul, li, figure, blockquote) { margin: 0; padding: 0; }
.onc-sec :where(h1, h2, h3) { font-family: inherit; font-style: normal; text-transform: none; }
.onc-sec :where(ul) { list-style: none; }
.onc-sec :where(blockquote) { position: static; border: 0; font-size: inherit; line-height: inherit; font-style: normal; quotes: none; }
.onc-sec :where(blockquote)::before,
.onc-sec :where(blockquote)::after { content: none; display: none; }
.onc-sec picture { display: contents; }
.onc-sec [hidden] { display: none !important; }
.onc-sec :is(a, button, summary):focus-visible { outline: 2px solid var(--onc-pink); outline-offset: 4px; border-radius: 6px; }

.onc-wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

/* Impreza's flex rows pull .g-cols out by 1.5rem on both sides and pad each
   column back in. In a Full Width row that makes the page 1.5rem wider than the
   screen (sideways scroll, zoomed-out mobile). Rows holding these sections don't
   need the gutter: the sections centre their own content. */
.l-section:has(.onc-sec) > .l-section-h > .g-cols.via_flex { margin-left: 0; margin-right: 0; }
.l-section:has(.onc-sec) > .l-section-h > .g-cols.via_flex > div > .vc_column-inner { padding-left: 0; padding-right: 0; }
.onc-icon { width: 18px; height: 18px; flex: none; }
.onc-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Shared ---------- */
.onc-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--onc-pink-dark); font-size: 13px; font-weight: 800; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; }
.onc-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--onc-pink); }
.onc-sec mark { padding: 0 .12em; border-radius: 4px; background: var(--onc-pink-soft); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.onc-pill { display: inline-block; padding: 7px 18px; border: 1px solid rgba(242, 25, 103, .4); border-radius: 999px; background: #fff; color: var(--onc-pink-dark); font-size: 13px; font-weight: 600; line-height: 1.5; }

.onc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 13px 28px; border: 1px solid transparent; border-radius: var(--onc-radius); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; transition: background-color .18s, color .18s, border-color .18s, transform .18s; }
.onc-btn:hover { transform: translateY(-1px); }
.onc-btn--outline { background: transparent; color: var(--onc-navy); border-color: #d9d6df; }
.onc-btn--outline:hover { background: var(--onc-surface); color: var(--onc-navy); border-color: var(--onc-navy); }

/* Logo: sized in PHP (--lw/--lh), cropped to its artwork with the inline img offsets. */
.onc-logo { position: relative; display: block; flex: none; overflow: hidden; width: calc(var(--lw, 40) * 1px); height: calc(var(--lh, 40) * 1px); }
.onc-sec .onc-logo img { position: absolute; display: block; max-width: none; height: auto; margin: 0; }

.onc-badge { position: absolute; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #fff; }

.onc-cube { position: absolute; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(26, 22, 40, .18)); }
.onc-cube--pink { color: var(--onc-pink); }
.onc-cube--violet { color: var(--onc-violet); }
.onc-cube--lg { width: 30px; height: 30px; }

/* "Read full testimonial" */
.onc-more { margin: 0; }
.onc-more__toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0; color: var(--onc-pink); font-size: 14px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.onc-more__toggle::-webkit-details-marker { display: none; }
.onc-more__toggle::marker { content: ""; }
.onc-more__toggle:hover { color: var(--onc-navy); }
.onc-more__toggle .onc-icon { width: 15px; height: 15px; transition: transform .2s; }
.onc-more[open] .onc-more__toggle .onc-icon { transform: rotate(180deg); }
.onc-more__close,
.onc-more[open] .onc-more__open { display: none; }
.onc-more[open] .onc-more__close { display: inline; }
.onc-more__full { padding: 6px 0 4px; font-size: 16px; line-height: 1.6; }
.onc-more__full p + p { margin-top: .6em; }

/* ---------- Intro ---------- */
.onc-intro { padding: 72px 0 52px; background: #fff; text-align: center; }
.onc-intro .onc-eyebrow { margin-bottom: 18px; }
.onc-intro__title { max-width: 820px; margin-inline: auto; color: var(--onc-heading); font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.onc-intro__copy { max-width: 640px; margin: 22px auto 0; color: var(--onc-text); font-size: 18px; line-height: 1.6; }
.onc-intro__copy p + p { margin-top: .6em; }

/* ---------- Trust bar ---------- */
.onc-trust { padding: 22px 0; border-top: 1px solid var(--onc-line); border-bottom: 1px solid var(--onc-line); background: #f7f6f8; }
.onc-trust__inner,
.onc-trust__link { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 34px; }
.onc-trust__link { display: inline-flex; text-decoration: none; }
.onc-sec .onc-trust__link,
.onc-sec .onc-trust__link:hover,
.onc-sec .onc-trust__link:focus { color: inherit; text-decoration: none; }
.onc-trust__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--onc-ink); font-weight: 800; }
.onc-trust__star { width: 24px; height: 24px; color: var(--onc-green); }
.onc-stars { color: var(--onc-green); font-size: 16px; letter-spacing: 2px; }
.onc-trust__copy { color: var(--onc-text); font-size: 14px; }
.onc-trust__copy strong { color: var(--onc-ink); font-weight: 700; transition: color .18s; }
.onc-trust__link:hover .onc-trust__copy strong { color: var(--onc-pink); }

/* ---------- Logo strip: one row, continuous scroll ---------- */
.onc-logos { padding: 26px 0; border-bottom: 1px solid var(--onc-line); background: #fff; }
.onc-logos__inner { display: flex; align-items: center; gap: 40px; }
.onc-logos__label { flex: 0 0 170px; color: var(--onc-muted); font-size: 13px; line-height: 1.5; }
.onc-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.onc-marquee__track { display: flex; width: max-content; animation: onc-marquee var(--onc-marquee-duration, 42s) linear infinite; }
.onc-marquee:hover .onc-marquee__track { animation-play-state: paused; }
.onc-sec .onc-marquee__group { display: flex; align-items: center; gap: 48px; margin: 0; padding: 0 48px 0 0; }
.onc-sec .onc-marquee__item { display: flex; align-items: center; height: 56px; margin: 0; padding: 0; }
.onc-logos .onc-logo img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.onc-logos .onc-marquee__item:hover .onc-logo img,
.onc-logos--color .onc-logo img { filter: none; opacity: 1; }
/* Logos on a solid dark background (white lettering on a black tile) arrive
   cropped to their lettering with .onc-logo--dark. Inverting gives dark lettering
   on the light strip like the other logos. On hover, or with full colour on,
   invert + hue-rotate keeps the colours close to the brand's. */
.onc-logos .onc-logo--dark img { filter: grayscale(1) invert(1); }
.onc-logos .onc-marquee__item:hover .onc-logo--dark img,
.onc-logos--color .onc-logo--dark img { filter: invert(1) hue-rotate(180deg); }
@keyframes onc-marquee { to { transform: translateX(-50%); } }

/* ---------- Spotlight ---------- */
.onc-spot { overflow: hidden; padding: 88px 0; border-bottom: 1px solid var(--onc-line); background: radial-gradient(circle at 12% 22%, rgba(242, 25, 103, .10), transparent 34%), radial-gradient(circle at 88% 78%, rgba(113, 69, 184, .11), transparent 32%), #fcfbfc; }
.onc-spot__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.onc-spot__grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.onc-spot__label { margin-bottom: 26px; font-size: inherit; line-height: inherit; }
.onc-spot__quote { max-width: 560px; color: var(--onc-navy); font-size: 32px; font-weight: 600; line-height: 1.35; }
.onc-spot__author { margin-top: 26px; font-size: 15px; line-height: 1.6; }
.onc-spot__author strong { display: block; color: var(--onc-ink); font-weight: 700; }
.onc-spot__author span { color: var(--onc-text); }
.onc-spot .onc-more { margin-top: 14px; }
.onc-spot__visual { position: relative; overflow: hidden; margin: 0; border-radius: var(--onc-radius-lg); background: #fff; box-shadow: 0 24px 60px rgba(26, 22, 40, .18); aspect-ratio: 570 / 400; }
.onc-sec .onc-spot__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.onc-spot__badge { left: 18px; bottom: 18px; width: 72px; height: 72px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.onc-spot .onc-cube--a { top: 44px; right: 8%; transform: rotate(-14deg); }
.onc-spot .onc-cube--b { bottom: 36px; left: 6%; transform: rotate(18deg); }

/* ---------- Stories ---------- */
.onc-stories { padding: 84px 0 72px; background: #fff; }
.onc-stories--single { padding: 0; }
.onc-heading { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.onc-heading .onc-eyebrow { margin-bottom: 14px; }
.onc-heading__title { color: var(--onc-ink); font-size: 38px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
.onc-heading__sub { margin-top: 14px; font-size: 17px; line-height: 1.55; }
.onc-stories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; align-items: stretch; }

.onc-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--onc-line); border-radius: var(--onc-radius-lg); background: #fff; scroll-margin-top: 110px; transition: transform .2s, box-shadow .2s; }
.onc-card:hover { transform: translateY(-3px); box-shadow: var(--onc-shadow-card); }
.onc-card__media { position: relative; background: var(--onc-surface); aspect-ratio: 570 / 334; }
.onc-sec .onc-card__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.onc-card__badge { left: 20px; bottom: -24px; width: 72px; height: 72px; box-shadow: 0 6px 18px rgba(26, 22, 40, .14); }
.onc-card__body { display: flex; flex: 1; flex-direction: column; padding: 38px 24px 22px; }
.onc-card__body--plain { padding-top: 24px; }
.onc-card__tag { color: var(--onc-pink-dark); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
.onc-card__title { margin: 6px 0 12px; color: var(--onc-ink); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.onc-card__quote { font-size: 16px; line-height: 1.6; }
.onc-card .onc-more { margin-top: 8px; }
.onc-card .onc-more__full { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--onc-line); }
.onc-card__person { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--onc-line); font-size: 14px; line-height: 1.55; }
.onc-card__quote + .onc-card__person,
.onc-card .onc-more + .onc-card__person { margin-top: max(auto, 16px); }
.onc-card__person strong { display: block; color: var(--onc-ink); font-weight: 700; }

.onc-stories__more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; }
.onc-stories__status { color: var(--onc-muted); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.onc-spot__grid { gap: 40px; }
	.onc-spot__quote { font-size: 28px; }
	.onc-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.onc-intro { padding: 52px 0 40px; }
	.onc-intro__title { font-size: 42px; }
	.onc-logos__inner { flex-direction: column; gap: 14px; text-align: center; }
	.onc-logos__label { flex: auto; }
	.onc-marquee { width: 100%; }
	.onc-spot { padding: 64px 0; }
	.onc-spot__grid { grid-template-columns: minmax(0, 1fr); }
	.onc-spot__visual { max-width: 560px; }
	.onc-stories { padding: 60px 0 56px; }
	.onc-heading__title { font-size: 32px; }
}

@media (max-width: 600px) {
	.onc-wrap { width: calc(100% - 32px); }
	.onc-intro__title { font-size: 34px; }
	.onc-intro__copy { font-size: 16px; }
	.onc-trust__inner,
	.onc-trust__link { gap: 8px 20px; text-align: center; }
	.onc-sec .onc-marquee__group { gap: 32px; padding-right: 32px; }
	.onc-logos .onc-logo { width: calc(var(--lw, 40) * .85px); height: calc(var(--lh, 40) * .85px); }
	.onc-spot__quote { font-size: 24px; }
	.onc-spot__badge { left: 10px; bottom: 10px; width: 56px; height: 56px; }
	.onc-spot__badge .onc-logo { width: calc(var(--lw, 40) * .75px); height: calc(var(--lh, 40) * .75px); }
	.onc-heading__title { font-size: 29px; }
	.onc-stories__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.onc-card__body { padding: 36px 20px 20px; }
	.onc-card__body--plain { padding-top: 22px; }
	.onc-card__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.onc-sec *,
	.onc-sec *::before,
	.onc-sec *::after { transition: none !important; animation: none !important; }
	.onc-marquee { -webkit-mask-image: none; mask-image: none; }
	.onc-marquee__track { width: auto; }
	.onc-sec .onc-marquee__group { flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding-right: 0; }
	.onc-marquee__group[aria-hidden="true"],
	.onc-marquee__item[aria-hidden="true"] { display: none !important; }
}

@media print {
	.onc-marquee__track { animation: none; }
	.onc-marquee__group[aria-hidden="true"],
	.onc-stories__more,
	.onc-cube { display: none !important; }
	.onc-card[hidden] { display: flex !important; }
	.onc-card,
	.onc-spot { break-inside: avoid; }
}

/* Pause / resume for the logo strip.
   The button is rendered hidden and revealed by JavaScript, and stays hidden
   under reduced motion where the strip does not animate anyway. */
.onc-logos__motion {
	width: 36px; height: 36px; flex: none;
	display: grid; place-items: center; padding: 0;
	border: 1px solid var(--onc-line); border-radius: 4px;
	background: #fff; color: var(--onc-text); cursor: pointer;
}
.onc-logos__motion:hover { color: var(--onc-pink-dark); }
.onc-logos__motion .onc-icon { width: 16px; height: 16px; }
.onc-logos__motion .onc-icon--play { display: none; }
.onc-logos__motion.is-playing .onc-icon--pause { display: none; }
.onc-logos__motion.is-playing .onc-icon--play { display: block; }

.onc-marquee.is-paused .onc-marquee__track { animation-play-state: paused; }

/* Optional link under the spotlight quote. */
.onc-spot__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--onc-pink-dark); font-size: 14px; font-weight: 650; }
.onc-spot__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.onc-spot__link .onc-icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
	.onc-logos__motion { display: none !important; }
}