/*
 * Thrive at Work Core — WPBakery element styles
 *
 * Styles the section/element templates in templates/wpbakery/.
 * Enqueued only when the current content actually uses one of
 * these shortcodes (see Support\Assets::maybe_enqueue()) so it
 * never loads on pages that don't need it.
 *
 * Depends on the design-token custom properties (--taw-*)
 * defined in the theme's assets/css/tokens.css — this plugin
 * assumes the active theme provides that token layer, keeping
 * element markup/behavior independent of any one theme's base
 * styles while relying on a shared token contract.
 *
 * Scoped under .taw-site; no bare-tag or global overrides.
 */

/* ---------- Hero ---------- */
.taw-hero {
	background: var( --taw-color-bg );
	padding: 100px 0; /* Figma: HeroVisual 560 content + 100 top/bottom = 760 total */
	overflow: hidden;
}

.taw-hero__grid {
	display: grid;
	grid-template-columns: minmax( 0, 640px ) minmax( 0, 520px );
	gap: 80px; /* Figma: 820 - (100+640) = 80 */
	align-items: center;
}

.taw-hero__heading {
	font: 700 60px/72px var( --taw-font-display ); /* Sora Bold, not SemiBold */
	color: var( --taw-color-primary-900 );
	margin: 0 0 24px;
}

.taw-hero__heading em {
	font-style: normal;
	color: var( --taw-color-primary-800 ); /* Figma: 2nd line is a distinct color */
}

.taw-hero__sub {
	font: 400 18px/29px var( --taw-font-body );
	color: var( --taw-color-text-body );
	width: 520px;
	max-width: 100%;
	margin: 0 0 32px;
}

.taw-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.taw-hero__byline {
	font: 500 13.5px var( --taw-font-body );
	color: #8a9689;
	margin: 0;
}

.taw-hero__visual {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 520 / 560; /* Figma HeroVisual bounding box */
	margin-inline: auto;
	background: var( --taw-color-bg-alt-3 );
	border-radius: 32px;
}

.taw-hero__cover {
	position: absolute;
	left: 24.6%;
	top: 19.3%;
	width: 50.8%;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var( --taw-shadow-lift );
	aspect-ratio: 264 / 344; /* Figma "Cover" asset ratio */
}

.taw-hero__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.taw-hero__teaser {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var( --taw-color-bg );
	border-radius: var( --taw-radius-md );
	box-shadow: var( --taw-shadow-teaser );
	padding: 13px 20px 13px 16px;
}

.taw-hero__teaser--top {
	top: 4.6%;
	left: -12.3%;
	width: 52.9%;
}

.taw-hero__teaser--bottom {
	top: 84.1%;
	right: -6%;
	width: 45.6%;
}

.taw-hero__teaser-icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var( --taw-color-bg-alt-4 );
	display: flex;
	align-items: center;
	justify-content: center;
}

.taw-hero__teaser--top .taw-hero__teaser-icon {
	background: #eaf1ea;
}

.taw-hero__teaser--bottom .taw-hero__teaser-icon {
	background: #fbeecb;
}

.taw-hero__teaser-icon img {
	width: 18px;
	height: 18px;
}

.taw-hero__teaser-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.taw-hero__teaser-text strong {
	font: 700 13.5px var( --taw-font-body );
	color: var( --taw-color-primary-900 );
}

.taw-hero__teaser-text em {
	font: 500 12px var( --taw-font-body );
	font-style: normal;
	color: var( --taw-color-text-meta );
}

/* ---------- Ticker ---------- */
.taw-ticker {
	background: var( --taw-color-primary-900 ); /* #14342a, not primary-800 */
	overflow: hidden;
	padding: 17px 0;
}

.taw-ticker__track {
	display: flex;
	align-items: center;
	gap: 28px;
	width: max-content;
	/* No animation by default — a single server-rendered group is
	   a correct, readable static fallback if JS never runs.
	   initTicker() in theme.js measures the seed group, clones it
	   into two equal-width halves wide enough to cover any
	   viewport, and only then adds .is-animating (see below). */
}

.taw-ticker__track.is-animating {
	animation: taw-ticker-scroll var( --taw-ticker-duration, 28s ) linear infinite;
}

.taw-ticker__group {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: none;
}

.taw-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	white-space: nowrap;
	font: 700 13px var( --taw-font-display ); /* Sora Bold, not Manrope */
	letter-spacing: 2px;
}

.taw-ticker__item:nth-of-type( odd ) {
	color: var( --taw-color-ticker-a );
}

.taw-ticker__item:nth-of-type( even ) {
	color: var( --taw-color-ticker-b );
}

.taw-ticker__dot {
	width: 12px;
	height: 12px;
	display: inline-block;
}

@keyframes taw-ticker-scroll {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.taw-ticker__track,
	.taw-ticker__track.is-animating {
		animation: none;
		transform: none;
	}
}

/* ---------- Pathways ---------- */
.taw-pathways {
	background: var( --taw-color-bg );
	padding: 80px 0; /* calibrated against measured render vs Figma 660 total */
}

.taw-pathways .taw-section-header__heading {
	font-size: 40px;
	line-height: 1.1;
}

