/* ==========================================================================
   Twenty & One — custom theme CSS
   Layout/spacing values mirror the Astro site's Tailwind classes 1:1 in rem,
   which lines up in px too since theme.json sets html { font-size: 17px }
   to match the Astro site's base size.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- Layout helpers ---------- */
.ta-section {
	max-width: 1152px;
	margin-inline: auto;
	padding: 2.25rem 1.5rem;
}

.ta-section-inner {
	max-width: 1152px;
	margin-inline: auto;
	padding: 2.25rem 1.5rem;
}

.ta-section-inner > h2:first-child {
	margin-top: 0;
	margin-bottom: 0;
}

.ta-section-intro {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 2rem;
}

.ta-section-intro-left {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 42rem !important;
	text-align: left;
}

/* Pin the intro to the left edge (instead of the constrained layout centering
   it), and match the hero heading/lede width (42rem) so headings like
   "Modern CRM and AI..." wrap the same way the hero does. */
.ta-section-intro-left > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 42rem !important;
}

.ta-eyebrow {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--brand-primary);
	margin: 0 0 0.5rem;
}

.ta-eyebrow-accent {
	color: var(--wp--preset--color--brand-accent);
}

.ta-muted {
	color: var(--wp--preset--color--slate-600);
	margin-top: 1rem;
}

.ta-muted-light {
	color: #cbd5e1;
	margin-top: 1rem;
}

.ta-inline-link-wrap {
	margin: 0;
}

.ta-inline-link {
	font-weight: 600;
	color: var(--wp--preset--color--brand-primary);
	text-decoration: none;
	white-space: nowrap;
}

.ta-inline-link:hover {
	color: var(--wp--preset--color--brand-secondary);
}

.ta-fineprint {
	margin-top: 1.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-400);
}

/* ---------- Header ---------- */
.ta-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid #26364f;
}

/* Sit below the WP admin bar (fixed, z-index:99999) instead of behind it. */
.admin-bar .ta-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ta-header {
		top: 46px;
	}
}

.ta-main {
	margin-top: 0 !important;
}

.ta-main.ta-section {
	padding-top: 7rem;
}

.ta-header-inner {
	align-items: center;
	min-height: 6rem;
	padding-block: 0.5rem;
}

.ta-header-brand {
	align-items: center;
	gap: 0.75rem;
}

.ta-header-logo img {
	/* No hard size cap here, so the Site Logo block's width control (in the
	   Site Editor) determines the logo size. */
	height: auto;
	object-fit: contain;
}

.ta-header-word-wrap {
	gap: 0;
}

.ta-header-word,
.ta-header-word a {
	/* Font size intentionally not set here so the Site Title block's typography
	   controls it in the editor. Default size comes from theme.json (1.5rem). */
	color: #ffffff !important;
	/* Match the hero heading's Roboto Slab 900 (a real bundled weight, so it
	   stays crisp — 800 isn't loaded and would be faux-bolded and jagged). */
	font-weight: 900 !important;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	/* Bold slab-serif in white on a dark background renders heavy/jagged with
	   macOS subpixel antialiasing; grayscale smoothing cleans up the edges. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ta-header-tagline {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--slate-400);
	margin: 0.2rem 0 0 !important;
}

.ta-header-nav {
	gap: 1.75rem;
}

.ta-header-nav a {
	text-decoration: none;
	color: #eef2f8;
	transition: color 0.15s ease;
}

.ta-header-nav a:hover {
	color: #ffffff;
}

.ta-header-nav .ta-nav-cta a {
	background: var(--wp--preset--color--brand-primary);
	color: #ffffff !important;
	padding: 0.6rem 1.1rem;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.ta-header-nav .ta-nav-cta a:hover {
	background: var(--wp--preset--color--brand-secondary);
}

.ta-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--brand-dark);
}

/* Force a fixed-breakpoint hamburger menu instead of relying on core/navigation's
   own overflow-detection, which doesn't reliably trigger with this header's layout. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	color: #ffffff;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	width: 2.25rem;
	height: 2.25rem;
}

/* Core's default icon is only two bars; draw a proper three-bar hamburger instead. */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

@media (min-width: 901px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
}

@media (max-width: 900px) {
	.ta-header-nav {
		gap: 0;
	}

	.ta-header-inner {
		position: relative;
		justify-content: center !important;
	}

	.ta-header-nav {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	.ta-header-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.ta-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		padding: 1.5rem;
	}

	.ta-header-nav .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}

	.ta-header-nav .wp-block-navigation__responsive-container-close {
		align-self: flex-end;
		background: none;
		border: none;
		color: #ffffff;
		cursor: pointer;
		padding: 0.4rem;
		margin-bottom: 1.5rem;
	}

	.ta-header-nav ul.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.5rem;
	}

	.ta-header-nav .wp-block-navigation-item {
		width: 100% !important;
	}

	.ta-header-nav .wp-block-navigation-item__content {
		display: block !important;
		width: 100%;
		padding: 0.9rem 0 !important;
		font-size: 1.25rem;
	}

	.ta-header-nav .ta-nav-cta {
		margin-top: 1rem;
		width: 100% !important;
	}

	.ta-header-nav .ta-nav-cta .wp-block-navigation-item__content {
		display: block !important;
		text-align: center !important;
		background: var(--wp--preset--color--brand-primary) !important;
		color: #ffffff !important;
		border-radius: 0.375rem;
		padding: 1rem !important;
		font-weight: 600;
	}
}

