/**
 * Where We Work page — assets/css/wherewework.css   (marker: `ab-www-`)
 *
 * Loaded only on pages whose content contains an `ab-www-` marker class
 * (inc/enqueue.php → albasar_enqueue_section_css). Colours use theme.json tokens
 * where they map (ab-blue #0D72BA, ab-navy #053A66, action-500 #F59423 orange,
 * Jost/Fraunces); the many page-specific greys from the Figma frame
 * (node 1060:54044) are literal, matching the other page stylesheets.
 */

/* ---------------------------------------------------------------------------
 * Shared section scaffold
 * ------------------------------------------------------------------------- */
.ab-www-section {
	padding-top: 100px;
	padding-bottom: 100px;
	border-bottom: 1px solid #e9e9e9;
}

.ab-www-section__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.ab-www-section__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 820px;
}

.ab-www-section__head--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.ab-www-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--ab-blue);
}

.ab-www-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.15;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-navy);
}

/* Permanent Presence heading is Jost SemiBold, not Fraunces. */
.ab-www-title--sans {
	font-family: var(--wp--preset--font-family--sans);
}

.ab-www-lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #555;
}

.ab-www-lede--slate {
	line-height: 30px;
	color: #334e68;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.ab-www-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.0125em;
	text-decoration: none;
}

.ab-www-btn--primary {
	background: var(--wp--custom--action--500);
	color: #fff;
}

.ab-www-btn--primary:hover {
	background: var(--wp--preset--color--ab-orange-600);
	color: #fff;
}

.ab-www-btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
}

.ab-www-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------------------- */
.ab-www-hero.wp-block-cover {
	padding: 120px 24px;
	min-height: 620px !important;
	align-items: center;
	justify-content: center;
}

.ab-www-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Same look as the home hero: the photo bleeds full width and a dark wash from
   the left carries white text. The seeded dim is 0, so restore the overlay's
   opacity and paint the wash here. */
.ab-www-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(
		90deg,
		rgba(8, 20, 33, 0.95) 0%,
		rgba(8, 20, 33, 0.88) 32%,
		rgba(8, 20, 33, 0.35) 52%,
		rgba(8, 20, 33, 0) 68%
	) !important;
}

/* Desktop: the people and the hospital sign sit in the middle of this photo,
   so start the photo 400px left of the page centre. The copy then sits on the
   dark band and the wash blends the band into the photo, with no hard edge. */
@media (min-width: 1025px) {
	.ab-www-hero.wp-block-cover {
		background-color: rgb(8, 20, 33) !important;
	}

	.ab-www-hero .wp-block-cover__image-background {
		left: calc(50% - 400px);
		right: auto;
		width: calc(50% + 400px);
		max-width: none;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
		mask-image: linear-gradient(90deg, transparent 0, #000 30%);
	}
}

/* Both groups use a constrained layout, which caps them at contentSize and
   centres them with !important auto margins. Override so the copy sits on the
   left edge of the 1200px site container, in line with the header logo. */
.ab-www-hero .wp-block-cover__inner-container > .ab-www-hero__inner {
	max-width: 1200px !important;
	margin-inline: auto !important;
	width: 100%;
}

.ab-www-hero__inner > .ab-www-hero__card {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* The "card" group is now a plain copy column on the wash. */
.ab-www-hero__card {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ab-www-hero__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--ab-orange);
}

.ab-www-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: 64px;
	line-height: 1.05;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-white);
	text-shadow: 0 1px 18px rgba(8, 20, 33, 0.45);
}

.ab-www-hero__body {
	margin: 0;
	max-width: 500px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.ab-www-hero__actions {
	margin-top: 8px;
}

.ab-www-hero__actions .ab-www-btn--primary {
	font-weight: 500;
	text-transform: capitalize;
}

/* Tablets and phones: a side wash can't protect the text, so switch to a
   top-down wash (as on the home hero), put the copy at the top and let the
   people show in the lower part of the photo. */
@media (max-width: 1024px) {
	.ab-www-hero.wp-block-cover {
		min-height: 0 !important;
		padding: 64px 24px 300px;
		align-items: flex-start;
	}

	.ab-www-hero .wp-block-cover__image-background {
		object-position: 58% 100% !important;
	}

	.ab-www-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(8, 20, 33, 0.92) 0%,
			rgba(8, 20, 33, 0.8) 50%,
			rgba(8, 20, 33, 0.15) 85%,
			rgba(8, 20, 33, 0) 100%
		) !important;
	}
}

