/*
 * v1.8.6/1.8.7 Articles colours. v1.8.7: with articles, the Articles page keeps the v1.8.4 dark look
 * (v184.css) with non-cyan type labels; the empty "on the way" page and the homepage section are light.
 * Markup: inc/v184.php (Articles page), inc/v186.php (empty state, homepage cards),
 * patterns/articles-mix.php (homepage section). Loads after v185.css.
 * Colours: navy #0B1A33 titles, ink #24384A text, slate #4A5A6A type labels (small caps),
 * mist #F3F8FA / #EAF3F6 panels, teal #0B6A85 and cyan #22B8CF only as small accents, orange dot.
 * All text pairs meet WCAG AA on their own background.
 */
:root {
	--shf186-navy: #0B1A33;
	--shf186-ink: #24384A;
	--shf186-slate: #4A5A6A;
	--shf186-mist: #F3F8FA;
	--shf186-mist-2: #EAF3F6;
	--shf186-line: rgba(11, 26, 51, 0.10);
	--shf186-shadow: 0 1px 2px rgba(11, 26, 51, 0.05), 0 14px 34px -18px rgba(11, 26, 51, 0.28);
}

/* ===================== Type labels: never cyan ===================== */
/* v1.8.7: the Articles page with articles is back in the v1.8.4 dark McKinsey style (v184.css);
   only the type labels change: light grey small caps on the dark parts, slate on white. */
