/*
 * SAIF Child Theme — Homepage 2026 (hwc-) Widget Styles
 *
 * Styles for the hwc- widget set ONLY. Fully isolated from widgets.css —
 * nothing here targets sf- classes, and nothing in widgets.css targets hwc-.
 * The one shared dependency is the SF_Wave_Edges trait (.sf-wave-* classes),
 * styled in widgets.css, which this file loads after.
 *
 * Registered in functions.php and loaded only on pages that use an hwc widget
 * (via each widget's get_style_depends()).
 *
 * Specificity: child elements are scoped under the widget root class
 * (.hwc-x .hwc-x__child = 0,2,0) so they beat Elementor kit / Hello resets
 * (e.g. .elementor-kit-N button = 0,1,1) without !important.
 *
 * Grid reference (1440 frame): 12 columns, 86px column, 24px gutter, 72px margins.
 *
 * Tokens: --hwc-* values live in hwc-tokens.css (new/different in the 2026
 * design); identical values reuse the --sf-* tokens from tokens.css.
 */

/* ─── Shared: hwc buttons ─────────────────────────────────────────── */
/* Figma 2959:206 — 47px pill, 14px Medium, ~28px horizontal padding.
   Variants: --accent (gold fill), --navy (navy fill), --outline (navy ring).
   Scoped under [class*="hwc-"] (0,2,0) so kit link/button styles don't win.
   Hover states are not in the design: fill → hollow, text takes the fill
   colour (matches the existing sf- pattern) — pending designer confirmation. */
[class*="hwc-"] .hwc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--sf-btn-height);
	padding: 7px var(--hwc-btn-padding-x);
	border-radius: var(--sf-btn-radius);
	font-family: var(--sf-font-primary);
	font-weight: 500;
	font-size: var(--sf-size-button);
	line-height: 1.22;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

[class*="hwc-"] .hwc-btn--accent {
	background-color: var(--hwc-color-accent);
	color: var(--sf-color-white);
	border: var(--hwc-btn-border) solid var(--hwc-color-accent);
}

[class*="hwc-"] .hwc-btn--accent:hover,
[class*="hwc-"] .hwc-btn--accent:focus-visible {
	background-color: transparent;
	color: var(--hwc-color-accent);
}

[class*="hwc-"] .hwc-btn--navy {
	background-color: var(--sf-color-ink-deep);
	color: var(--sf-color-white);
	border: var(--hwc-btn-border) solid var(--sf-color-ink-deep);
}

[class*="hwc-"] .hwc-btn--navy:hover,
[class*="hwc-"] .hwc-btn--navy:focus-visible {
	background-color: transparent;
	color: var(--sf-color-ink-deep);
}

[class*="hwc-"] .hwc-btn--outline {
	background-color: transparent;
	color: var(--sf-color-ink);
	border: var(--sf-btn-border) solid var(--sf-color-ink);
}

[class*="hwc-"] .hwc-btn--outline:hover,
[class*="hwc-"] .hwc-btn--outline:focus-visible {
	background-color: var(--sf-color-ink);
	color: var(--sf-color-white);
}

/* ─── Shared: hwc backgrounds ─────────────────────────────────────── */
/* Classes output by the HWC_Background trait (editor "Background colour"
   dropdown). Widgets add their own text overrides for hwc-bg--ink-deep. */
.hwc-bg--white {
	background-color: var(--sf-color-white);
}

.hwc-bg--cream {
	background-color: var(--sf-color-cream);
}

.hwc-bg--ink-deep {
	background-color: var(--sf-color-ink-deep);
}

/* ─── hwc-video-feature ───────────────────────────────────────────── */

/* :where() keeps this at 0 specificity so the shared .sf-has-wave-* padding
   (widgets.css) and the Section Edges spacing controls still win. */
:where(.hwc-video-feature) {
	padding: 48px 0 60px;
}

.hwc-video-feature .hwc-video-feature__title {
	max-width: 1440px;
	margin: 0 auto 41px;
	padding: 0 72px;
	font-family: var(--sf-font-primary);
	font-weight: 600;
	font-size: var(--hwc-size-section-title);
	line-height: var(--hwc-lh-section-title);
	color: var(--sf-color-ink-deep);
	text-align: center;
}

/* Links inside the WYSIWYG title keep the heading colour */
.hwc-video-feature .hwc-video-feature__title a {
	color: inherit;
	text-decoration: underline;
}

/* 8 columns video / 4 columns content; content sits at the bottom of the row */
.hwc-video-feature .hwc-video-feature__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 72px;
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 0 24px;
	align-items: end;
}

/* ── Video block ── */

.hwc-video-feature .hwc-video-feature__video-block {
	position: relative;
	min-width: 0;
}

.hwc-video-feature .hwc-video-feature__thumbnail {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--hwc-color-placeholder);
	overflow: hidden;
}