@media (max-width: 781px) {
	.ab-www-hero.wp-block-cover {
		padding: 56px 16px 240px;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Footprint at a glance — stat strip
 * ------------------------------------------------------------------------- */
.ab-www-footprint .ab-www-section__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.ab-www-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.ab-www-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 50px 8px;
	border: 1px solid #d4d4d8;
	text-align: center;
}

.ab-www-stat__num {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: 70px;
	line-height: 1;
	color: #52525b;
}

.ab-www-stat__suffix {
	color: var(--wp--custom--action--500);
}

.ab-www-stat__label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	text-transform: capitalize;
	color: #52525b;
}

/* ---------------------------------------------------------------------------
 * 3. Our Global Reach — map + legend
 * ------------------------------------------------------------------------- */
.ab-www-reachmap {
	background: #f8fafc;
}

.ab-www-reachmap .ab-www-section__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: center;
}

.ab-www-reachmap__box {
	width: 100%;
	border: 1px solid #d4d4d8;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	background: #fff;
}

/* The reach map reuses the albasar/map-points block (artwork + lat/long pins).
   Its markup carries .ab-home-proof__* classes; the essentials are folded in here,
   scoped to the box, so this page needs no home stylesheet. The box supplies the
   chrome, so the block's own wrapper border/padding is neutralised. */
.ab-www-reachmap__box .ab-home-proof__mapwrap {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.ab-www-reachmap__box .ab-home-proof__map {
	position: relative;
	width: 100%;
	line-height: 0;
}

.ab-www-reachmap__box .ab-home-proof__mapimg {
	width: 100%;
	height: auto;
	display: block;
}

/* Pins + tooltips: blocks/map-points/style.css (loaded with the block). */

.ab-www-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	padding: 20px 30px;
}

.ab-www-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 15px;
	text-transform: capitalize;
	color: #2c2c33;
}

.ab-www-legend__key {
	width: 20px;
	height: 27px;
	flex: 0 0 auto;
	display: inline-block;
	-webkit-mask: var(--ab-legend-pin) center / contain no-repeat;
	mask: var(--ab-legend-pin) center / contain no-repeat;
}
/* This map shows hospital pins only (block attr types=hospital); the orange
   country fill IS the reach, so its key is a fill swatch matching the artwork. */
.ab-www-legend__key--reached {
	-webkit-mask: none;
	mask: none;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	background: var(--wp--preset--color--ab-orange);
}

.ab-www-legend__key--hospital {
	-webkit-mask: none;
	mask: none;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230D72BA' opacity='0.15'/%3E%3Ccircle cx='12' cy='12' r='6' fill='%230D72BA' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
 * 4. Permanent Presence — country cards (albasar/www-countries)
 * ------------------------------------------------------------------------- */
.ab-www-permanent .ab-www-section__inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.ab-www-permanent .ab-www-eyebrow {
	font-size: 13px;
	letter-spacing: 0.108em;
}

.ab-www-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ab-www-card {
	display: flex;
	background: #fff;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	overflow: hidden;
}

.ab-www-card__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px 20px;
	width: 100%;
}

.ab-www-card__flagrow {
	display: flex;
	align-items: center;
	gap: 15px;
}

.ab-flag {
	display: block;
	width: 35px;
	height: 25px;
	object-fit: cover;
	border-radius: 2px;
	flex: none;
}

.ab-www-card__name {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 22px;
	line-height: 30px;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #2c2c33;
}

.ab-www-card__photo {
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 4px;
}

.ab-www-card__photo--empty {
	background-color: #eef1f4;
}

.ab-www-card__stats {
	display: flex;
	align-items: stretch;
	gap: 10px;
	border-top: 1px solid #f5f2ed;
	border-bottom: 1px solid #f5f2ed;
}

.ab-www-card__stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 0;
	text-align: center;
}