.taw-pathways__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.taw-pathway-card {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: var( --taw-radius-lg );
	min-height: 340px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.taw-pathway-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.taw-pathway-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var( --taw-color-bg-alt-4 );
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Icon tile background alternates per card, matching Figma */
.taw-pathways__grid > :nth-child( 1 ) .taw-pathway-card__icon { background: #eaf1ea; }
.taw-pathways__grid > :nth-child( 2 ) .taw-pathway-card__icon { background: #fbeecb; }
.taw-pathways__grid > :nth-child( 3 ) .taw-pathway-card__icon { background: #e8eef6; }

.taw-pathway-card__icon img {
	width: 22px;
	height: 22px;
}

.taw-pathway-card__number {
	font: 600 16px var( --taw-font-display );
	color: var( --taw-color-number-muted );
}

.taw-pathway-card__title {
	font: var( --taw-text-h3 );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-pathway-card__desc {
	font: 400 14.5px/22px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
	width: 333px;
	max-width: 100%;
	flex: 1 1 auto;
}

.taw-pathway-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 8px;
	margin-top: auto;
}

.taw-pathway-card__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --taw-color-primary-800 );
	display: flex;
	align-items: center;
	justify-content: center;
}

.taw-pathway-card__arrow img {
	width: 16px;
	height: 16px;
	filter: invert( 1 );
}

/* ---------- Featured / Shop ---------- */
.taw-featured {
	background: var( --taw-color-bg-alt-2 );
	padding: 64px 0; /* calibrated against measured render vs Figma 881 total */
}

.taw-featured__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 56px;
}

.taw-featured__intro {
	max-width: 769px; /* Figma: heading column width */
}

.taw-featured__desc {
	font: 600 34px/44px var( --taw-font-display ); /* Figma: exact size for this heading */
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-resource-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.taw-resource-card {
	background: var( --taw-color-bg );
	border-radius: var( --taw-radius-md );
	overflow: hidden;
	box-shadow: var( --taw-shadow-card );
}

.taw-resource-card__media {
	height: 330px; /* Figma: fixed, not proportional to card width */
	background: var( --taw-color-bg-alt-1 );
	overflow: hidden;
	position: relative;
}

.taw-resource-card__photo {
	width: 180px;
	height: 236px;
	margin: 48px auto 0;
	display: block;
	object-fit: cover;
	border-radius: var( --taw-radius-sm );
	box-shadow: var( --taw-shadow-card );
}

.taw-resource-card__mockup {
	width: 180px;
	height: 236px;
	margin: 48px auto 0;
	border-radius: var( --taw-radius-sm );
	box-shadow: var( --taw-shadow-card );
	padding: 24px 18px;
	color: #fff;
	position: relative;
}

.taw-resource-card__mockup-label {
	font: 600 11px/1 var( --taw-font-display );
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 20px;
}

.taw-resource-card__mockup-title {
	font: 600 16px/21px var( --taw-font-display );
	margin: 0 0 12px;
}

.taw-resource-card__mockup-rule {
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.9;
}

.taw-resource-card__mockup-author {
	position: absolute;
	left: 18px;
	bottom: 24px;
	font: 700 7.5px/1 var( --taw-font-body );
	letter-spacing: 1.1px;
	margin: 0;
}

.taw-resource-card__body {
	padding: 24px 28px 28px;
}

.taw-resource-card__title {
	font: 600 19px/1.3 var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0 0 12px;
}

.taw-resource-card__meta {
	font: var( --taw-text-body-sm );
	font-size: 14px;
	color: var( --taw-color-text-muted );
	margin: 0 0 20px;
}

.taw-resource-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.taw-resource-card__price {
	font: 600 20px/1 var( --taw-font-display );
	color: var( --taw-color-primary-800 );
}

.taw-resource-card__badge,
.taw-resource-coming-soon-badge {
	display: inline-flex;
	align-items: center;
	background: var( --taw-color-badge-bg );
	color: var( --taw-color-badge-text );
	border-radius: var( --taw-radius-pill );
	padding: 8px 14px;
	font: 700 11px/1 var( --taw-font-body );
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* ---------- Framework ---------- */
.taw-framework {
	background: var( --taw-color-bg );
	padding: 55px 0; /* calibrated against measured render vs Figma 540 total */
	text-align: center;
	position: relative;
}

.taw-framework .taw-section-header__heading {
	font-size: 40px;
	line-height: 1.1;
}

.taw-framework__steps-wrap {
	position: relative;
	margin: 0 0 16px;
}

/* Anchored to the steps row itself (not the section), so it
   stays aligned with the circles regardless of section padding.
   Figma: rule sits 2px above the circle's bottom edge, inset
   100px from each edge of the 1240px content container. */
.taw-framework__rule {
	position: absolute;
	left: 100px;
	right: 100px;
	top: 62px;
	height: 2px;
	background: var( --taw-color-bg-alt-4 );
	z-index: 0;
}

.taw-framework__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 8px;
	position: relative;
	z-index: 1;
}

.taw-framework-step__letter {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 4px solid var( --taw-color-bg );
	color: white;
	font: 600 24px var( --taw-font-display );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
}

/* Badge color alternates B/A/C green, R/N/H gold — matches Figma exactly */
.taw-framework-step:nth-child( odd ) .taw-framework-step__letter {
	background: var( --taw-color-primary-800 );
	color: white;
}

.taw-framework-step:nth-child( even ) .taw-framework-step__letter {
	background: var( --taw-color-accent-gold );
	color: var( --taw-color-primary-900 );
}

.taw-framework-step__title {
	font: 600 15.5px/21px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0 0 14px;
	width: 180px;
	max-width: 100%;
	margin-inline: auto;
}

.taw-framework-step__desc {
	font: 400 13px/19px var( --taw-font-body );
	color: var( --taw-color-text-meta );
	margin: 0;
	width: 172px;
	max-width: 100%;
	margin-inline: auto;
}

/* ---------- Lead capture ---------- */
.taw-lead {
	background: var( --taw-color-bg );
	padding: 50px 0;
}

.taw-lead__panel {
	position: relative;
	background: var( --taw-color-primary-800 ); /* #1d5240, not primary-900 */
	border-radius: 32px;
	height: 420px;
	padding: 72px 80px;
	overflow: visible; /* the rotated cover intentionally sits partly outside */
}

.taw-lead__shape {
	position: absolute;
	top: -60px;
	right: -60px; /* Figma: the shape's own box extends 60px past the panel's right edge */
	width: 220px;
	height: 220px;
	z-index: 0;
	pointer-events: none;
}

/* Figma positions the ROTATED cover's own bounding box
   (228.462 x 285.986 — larger than the 210x272 image itself,
   since a rotated box's footprint differs from its unrotated
   size) and centers the image inside it. Replicating that
   two-layer structure — rather than rotating a top/right
   anchored element directly — is what keeps the anchor point
   correct. */
.taw-lead__cover {
	position: absolute;
	top: 80px;
	right: 100px;
	width: 228px;
	height: 286px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.taw-lead__cover-inner {
	position: relative;
	width: 210px;
	height: 272px;
	flex: none;
	transform: rotate( 4deg );
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var( --taw-shadow-rotated );
}

.taw-lead__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taw-lead__cover-badge {
	position: absolute;
	left: 22px;
	top: 210px;
	background: var( --taw-color-primary-900 );
	color: var( --taw-color-accent-gold );
	font: 700 10.5px/1 var( --taw-font-body );
	letter-spacing: 1.5px;
	border-radius: var( --taw-radius-pill );
	padding: 6px 12px;
}

.taw-lead__copy {
	position: relative;
	max-width: 620px; /* safety cap for longer editor-entered text; Figma's own lines size naturally */
}

.taw-lead__heading {
	font: 600 36px/46px var( --taw-font-display );
	color: var( --taw-color-bg );
	margin: 0 0 20px;
}

.taw-lead__desc {
	font: 400 16px/25px var( --taw-font-body );
	color: var( --taw-color-text-on-dark );
	margin: 0 0 32px;
}

.taw-lead__form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.taw-lead__input {
	flex: 1 1 280px;
	height: 54px;
	background: var( --taw-color-bg );
	border: none;
	border-radius: var( --taw-radius-pill );
	padding: 0 22px;
	font: 400 15px var( --taw-font-body );
}

.taw-lead__form .taw-btn {
	height: 54px;
	padding: 0 26px;
}

/* ---------- Blog feed ---------- */
.taw-blog-feed {
	background: var( --taw-color-bg );
	padding: 57px 0; /* calibrated against measured render vs Figma 731 total */
}

.taw-blog-feed__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 48px;
	gap: 24px;
}

.taw-blog-feed__head .taw-eyebrow {
	color: var( --taw-color-primary-800 );
}

.taw-blog-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.taw-blog-card {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: var( --taw-radius-lg );
	min-height: 481px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.taw-blog-card__media {
	height: 230px;
	flex: none;
	background: var( --taw-color-bg-alt-4 );
}

.taw-blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.taw-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	min-height: 0;
	padding: 24px 28px 26px;
}

.taw-blog-card__category {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var( --taw-color-bg-alt-3 );
	color: var( --taw-color-primary-800 );
	border-radius: var( --taw-radius-pill );
	padding: 6px 12px;
	font: 700 10.5px/1 var( --taw-font-body );
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.taw-blog-card__title {
	font: 600 20px/27px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
	width: 341px;
	max-width: 100%;
}

.taw-blog-card__excerpt {
	font: 400 14.5px/22px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
	width: 341px;
	max-width: 100%;
	flex: 1 1 auto;
}

/* ---------- Bio ---------- */
.taw-bio {
	background: var( --taw-color-bg-alt-3 );
	padding: 110px 0; /* Figma: photo 540 tall, centered with 110 top/bottom = 760 total */
}

.taw-bio__grid {
	display: grid;
	grid-template-columns: minmax( 0, 440px ) minmax( 0, 1fr );
	gap: 64px;
	align-items: center;
}

.taw-bio__media {
	border-radius: var( --taw-radius-lg );
	overflow: hidden;
	aspect-ratio: 440 / 540;
}

.taw-bio__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.taw-bio__name {
	font: var( --taw-text-h2 );
	color: var( --taw-color-primary-900 );
	margin: 0 0 8px;
}

.taw-bio__role {
	font: 600 16px var( --taw-font-body ); /* Manrope SemiBold, not Regular */
	color: var( --taw-color-primary-800 );
	margin: 0 0 24px;
}

.taw-bio__text {
	font: 400 16px/26px var( --taw-font-body );
	color: var( --taw-color-text-soft );
	margin: 0 0 24px;
}

.taw-bio__credentials {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.taw-bio__credentials li {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 15px var( --taw-font-body );
	color: var( --taw-color-text );
}

.taw-bio__credentials img {
	width: 20px;
	height: 20px;
	flex: none;
}

/* Figma: the quote is a white rounded card, not a border-left blockquote */
.taw-bio__quote {
	background: var( --taw-color-bg );
	border-radius: 20px;
	padding: 24px 28px;
	font: 600 17px/26px var( --taw-font-display ); /* Sora SemiBold */
	font-style: normal;
	color: var( --taw-color-primary-800 );
	width: 564px;
	max-width: 100%;
	margin: 0 0 24px;
}

/* ---------- Speaking & Orgs ---------- */
.taw-speak-orgs {
	background: var( --taw-color-bg );
	padding: 40px 0; /* calibrated against measured render vs Figma 380 total */
}

.taw-speak-orgs__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 24px;
}

.taw-feature-card {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: var( --taw-radius-lg );
	min-height: 300px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.taw-feature-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.taw-speak-orgs__grid > :nth-child( 1 ) .taw-feature-card__icon { background: #eaf1ea; }
.taw-speak-orgs__grid > :nth-child( 2 ) .taw-feature-card__icon { background: #e8eef6; }

.taw-feature-card__icon img {
	width: 22px;
	height: 22px;
}

.taw-feature-card__title {
	font: var( --taw-text-h3 );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-feature-card__desc {
	font: 400 15.5px/24px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
	width: 528px;
	max-width: 100%;
	flex: 1 1 auto;
}

.taw-speak-orgs__grid > :nth-child( 2 ) .taw-link-arrow {
	color: var( --taw-color-accent-blue );
}

/* ---------- Final CTA ---------- */
.taw-final-cta {
	background: var( --taw-color-bg );
	padding: 30px 0; /* Figma: 5380→5720 (340), panel wrapper inset 30 top/bottom */
}

.taw-final-cta--about {
	padding: 106px 0 0;
}

.taw-final-cta--services {
	padding: 62px 0 0;
}

.taw-final-cta--about .taw-final-cta__panel,
.taw-final-cta--services .taw-final-cta__panel {
	height: 260px;
}

.taw-final-cta__panel {
	position: relative;
	background: var( --taw-color-primary-900 ); /* #14342a — Figma is dark, not cream */
	border-radius: 32px;
	height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 40px;
	text-align: center;
	overflow: hidden;
}

/* Figma: a 200x200 clipping box at left:-50/top:130 holds the
   circle-cluster group inset 2.73%/6.82% within it — the group's
   own rendered size/position (172.727x189.091 at left:-36.4px,
   top:135.45px) is what actually matters, not the box. */
.taw-final-cta__shape {
	position: absolute;
	top: 135.45px;
	left: -36.4px;
	width: 172.727px;
	height: 189.091px;
	pointer-events: none;
}

.taw-final-cta__heading {
	position: relative;
	font: 600 34px var( --taw-font-display );
	color: var( --taw-color-white ); /* Figma: literal white, not the cream --taw-color-bg */
	margin: 0;
}

.taw-final-cta__sub {
	position: relative;
	font: 400 16.5px var( --taw-font-body );
	color: var( --taw-color-text-on-dark );
	margin: 0;
}

.taw-final-cta__panel .taw-btn {
	position: relative;
	padding: 16px 30px;
	font-size: 15.5px;
}

.taw-final-cta--about .taw-final-cta__heading,
.taw-final-cta--services .taw-final-cta__heading {
	font-size: 30px;
}

.taw-final-cta--about .taw-final-cta__sub,
.taw-final-cta--services .taw-final-cta__sub {
	font-size: 16px;
}

.taw-final-cta--about .taw-final-cta__panel .taw-btn,
.taw-final-cta--services .taw-final-cta__panel .taw-btn {
	padding: 15px 28px;
	font-size: 15px;
}

/* Grid items with an explicit content width (e.g. Figma's
   fixed-px text-block widths) can force their own grid track to
   grow past the container — the classic CSS Grid `min-width:
   auto` overflow trap. min-width: 0 on every direct grid child
   is the standard fix; harmless at desktop since content still
   renders at its intended width there. */
.taw-pathways__grid > *,
.taw-resource-grid > *,
.taw-blog-grid > *,
.taw-speak-orgs__grid > *,
.taw-framework__steps > *,
.taw-hero__grid > *,
.taw-bio__grid > *,
.taw-three-cards__grid > *,
.taw-pricing__grid > *,
.taw-process__rail > *,
.taw-stats__grid > *,
.taw-testimonial-grid > *,
.taw-resource-links__grid > * {
	min-width: 0;
}

/* ---------- Page Hero ---------- */
.taw-page-hero {
	background: var( --taw-color-bg-alt-3 );
	padding: 50px 0;
}

.taw-page-hero--services {
	padding: 92.5px 0;
}

.taw-page-hero--testimonials,
.taw-page-hero--faq {
	padding: 84.5px 0;
}

.taw-page-hero__inner {
	display: flex;
	align-items: center;
	gap: 80px;
}

.taw-page-hero--centered .taw-page-hero__inner {
	justify-content: center;
	text-align: center;
}

.taw-page-hero__copy {
	max-width: 760px;
}

.taw-page-hero--centered .taw-page-hero__copy {
	max-width: 804px;
	margin-inline: auto;
}

.taw-page-hero--testimonials .taw-page-hero__copy {
	max-width: 606px;
}

.taw-page-hero--faq .taw-page-hero__copy {
	max-width: 1004px;
}

.taw-page-hero--centered .taw-eyebrow {
	justify-content: center;
}

.taw-page-hero__heading {
	font: 600 52px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0 0 18px;
}

.taw-page-hero--centered .taw-page-hero__heading {
	font-size: 48px;
}

.taw-page-hero__sub {
	font: 400 17px/27px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
}

.taw-page-hero__media {
	flex: none;
	width: 400px;
	aspect-ratio: 4 / 3;
	border-radius: var( --taw-radius-lg );
	overflow: hidden;
}

.taw-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Story ---------- */
.taw-story {
	background: var( --taw-color-bg );
	padding: 100px 0 0;
}

.taw-story__inner {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.taw-story__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 640px;
	flex: none;
}

.taw-story__heading {
	font: 600 34px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-story__copy p {
	font: 400 16px/26px var( --taw-font-body );
	color: var( --taw-color-text-soft );
	margin: 0;
}

.taw-story__quote {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: var( --taw-radius-lg );
	padding: 32px;
	width: 394px;
	flex: none;
}

.taw-story__mark {
	display: block;
	font: 700 44px var( --taw-font-display );
	color: var( --taw-color-accent-gold );
	line-height: 1;
	margin-bottom: 10px;
}

.taw-story__quote-text {
	font: 600 19px/28px var( --taw-font-display );
	color: var( --taw-color-primary-800 );
	margin: 0 0 10px;
}

.taw-story__quote-label {
	font: 700 13px var( --taw-font-body );
	color: var( --taw-color-text-meta );
	margin: 0;
}

/* ---------- Stats ---------- */
.taw-stats {
	background: var( --taw-color-bg );
	padding-top: 111px;
}

.taw-stats__band {
	background: var( --taw-color-primary-900 );
	padding: 52px 0 56px;
}

.taw-stats__heading {
	font: 600 28px var( --taw-font-display );
	color: var( --taw-color-white );
	margin: 0 0 30px;
}

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

.taw-stat-tile {
	background: var( --taw-color-primary-800 );
	border-radius: 20px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 190px;
}

.taw-stat-tile__value {
	font: 600 30px var( --taw-font-display );
	color: var( --taw-color-accent-gold );
	margin: 0;
}

.taw-stat-tile__label {
	font: 500 13px/19px var( --taw-font-body );
	color: var( --taw-color-text-on-dark );
	margin: 0;
}

/* ---------- Three Column Cards ---------- */
.taw-three-cards {
	background: var( --taw-color-bg );
	padding: 80px 0 0;
}

.taw-three-cards__head {
	margin-bottom: 39px;
}

.taw-three-cards__heading {
	font: 600 34px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 12px 0 0;
}

.taw-three-cards__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.taw-simple-card {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: var( --taw-radius-lg );
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.taw-simple-card__title {
	font: 600 21px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-simple-card__desc {
	font: 400 14.5px/22px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
}

/* ---------- Profile ---------- */
.taw-profile {
	background: linear-gradient(
		to bottom,
		var( --taw-color-bg ) 0,
		var( --taw-color-bg ) 100px,
		var( --taw-color-bg-alt-3 ) 100px,
		var( --taw-color-bg-alt-3 ) 100%
	);
	padding: 190px 0 90px;
}

.taw-profile__inner {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.taw-profile__media {
	flex: none;
	width: 440px;
	aspect-ratio: 440 / 560;
	border-radius: var( --taw-radius-lg );
	overflow: hidden;
}

.taw-profile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taw-profile__copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.taw-profile__name {
	font: 600 36px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-profile__credential {
	font: 600 15px var( --taw-font-body );
	color: var( --taw-color-primary-800 );
	margin: 0;
}

.taw-profile__body {
	font: 400 15.5px/25px var( --taw-font-body );
	color: var( --taw-color-text-soft );
	margin: 0;
	max-width: 680px;
}

.taw-profile__tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.taw-profile__tag {
	background: var( --taw-color-bg );
	border-radius: var( --taw-radius-pill );
	padding: 9px 16px;
	font: 700 13px var( --taw-font-body );
	color: var( --taw-color-primary-800 );
}

.taw-profile__quote {
	background: var( --taw-color-bg );
	border-radius: 18px;
	padding: 20px 26px;
	max-width: 570px;
}

.taw-profile__quote p {
	font: 600 16.5px var( --taw-font-body );
	color: var( --taw-color-primary-800 );
	margin: 0;
}

/* ---------- Timeline ---------- */
.taw-timeline {
	background: var( --taw-color-bg );
	padding: 90px 0 0;
}

.taw-timeline__head {
	margin-bottom: 39px;
}

.taw-timeline__heading {
	font: 600 34px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 12px 0 0;
}

.taw-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.taw-timeline__row {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: 16px;
	height: 72px;
	padding: 0 28px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.taw-timeline__year {
	flex: none;
	font: 600 18px var( --taw-font-display );
	color: var( --taw-color-accent-gold );
}

.taw-timeline__desc {
	font: 500 15px var( --taw-font-body );
	color: var( --taw-color-text );
}

/* ---------- Note ---------- */
.taw-note {
	padding: 60px 0 0;
}

.taw-note--two-line {
	padding-top: 94px;
}

.taw-note__inner {
	text-align: center;
}

.taw-note__line {
	font: 500 13.5px var( --taw-font-body );
	color: #8a9689;
	margin: 0;
}

.taw-note__line--sm {
	margin-top: 16px;
}

/* ---------- Pricing Cards ---------- */
.taw-pricing {
	background: var( --taw-color-bg );
	padding: 80px 0 0;
}

.taw-pricing--tinted {
	background: linear-gradient(
		to bottom,
		var( --taw-color-bg ) 0,
		var( --taw-color-bg ) 100px,
		var( --taw-color-bg-alt-3 ) 100px,
		var( --taw-color-bg-alt-3 ) 100%
	);
	padding: 164px 0 175px;
}

.taw-pricing__head {
	margin-bottom: 43px;
}

.taw-pricing--tinted .taw-pricing__head {
	margin-bottom: 51px;
}

.taw-pricing__heading {
	font: 600 34px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 12px 0 0;
}

.taw-pricing__intro {
	font: 400 16px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 8px 0 0;
	max-width: 716px;
}

.taw-pricing__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.taw-pricing-card {
	background: var( --taw-color-bg );
	border-radius: var( --taw-radius-lg );
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.taw-pricing--tinted .taw-pricing-card {
	min-height: 265px;
}

.taw-pricing:not( .taw-pricing--tinted ) .taw-pricing-card {
	border: 1.5px solid var( --taw-color-border-card );
	min-height: 410px;
	gap: 14px;
}

.taw-pricing-card__title {
	font: 600 21px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-pricing-card__price {
	font: 600 26px var( --taw-font-display );
	color: var( --taw-color-primary-800 );
	margin: 0;
}

.taw-pricing-card__desc {
	font: 400 13.5px/20px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
}

.taw-pricing-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}

.taw-pricing:not( .taw-pricing--tinted ) .taw-pricing-card__features {
	gap: 9px;
}

.taw-pricing-card__features li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.taw-pricing-card__features img {
	width: 16px;
	height: 16px;
	flex: none;
}

.taw-pricing-card__features span {
	font: 500 13.5px var( --taw-font-body );
	color: var( --taw-color-text );
}

.taw-pricing-card__footer {
	font: 700 13px var( --taw-font-body );
	color: var( --taw-color-primary-800 );
	text-decoration: none;
	margin: 0;
}

.taw-pricing-card--featured {
	background: var( --taw-color-primary-800 );
}

.taw-pricing-card--featured .taw-pricing-card__title {
	color: var( --taw-color-white );
}

.taw-pricing-card--featured .taw-pricing-card__price {
	color: var( --taw-color-accent-gold );
}

.taw-pricing-card--featured .taw-pricing-card__desc {
	color: var( --taw-color-text-on-dark );
}

.taw-pricing-card--featured .taw-pricing-card__features span {
	color: #e4efe7;
}

.taw-pricing-card--featured .taw-pricing-card__footer {
	color: var( --taw-color-accent-gold );
}

/* ---------- Process Rail ---------- */
.taw-process {
	background: var( --taw-color-bg );
	padding: 80px 0 0;
}

.taw-process__heading {
	font: 600 34px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	text-align: center;
	margin: 0 0 42px;
}

.taw-process__rail {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}

.taw-process-step {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: 20px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 190px;
}

.taw-process-step__number {
	font: 600 24px var( --taw-font-display );
	color: var( --taw-color-accent-gold );
}

.taw-process-step__title {
	font: 600 18px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-process-step__desc {
	font: 400 13.5px/20px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
}

/* ---------- Testimonials ---------- */
.taw-testimonials {
	background: var( --taw-color-bg );
	padding: 90px 0 0;
}

.taw-testimonial-byline {
	display: flex;
	align-items: center;
	gap: 10px;
}

.taw-testimonial-byline__name {
	font: 700 15px var( --taw-font-body );
	color: var( --taw-color-primary-800 );
}

.taw-testimonial-byline__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var( --taw-color-text-faint );
	flex: none;
}

.taw-testimonial-byline__role {
	font: 500 13.5px var( --taw-font-body );
	color: #8a9689;
}

.taw-testimonial-featured {
	background: var( --taw-color-bg-alt-3 );
	border-radius: 28px;
	min-height: 290px;
	padding: 40px 48px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}

.taw-testimonial-featured__mark {
	font: 700 48px var( --taw-font-display );
	color: var( --taw-color-accent-gold );
	line-height: 1;
}

.taw-testimonial-featured__quote {
	font: 600 23px/34px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
	max-width: 1100px;
}

.taw-testimonial-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	margin-bottom: 24px;
}

.taw-testimonial-card {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: var( --taw-radius-lg );
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 250px;
}

.taw-testimonial-card__mark {
	font: 700 34px var( --taw-font-display );
	color: var( --taw-color-accent-gold );
	line-height: 1;
}

.taw-testimonial-card__quote {
	font: 600 15.5px/23px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
	flex: 1 1 auto;
}

.taw-testimonial-closing {
	background: var( --taw-color-primary-800 );
	border-radius: var( --taw-radius-lg );
	padding: 30px 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	min-height: 110px;
}

.taw-testimonial-closing__quote {
	font: 600 19px var( --taw-font-display );
	color: var( --taw-color-white );
	margin: 0;
}

.taw-testimonial-closing__attribution {
	font: 500 14px var( --taw-font-body );
	color: var( --taw-color-text-on-dark );
	margin: 0;
	white-space: nowrap;
}

/* ---------- Two Button CTA ---------- */
.taw-two-button-cta {
	background: var( --taw-color-bg );
	padding: 100px 0 0;
}

.taw-two-button-cta__panel {
	background: var( --taw-color-bg-alt-3 );
	border-radius: 32px;
	min-height: 260px;
	padding: 60px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
}

.taw-two-button-cta__heading {
	font: 600 30px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 0;
}

.taw-two-button-cta__sub {
	font: 400 16px var( --taw-font-body );
	color: var( --taw-color-text-body );
	margin: 0;
}

.taw-two-button-cta__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.taw-two-button-cta__actions .taw-btn--secondary {
	border: none;
}

/* ---------- FAQ ---------- */
.taw-faq {
	background: var( --taw-color-bg );
	padding: 90px 0 0;
}

.taw-faq__list {
	max-width: 900px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.taw-faq-item {
	background: var( --taw-color-bg );
	border: 1.5px solid var( --taw-color-border-card );
	border-radius: 20px;
	min-height: 76px;
	padding: 24px 32px;
}

.taw-faq-item.is-open {
	min-height: 109px;
}

.taw-faq-item.is-open {
	border-color: var( --taw-color-primary-800 );
}

.taw-faq-item__heading {
	margin: 0;
}

.taw-faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font: 600 18px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
}

.taw-faq-item__icon {
	flex: none;
	width: 22px;
	height: 22px;
	position: relative;
}

.taw-faq-item__icon::before,
.taw-faq-item__icon::after {
	content: '';
	position: absolute;
	background: var( --taw-color-accent-gold );
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.taw-faq-item__icon::before {
	width: 14px;
	height: 2.5px;
}

.taw-faq-item__icon::after {
	width: 2.5px;
	height: 14px;
	transition: transform 0.15s ease;
}

.taw-faq-item.is-open .taw-faq-item__icon::after {
	transform: translate( -50%, -50% ) scaleY( 0 );
}

.taw-faq-item__panel {
	font: 400 15px/23px var( --taw-font-body );
	color: var( --taw-color-text-body );
	padding-top: 16px;
}

.taw-faq-item__panel p {
	margin: 0;
}

/* ---------- Resource Links ---------- */
.taw-resource-links {
	background: var( --taw-color-bg );
	padding-top: 100px;
}

.taw-resource-links__band {
	background: var( --taw-color-bg-alt-3 );
	padding: 60px 0 26px;
}

.taw-resource-links__head {
	margin-bottom: 64px;
}

.taw-resource-links__heading {
	font: 600 32px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	margin: 10px 0 0;
	max-width: 593px;
}

.taw-resource-links__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}

.taw-resource-link-card {
	background: var( --taw-color-bg );
	border-radius: 22px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 300px;
	text-decoration: none;
}

.taw-resource-link-card__cover {
	width: 90px;
	height: 120px;
	border-radius: 6px;
	overflow: hidden;
	display: block;
}

.taw-resource-link-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taw-resource-link-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #eaf1ea;
	display: flex;
	align-items: center;
	justify-content: center;
}

.taw-resource-link-card__icon img {
	width: 20px;
	height: 20px;
}

.taw-resource-link-card__title {
	font: 600 17.5px/23px var( --taw-font-display );
	color: var( --taw-color-primary-900 );
	max-width: 240px;
}

.taw-resource-link-card__desc {
	font: 400 13.5px/19px var( --taw-font-body );
	color: var( --taw-color-text-meta );
	max-width: 240px;
}

.taw-resource-link-card__badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	background: #eaf1ea;
	color: var( --taw-color-primary-800 );
	border-radius: var( --taw-radius-pill );
	padding: 6px 12px;
	font: 700 10.5px var( --taw-font-body );
	letter-spacing: 1px;
}

.taw-resource-link-card__badge.is-gold {
	background: var( --taw-color-badge-bg );
	color: var( --taw-color-badge-text );
}

.taw-resource-links__note {
	font: 500 13.5px var( --taw-font-body );
	color: #8a9689;
	margin: 24px 0 0;
}

/* ---------- Newsletter CTA ---------- */
.taw-newsletter-cta {
	background: var( --taw-color-bg );
	padding: 100px 0 0;
}

.taw-newsletter-cta__panel {
	background: var( --taw-color-primary-800 );
	border-radius: 32px;
	min-height: 240px;
	padding: 52px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
}

.taw-newsletter-cta__heading {
	font: 600 28px var( --taw-font-display );
	color: var( --taw-color-white );
	margin: 0;
}

.taw-newsletter-cta__sub {
	font: 400 15.5px var( --taw-font-body );
	color: var( --taw-color-text-on-dark );
	margin: 0;
}

.taw-newsletter-cta__form {
	display: flex;
	gap: 10px;
}

.taw-newsletter-cta__input {
	width: 300px;
	height: 48px;
	border-radius: var( --taw-radius-pill );
	border: none;
	padding: 0 20px;
	font: 400 14px var( --taw-font-body );
	color: var( --taw-color-text );
}

.taw-newsletter-cta__input::placeholder {
	color: var( --taw-color-text-faint );
}

.taw-newsletter-cta__form .taw-btn {
	height: 48px;
	padding: 0 24px;
	font-size: 14px;
}

/* Figma gives each inner page's own "Sec/Footer" wrapper a
   100px canvas-color gap before the shared footer band starts —
   distinct per page from the shared .taw-footer component itself
   (which must stay untouched for Homepage). */
.page-id-50 .taw-footer,
.page-id-51 .taw-footer,
.page-id-55 .taw-footer,
.page-id-56 .taw-footer {
	margin-top: 100px;
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.taw-hero__grid {
		grid-template-columns: 1fr;
	}

	/* The desktop hero visual relies on absolute-positioned,
	   overlapping elements sized precisely against Figma's fixed
	   1440px layout (no responsive Figma frames exist — see the
	   Phase 1 audit). Below this breakpoint it switches to a
	   simple stacked flow instead of trying to scale that exact
	   overlap down. */
	.taw-hero__visual {
		max-width: 340px;
		aspect-ratio: auto;
	}

	.taw-hero__cover {
		position: static;
		width: 100%;
		max-width: 264px;
		margin-inline: auto;
	}

	.taw-hero__teaser {
		position: static;
		width: 100%;
		max-width: 320px;
		margin: 16px auto 0;
	}

	.taw-pathways__grid,
	.taw-resource-grid,
	.taw-blog-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.taw-framework__steps {
		grid-template-columns: repeat( 3, 1fr );
	}

	.taw-bio__grid,
	.taw-speak-orgs__grid {
		grid-template-columns: 1fr;
	}

	.taw-lead__panel {
		height: auto;
		padding: 40px;
	}

	/* No responsive Figma frame for the rotated cover — hide it
	   below desktop rather than guess a scaled-down position. */
	.taw-lead__cover {
		display: none;
	}

	/* .taw-lead__panel keeps overflow: visible (required above
	   1024px so the rotated cover can bleed past its edge); once
	   the cover is hidden, the leftover -60px shape bleed has
	   nothing to justify it and pushes the page into horizontal
	   scroll on a full-width panel, so hide it too. */
	.taw-lead__shape {
		display: none;
	}

	.taw-final-cta__panel {
		height: auto;
		padding: 40px 24px;
	}

	.taw-page-hero__inner,
	.taw-story__inner,
	.taw-profile__inner {
		flex-direction: column;
	}

	.taw-page-hero__copy,
	.taw-story__copy,
	.taw-profile__body {
		max-width: 100%;
	}

	.taw-page-hero__media {
		width: 100%;
		max-width: 400px;
	}

	.taw-story__quote {
		width: 100%;
		max-width: 394px;
	}

	.taw-profile__media {
		width: 100%;
		max-width: 440px;
	}

	.taw-stats__grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.taw-three-cards__grid,
	.taw-pricing__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.taw-process__rail {
		grid-template-columns: repeat( 2, 1fr );
	}

	.taw-testimonial-grid,
	.taw-resource-links__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.taw-testimonial-closing {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.taw-newsletter-cta__form {
		flex-direction: column;
		width: 100%;
		max-width: 340px;
	}

	.taw-newsletter-cta__input {
		width: 100%;
	}
}

@media ( max-width: 639px ) {
	.taw-pathways__grid,
	.taw-resource-grid,
	.taw-blog-grid,
	.taw-framework__steps {
		grid-template-columns: 1fr;
	}

	.taw-featured__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.taw-page-hero__heading {
		font-size: 36px;
	}

	.taw-page-hero--centered .taw-page-hero__heading {
		font-size: 32px;
	}

	.taw-stats__grid,
	.taw-three-cards__grid,
	.taw-pricing__grid,
	.taw-process__rail {
		grid-template-columns: 1fr;
	}

	.taw-timeline__row {
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		gap: 6px;
	}

	.taw-testimonial-grid,
	.taw-resource-links__grid {
		grid-template-columns: 1fr;
	}

	.taw-testimonial-featured {
		padding: 28px 24px;
	}

	.taw-two-button-cta__actions {
		flex-direction: column;
		width: 100%;
		max-width: 320px;
	}

	.taw-two-button-cta__actions .taw-btn {
		width: 100%;
		text-align: center;
	}

	.taw-two-button-cta__panel,
	.taw-newsletter-cta__panel {
		padding: 32px 24px;
		min-height: auto;
	}
}