.hwc-video-feature .hwc-video-feature__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.hwc-video-feature .hwc-video-feature__thumbnail::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 148px;
	background: linear-gradient(to bottom, transparent, var(--sf-color-surface-dark));
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

/* Play button — white ring, transparent fill */
.hwc-video-feature .hwc-video-feature__play {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9.65%; /* Figma: 83px on the 856px video, 29px on the 304px mobile video */
	min-width: 29px;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 2px solid var(--sf-color-white);
	border-radius: 50%;
	background: transparent;
	color: var(--sf-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease, transform 0.2s ease;
}

.hwc-video-feature .hwc-video-feature__play:hover,
.hwc-video-feature .hwc-video-feature__play:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	color: var(--sf-color-white);
	border-color: var(--sf-color-white);
	transform: translate(-50%, -50%) scale(1.08);
	outline: none;
}

.hwc-video-feature .hwc-video-feature__play svg {
	display: block;
	width: 33%;
	height: auto;
	margin-left: 4%; /* optical centering of the play triangle */
}

/* Bottom text overlay — gradient lives on __thumbnail::after */
.hwc-video-feature .hwc-video-feature__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 20px 19px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 2;
	pointer-events: none;
}

.hwc-video-feature .hwc-video-feature__overlay-title {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-weight: 600;
	font-size: var(--hwc-size-video-title);
	line-height: normal;
	color: var(--sf-color-white);
}

.hwc-video-feature .hwc-video-feature__overlay-duration {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-weight: 400;
	font-size: var(--hwc-size-video-meta);
	line-height: normal;
	color: var(--sf-color-white);
}

/* iframe replaces thumbnail on play (hwc-widgets.js) */
.hwc-video-feature .hwc-video-feature__iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: none;
}

/* ── Right content ── */

.hwc-video-feature .hwc-video-feature__heading {
	margin: 0 0 14px;
	font-family: var(--sf-font-primary);
	font-weight: 600;
	font-size: var(--hwc-size-h3);
	line-height: var(--hwc-lh-h3);
	color: var(--hwc-color-accent);
}

.hwc-video-feature .hwc-video-feature__body {
	margin: 0 0 33px;
	font-family: var(--sf-font-primary);
	font-weight: 400;
	font-size: var(--sf-size-body);
	line-height: var(--hwc-lh-body);
	color: var(--sf-color-ink-deep);
}

/* WYSIWYG body — paragraph rhythm and inline links */
.hwc-video-feature .hwc-video-feature__body p,
.hwc-video-feature .hwc-video-feature__body ul,
.hwc-video-feature .hwc-video-feature__body ol {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.hwc-video-feature .hwc-video-feature__body > :last-child {
	margin-bottom: 0;
}

.hwc-video-feature .hwc-video-feature__body a {
	color: inherit;
	text-decoration: underline;
}

.hwc-video-feature .hwc-video-feature__body a:hover,
.hwc-video-feature .hwc-video-feature__body a:focus-visible {
	color: var(--hwc-color-accent);
}

/* Elementor wrapper — background/spacing set via Elementor's own wrapper settings */
.elementor-widget-hwc-video-feature > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

/* Responsive */

@media (max-width: 1280px) {

	.hwc-video-feature .hwc-video-feature__title,
	.hwc-video-feature .hwc-video-feature__inner {
		padding: 0 40px;
	}
}

/* Stack in source order: title → video → content (no flip).
   Spacing from Figma mobile frame 2959:325 (390 wide, ~42px side gutters).
   Font sizes switch via the responsive --hwc-* tokens (hwc-tokens.css). */
@media (max-width: 1024px) {

	:where(.hwc-video-feature) {
		padding: 40px 0 50px;
	}

	.hwc-video-feature .hwc-video-feature__title {
		margin-bottom: 26px;
		padding: 0 42px;
	}

	.hwc-video-feature .hwc-video-feature__inner {
		grid-template-columns: 1fr;
		gap: 17px 0;
		padding: 0 42px;
	}

	.hwc-video-feature .hwc-video-feature__content {
		text-align: center;
	}

	.hwc-video-feature .hwc-video-feature__body {
		margin-bottom: 23px;
	}

	/* Mobile CTA runs slightly wider than the text column (327px at 390) */
	.hwc-video-feature .hwc-video-feature__btn {
		display: flex;
		width: calc(100% + 24px);
		max-width: 327px;
		margin: 0; /* centred by left/transform, which also works when wider than the column */
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Small phones — overlay and play ring scale down with the 304px video */
@media (max-width: 767px) {

	.hwc-video-feature .hwc-video-feature__thumbnail::after {
		height: 53px;
	}

	.hwc-video-feature .hwc-video-feature__overlay {
		padding: 0 7px 16px;
	}

	.hwc-video-feature .hwc-video-feature__play {
		border-width: 1px;
	}
}

/* ─── hwc-video-cards ─────────────────────────────────────────────── */
/* Figma desktop 2959:206: two 636px cards (6 cols each) with the 24px gutter,
   caption 13px below, centred button 29px below the captions.
   Figma mobile 2959:325: stacked 307px cards, caption 8px below, 22px between
   cards, button 27px below. */

/* :where() keeps this at 0 specificity so wave padding still wins. */
:where(.hwc-video-cards) {
	padding: 48px 0 60px;
}

.hwc-video-cards .hwc-video-cards__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 72px;
}

.hwc-video-cards .hwc-video-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
}

/* One card keeps its half-width column and centres */
.hwc-video-cards .hwc-video-cards__grid--single {
	grid-template-columns: minmax(0, calc((100% - 24px) / 2));
	justify-content: center;
}

.hwc-video-cards .hwc-video-cards__card {
	min-width: 0;
}

.hwc-video-cards .hwc-video-cards__video-block {
	position: relative;
}

.hwc-video-cards .hwc-video-cards__thumbnail {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--hwc-color-placeholder);
	overflow: hidden;
}