/* ---------- Buttons ---------- */
.ta-btn-accent .wp-block-button__link {
	background: var(--wp--preset--color--brand-primary) !important;
	color: #ffffff !important;
	font-weight: 600;
	padding: 0.9rem 1.75rem;
	border-radius: 0.5rem;
}

.ta-btn-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-secondary) !important;
}

.ta-btn-outline .wp-block-button__link {
	background: transparent !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-weight: 600;
	padding: 0.9rem 1.75rem;
	border-radius: 0.375rem;
}

.ta-btn-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}

.ta-btn-white .wp-block-button__link {
	background: #ffffff !important;
	color: var(--wp--preset--color--brand-primary) !important;
	font-weight: 600;
	padding: 0.9rem 1.75rem;
	border-radius: 0.375rem;
}

.ta-btn-outline-light .wp-block-button__link {
	background: transparent !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.4);
	font-weight: 600;
	padding: 0.9rem 1.75rem;
	border-radius: 0.375rem;
}

.ta-btn-outline-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}

/* ---------- Hero (cream, left-aligned) ---------- */
.ta-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--brand-cream);
	text-align: left;
}

.ta-hero-inner {
	position: relative;
	max-width: 1152px;
	margin-inline: auto;
	/* Top padding must clear the fixed header (~6.25rem tall). */
	padding: clamp(7.5rem, 6rem + 4vw, 9rem) 1.5rem clamp(2rem, 1.5rem + 1.5vw, 3rem);
	/* Two columns: text left, consultation card right. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
	gap: 3.5rem;
	align-items: center;
}

.ta-hero-main {
	min-width: 0;
}

.ta-hero-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-primary);
	margin: 0 0 1.25rem;
}

.ta-hero-heading {
	margin: 0 0 1.5rem;
	max-width: 42rem;
	font-weight: 900;
	line-height: 1.04 !important;
	color: var(--wp--preset--color--brand-dark);
}

.ta-accent-text {
	color: var(--wp--preset--color--brand-primary);
}

.ta-hero-lede {
	max-width: 42rem;
	margin: 0 0 2.25rem;
	font-size: 1.2rem;
	color: var(--wp--preset--color--slate-600);
	line-height: 1.6;
}

.ta-hero-actions {
	margin-bottom: 1.75rem;
	justify-content: flex-start;
}

.ta-hero-meta {
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate-600);
	margin: 0;
}

/* ---------- Hero consultation card (right column) ---------- */
.ta-hero-aside {
	min-width: 0;
}

.ta-hero-card {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--slate-200);
	border-radius: 1rem;
	box-shadow: 0 24px 55px -30px rgba(6, 14, 30, 0.45);
	padding: 1.9rem 1.75rem;
}

.ta-hero-card > * {
	margin-block: 0 !important;
}

.ta-hero-card-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--brand-primary);
	margin: 0 0 0.6rem !important;
}

.ta-hero-card-title {
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 900;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--wp--preset--color--brand-dark);
	margin: 0 0 0.6rem !important;
}

.ta-hero-card-lede {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--slate-600);
	margin: 0 0 1.2rem !important;
}

.ta-hero-card-list {
	list-style: none;
	margin: 0 0 1.4rem !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ta-hero-card-list li {
	position: relative;
	padding-left: 1.65rem;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--wp--preset--color--brand-dark);
}

.ta-hero-card-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-primary);
	color: #ffffff;
	font-size: 0.72rem;
	line-height: 1.15rem;
	text-align: center;
	font-weight: 700;
}

.ta-hero-card-actions {
	margin: 0 0 0.9rem !important;
}

.ta-hero-card-actions .wp-block-button {
	width: 100%;
}

.ta-hero-card-actions .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding-block: 0.85rem;
}

.ta-hero-card-note {
	font-size: 0.8rem;
	color: var(--wp--preset--color--slate-400);
	text-align: center;
	margin: 0 !important;
}

/* Hero / light-background buttons */
.ta-btn-primary .wp-block-button__link {
	background: var(--wp--preset--color--brand-primary) !important;
	color: #ffffff !important;
	font-weight: 600;
	padding: 0.9rem 1.75rem;
	border-radius: 0.5rem;
}

.ta-btn-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-secondary) !important;
}

.ta-btn-ghost .wp-block-button__link {
	background: #ffffff !important;
	color: var(--wp--preset--color--brand-dark) !important;
	border: 1px solid var(--wp--preset--color--slate-200);
	font-weight: 600;
	padding: 0.9rem 1.75rem;
	border-radius: 0.5rem;
}

.ta-btn-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--brand-primary) !important;
}

/* ---------- Pain grid ---------- */
.ta-pain-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 1.25rem;
	margin-top: 1rem;
}

.ta-pain-grid-single {
	grid-template-columns: 1fr;
	margin-top: 2rem;
}

.ta-pain-card {
	display: flex;
	gap: 1rem;
	align-items: center;
	height: 100%;
	border: 1px solid var(--wp--preset--color--slate-200);
	background: #f8fafc;
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.ta-pain-card::before {
	content: "\201C";
	font-size: 2.5rem;
	line-height: 1;
	font-family: Georgia, serif;
	color: rgba(0, 74, 173, 0.3);
	flex-shrink: 0;
}

.ta-pain-quote {
	font-size: 2.5rem;
	line-height: 1;
	font-family: Georgia, serif;
	color: rgba(0, 74, 173, 0.3);
	flex-shrink: 0;
}

.ta-pain-card p {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--brand-dark);
}

