/* About Us — page-specific styles, enqueued only on
   page-templates/about-us.php (see ca_about_enqueue_assets() in
   functions.php). Ported from the Claude Design project's
   "About Us.dc.html" — that page's own <header>/<footer> markup is
   intentionally not reproduced — this template uses the theme's shared
   get_header()/get_footer() instead (see about-us.php). Relies on the
   --ca-* / --text-* / --shadow-* / --radius-* tokens already declared in
   main.css. */

.ca-about * {
	box-sizing: border-box;
}

.ca-about a:hover {
	text-decoration: none;
}

.ca-about-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

/* The header logo sits in Salient's own nav .container — a box driven by
   Theme Options → General → Layout width/padding (currently 1425px/90px,
   exposed as --container-width / --container-padding; see
   #header-outer .ca-site-header__inner in style.css) — not this page's
   1120px/24px .ca-about-wrap. Widen the wrap to match the nav's box on
   desktop so the hero and every section's content lines up with the logo.
   Scoped to Salient's own breakpoint for that .container rule — below it,
   the nav's own padding shrinks well under 90px, so leave the normal
   1120px/24px box in place there (same pattern as .ca-home-wrap). */
@media (min-width: 1000px) {
	.ca-about-wrap {
		max-width: var(--container-width, 1425px);
		padding-left: var(--container-padding, 90px);
		padding-right: var(--container-padding, 90px);
	}
}

.ca-about-section {
	padding: 80px 0;
	background: var(--ca-white);
}

.ca-about-on-lilac {
	background: var(--ca-lilac-100);
}

.ca-about-on-dark {
	background: var(--ca-dark-navy);
}

/* font-size/font-weight/line-height !important throughout this file:
   main.css forces h1, h1 span, h2, h3, h4, h5, h6 to its own responsive
   clamp()s with !important, and resets every <p> to font-weight: 400
   !important; line-height: 1.2 !important — regardless of selector
   specificity (same issue already noted for .ca-tto-pill in
   teams-tokens-offer.css). Every eyebrow/title/heading/body-copy rule
   below has to fight one or the other, so both are pinned with
   !important here to make sure this page's own type scale actually
   renders instead of Salient's global one. */
.ca-about-eyebrow {
	text-align: center;
	font-size: 13px;
	font-weight: 700 !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-eyebrow);
	margin: 0 auto 16px;
	max-width: 640px;
}

.ca-about-eyebrow-light {
	color: var(--ca-lilac-400);
}

.ca-about-title {
	margin: 0 auto 44px;
	max-width: 640px;
	text-align: center;
	font-family: var(--font-display);
	font-size: 34px !important;
	font-weight: 700 !important;
	line-height: 1.14 !important;
	letter-spacing: -0.01em;
	color: var(--ca-ink-800);
}

.ca-about-title-light {
	color: var(--ca-white);
}

/* ---- Hero ---- */

.ca-about-hero {
	background: var(--ca-dark-navy);
	padding: 88px 0;
}

.ca-about-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.ca-about-hero-eyebrow {
	font-size: 14px;
	font-weight: 600 !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ca-lilac-400);
	margin: 0 0 22px;
}

.ca-about-hero-heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: 50px !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em;
	color: var(--ca-white);
}

.ca-about-hero-heading .ca-about-accent-gradient {
	background: linear-gradient(90deg, #8e76c0, #ee486d);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* main.css also has an "h1, h1 span" rule forcing its own clamp()
	   font-size/weight/line-height onto ANY span inside an h1, !important
	   — which otherwise pins this accent word to that fixed clamp
	   regardless of viewport, so it never shrinks along with the rest of
	   the heading at the breakpoints below. Force it back to matching the
	   (already-protected) heading around it instead of Salient's clamp. */
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.ca-about-hero-sub {
	font-size: 19px;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, 0.82);
	margin: 26px 0 0;
	max-width: 520px;
	font-weight: 500 !important;
}

.ca-about-hero-media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ca-about-hero-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* ---- What we do ---- */

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

.ca-about-do-card {
	background: var(--ca-white);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 30px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.ca-about-do-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.ca-about-do-icon {
	width: 104px;
	height: 104px;
	margin-bottom: 12px;
}

.ca-about-do-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ca-about-do-card h3 {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--ca-ink-800);
	line-height: 1.25 !important;
}

.ca-about-do-card p {
	margin: 0;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--ca-gray-600);
	font-weight: 400 !important;
}

@media (max-width: 980px) {
	.ca-about-do-icon {
		width: 80px;
		height: 80px;
	}

	.ca-about-do-card p {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
}

/* ---- Why we exist ---- */

.ca-about-why-wrap {
	max-width: 1080px;
	text-align: center;
}

.ca-about-why-blurb {
	margin: 0 !important;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 40px !important;
	line-height: 1.22 !important;
	letter-spacing: -0.02em !important;
	color: var(--ca-ink-800) !important;
	text-wrap: pretty;
}

.ca-about-why-blurb .ca-about-accent-gradient {
	background: linear-gradient(96deg, #ee486d 0%, #b45ac2 30%, #8e76c0 55%, #ee486d 100%);
	background-size: 220% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: caAboutWhyGrad 9s ease-in-out infinite;
}

@keyframes caAboutWhyGrad {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ---- Our journey ---- */

.ca-about-journey {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
}

.ca-about-journey-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 13px;
	height: 2px;
	background: linear-gradient(90deg, rgba(142, 118, 192, 0.25), #8e76c0 45%, #ee486d);
}

.ca-about-j-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ca-about-j-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ca-dark-navy);
	border: 2px solid #8e76c0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ca-about-j-dot span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #8e76c0;
	display: block;
}

.ca-about-j-step.is-current .ca-about-j-dot {
	background: #ee486d;
	border-color: #ee486d;
	box-shadow: 0 0 0 6px rgba(238, 72, 109, 0.18);
}

.ca-about-j-step.is-current .ca-about-j-dot span {
	background: #fff;
}

.ca-about-j-year {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--ca-white);
	line-height: 1.1;
}