.hwc-video-cards .hwc-video-cards__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

/* Play ring — Figma 111px on a 636px card (54px on 307px mobile) = 17.5% */
.hwc-video-cards .hwc-video-cards__play {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 17.5%;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 2px solid var(--sf-color-white);
	border-radius: 50%;
	background: transparent;
	color: var(--sf-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease, transform 0.2s ease;
}

.hwc-video-cards .hwc-video-cards__play:hover,
.hwc-video-cards .hwc-video-cards__play:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	color: var(--sf-color-white);
	border-color: var(--sf-color-white);
	transform: translate(-50%, -50%) scale(1.08);
	outline: none;
}

.hwc-video-cards .hwc-video-cards__play svg {
	display: block;
	width: 33%;
	height: auto;
	margin-left: 4%; /* optical centering of the play triangle */
}

/* iframe replaces thumbnail on play (hwc-widgets.js) */
.hwc-video-cards .hwc-video-cards__iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: none;
}

.hwc-video-cards .hwc-video-cards__caption {
	margin-top: 13px;
	color: var(--sf-color-ink-deep);
	font-family: var(--sf-font-primary);
}

.hwc-video-cards .hwc-video-cards__title {
	margin: 0;
	font-weight: 600;
	font-size: var(--hwc-size-video-title);
	line-height: normal;
	color: inherit;
}

.hwc-video-cards .hwc-video-cards__duration {
	margin: 0;
	font-weight: 400;
	font-size: var(--hwc-size-video-meta);
	line-height: normal;
	color: inherit;
}

.hwc-video-cards .hwc-video-cards__actions {
	margin-top: 29px;
	text-align: center;
}

/* ── Extra cards (3–5) revealed by the show more button (hwc-widgets.js).
   No Figma design: standard = same 2-up half-width cards as the top row;
   compact = hwc-video-trio's 3-up grid. ── */

.hwc-video-cards .hwc-video-cards__more {
	display: grid;
	margin-top: 40px;
}

/* Hello's button reset sets nowrap; let long labels wrap on mobile */
.hwc-video-cards .hwc-video-cards__btn {
	white-space: normal;
}

/* The grid display above would otherwise beat the hidden attribute */
.hwc-video-cards .hwc-video-cards__more[hidden] {
	display: none;
}

.hwc-video-cards .hwc-video-cards__more--standard {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 24px;
}

/* Odd last card keeps its half width and centres */
.hwc-video-cards .hwc-video-cards__more--standard > .hwc-video-cards__card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - 24px) / 2);
}

.hwc-video-cards .hwc-video-cards__more--compact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
}

/* One or two compact cards keep 1/3 width and centre */
.hwc-video-cards .hwc-video-cards__more--compact.hwc-video-cards__more--count-1 {
	grid-template-columns: calc((100% - 48px) / 3);
	justify-content: center;
}

.hwc-video-cards .hwc-video-cards__more--compact.hwc-video-cards__more--count-2 {
	grid-template-columns: repeat(2, calc((100% - 48px) / 3));
	justify-content: center;
}

.hwc-video-cards .hwc-video-cards__more--compact .hwc-video-cards__caption {
	margin-top: 15px;
}

.elementor-widget-hwc-video-cards > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

@media (max-width: 1280px) {

	.hwc-video-cards .hwc-video-cards__inner {
		padding: 0 40px;
	}
}

/* Stack: one column, cards full width of the 42px-gutter column */
@media (max-width: 1024px) {

	:where(.hwc-video-cards) {
		padding: 40px 0 50px;
	}

	.hwc-video-cards .hwc-video-cards__inner {
		padding: 0 42px;
	}

	.hwc-video-cards .hwc-video-cards__grid,
	.hwc-video-cards .hwc-video-cards__grid--single {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px 0;
	}

	.hwc-video-cards .hwc-video-cards__caption,
	.hwc-video-cards .hwc-video-cards__more--compact .hwc-video-cards__caption {
		margin-top: 8px;
	}

	.hwc-video-cards .hwc-video-cards__actions {
		margin-top: 27px;
	}

	/* Extra cards stack the same way in both layouts */
	.hwc-video-cards .hwc-video-cards__more {
		margin-top: 22px;
	}

	.hwc-video-cards .hwc-video-cards__more--standard,
	.hwc-video-cards .hwc-video-cards__more--compact,
	.hwc-video-cards .hwc-video-cards__more--compact.hwc-video-cards__more--count-1,
	.hwc-video-cards .hwc-video-cards__more--compact.hwc-video-cards__more--count-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px 0;
	}

	.hwc-video-cards .hwc-video-cards__more--standard > .hwc-video-cards__card:last-child:nth-child(odd) {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}
}