/* ---------- Services ---------- */
.ta-services-section {
	border-top: 1px solid var(--wp--preset--color--slate-200);
	border-bottom: 1px solid var(--wp--preset--color--slate-200);
}

.ta-service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 1.5rem;
}

/* Three-across service pillars (Consulting / Training / Recruiting). */
.ta-service-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.ta-service-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* "Inside RevOps: ..." capability line under the two pillar cards. */
.ta-capabilities-line {
	margin-top: 1.75rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--slate-600);
}

.ta-capabilities-line strong {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
}

.ta-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--slate-200);
	background: #ffffff;
	border-radius: 1rem;
	padding: 1.75rem;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ta-service-card:hover {
	border-color: var(--wp--preset--color--brand-primary);
	box-shadow: 0 10px 25px -10px rgba(0, 74, 173, 0.15);
}

.ta-service-card-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ta-service-card-head h2,
.ta-service-card-head h3 {
	margin: 0;
	font-size: 1.25rem;
}

.ta-service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	width: 3rem;
	flex-shrink: 0;
	border-radius: 0.75rem;
	background: rgba(0, 74, 173, 0.1);
	color: var(--wp--preset--color--brand-primary);
}

.ta-service-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate-400);
	margin: 0;
}

.ta-service-card h3 {
	margin: 0.15rem 0 0;
	font-size: 1.25rem;
	color: var(--wp--preset--color--brand-dark);
}

.ta-service-tagline {
	margin: 1rem 0 0;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
}

.ta-service-summary {
	margin: 0.5rem 0 0;
	flex: 1;
	color: var(--wp--preset--color--slate-600);
}

.ta-service-link {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.ta-service-link a {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: none;
}

.ta-service-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------- Method / steps ---------- */
.ta-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 2rem;
	margin-top: 1rem;
}

.ta-step {
	position: relative;
	height: 100%;
}

.ta-step-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ta-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 3rem;
	width: 3rem;
	margin: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-primary);
	color: #ffffff;
	font-weight: 700;
}

.ta-step h3 {
	margin: 0;
	font-size: 1.25rem;
	color: var(--wp--preset--color--brand-dark);
}

.ta-step p:not(.ta-step-num) {
	margin-top: 1rem;
	color: var(--wp--preset--color--slate-600);
}

.ta-steps-grid > .ta-step:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	top: 1.5rem;
	transform: translateY(-50%);
	right: -1.25rem;
	color: var(--wp--preset--color--slate-400);
	display: none;
}

@media (min-width: 782px) {
	.ta-steps-grid > .ta-step:not(:last-child)::after {
		display: block;
	}
}

/* ---------- We are / we are not ---------- */
.ta-diff-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 1.5rem;
}

.ta-diff-card {
	height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 2rem;
}

.ta-diff-label {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate-400);
	margin: 0 0 1.25rem;
}

.ta-diff-label-yes {
	color: #34d399;
}

.ta-diff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ta-diff-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.125rem;
	color: #ffffff;
}

.ta-diff-list li::before {
	content: "\2713";
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	font-weight: 700;
	color: #34d399;
}

.ta-diff-list-muted li {
	color: #94a3b8;
}

.ta-diff-list-muted li::before {
	content: "\2715";
	color: #64748b;
}

.ta-diff-list-muted li svg {
	color: #64748b;
}

/* ---------- Pricing ---------- */
.ta-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 1.5rem;
	margin-top: 1rem;
}

.ta-pricing-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--slate-200);
	background: #ffffff;
	border-radius: 1rem;
	padding: 2rem;
}

.ta-pricing-card-lead {
	border-color: var(--wp--preset--color--brand-primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--brand-primary), 0 10px 25px -10px rgba(0, 74, 173, 0.15);
}

.ta-pricing-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ta-pricing-step {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate-400);
	margin: 0;
}

.ta-pricing-badge {
	background: rgba(0, 74, 173, 0.1);
	color: var(--wp--preset--color--brand-primary);
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}

.ta-pricing-card h3 {
	margin: 0.5rem 0 0;
	font-size: 1.375rem;
	color: var(--wp--preset--color--brand-dark);
}

.ta-pricing-price {
	margin: 1rem 0 0;
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-dark);
}

.ta-pricing-unit {
	margin: 0.15rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-400);
}

.ta-pricing-features {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ta-pricing-features li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate-700);
}

.ta-pricing-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4rem;
	height: 0.5rem;
	width: 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-primary);
}

.ta-pricing-foot {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #f1f5f9;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--wp--preset--color--slate-400);
}

/* ---------- Service areas ---------- */
.ta-areas-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.ta-areas-text h2 {
	margin: 0.5rem 0 0;
}

.ta-areas-text .ta-inline-link {
	display: inline-flex;
	margin-top: 1.5rem;
}

.ta-areas-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 1rem;
}

.ta-area-card {
	position: relative;
	display: block;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--slate-200);
	background: #ffffff;
	border-radius: 1rem;
	padding: 2rem;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.ta-area-card:hover {
	border-color: var(--wp--preset--color--brand-primary);
}

.ta-area-card p:not(.ta-area-name):not(.ta-service-link) {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--slate-600);
}

.ta-area-name {
	margin: 0;
	font-weight: 700;
	font-size: 1.375rem;
}

