@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--wcc-serif: "Newsreader", Georgia, serif;
	--wcc-sans: "Inter", Arial, sans-serif;
}

.wcc-markets,
.wcc-markets * { box-sizing: border-box; }
.wcc-markets { background: var(--wcc-cream); color: var(--wcc-navy); font-family: var(--wcc-sans); }
.wcc-shell { margin: 0 auto; max-width: 1240px; padding-inline: 32px; width: 100%; }
.wcc-markets h1,
.wcc-markets h2,
.wcc-markets h3 { font-family: var(--wcc-serif); font-weight: 600; letter-spacing: -0.035em; margin: 0; }
.wcc-markets p { margin-top: 0; }
.wcc-elementor-content:empty { display: none; }

.wcc-eyebrow {
	align-items: center;
	color: var(--wcc-red);
	display: flex;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	margin-bottom: 22px;
	text-transform: uppercase;
}

.wcc-markets-hero {
	background:
		radial-gradient(circle at 82% 35%, rgb(85 180 240 / 22%) 0 2px, transparent 3px),
		linear-gradient(120deg, var(--wcc-navy) 0%, color-mix(in srgb, var(--wcc-navy) 82%, var(--wcc-sky)) 58%, var(--wcc-navy) 100%);
	color: #fff;
	min-height: 620px;
	overflow: hidden;
	position: relative;
}