@media (max-width: 767px) {

	.hwc-video-cards .hwc-video-cards__play {
		border-width: 1px;
	}
}

/* ─── hwc-testimonial-carousel ────────────────────────────────────── */
/* Figma desktop 2959:206: photo 503x329 centred in the left 6 columns (79%),
   70px radius except top-left; quote in the right 6 columns, vertically
   centred; attribution 32px below. Mobile 2959:325: stacked, 42px gutters,
   20px gaps, left aligned. Swiper core CSS comes from Elementor's 'swiper'
   style handle. The curved band edge comes from Section Edges, not here. */

/* :where() keeps padding at 0 specificity so wave padding still wins.
   Navy band is part of the widget because all text on it is white. */
:where(.hwc-testimonial-carousel) {
	padding: 62px 0 66px;
	background-color: var(--sf-color-ink-deep);
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 72px;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__swiper {
	position: relative;
	overflow: hidden;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__slide {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	align-items: center;
	height: auto;
	box-sizing: border-box;
}

/* ── Photo ── */

.hwc-testimonial-carousel .hwc-testimonial-carousel__media {
	position: relative;
	width: 79%; /* 503px of the 636px column */
	margin: 0 auto;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__image {
	aspect-ratio: 503 / 329;
	background: var(--hwc-color-placeholder);
	border-radius: 0 var(--hwc-radius-testimonial) var(--hwc-radius-testimonial) var(--hwc-radius-testimonial);
	overflow: hidden;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__caption {
	position: absolute;
	top: 12px;
	left: 14px;
	display: flex;
	flex-direction: column;
	font-family: var(--sf-font-primary);
	color: var(--sf-color-white);
	pointer-events: none;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__caption-name {
	font-weight: 700;
	font-size: var(--hwc-size-caption);
	line-height: normal;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__caption-role,
.hwc-testimonial-carousel .hwc-testimonial-carousel__caption-location {
	font-weight: 400;
	font-size: var(--hwc-size-caption-sm);
	line-height: 1.5;
}

/* ── Quote ── */

.hwc-testimonial-carousel .hwc-testimonial-carousel__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__text {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-weight: 600;
	font-style: normal;
	font-size: var(--hwc-size-testimonial);
	line-height: var(--hwc-lh-testimonial);
	color: var(--sf-color-white);
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__attribution {
	margin-top: 32px;
	font-family: var(--sf-font-primary);
	font-style: italic;
	font-size: var(--hwc-size-attribution);
	line-height: normal;
	color: var(--sf-color-cream);
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__attribution-name {
	font-style: italic;
	font-weight: 600;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__attribution-detail {
	font-weight: 400;
}

/* ── Optional dots (not in the design) ── */

.hwc-testimonial-carousel .hwc-testimonial-carousel__dots {
	position: relative;
	bottom: auto;
	margin-top: 32px;
	text-align: center;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 6px;
	background: var(--sf-color-cream);
	opacity: 0.5;
}

.hwc-testimonial-carousel .hwc-testimonial-carousel__dots .swiper-pagination-bullet-active {
	background: var(--sf-color-white);
	opacity: 1;
}

.elementor-widget-hwc-testimonial-carousel > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

@media (max-width: 1280px) {

	.hwc-testimonial-carousel .hwc-testimonial-carousel__inner {
		padding: 0 40px;
	}
}

/* Stack: photo full column width, quote below, left aligned */
@media (max-width: 1024px) {

	:where(.hwc-testimonial-carousel) {
		padding: 40px 0 50px;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__inner {
		padding: 0 42px;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__slide {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px 0;
		align-items: start;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__media {
		width: 100%;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__image {
		aspect-ratio: 307 / 201;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__caption {
		top: 9px;
		left: 10px;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__attribution {
		margin-top: 20px;
	}

	.hwc-testimonial-carousel .hwc-testimonial-carousel__dots {
		margin-top: 24px;
	}
}


/* ─── hwc-info-columns ────────────────────────────────────────────── */
/* Figma desktop 2959:206 (group 2968:197, band 2960:2294): cream band,
   centred navy underlined eyebrow, three columns spanning x 97→1347; gold
   heading, body 20px below, arrow link 24px below the longest body (links
   share a baseline). Mobile 2959:325: stacked, 43px gutters, eyebrow →
   heading 29px, heading → body 11px, body → link 17px, 45px between columns.
   Background comes from the shared hwc-bg--* classes; curves come from
   Section Edges. */

/* :where() keeps padding at 0 specificity so wave padding still wins. */
:where(.hwc-info-columns) {
	padding: 48px 0;
}

.hwc-info-columns .hwc-info-columns__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 97px;
}

.hwc-info-columns .hwc-info-columns__eyebrow {
	margin: 0 0 22px;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-eyebrow);
	font-weight: 500;
	font-style: normal;
	line-height: var(--hwc-lh-eyebrow);
	text-align: center;
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--sf-color-ink-deep);
}

.hwc-info-columns .hwc-info-columns__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.hwc-info-columns .hwc-info-columns__col {
	display: flex;
	flex-direction: column;
}

.hwc-info-columns .hwc-info-columns__heading {
	margin: 0 0 20px;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-card-title);
	font-weight: 600;
	font-style: normal;
	line-height: var(--hwc-lh-card-title);
	color: var(--hwc-color-accent);
}

.hwc-info-columns .hwc-info-columns__body {
	margin: 0 0 24px;
	font-family: var(--sf-font-primary);
	font-size: var(--sf-size-body);
	font-weight: 400;
	font-style: normal;
	line-height: var(--hwc-lh-body);
	color: var(--sf-color-ink-deep);
}

/* margin-top:auto pushes every link to the bottom so they line up */
.hwc-info-columns .hwc-info-columns__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 12px;
	margin-top: auto;
	font-family: var(--sf-font-primary);
	font-size: var(--sf-size-link);
	font-weight: 500;
	font-style: normal;
	line-height: normal;
	color: var(--hwc-color-accent);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.hwc-info-columns .hwc-info-columns__cta:hover,
.hwc-info-columns .hwc-info-columns__cta:focus-visible {
	color: var(--sf-color-ink-deep);
	text-decoration: none;
}

.hwc-info-columns .hwc-info-columns__arrow {
	flex: none;
	transition: transform 0.2s ease;
}

.hwc-info-columns .hwc-info-columns__cta:hover .hwc-info-columns__arrow,
.hwc-info-columns .hwc-info-columns__cta:focus-visible .hwc-info-columns__arrow {
	transform: translateX(3px);
}

/* Navy Deep background: all text white for contrast (gold fails on navy) */
.hwc-info-columns.hwc-bg--ink-deep .hwc-info-columns__eyebrow,
.hwc-info-columns.hwc-bg--ink-deep .hwc-info-columns__heading,
.hwc-info-columns.hwc-bg--ink-deep .hwc-info-columns__body,
.hwc-info-columns.hwc-bg--ink-deep .hwc-info-columns__cta {
	color: var(--sf-color-white);
}

.hwc-info-columns.hwc-bg--ink-deep .hwc-info-columns__cta:hover,
.hwc-info-columns.hwc-bg--ink-deep .hwc-info-columns__cta:focus-visible {
	color: var(--sf-color-cream);
}

.elementor-widget-hwc-info-columns > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

@media (max-width: 1280px) {

	.hwc-info-columns .hwc-info-columns__inner {
		padding: 0 40px;
	}

	.hwc-info-columns .hwc-info-columns__grid {
		gap: 32px;
	}
}

/* Stack in source order; font sizes switch via the responsive --hwc-* tokens */
@media (max-width: 1024px) {

	:where(.hwc-info-columns) {
		padding: 40px 0 34px;
	}

	.hwc-info-columns .hwc-info-columns__inner {
		padding: 0 43px;
	}

	.hwc-info-columns .hwc-info-columns__eyebrow {
		margin-bottom: 29px;
	}

	.hwc-info-columns .hwc-info-columns__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 45px;
	}

	.hwc-info-columns .hwc-info-columns__heading {
		margin-bottom: 11px;
	}

	.hwc-info-columns .hwc-info-columns__body {
		margin-bottom: 17px;
	}
}

/* ─── hwc-support-cta ─────────────────────────────────────────────── */
/* Figma desktop 2959:206 (group 2968:208): centred on white; navy underlined
   eyebrow, gold heading ~28px below the eyebrow text, body (max 842px) 11px
   below, gold pill button 26px below. Mobile 2959:325 (group 2960:2697):
   306px column (42px gutters), eyebrow → heading ~32px, heading 20/28.
   Background comes from the shared hwc-bg--* classes; curves come from
   Section Edges. */

/* :where() keeps padding at 0 specificity so wave padding still wins. */
:where(.hwc-support-cta) {
	padding: 40px 0;
}

.hwc-support-cta .hwc-support-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 72px;
	text-align: center;
}

.hwc-support-cta .hwc-support-cta__eyebrow {
	margin: 0 0 28px;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-eyebrow);
	font-weight: 500;
	font-style: normal;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--sf-color-ink-deep);
}

.hwc-support-cta .hwc-support-cta__heading {
	margin: 0 0 11px;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-card-title);
	font-weight: 600;
	font-style: normal;
	line-height: normal;
	color: var(--hwc-color-accent);
}

.hwc-support-cta .hwc-support-cta__body {
	max-width: 842px;
	margin: 0;
	font-family: var(--sf-font-primary);
	font-size: var(--sf-size-body);
	font-weight: 400;
	font-style: normal;
	line-height: var(--hwc-lh-body);
	color: var(--sf-color-ink-deep);
}

.hwc-support-cta .hwc-support-cta__btn {
	margin-top: 26px;
}

/* Navy Deep background: text white; button inverts to white on hover
   (the default hollow-gold hover would be unreadable on navy) */
.hwc-support-cta.hwc-bg--ink-deep .hwc-support-cta__eyebrow,
.hwc-support-cta.hwc-bg--ink-deep .hwc-support-cta__heading,
.hwc-support-cta.hwc-bg--ink-deep .hwc-support-cta__body {
	color: var(--sf-color-white);
}

.hwc-support-cta.hwc-bg--ink-deep .hwc-support-cta__btn:hover,
.hwc-support-cta.hwc-bg--ink-deep .hwc-support-cta__btn:focus-visible {
	background-color: var(--sf-color-white);
	border-color: var(--sf-color-white);
	color: var(--hwc-color-accent);
}

.elementor-widget-hwc-support-cta > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

@media (max-width: 1280px) {

	.hwc-support-cta .hwc-support-cta__inner {
		padding: 0 40px;
	}
}

/* Font sizes switch via the responsive --hwc-* tokens */
@media (max-width: 1024px) {

	:where(.hwc-support-cta) {
		padding: 32px 0;
	}

	.hwc-support-cta .hwc-support-cta__inner {
		padding: 0 42px;
	}

	.hwc-support-cta .hwc-support-cta__eyebrow {
		margin-bottom: 32px;
	}
}

@media (max-width: 767px) {

	.hwc-support-cta .hwc-support-cta__heading {
		line-height: var(--hwc-lh-card-title); /* 28px */
	}
}

/* ─── hwc-video-trio ──────────────────────────────────────────────── */
/* Figma desktop 2959:206 (group 2968:203, button 2968:204): cream band;
   centred navy title, intro (max 856px) 10px below, three 415px cards
   (4 cols each, 24px gutter) 37px below; caption 15px under the thumb;
   navy button 17px under the captions. Mobile 2959:325: stacked 307px
   cards (42px gutters), title → intro 17px, intro → cards 35px, caption
   8px, 30px between cards, button 22px below. Background comes from the
   shared hwc-bg--* classes; curves come from Section Edges. */

/* :where() keeps padding at 0 specificity so wave padding still wins. */
:where(.hwc-video-trio) {
	padding: 40px 0 35px;
}

.hwc-video-trio .hwc-video-trio__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 72px;
}

/* ── Header ── */

.hwc-video-trio .hwc-video-trio__header {
	max-width: 856px;
	margin: 0 auto 37px;
	text-align: center;
	color: var(--sf-color-ink-deep);
	font-family: var(--sf-font-primary);
}

.hwc-video-trio .hwc-video-trio__heading {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-section-title);
	font-weight: 600;
	font-style: normal;
	line-height: normal;
	color: inherit;
}

.hwc-video-trio .hwc-video-trio__intro {
	margin: 10px 0 0;
	font-size: var(--sf-size-body);
	font-weight: 400;
	line-height: var(--hwc-lh-body);
	color: inherit;
}

/* ── Grid: 3 equal columns; 1–2 cards keep 1/3 width and centre ── */

.hwc-video-trio .hwc-video-trio__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.hwc-video-trio .hwc-video-trio__grid--count-1 {
	grid-template-columns: calc((100% - 48px) / 3);
	justify-content: center;
}

.hwc-video-trio .hwc-video-trio__grid--count-2 {
	grid-template-columns: repeat(2, calc((100% - 48px) / 3));
	justify-content: center;
}

.hwc-video-trio .hwc-video-trio__card {
	min-width: 0;
}

.hwc-video-trio .hwc-video-trio__video-block {
	position: relative;
}

.hwc-video-trio .hwc-video-trio__thumbnail {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--hwc-color-placeholder);
	overflow: hidden;
}

.hwc-video-trio .hwc-video-trio__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

/* Play ring — Figma 72px on a 415px card (53px on 307px mobile) = 17.5% */
.hwc-video-trio .hwc-video-trio__play {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 17.5%;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 2px solid var(--sf-color-white);
	border-radius: 50%;
	background: transparent;
	color: var(--sf-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease, transform 0.2s ease;
}

.hwc-video-trio .hwc-video-trio__play:hover,
.hwc-video-trio .hwc-video-trio__play:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	color: var(--sf-color-white);
	border-color: var(--sf-color-white);
	transform: translate(-50%, -50%) scale(1.08);
	outline: none;
}

.hwc-video-trio .hwc-video-trio__play svg {
	display: block;
	width: 33%;
	height: auto;
	margin-left: 4%; /* optical centering of the play triangle */
}

/* iframe replaces thumbnail on play (hwc-widgets.js) */
.hwc-video-trio .hwc-video-trio__iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: none;
}

.hwc-video-trio .hwc-video-trio__caption {
	margin-top: 15px;
	color: var(--sf-color-ink-deep);
	font-family: var(--sf-font-primary);
}

.hwc-video-trio .hwc-video-trio__title {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-weight: 600;
	font-size: var(--hwc-size-video-title);
	line-height: normal;
	color: inherit;
}

.hwc-video-trio .hwc-video-trio__duration {
	margin: 0;
	font-weight: 400;
	font-size: var(--hwc-size-video-meta);
	line-height: normal;
	color: inherit;
}

.hwc-video-trio .hwc-video-trio__actions {
	margin-top: 17px;
	text-align: center;
}

/* Navy Deep background: text white; navy button flips to white fill */
.hwc-video-trio.hwc-bg--ink-deep .hwc-video-trio__header,
.hwc-video-trio.hwc-bg--ink-deep .hwc-video-trio__caption {
	color: var(--sf-color-white);
}

.hwc-video-trio.hwc-bg--ink-deep .hwc-video-trio__btn {
	background-color: var(--sf-color-white);
	border-color: var(--sf-color-white);
	color: var(--sf-color-ink-deep);
}

.hwc-video-trio.hwc-bg--ink-deep .hwc-video-trio__btn:hover,
.hwc-video-trio.hwc-bg--ink-deep .hwc-video-trio__btn:focus-visible {
	background-color: transparent;
	color: var(--sf-color-white);
}

.elementor-widget-hwc-video-trio > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

@media (max-width: 1280px) {

	.hwc-video-trio .hwc-video-trio__inner {
		padding: 0 40px;
	}
}

/* Stack: one column, cards full width of the 42px-gutter column.
   Font sizes switch via the responsive --hwc-* tokens. */
@media (max-width: 1024px) {

	:where(.hwc-video-trio) {
		padding: 35px 0 36px;
	}

	.hwc-video-trio .hwc-video-trio__inner {
		padding: 0 42px;
	}

	.hwc-video-trio .hwc-video-trio__header {
		margin-bottom: 35px;
	}

	.hwc-video-trio .hwc-video-trio__intro {
		margin-top: 17px;
	}

	.hwc-video-trio .hwc-video-trio__grid,
	.hwc-video-trio .hwc-video-trio__grid--count-1,
	.hwc-video-trio .hwc-video-trio__grid--count-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px 0;
	}

	.hwc-video-trio .hwc-video-trio__caption {
		margin-top: 8px;
	}

	.hwc-video-trio .hwc-video-trio__actions {
		margin-top: 22px;
	}
}

@media (max-width: 767px) {

	.hwc-video-trio .hwc-video-trio__heading {
		line-height: var(--hwc-lh-section-title); /* 25px */
	}

	.hwc-video-trio .hwc-video-trio__play {
		border-width: 1px;
	}
}

/* ─── hwc-hero ────────────────────────────────────────────────────── */
/* Figma desktop 2959:206: 660px band, headline at y157 in a 636px column,
   collage in the right 636px column (primary top y173).
   Figma mobile 2959:325: stacked and centred, 42px gutters, collage last.

   Collage — the accent (60% opacity, behind) is sized and offset as a
   fraction of the primary, with identical proportions on desktop
   (635x432 / 613x411, offset -25,-22, 70px radius) and mobile
   (295x201 / 285x191, offset -11.6,-10.2, 32.6px radius):
     accent width  613/635 = 96.5%     accent ratio 613/411
     accent left   -25/635 = -3.94%    accent top   -22/432 = -5.09%
     radius        70/635  = 11.02% of the primary width (cqw)
   so one rule holds the shape at every width. */

.hwc-hero {
	position: relative;
	width: 100%;
	min-height: 660px;
	overflow: hidden;
	background-color: var(--sf-color-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.hwc-hero .hwc-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 636px minmax(0, 1fr);
	gap: 0 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 157px 72px 55px;
}

/* ── Content ── */

.hwc-hero .hwc-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.hwc-hero .hwc-hero__headline {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-size: var(--sf-size-display);
	font-weight: 700;
	font-style: normal;
	line-height: var(--sf-lh-display);
}

.hwc-hero .hwc-hero__headline-ink {
	color: var(--sf-color-ink);
}

.hwc-hero .hwc-hero__headline-white {
	color: var(--sf-color-white);
}

.hwc-hero .hwc-hero__subheading {
	margin: 20px 0 0;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-lead);
	font-weight: 400;
	line-height: normal;
	color: var(--sf-color-ink-deep);
}

.hwc-hero .hwc-hero__search-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin-top: 39px;
}