.ta-area-name a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ta-area-name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ta-area-desc {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-400);
}

/* ---------- Why us ---------- */
.ta-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 2rem;
}

.ta-why-bar {
	height: 0.25rem;
	width: 2.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-accent);
	margin-bottom: 1rem;
}

.ta-why-card {
	height: 100%;
}

.ta-why-card::before {
	content: "";
	display: block;
	height: 0.25rem;
	width: 2.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-accent);
}

.ta-why-card h3 {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	color: var(--wp--preset--color--brand-dark);
}

.ta-why-card p {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--slate-600);
}

/* ---------- Enterprise experience ---------- */
.ta-experience-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}

.ta-experience-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5rem;
	width: 9rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #ffffff;
	padding: 1rem;
}

.ta-experience-logo figure {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
}

.ta-experience-logo img {
	max-height: 3rem;
	max-width: 7rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---------- Insights ---------- */
.ta-insights-head {
	align-items: flex-end;
	margin-bottom: 2.5rem;
}

/* The query block renders a <ul class="wp-block-post-template"> wrapping the
   posts, so the grid must live on that list (not the outer wrapper), and each
   <li class="wp-block-post"> is the card. */
.ta-insights-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-insights-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--slate-200);
	border-radius: 0.75rem;
	overflow: hidden;
	list-style: none;
	/* Core's is-layout-flow rule adds a top margin to every card after the
	   first, dropping them below card #1 in the row. Zero it so tops align. */
	margin: 0 !important;
	transition: border-color 0.15s ease;
}

.ta-insights-grid .wp-block-post:hover {
	border-color: var(--wp--preset--color--brand-primary);
}

.ta-insight-image img {
	width: 100%;
	height: 10rem;
	object-fit: cover;
	margin: 0;
}

.ta-insight-body {
	padding: 1.5rem;
}

.ta-insight-title {
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0;
}

.ta-insight-title a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
	font-weight: 600;
}

.ta-insight-title:hover a {
	color: var(--wp--preset--color--brand-primary);
}

.ta-insight-excerpt {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate-600);
}

/* ---------- Final CTA ---------- */
.ta-final-section {
	padding-top: 0;
}

.ta-final-cta {
	border-radius: 1.5rem;
	padding: 3.5rem 2rem;
	text-align: center;
}

.ta-final-cta-lede {
	max-width: 34rem;
	margin: 1rem auto 0;
	color: #dbeafe;
	font-size: 1.125rem;
}

/* ---------- Footer ---------- */
.ta-footer-inner {
	padding: 3.5rem 1.5rem;
}

.ta-footer-columns {
	gap: 2.5rem;
}

.ta-footer-brand-row {
	align-items: center;
	gap: 0.75rem;
}

.ta-footer-logo img {
	height: 2.75rem;
	width: 2.75rem;
	object-fit: contain;
}

.ta-footer-blurb {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: #94a3b8;
	max-width: 20rem;
}

.ta-footer-heading {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #64748b;
	margin: 0;
}

.ta-footer-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.ta-footer-list a {
	color: inherit;
	text-decoration: none;
}

.ta-footer-list a:hover {
	color: #ffffff;
}

.ta-footer-list-muted {
	color: #94a3b8;
}

.ta-footer-cta-item {
	padding-top: 0.5rem;
}

.ta-footer-cta-item a {
	font-weight: 600;
	color: #ffffff !important;
}

.ta-footer-bottom {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.75rem;
	color: #64748b;
}

.ta-footer-bottom-text {
	margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	/* Hero: stack the consultation card under the text. */
	.ta-hero-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.ta-hero-aside {
		max-width: 420px;
	}

	.ta-service-grid,
	.ta-diff-grid,
	.ta-steps-grid,
	.ta-pricing-grid,
	.ta-areas-split,
	.ta-areas-grid,
	.ta-why-grid,
	.ta-insights-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.ta-areas-split {
		grid-template-columns: 1fr;
	}

	.ta-header-nav {
		gap: 1rem;
	}
}