.shf-as-type, .shf-mck-card__label, .shf-al-card__label {
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-weight: 700 !important; letter-spacing: .13em; text-transform: uppercase;
}
.shf-af .shf-as-type, .shf-am .shf-as-type, .shf-ab .shf-as-type { color: #DCE3EA !important; }
.shf-af .shf-as-type::before { background: #DCE3EA; }
.shf-ag .shf-as-type, .shf-mck-card__label, .shf-al-card__label { color: var(--shf186-slate) !important; font-size: .72rem !important; }
.shf-type-pill:empty { display: none !important; }

/* ===================== Header band, empty Articles page only: mist with a pale photo ===================== */
.shf-articles-empty .shf-ed-hero {
	color: var(--shf186-ink) !important;
	background:
		linear-gradient(90deg, rgba(243, 248, 250, 0.98) 0%, rgba(243, 248, 250, 0.92) 46%, rgba(243, 248, 250, 0.66) 100%),
		url("../images/headers/header-glass-facade.webp") right 30% / cover no-repeat,
		var(--shf186-mist) !important;
	background-blend-mode: normal, luminosity, normal !important;
	border-bottom: 1px solid var(--shf186-line);
}
.shf-articles-empty .shf-ed-hero::after { border-color: rgba(11, 106, 133, 0.16) !important; }
.shf-articles-empty .shf-ed-hero::before { /* the logo's orange dot on the faint ring */
	content: ""; position: absolute; right: 120px; top: 22px; width: 14px; height: 14px; border-radius: 50%;
	background: #FF7A1A; pointer-events: none; z-index: 0;
}
.shf-articles-empty .shf-ed-hero .shf-ed-kicker { color: var(--shf186-slate) !important; border-left-color: #22B8CF !important; }
.shf-articles-empty .shf-ed-hero .shf-ed-hero__title { color: var(--shf186-navy) !important; }
.shf-articles-empty .shf-ed-hero .shf-ed-hero__intro { color: var(--shf186-ink) !important; }

/* Empty-state button */
.shf-ae__btn { background: var(--shf186-navy); color: #fff !important; box-shadow: 0 10px 24px -10px rgba(11, 26, 51, .45); }
.shf-ae__btn:hover, .shf-ae__btn:focus-visible { background: #0B6A85; color: #fff !important; box-shadow: 0 0 0 4px rgba(34, 184, 207, .3), 0 14px 28px -12px rgba(11, 26, 51, .45); }
.shf-ae__btn:focus-visible { outline: 3px solid var(--shf186-navy); outline-offset: 3px; }

/* ===================== Empty state ===================== */
.shf-ae { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(440px, 58vh, 620px); display: flex; align-items: center; background: #E7EFF2; }
.shf-ae__media { position: absolute; inset: 0; z-index: -2; }
.shf-ae__media .shf-as-bg { filter: saturate(.55) brightness(1.08); object-position: 50% 18%; }
.shf-ae__veil {
	position: absolute; inset: 0 auto 0 0; width: 62%; z-index: -1;
	-webkit-backdrop-filter: blur(18px) saturate(.7); backdrop-filter: blur(18px) saturate(.7);
	background: linear-gradient(90deg, rgba(246, 250, 251, .94) 0%, rgba(246, 250, 251, .86) 64%, rgba(246, 250, 251, .5) 100%);
	-webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.shf-ae__inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px); box-sizing: border-box;
	display: block; }
/* v1.8.7: text only, left-aligned on a frosted panel edge; the sky stays open on the right. */
.shf-ae__text { max-width: 620px; }
.shf-ae__eyebrow { margin: 0 0 16px !important; color: var(--shf186-slate); font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.shf-ae__eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF7A1A; margin-right: 10px; vertical-align: .08em; }
.shf-ae__title { margin: 0 0 16px !important; color: var(--shf186-navy) !important; font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif) !important;
	font-weight: 800 !important; font-size: clamp(2rem, 3.8vw, 3.3rem) !important; line-height: 1.08 !important; letter-spacing: -.015em; text-wrap: balance; }
.shf-ae__line { margin: 0 0 30px !important; color: var(--shf186-ink); font-size: 1.08rem; line-height: 1.6; }
.shf-ae__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.shf-ae__btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; text-decoration: none !important;
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif); font-weight: 700; font-size: .96rem;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.shf-ae__btn span { transition: transform .25s ease; }
.shf-ae__btn:hover, .shf-ae__btn:focus-visible { transform: translateY(-2px); }
.shf-ae__btn:hover span, .shf-ae__btn:focus-visible span { transform: translateX(4px); }
.shf-ae .shf-follow__btn { background: rgba(255, 255, 255, .9); }

/* ===================== Homepage Articles section: light ===================== */
.shf-mck {
	color: var(--shf186-navy) !important;
	background:
		radial-gradient(55% 60% at 92% 8%, rgba(34, 184, 207, .09) 0%, rgba(34, 184, 207, 0) 70%),
		radial-gradient(45% 50% at 0% 100%, rgba(11, 106, 133, .05) 0%, rgba(11, 106, 133, 0) 70%),
		linear-gradient(180deg, #FFFFFF 0%, var(--shf186-mist) 100%) !important;
}
.shf-home .shf-mck { box-shadow: 0 -18px 40px -28px rgba(11, 26, 51, .35); }
.shf-mck__kicker { color: var(--shf186-slate) !important; }
.shf-mck__kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF7A1A; margin-right: 10px; vertical-align: .08em; }
.shf-mck__title { color: var(--shf186-navy) !important; }
.shf-mck__lead { color: var(--shf186-ink) !important; }
.shf-mck .shf-round-arrow { background: var(--shf186-navy); color: #fff; }
.shf-mck .shf-round-arrow:hover, .shf-mck .shf-round-arrow:focus-visible { background: #0B6A85; color: #fff; }
.shf-mck .shf-round-arrow:focus-visible { outline-color: var(--shf186-navy); }
.shf-mck__all a { color: var(--shf186-navy) !important; }
.shf-mck__all a:hover { color: #0B6A85 !important; }
.shf-mck-card { background: #DCE8EC !important; box-shadow: var(--shf186-shadow) !important; border-radius: 14px !important; }
.shf-mck-card::after { background: linear-gradient(0deg, rgba(243, 248, 250, .3), transparent 50%) !important; }
.shf-mck-card__image--v186 .shf-as-bg { transition: transform .6s ease; }
.shf-mck-card:hover .shf-mck-card__image--v186 .shf-as-bg { transform: scale(1.04); }
.shf-mck-card__image--v186 .shf-as-chip { top: 14px; left: 14px; }
.shf-mck-card__body, .shf-mck-grid li:nth-child(1) .shf-mck-card__body {
	inset: auto 14px 14px 14px !important; justify-content: flex-end !important; gap: 10px !important; padding: 20px 22px !important;
	border-radius: 12px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 10px 26px -14px rgba(11, 26, 51, .35); transition: transform .35s ease;
}
.shf-mck-grid li:nth-child(1) .shf-mck-card__body { padding: 28px 28px 24px !important; }
.shf-mck-card:hover .shf-mck-card__body, .shf-mck-card:focus-within .shf-mck-card__body { transform: translateY(-4px); }
.shf-mck-card__title, .shf-mck-card__title a { color: var(--shf186-navy) !important; }
.shf-mck-card__date, .shf-mck-card__date a { color: var(--shf186-slate) !important; margin-top: 0 !important; }
.shf-mck-card:focus-within { outline-color: #0B6A85; }

/* ===================== responsive ===================== */
@media (max-width: 900px) {
	.shf-ae__veil { width: 100%; -webkit-mask-image: none; mask-image: none; }
	.shf-articles-empty .shf-ed-hero::before { right: 40px; }
}
@media (max-width: 720px) {
	.shf-mck-card::after { background: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.shf-mck-card__body, .shf-ae__btn, .shf-ae__btn span { transition: none !important; }
	.shf-mck-card:hover .shf-mck-card__body, .shf-ae__btn:hover { transform: none !important; }
}

/* Article page: the type as a quiet slate label with the orange dot (no coloured pill). */
.shf-type-pill { background: transparent !important; color: var(--shf186-slate) !important; padding: 0 !important; letter-spacing: .13em !important; font-size: .74rem !important; }