.wcc-markets-hero::before,
.wcc-markets-hero::after {
	border: 1px solid rgb(85 180 240 / 22%);
	border-radius: 50%;
	content: "";
	position: absolute;
}
.wcc-markets-hero::before { height: 540px; right: -110px; top: 50px; width: 540px; }
.wcc-markets-hero::after { height: 340px; right: -10px; top: 150px; width: 340px; }
.wcc-markets-hero__grid {
	background-image: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
	background-size: 72px 72px;
	inset: 0;
	mask-image: linear-gradient(to right, black, transparent 80%);
	position: absolute;
}
.wcc-markets-hero__inner { padding-block: 118px 110px; position: relative; z-index: 1; }
.wcc-markets-hero .wcc-eyebrow { color: var(--wcc-sky); }
.wcc-markets-hero__title { font-size: clamp(48px, 7vw, 86px); line-height: .97; max-width: 850px; }
.wcc-markets-hero__lede { color: var(--wcc-caption-navy); font-size: 18px; line-height: 1.72; margin: 30px 0 38px; max-width: 680px; }
.wcc-markets-hero__actions,
.wcc-markets-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.wcc-button {
	align-items: center;
	border-radius: 8px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	justify-content: center;
	min-height: 50px;
	padding: 14px 22px;
	text-decoration: none;
	transition: transform 220ms ease, filter 220ms ease;
}
.wcc-button:hover { filter: brightness(.94); transform: translateY(-2px); }
.wcc-button--primary { background: var(--wcc-red); color: #fff; }
.wcc-button--secondary { background: var(--wcc-sky); color: var(--wcc-navy); }

.wcc-markets-grid-section { padding: 110px 0 120px; }
.wcc-section-heading { display: grid; gap: 34px; grid-template-columns: 1fr 2fr; margin-bottom: 58px; }
.wcc-section-heading__eyebrow { align-items: center; color: var(--wcc-red); display: flex; font-size: 12px; font-weight: 700; gap: 16px; letter-spacing: .18em; text-transform: uppercase; }
.wcc-section-heading__eyebrow i { background: var(--wcc-rule); display: block; height: 1px; width: 100%; }
.wcc-section-heading__copy { display: grid; gap: 24px; grid-template-columns: 1.2fr 1fr; }
.wcc-section-heading h2 { font-size: clamp(38px, 4.5vw, 60px); line-height: 1; }
.wcc-section-heading p { color: var(--wcc-body); font-size: 16px; line-height: 1.7; margin: 4px 0 0; }

.wcc-market-grid { display: grid; gap: 20px; grid-template-columns: repeat(6, 1fr); }
.wcc-market-card { background: var(--wcc-surface); border: 1px solid var(--wcc-rule); border-radius: 10px; grid-column: span 2; min-height: 450px; overflow: hidden; }
.wcc-market-card:nth-child(1),
.wcc-market-card:nth-child(2) { grid-column: span 3; }
.wcc-market-card__link { color: inherit; display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.wcc-market-card__visual { background: var(--wcc-navy); min-height: 150px; overflow: hidden; padding: 20px; position: relative; }
.wcc-market-card__visual::before { background: linear-gradient(135deg, transparent 20%, rgb(85 180 240 / 20%)); content: ""; inset: 0; position: absolute; }
.wcc-market-card__visual--2 { background: color-mix(in srgb, var(--wcc-navy) 78%, var(--wcc-sky)); }
.wcc-market-card__visual--3 { background: color-mix(in srgb, var(--wcc-navy) 86%, var(--wcc-caption)); }
.wcc-market-card__visual--4 { background: color-mix(in srgb, var(--wcc-navy) 82%, var(--wcc-body)); }
.wcc-market-card__visual--5 { background: color-mix(in srgb, var(--wcc-navy) 76%, var(--wcc-caption)); }
.wcc-market-card__number { color: rgb(255 255 255 / 10%); font-family: var(--wcc-serif); font-size: 130px; font-weight: 600; line-height: 1; position: absolute; right: 16px; top: 7px; }
.wcc-market-card__status { background: rgb(255 255 255 / 94%); border-radius: 999px; color: var(--wcc-navy); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 8px 11px; position: relative; text-transform: uppercase; }
.wcc-market-card--featured .wcc-market-card__status { background: var(--wcc-sky); }
.wcc-market-card__body { display: flex; flex: 1; flex-direction: column; padding: 30px; }
.wcc-market-card__county { color: var(--wcc-red); font-size: 11px; font-weight: 700; letter-spacing: .14em; margin-bottom: 10px; text-transform: uppercase; }
.wcc-market-card h3 { font-size: 42px; line-height: 1; }
.wcc-market-card__body > p:not(.wcc-market-card__county) { color: var(--wcc-body); font-size: 14px; line-height: 1.65; margin: 18px 0 28px; }
.wcc-market-card__cta { color: var(--wcc-sky-deep); font-size: 13px; font-weight: 700; margin-top: auto; }
.wcc-market-card__cta span { display: inline-block; margin-left: 6px; transition: transform 200ms ease; }
.wcc-market-card:hover .wcc-market-card__cta span { transform: translateX(5px); }

.wcc-markets-note { background: var(--wcc-off-white); padding: 95px 0; }
.wcc-markets-note__inner { align-items: center; display: grid; gap: 38px; grid-template-columns: .45fr 1.1fr 1fr; }
.wcc-markets-note__number { color: rgb(13 28 46 / 8%); font-family: var(--wcc-serif); font-size: 118px; font-weight: 600; line-height: .8; }
.wcc-markets-note h2 { font-size: clamp(36px, 4vw, 52px); line-height: 1.02; }
.wcc-markets-note__text { color: var(--wcc-body); line-height: 1.75; margin: 0; }

.wcc-markets-cta { background: var(--wcc-navy); color: #fff; padding: 105px 0; text-align: center; }
.wcc-markets-cta__inner { align-items: center; display: flex; flex-direction: column; }
.wcc-markets-cta .wcc-eyebrow { color: var(--wcc-sky); }
.wcc-markets-cta h2 { font-size: clamp(42px, 5vw, 66px); line-height: 1; }
.wcc-markets-cta p:not(.wcc-eyebrow) { color: var(--wcc-caption-navy); margin: 20px 0 30px; }

@media (max-width: 900px) {
	.wcc-section-heading,
	.wcc-section-heading__copy,
	.wcc-markets-note__inner { grid-template-columns: 1fr; }
	.wcc-market-card,
	.wcc-market-card:nth-child(1),
	.wcc-market-card:nth-child(2) { grid-column: span 3; }
	.wcc-markets-note__number { display: none; }
}

@media (max-width: 640px) {
	.wcc-shell { padding-inline: 20px; }
	.wcc-markets-hero { min-height: auto; }
	.wcc-markets-hero__inner { padding-block: 86px 76px; }
	.wcc-markets-hero__title { font-size: 48px; }
	.wcc-markets-hero__lede { font-size: 16px; }
	.wcc-markets-hero__actions,
	.wcc-markets-cta__actions { align-items: stretch; flex-direction: column; width: 100%; }
	.wcc-markets-grid-section { padding: 76px 0 84px; }
	.wcc-section-heading { margin-bottom: 38px; }
	.wcc-market-grid { display: block; }
	.wcc-market-card { margin-bottom: 16px; min-height: 0; }
	.wcc-market-card__visual { min-height: 126px; }
	.wcc-market-card__body { padding: 24px; }
	.wcc-market-card h3 { font-size: 36px; }
	.wcc-markets-note { padding: 70px 0; }
	.wcc-markets-cta { padding: 80px 0; }
}