@media (max-width: 760px) {
	.ta-pain-grid,
	.ta-service-grid,
	.ta-diff-grid,
	.ta-steps-grid,
	.ta-pricing-grid,
	.ta-areas-grid,
	.ta-why-grid,
	.ta-insights-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 600px) {
	.ta-hero-heading {
		font-size: 2rem !important;
	}

	.ta-detail-columns,
	.ta-contact-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Inner pages (Services, Service Areas, About, Contact, single posts)
   ========================================================================== */

/* ---------- Page hero (simpler than homepage hero: no dots/badge) ---------- */
.ta-page-hero {
	padding: 7.5rem 0 1.25rem;
	text-align: center;
}

/* Match interior page heroes to the homepage hero tint (brand-cream). Their
   markup carries brand-surface, so override it here in one place. */
.ta-page-hero.has-brand-surface-background-color {
	background-color: var(--wp--preset--color--brand-cream) !important;
}

/* Tighten (and keep consistent) the gap between any hero and the first
   section below it — homepage hero and interior page heroes alike. */
.ta-hero + .ta-section,
.ta-page-hero + .ta-section {
	padding-top: 1.5rem;
}

.ta-page-hero.ta-page-hero-left {
	text-align: left;
}

.ta-page-hero-inner {
	max-width: 1152px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.ta-page-hero-left .ta-page-hero-inner {
	max-width: 1152px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.ta-breadcrumb {
	font-size: 0.875rem;
	color: #94a3b8;
	margin: 0 0 1.5rem;
}

.ta-breadcrumb a {
	color: var(--wp--preset--color--slate-600);
	text-decoration: none;
}

.ta-breadcrumb a:hover {
	color: var(--wp--preset--color--brand-primary);
}

/* Current (active) page in the breadcrumb: darker + bolder so it doesn't blend in. */
.ta-breadcrumb span:not(.ta-breadcrumb-sep) {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
}

.ta-breadcrumb-sep {
	margin: 0 0.5rem;
}

.ta-breadcrumb span:last-child {
	color: var(--wp--preset--color--brand-primary);
}

.ta-page-hero h1 {
	margin: 0.75rem 0 0;
}

.ta-page-hero-tagline {
	margin: 1rem 0 0;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
}

.ta-page-hero-lede {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	color: var(--wp--preset--color--slate-600);
	max-width: 40rem;
}

.ta-page-hero.ta-page-hero-left .ta-page-hero-lede {
	margin-inline: 0;
}

.ta-page-hero .ta-btn-accent {
	display: inline-block;
	margin-top: 0;
}

/* ---------- Prose body copy (About story) ---------- */
.ta-prose {
	max-width: 1000px;
	margin-inline: auto;
	padding: 1.75rem 1.5rem;
}

.ta-prose p {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--slate-700);
	margin: 0 0 1.25rem;
}

/* ---------- Reusable card grids (values / deliverables / other-pillars) ---------- */
.ta-values-grid,
.ta-detail-columns,
.ta-other-grid {
	display: grid;
	align-items: stretch;
	gap: 2rem;
}

.ta-values-grid {
	grid-template-columns: repeat(2, 1fr);
	max-width: 1000px;
	margin: 2.5rem auto 0;
	padding: 0 1.5rem;
}

.ta-value-card {
	height: 100%;
}

.ta-value-card h3 {
	margin: 1rem 0 0;
	font-size: 1.125rem;
}

.ta-value-card p {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--slate-600);
}

.ta-detail-columns {
	grid-template-columns: repeat(2, 1fr);
	max-width: 1000px;
	margin-inline: auto;
	padding: 4.5rem 1.5rem;
	gap: 3rem;
}

.ta-detail-columns h2 {
	font-size: 1.5rem;
}

.ta-check-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ta-check-list li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	color: var(--wp--preset--color--slate-700);
}

.ta-check-list li::before {
	content: "\2713";
	flex-shrink: 0;
	margin-top: 0.1rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand-primary);
}

.ta-check-list.ta-check-list-accent li::before {
	color: var(--wp--preset--color--brand-accent);
}

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

.ta-other-card {
	position: relative;
	display: block;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--slate-200);
	border-radius: 0.75rem;
	padding: 1.5rem;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.ta-other-card h3 a {
	color: inherit;
	text-decoration: none;
}

.ta-other-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ta-other-card:hover {
	border-color: var(--wp--preset--color--brand-primary);
}

.ta-other-card p:first-child {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate-400);
	margin: 0;
}

.ta-other-card h3 {
	margin: 0.25rem 0 0;
	font-size: 1.0625rem;
}

.ta-other-card:hover h3 {
	color: var(--wp--preset--color--brand-primary);
}

.ta-other-card p:last-child {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate-600);
}

/* ---------- FAQ accordion ---------- */
.ta-faq-list {
	max-width: 1000px;
	margin: 2rem auto 0;
	padding: 0 1.5rem 4.5rem;
	border-top: 1px solid var(--wp--preset--color--slate-200);
}

.ta-faq-item {
	padding: 1rem 0;
	margin-block-start: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--slate-200);
}

.ta-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	list-style: none;
}

.ta-faq-item summary::-webkit-details-marker {
	display: none;
}

.ta-faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--brand-primary);
}

.ta-faq-item[open] summary::after {
	content: "\2212";
}

.ta-faq-item p {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--slate-600);
}

/* ---------- Area pill tags (nearby areas) ---------- */
.ta-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 1152px;
	margin: 1.5rem auto 0;
	padding: 0 1.5rem 4rem;
}

.ta-pill-row-tight {
	margin-top: 0;
}

.ta-pill {
	border: 1px solid var(--wp--preset--color--slate-200);
	border-radius: 999px;
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--slate-700);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ta-pill:hover {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--brand-primary);
}

/* ---------- Reusable CTA panel ---------- */
.ta-cta-panel {
	max-width: 1152px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
}

.ta-cta-panel-spaced {
	margin-top: 4.5rem;
}

.ta-cta-panel-inner {
	background: var(--wp--preset--color--brand-primary);
	border-radius: 1.5rem;
	padding: 3rem 2rem;
	text-align: center;
}

.ta-cta-panel-inner h2 {
	color: #ffffff;
	margin: 0;
}

.ta-cta-panel-inner p {
	color: #dbeafe;
	max-width: 34rem;
	margin: 0.75rem auto 0;
}

.ta-cta-panel-actions {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* ---------- Contact page ---------- */
.ta-contact-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 3rem;
	max-width: 1152px;
	margin: 0 auto;
	/* Tight top gap so the form sits close under the section heading/lede
	   (which ends with ta-pb-0); keep a fuller bottom gap before the CTA panel. */
	padding: 1.5rem 1.5rem 4rem;
}

.ta-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.ta-form-field label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	margin-bottom: 0.5rem;
}