.ab-www-card__num {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 25px;
	line-height: 1.1;
	color: #52525b;
}

.ab-www-card__suffix {
	color: var(--wp--custom--action--500);
}

.ab-www-card__label {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #a1a1aa;
}

.ab-www-card__divider {
	width: 1px;
	align-self: stretch;
	background: #f5f2ed;
	flex: none;
}

.ab-www-card__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ab-www-card__blurb {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	text-align: justify;
	color: #666;
}

.ab-www-card__link {
	display: inline-flex;
	align-self: flex-end;
	align-items: center;
	gap: 10px;
	padding-top: 15px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 14px;
	text-transform: capitalize;
	text-decoration: none;
	color: var(--wp--preset--color--ab-blue);
}

.ab-www-card__link:hover {
	text-decoration: underline;
}

.ab-www-card__arrow {
	flex: none;
}

/* ---------------------------------------------------------------------------
 * 5. From the Field
 * ------------------------------------------------------------------------- */
.ab-www-field__grid {
	display: flex;
	gap: 40px;
	align-items: stretch;
}

.ab-www-field__photo.wp-block-cover {
	flex: 1 1 0;
	min-height: 460px;
	border-radius: 8px;
	overflow: hidden;
}

.ab-www-field__col {
	flex: 0 0 600px;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.ab-www-field__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ab-www-field__body {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: #334e68;
}

.ab-www-field__quote {
	padding: 20px 30px;
	border-left: 4px solid var(--wp--custom--action--500);
}

.ab-www-field__quotetext {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-style: italic;
	font-size: 24px;
	line-height: 1.35;
	color: #2c2c33;
}

.ab-www-field__caption {
	margin: 0;
	padding-top: 30px;
	border-top: 1px solid #d4d4d8;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	text-transform: capitalize;
	color: #a1a1aa;
}

/* ---------------------------------------------------------------------------
 * 6. Beyond Hospitals — country chips (albasar/www-reach)
 * ------------------------------------------------------------------------- */
.ab-www-beyond .ab-www-section__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.ab-www-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 20px;
	width: 100%;
	padding: 15px 0;
}

.ab-www-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	border: 1px solid #d4d4d8;
	border-radius: 0;
	background: #fff;
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.ab-www-chip:hover,
.ab-www-chip.is-active {
	border-color: #85b6d8;
	background: #f2f9fd;
	box-shadow: 0 3px 12px rgba(0, 69, 121, 0.08);
	transform: translateY(-2px);
}

.ab-www-chip:focus-visible {
	outline: 3px solid #4aa7df;
	outline-offset: 3px;
}

.ab-www-chip__flag {
	width: 35px;
	height: 25px;
	object-fit: cover;
	border-radius: 2px;
	flex: none;
}

.ab-www-chip__divider {
	width: 1px;
	align-self: stretch;
	background: #d4d4d8;
	flex: none;
}

.ab-www-chip__name {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	color: #52525b;
}

/* Country popover: one shared box, moved to <body> and placed by
   assets/js/www-reach.js above (or below) the hovered/tapped chip. */
.ab-www-pop {
	--ab-pop-x: 0px;
	--ab-pop-y: 0px;
	--ab-pop-shift: 8px;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: min(310px, calc(100vw - 24px));
	padding: 19px 20px 13px;
	text-align: left;
	color: #263e53;
	background: #fff;
	border: 1px solid #e2e8ee;
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(3, 39, 67, 0.19), 0 3px 12px rgba(3, 39, 67, 0.09);
	font-family: var(--wp--preset--font-family--sans);
	pointer-events: none;
}

/* Closed: transparent, nudged towards its chip and slightly shrunk. Open:
   fades, rises and scales from the arrow. While open, a move to another chip
   glides (same transform transition); is-placing jumps it into place first. */
.ab-www-pop {
	opacity: 0;
	visibility: hidden;
	transform: translate3d(var(--ab-pop-x), calc(var(--ab-pop-y) + var(--ab-pop-shift)), 0) scale(0.96);
	transform-origin: var(--ab-arrow-left, 50%) 100%;
	transition:
		opacity 0.16s ease,
		transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s linear 0.2s;
	will-change: transform, opacity;
}