.ca-about-j-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--ca-lilac-400);
	margin-top: 8px;
}

.ca-about-j-step.is-current .ca-about-j-label {
	color: #ff8aa5;
}

.ca-about-j-body {
	margin: 8px 0 0;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 500 !important;
}

@media (max-width: 980px) {
	.ca-about-j-body {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
}

/* ---- Our principles ---- */

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

.ca-about-value-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 8px;
}

.ca-about-value-icon {
	width: 104px;
	height: 104px;
	margin-bottom: 18px;
}

.ca-about-value-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ca-about-value-card h3 {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ca-ink-800);
	line-height: 1.25 !important;
}

.ca-about-value-card p {
	margin: 0;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	color: var(--ca-gray-600);
	font-weight: 400 !important;
}

@media (max-width: 980px) {
	.ca-about-value-icon {
		width: 80px;
		height: 80px;
	}
	.ca-about-value-card p {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
}

/* ---- Meet the team ---- */

.ca-about-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.ca-about-teammate {
	display: flex;
	flex-direction: column;
}

.ca-about-teammate-photo {
	overflow: hidden;
	border-radius: 18px;
	box-shadow: var(--shadow-sm);
	background: var(--ca-gray-200);
	aspect-ratio: 1 / 1;
}

.ca-about-teammate-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-base) var(--ease-standard);
}

.ca-about-teammate:hover .ca-about-teammate-photo img {
	transform: scale(1.03);
}

.ca-about-teammate h3 {
	margin: 16px 0 2px;
	font-family: var(--font-display);
	font-size: 25px !important;
	font-weight: 700 !important;
	color: var(--ca-ink-800);
	line-height: 1.2 !important;
}

.ca-about-teammate-role {
	font-size: 16px;
	font-weight: 600;
	color: var(--ca-gray-600);
	line-height: 1.2;
}

@media (max-width: 980px) {
	.ca-about-teammate h3 {
		font-size: 20px !important;
		line-height: 1.2 !important;
	}
	.ca-about-teammate-role {
		font-size: 14px !important;
		line-height: 1.2 !important;
	}
}

/* ---- Final CTA ---- */

.ca-about-cta {
	background: var(--ca-ink-900, var(--ca-dark-navy));
	padding: 76px 0;
}

.ca-about-cta .ca-about-wrap {
	text-align: center;
	max-width: 720px;
}

.ca-about-cta h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 36px !important;
	font-weight: 700 !important;
	color: #fff;
	line-height: 1.15 !important;
}

.ca-about-cta h2 .ca-about-accent-italic {
	font-style: italic;
	color: var(--ca-pink-500);
}

.ca-about-cta-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 30px;
}

.ca-about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}

.ca-about-btn-primary {
	background: var(--ca-pink-600);
	color: #fff;
}

.ca-about-btn-primary:hover {
	filter: brightness(.88);
	color: #fff;
}

.ca-about-btn-outline {
	border: 2px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	background: transparent;
}

.ca-about-btn-outline:hover {
	border-color: #fff;
	color: #fff;
}

/* ---- Scroll-reveal (see about-us.js) ---- */

.ca-about-journey.js-anim .ca-about-j-step {
	opacity: 0;
	transform: translateX(-28px);
	transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ca-about-journey.in .ca-about-j-step { opacity: 1; transform: none; }
.ca-about-journey.in .ca-about-j-step:nth-of-type(2) { transition-delay: 0.18s; }
.ca-about-journey.in .ca-about-j-step:nth-of-type(3) { transition-delay: 0.36s; }
.ca-about-journey.in .ca-about-j-step:nth-of-type(4) { transition-delay: 0.54s; }

.ca-about-journey.js-anim .ca-about-journey-line {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ca-about-journey.in .ca-about-journey-line { transform: scaleX(1); }

.ca-about-why-blurb.js-anim {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.ca-about-why-blurb.js-anim.in { opacity: 1; transform: none; }

.ca-about-team-grid.js-anim .ca-about-teammate {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ca-about-team-grid.in .ca-about-teammate { opacity: 1; transform: none; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(2) { transition-delay: 0.12s; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(3) { transition-delay: 0.24s; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(4) { transition-delay: 0.36s; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(5) { transition-delay: 0.48s; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(6) { transition-delay: 0.60s; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(7) { transition-delay: 0.72s; }
.ca-about-team-grid.in .ca-about-teammate:nth-of-type(8) { transition-delay: 0.84s; }

@media (prefers-reduced-motion: reduce) {
	.ca-about-journey .ca-about-j-step { opacity: 1 !important; transform: none !important; transition: none; }
	.ca-about-journey .ca-about-journey-line { transform: none !important; transition: none; }
	.ca-about-why-blurb { opacity: 1 !important; transform: none !important; transition: none; }
	.ca-about-why-blurb .ca-about-accent-gradient { animation: none; }
	.ca-about-team-grid .ca-about-teammate { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- Responsive ---- */

@media (max-width: 980px) {
	.ca-about-hero-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
	.ca-about-journey { grid-template-columns: 1fr 1fr !important; gap: 36px 28px !important; }
	.ca-about-journey-line { display: none; }
	.ca-about-do-grid { grid-template-columns: 1fr !important; }
	.ca-about-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.ca-about-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.ca-about-hero-heading { font-size: 44px !important; }
	.ca-about-why-blurb { font-size: 30px !important; }
}

@media (max-width: 640px) {
	.ca-about-hero-heading { font-size: 34px !important; }
}