.ta-form-field input,
.ta-form-field select,
.ta-form-field textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--slate-200);
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
}

.ta-form-field input:focus,
.ta-form-field select:focus,
.ta-form-field textarea:focus {
	outline: 2px solid rgba(0, 74, 173, 0.2);
	border-color: var(--wp--preset--color--brand-primary);
}

.ta-form-field {
	margin-bottom: 1.25rem;
}

.ta-form-submit {
	background: var(--wp--preset--color--brand-primary);
	color: #ffffff;
	border: none;
	border-radius: 0.375rem;
	padding: 0.9rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.ta-form-submit:hover {
	background: var(--wp--preset--color--brand-secondary);
}

.ta-form-note {
	margin-top: 1rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--slate-400);
}

/* Availability checkboxes (talent intake form) */
.ta-form-legend {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	margin-bottom: 0.5rem;
}

.ta-checkbox-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.ta-form-field .ta-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--wp--preset--color--slate-700);
	cursor: pointer;
}

.ta-form-field .ta-checkbox input {
	width: auto;
	padding: 0;
}

.ta-sidebar-card {
	border: 1px solid var(--wp--preset--color--slate-200);
	border-radius: 1rem;
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}

.ta-sidebar-card h2 {
	font-size: 1.0625rem;
	margin: 0;
}

.ta-sidebar-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.ta-sidebar-list-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate-400);
}

.ta-sidebar-list a {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 500;
	text-decoration: none;
}

.ta-sidebar-steps {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ta-sidebar-steps li {
	display: flex;
	gap: 0.75rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate-600);
}

.ta-sidebar-step-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.75rem;
	width: 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-primary);
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 700;
}

/* ---------- Single post ---------- */
.ta-post {
	/* Top padding must clear the fixed header (~6rem) and match the top space on
	   other pages (.ta-page-hero uses 7.5rem). */
	padding: 7.5rem 1.5rem 5rem;
}

.ta-post-category {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-primary);
	margin-bottom: 0.5rem;
}

.ta-post-category a {
	color: inherit;
	text-decoration: none;
}

.ta-post-title {
	margin: 0 0 0.5rem;
	font-size: 2rem;
}

.ta-post-date {
	display: block;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate-400);
	margin-bottom: 2rem;
}

.ta-post-hero img {
	width: 100%;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
}

.ta-post-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--slate-700);
}

.ta-post-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.85rem;
	line-height: 1.25;
}

.ta-post-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.65rem;
	line-height: 1.3;
}

.ta-post-content p {
	margin: 0 0 1.25rem;
}

.ta-post-content a {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
}

.ta-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

/* Code blocks (imported posts use Shiki "Code Block Pro" markup with an inline
   dark background, but that plugin's CSS isn't installed here). Keep long lines
   from running off the page: scroll horizontally inside the column instead. */
.ta-post-content pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.25rem 1.5rem;
	border-radius: 0.6rem;
	margin: 0 0 1.75rem;
	font-size: 0.9rem;
	line-height: 1.6;
}

.ta-post-content pre code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: pre;
	background: none;
	padding: 0;
}

/* Inline code (outside a pre). */
.ta-post-content :not(pre) > code {
	background: var(--wp--preset--color--brand-surface);
	padding: 0.15em 0.4em;
	border-radius: 0.3rem;
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Code Block Pro: fuse the traffic-light header, the stray title paragraph, and
   the <pre> into one cohesive dark block (the plugin's own CSS isn't installed,
   which left a white gap between the header bar and the code). */
.ta-post-content .wp-block-kevinbatdorf-code-block-pro {
	position: relative;
	max-width: 100%;
	overflow: hidden;
	border-radius: 0.6rem;
	margin: 0 0 1.75rem;
	background: #22272e;
}

.ta-post-content .wp-block-kevinbatdorf-code-block-pro > p {
	margin: 0;
}

.ta-post-content .wp-block-kevinbatdorf-code-block-pro > p:empty {
	display: none;
}

.ta-post-content .wp-block-kevinbatdorf-code-block-pro pre {
	margin: 0;
	border-radius: 0;
}

/* Hide the plugin's own (non-functional) copy control; we add our own. */
.ta-post-content .code-block-pro-copy-button {
	display: none;
}

/* Copy-to-clipboard button (added by header.js). */
.ta-code-copy {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	z-index: 3;
	background: rgba(255, 255, 255, 0.1);
	color: #e6edf3;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0.35rem;
	padding: 0.25rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	font-family: var(--wp--preset--font-family--sans);
	cursor: pointer;
	transition: background 0.12s ease;
}

.ta-code-copy:hover {
	background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 900px) {
	.ta-values-grid,
	.ta-detail-columns,
	.ta-other-grid,
	.ta-contact-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Insights index (asymmetric hero + flanking columns)
   ========================================================================== */
.ta-insights-index-grid {
	display: grid;
	grid-template-columns: 290fr 582fr 320fr;
	gap: 1.5rem 0;
}

/* Light vertical dividers between the three columns, with breathing room on
   each side of the rule. */
.ta-insights-left {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-right: 2.5rem;
}

.ta-insights-feature {
	padding-inline: 2.5rem;
	border-inline: 1px solid var(--wp--preset--color--slate-200);
}

.ta-insights-right {
	padding-left: 2.5rem;
}

/* Blog index header stack: .ta-main's flow-margin reset flattens it and the
   fixed header overlaps the top, so add clearance and rhythm back here. */
.ta-main.ta-section {
	padding-top: 7.5rem;
	/* Widen by the inner 1.5rem padding so the content lines up with the
	   header's full 1152px span (header-inner has no side padding). */
	max-width: calc(1152px + 3rem);
}

.ta-main.ta-section > .ta-eyebrow {
	margin-bottom: 1.5rem !important;
}

.ta-main.ta-section > h1 {
	margin-bottom: 1rem !important;
}

.ta-main.ta-section > .ta-muted {
	margin-bottom: 3.5rem !important;
	font-size: 1.15rem;
}

.ta-insights-side-card {
	display: block;
	margin-bottom: 1rem;
}

.ta-insights-side-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0.75rem;
	margin: 0 0 1rem;
}

.ta-insights-side-category {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--brand-primary);
	margin-bottom: 0.35rem;
}