.hwc-hero .hwc-hero__search-label {
	margin: 0;
	font-family: var(--sf-font-primary);
	font-size: var(--hwc-size-lead);
	font-weight: 600;
	line-height: normal;
	color: var(--sf-color-white);
}

.hwc-hero .hwc-hero__search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 415px;
	height: 48px;
	margin: 0;
	border: 1px solid var(--sf-color-white);
	background: transparent;
}

/* form + input/button scoping beats Elementor kit form styles */
.hwc-hero form.hwc-hero__search-form input.hwc-hero__search-input {
	flex: 1;
	height: 100%;
	min-width: 0;
	padding: 0 44px 0 16px;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--sf-font-primary);
	font-size: var(--sf-size-meta);
	font-style: italic;
	color: var(--sf-color-white);
}

.hwc-hero form.hwc-hero__search-form input.hwc-hero__search-input::placeholder {
	color: rgba(255, 255, 255, 0.47);
	opacity: 1;
}

.hwc-hero form.hwc-hero__search-form:focus-within {
	outline: 2px solid var(--sf-color-white);
	outline-offset: 2px;
}

.hwc-hero form.hwc-hero__search-form button.hwc-hero__search-submit {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sf-color-white);
	cursor: pointer;
}

.hwc-hero .hwc-hero__search-submit svg {
	width: 19px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

.hwc-hero .hwc-hero__location-link {
	font-family: var(--sf-font-primary);
	font-size: var(--sf-size-link);
	font-weight: 500;
	color: var(--sf-color-white);
	text-decoration: underline;
}

.hwc-hero .hwc-hero__location-link:hover,
.hwc-hero .hwc-hero__location-link:focus-visible {
	color: var(--sf-color-white);
	text-decoration: none;
}

/* ── Collage ── */

.hwc-hero .hwc-hero__images {
	min-width: 0;
	margin-top: 16px; /* primary top y173 vs headline y157 */
}

/* The collage box is the primary image; the accent hangs off it. */
.hwc-hero .hwc-hero__collage {
	position: relative;
	container-type: inline-size;
}

.hwc-hero .hwc-hero__img-primary,
.hwc-hero .hwc-hero__img-accent {
	overflow: hidden;
	background: var(--hwc-color-placeholder);
}

.hwc-hero .hwc-hero__img-primary {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 635 / 432;
	border-radius: calc(100cqw * 70 / 635) calc(100cqw * 70 / 635) 0 calc(100cqw * 70 / 635);
}

.hwc-hero .hwc-hero__img-accent {
	position: absolute;
	z-index: 0;
	top: -5.09%;
	left: -3.94%;
	width: 96.5%;
	aspect-ratio: 613 / 411;
	opacity: 0.6;
	border-radius: 0 calc(100cqw * 70 / 635) calc(100cqw * 70 / 635) calc(100cqw * 70 / 635);
}

.hwc-hero .hwc-hero__img-primary img,
.hwc-hero .hwc-hero__img-accent img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

/* Elementor wrapper: full bleed (same as sf-hero; no !important needed
   at this specificity unless a page adds inline padding). */
.elementor-widget-hwc-hero,
.elementor-widget-hwc-hero > .elementor-widget-container {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* Stacked, centred; collage after the search. A 20% white wash keeps the
   headline legible over the background (carried over from sf-hero). */
@media (max-width: 1024px) {

	.hwc-hero {
		min-height: 0;
		background-attachment: scroll; /* fixed is unsupported on iOS Safari */
	}

	.hwc-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background-color: var(--sf-color-white);
		opacity: 0.2;
		pointer-events: none;
	}

	.hwc-hero .hwc-hero__inner {
		z-index: 2;
		grid-template-columns: minmax(0, 1fr);
		padding: 95px 42px 29px;
	}

	.hwc-hero .hwc-hero__content {
		align-items: center;
		text-align: center;
	}

	.hwc-hero .hwc-hero__subheading {
		margin-top: 19px;
	}

	.hwc-hero .hwc-hero__search-block {
		align-items: center;
		margin-top: 29px;
	}

	.hwc-hero .hwc-hero__search-form {
		max-width: none;
		margin-top: 4px; /* label → input 14px */
	}

	/* Accent sits flush with the column edge on mobile, so inset the
	   collage by the accent overhang (3.94% / 3.46% of the primary width,
	   expressed against the full column: 3.79% / 3.33%). */
	.hwc-hero .hwc-hero__images {
		margin-top: 34px;
		padding: 3.33% 0 0 3.79%;
	}
}

@media (max-width: 767px) {

	.hwc-hero .hwc-hero__headline-ink {
		color: var(--sf-color-ink-deep); /* Figma mobile uses #193f74 */
	}

	.hwc-hero .hwc-hero__search-label {
		font-size: var(--sf-size-body);
	}

	.hwc-hero form.hwc-hero__search-form input.hwc-hero__search-input {
		font-size: 13px;
	}

	.hwc-hero .hwc-hero__location-link {
		font-size: var(--sf-size-meta);
	}
}