.ab-www-pop[data-placement="below"] {
	--ab-pop-shift: -8px;
	transform-origin: var(--ab-arrow-left, 50%) 0;
}

.ab-www-pop.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate3d(var(--ab-pop-x), var(--ab-pop-y), 0) scale(1);
	transition:
		opacity 0.18s ease,
		transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s;
}

.ab-www-pop.is-placing {
	transition: none;
}

.ab-www-pop[hidden] {
	display: none;
}

.ab-www-pop::after {
	content: "";
	position: absolute;
	left: var(--ab-arrow-left, 50%);
	width: 13px;
	height: 13px;
	background: #fff;
	border: 1px solid #e2e8ee;
	transform: translateX(-50%) rotate(45deg);
}

.ab-www-pop[data-placement="above"]::after {
	bottom: -7px;
	border-top: 0;
	border-left: 0;
}

.ab-www-pop[data-placement="below"]::after {
	top: -7px;
	border-bottom: 0;
	border-right: 0;
}

.ab-www-pop__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #053a66;
}

.ab-www-pop__kicker {
	margin: 5px 0 11px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7785;
}

.ab-www-pop__metrics {
	margin: 0;
}

.ab-www-pop__metric {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid #eef1f4;
}

.ab-www-pop__metric:last-child {
	border-bottom: 0;
}

.ab-www-pop__metric dt {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: #4a6176;
}

.ab-www-pop__metric dd {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: #053a66;
}

@media (max-width: 780px) {
	.ab-www-chips {
		gap: 10px;
	}

	.ab-www-chip {
		gap: 9px;
		padding: 7px 10px;
	}

	.ab-www-chip__flag {
		width: 31px;
		height: 23px;
	}

	.ab-www-chip__name {
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-www-chip {
		transition: none;
	}

	/* Fade only: no rise, scale or glide. */
	.ab-www-pop,
	.ab-www-pop.is-open {
		transform: translate3d(var(--ab-pop-x), var(--ab-pop-y), 0);
		transition: opacity 0.12s ease, visibility 0s linear 0.12s;
	}

	.ab-www-pop.is-open {
		transition: opacity 0.12s ease, visibility 0s;
	}

	.ab-www-chip:hover,
	.ab-www-chip.is-active {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Why Here — three cards
 * ------------------------------------------------------------------------- */
.ab-www-why {
	background: #f5f2ed;
}

.ab-www-why .ab-www-section__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.ab-www-why__head {
	max-width: 671px;
}

.ab-www-why-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	width: 100%;
}

.ab-www-why-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: #fff;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	padding: 35px 25px;
}

.ab-www-why-card__kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 16px;
	line-height: 40px;
	color: var(--wp--custom--action--500);
}

.ab-www-why-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	text-transform: capitalize;
	color: #2c2c33;
}

.ab-www-why-card__body {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #52525b;
}

/* ---------------------------------------------------------------------------
 * 8. Trust + CTA — blue gradient band
 * ------------------------------------------------------------------------- */
.ab-www-cta {
	padding-top: 100px;
	padding-bottom: 100px;
	background: linear-gradient(-17deg, #0d72ba 0%, #0a5a95 100%);
}

.ab-www-cta__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 30px;
}

.ab-www-cta__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.ab-www-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.15;
	text-transform: capitalize;
	color: #fff;
}

.ab-www-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.ab-www-cta__trust {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.75);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ab-www-cards,
	.ab-www-why-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.ab-www-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.ab-www-field__grid {
		flex-direction: column;
	}

	.ab-www-field__col {
		flex-basis: auto;
		max-width: none;
	}
}

@media (max-width: 782px) {
	.ab-www-section {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.ab-www-title,
	.ab-www-cta__title {
		font-size: 32px;
	}

	.ab-www-hero__title {
		font-size: 40px;
	}

	.ab-www-stat__num {
		font-size: 52px;
	}
}

@media (max-width: 600px) {
	.ab-www-cards,
	.ab-www-why-cards {
		grid-template-columns: 1fr;
	}

	.ab-www-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.ab-www-hero__title {
		font-size: 34px;
	}

	.ab-www-chips {
		gap: 12px;
	}
}