.ta-insights-side-title {
	font-size: 0.95rem;
	margin: 0 0 0.35rem;
}

.ta-insights-side-title a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ta-insights-side-title a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.ta-insights-side-excerpt {
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-600);
	margin: 0;
}

.ta-insights-feature {
	text-align: center;
}

.ta-insights-feature-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0.75rem;
	margin: 0 0 1.5rem;
}

.ta-insights-feature-category {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--brand-primary);
	margin-bottom: 0.5rem;
}

.ta-insights-feature-title {
	font-size: 1.75rem;
	margin: 0 0 0.75rem;
}

.ta-insights-feature-title a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ta-insights-feature-title a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.ta-insights-feature-excerpt {
	color: var(--wp--preset--color--slate-600);
	max-width: 30rem;
	margin: 0 auto 0.75rem;
}

.ta-insights-feature-date {
	display: block;
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-400);
}

.ta-insights-right .wp-block-post-template,
.ta-insights-left .wp-block-post-template {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}

.ta-insights-list-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--slate-200);
}

.ta-insights-list-card:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.ta-insights-list-image {
	flex-shrink: 0;
	width: 5rem;
}

.ta-insights-list-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem;
	margin: 0;
}

.ta-insights-list-title {
	font-size: 0.9rem;
	margin: 0 0 0.25rem;
	line-height: 1.35;
}

.ta-insights-list-title a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: none;
}

.ta-insights-list-title a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.ta-insights-list-date {
	display: block;
	font-size: 0.8rem;
	color: var(--wp--preset--color--slate-400);
}

@media (max-width: 960px) {
	.ta-insights-index-grid {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
	}

	/* Stacked: drop the vertical dividers and side padding. */
	.ta-insights-left,
	.ta-insights-right {
		padding: 0;
	}

	.ta-insights-feature {
		order: -1;
		margin-bottom: 2.5rem;
		padding-inline: 0;
		border-inline: none;
	}
}

/* ---------- Small reusable spacing/border utilities (kept last for cascade priority) ---------- */
.ta-pb-0 {
	padding-bottom: 0;
}

.ta-pb-2 {
	padding-bottom: 2rem;
}

.ta-border-top {
	border-top: 1px solid var(--wp--preset--color--slate-200);
}

.ta-fs-heading-sm {
	font-size: 1.375rem;
}

.ta-mb-1-25 {
	margin-bottom: 1.25rem;
}

.ta-mt-2 {
	margin-top: 2rem;
}

.ta-other-grid-2col {
	grid-template-columns: repeat(2, 1fr);
	margin-top: 2rem;
}

.ta-values-grid-nested {
	margin-top: 2rem;
	padding: 0;
	max-width: none;
}

.ta-section-inner-narrow {
	max-width: 1000px;
}

/* WP core's default "flow" layout spacing (margin-block-start on every
   child but the first) leaks onto grid children once a Group block has
   no explicit layout type. Grid's own `gap` already handles spacing
   between cells, so neutralize it here. */
.ta-pain-grid > *,
.ta-service-grid > *,
.ta-why-grid > *,
.ta-areas-grid > *,
.ta-pricing-grid > *,
.ta-diff-grid > *,
.ta-steps-grid > *,
.ta-other-grid > *,
.ta-values-grid > *,
.ta-detail-columns > *,
.ta-experience-grid > *,
.ta-insights-grid > *,
.ta-insights-index-grid > *,
.ta-areas-split > * {
	margin-block-start: 0 !important;
}

/* ==========================================================================
   Custom header nav + Services mega menu
   ========================================================================== */
.ta-nav {
	display: flex;
	align-items: center;
}

.ta-nav-list {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ta-nav-item {
	position: relative;
}

.ta-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: #eef2f8;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	transition: color 0.15s ease;
}

.ta-nav-link:hover {
	color: #ffffff;
}

.ta-has-mega > .ta-nav-link::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin: -0.15rem 0 0 0.1rem;
	opacity: 0.65;
	transition: transform 0.15s ease;
}

.ta-has-mega:hover > .ta-nav-link::after {
	transform: rotate(225deg);
	margin-top: 0.15rem;
}

/* Mega panel */
.ta-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0.9rem);
	width: 640px;
	max-width: calc(100vw - 3rem);
	background: #ffffff;
	border-radius: 0.9rem;
	box-shadow: 0 24px 55px -20px rgba(6, 14, 30, 0.5);
	padding: 0.9rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 60;
}

/* Invisible hover bridge so the gap under the link doesn't drop the menu. */
.ta-mega::before {
	content: "";
	position: absolute;
	top: -1rem;
	left: 0;
	right: 0;
	height: 1rem;
}

.ta-has-mega:hover .ta-mega,
.ta-has-mega:focus-within .ta-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0.5rem);
}

/* JS sets this right after a click / on load so the menu can't hang open. */
.ta-has-mega.ta-mega-suppressed .ta-mega {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ta-mega-card {
	display: block;
	padding: 0.85rem 1rem;
	border-radius: 0.6rem;
	text-decoration: none;
	transition: background 0.12s ease;
}

.ta-mega-card:hover {
	background: var(--wp--preset--color--brand-surface);
}

.ta-mega-title {
	display: block;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--wp--preset--color--brand-dark);
	margin-bottom: 0.15rem;
}

.ta-mega-desc {
	display: block;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--wp--preset--color--slate-600);
}

/* CTA button inside nav */
.ta-nav-cta-item .ta-nav-cta-link {
	display: inline-block;
	background: var(--wp--preset--color--brand-primary);
	color: #ffffff;
	padding: 0.6rem 1.1rem;
	border-radius: 0.5rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ta-nav-cta-item .ta-nav-cta-link:hover {
	background: var(--wp--preset--color--brand-secondary);
}

/* Mobile toggle */
.ta-nav-toggle {
	display: none;
}

.ta-nav-burger {
	display: none;
}

@media (max-width: 1160px) {
	.ta-nav-burger {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 2.5rem;
		height: 2.5rem;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
		z-index: 60;
	}

	.ta-nav-burger span {
		display: block;
		width: 1.4rem;
		height: 2px;
		background: #ffffff;
		border-radius: 2px;
	}

	.ta-nav {
		position: fixed;
		top: 4.75rem;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--wp--preset--color--brand-dark);
		display: none;
		padding: 1.5rem;
		overflow-y: auto;
		z-index: 55;
	}

	.admin-bar .ta-nav {
		top: calc(4.75rem + 32px);
	}

	.ta-nav-toggle:checked ~ .ta-nav {
		display: block;
	}

	.ta-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	.ta-nav-link {
		padding: 0.9rem 0;
		font-size: 1.25rem;
	}

	.ta-has-mega > .ta-nav-link::after {
		display: none;
	}

	.ta-mega {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0.5rem 0.9rem;
	}

	/* In the hamburger overlay the sub-lists are always expanded. The desktop
	   hover-suppression state (set by header.js on mousemove) must not hide
	   them, so override its !important rule here. */
	.ta-has-mega.ta-mega-suppressed .ta-mega {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.ta-mega-card {
		padding: 0.5rem 0;
	}

	.ta-mega-card:hover {
		background: transparent;
	}

	.ta-mega-title {
		color: #eef2f8;
		font-size: 0.95rem;
	}

	.ta-mega-desc {
		display: none;
	}

	.ta-nav-cta-item {
		margin-top: 1.25rem;
	}

	.ta-nav-cta-item .ta-nav-cta-link {
		display: block;
		text-align: center;
		padding: 1rem;
	}
}

/* HubSpot meetings scheduler embed */
.ta-scheduler {
	margin-top: 1.5rem;
	min-height: 660px;
}

.ta-scheduler .meetings-iframe-container {
	min-height: 660px;
}

/* The HubSpot meetings widget caps its own booking UI (~900px) and centers it
   inside the full-width iframe, so it floats in the middle of the page. Constrain
   the container to roughly that width and pin it to the hero's left edge, so it
   reads as an intentional left-aligned block instead. Specificity beats the
   interior-page ".ta-page-hero ~ .ta-section > *" reset above. */
.ta-page-hero ~ .ta-section .ta-scheduler {
	max-width: 860px;
	/* !important to beat WordPress core's constrained-layout rule, which pins
	   children to margin-inline:auto (centered) with !important. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Interior pages: align body-section content to the hero's left edge, instead of
   a narrower centered column (the hero uses the full 1152px width, so should the
   sections below it). Scoped to pages that have a .ta-page-hero, so the homepage
   (which uses centered intros) is untouched. */
.ta-page-hero ~ .ta-section > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.ta-page-hero ~ .ta-services-section {
	max-width: 1152px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	/* The Services hub copies the homepage's gray band, but constrained it reads
	   as an odd partial-width gray box. Keep interior pages white. */
	background-color: transparent !important;
}

.ta-page-hero ~ .ta-services-section:has(> .ta-detail-columns) {
	padding-block: 1.25rem;
}

.ta-page-hero ~ .ta-services-section > .ta-detail-columns {
	max-width: none;
	margin-inline: 0;
	padding: 0;
}

/* FAQ list on interior pages: match the section's left edge (it's a sibling
   block, not a .ta-section, so it would otherwise stay centered at 1000px) and
   restore the top gap the global margin-reset above strips off. */
.ta-page-hero ~ .ta-faq-list {
	max-width: 1152px;
	margin-inline: auto;
	margin-top: 1.75rem !important;
	padding-inline: 1.5rem;
}

.ta-page-hero .wp-block-buttons {
	margin-top: 1.25rem;
}

/* Every section carries its own top/bottom padding, so drop WordPress's
   block-flow margin BETWEEN sections in <main> — otherwise the gaps stack and
   everything reads too spaced out. */
.ta-main > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.ta-page-hero ~ * {
	margin-block-start: 0 !important;
}