/* ============================================================
   KODIF — ABOUT US
   Tokens (--primary, --bg-reverse, …) are declared in css/style.css.
   Order: components → @media (breakpoints at the end of the file).
   ============================================================ */

/* ============ HERO ============ */
/* Reuses the case-study title hero: dark intro band, 64px block padding. */
.section-title-hero {
	padding-top: 64px;
	padding-bottom: 64px;
	background: var(--bg-reverse);
}

/* Copy capped to a readable measure */
.about-hero__content {
	max-width: 670px;
}

.section-title-hero .title {
	margin-bottom: 24px;
}

.about-hero__lead {
	/* Track the body's responsive type scale (18 → 15 → 14px) */
	font-size: inherit;
	line-height: 1.55;
	color: var(--text-dim);
}

/* ============ OUR STORY ============ */
/* Orange band, staggered two-column layout with founder cards. */
.story {
	padding-top: 96px;
	padding-bottom: 96px;
	background: var(--primary);
}

.story__eyebrow {
	margin-bottom: 24px;
	color: var(--bg-reverse);
}

/* Heading on orange: base copy black, leading <span> turns white */
.story__title {
	max-width: 720px;
	margin-bottom: 64px;
	color: var(--text-title);
}
.story__title span {
	color: var(--white);
}

/* Two equal columns; right column drops down for the staggered look */
.story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 60px;
	align-items: start;
}

.story__col {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
/* Body copy on orange — dark, readable measure */
.story__copy p + p {
	margin-top: 32px;
}
.story__copy strong {
	font-weight: 900;
}
.story__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Founder card ---- */
.story-card {
	background: var(--white);
	padding: 24px;
}

/* Frame clips the zoom; light backdrop matches the cut-out photos */
.story-card__media {
	overflow: hidden;
	background: var(--chat-bg);
}
.story-card__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}
.story-card:hover .story-card__media img {
	transform: scale(1.06);
}

.story-card__body {
	padding-top: 24px;
}
.story-card__name {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-title);
}
.story-card__role {
	margin-top: 4px;
	font-size: 14px;
	color: var(--primary);
}

/* ============ OUR TEAM ============ */
/* Cream band with an orange accent rule; 4-col card grid. */
.team {
	padding-top: 96px;
	padding-bottom: 96px;
	background: var(--chat-bg);
	border-top: 4px solid var(--primary);
}

/* Heading left, supporting copy pinned bottom-right */
.team__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 56px;
}
.team__title {
	max-width: 640px;
}
.team__lead {
	max-width: 380px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

.team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* ---- Shared card ---- */
.team-card {
	display: flex;
	flex-direction: column;
}

/* Member card only: white tile with padding (empty stays frameless) */
.team-card--member {
	background: var(--white);
}

/* Member + link share a light frame; empty stays a bare spacer */
.team-card--member,
.team-card--link {
	padding: 24px;
	border: 1px solid #ebebeb;
}

/* Frame clips the hover zoom; light backdrop matches cut-out photos */
.team-card__media {
	overflow: hidden;
	background: var(--white);
	aspect-ratio: 3 / 4;
}
.team-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.team-card:hover .team-card__media img {
	transform: scale(1.06);
}

.team-card__body {
	padding-top: 24px;
}
.team-card__name {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-title);
}
.team-card__role {
	margin-top: 4px;
	font-size: 14px;
	color: var(--primary);
}

/* ---- Empty card: spacer that creates the stagger ---- */
.team-card--empty {
	background: transparent;
}

/* ---- Link card: "We are hiring!" tile ---- */
.team-card--link {
	text-decoration: none;
	background: rgba(255, 255, 255, 0.20);
}
/* Centered plus instead of a photo */
.team-card__media--plus {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.team-card__plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #edeae4;
	color: var(--text-title);
	transition: all 0.4s ease;
}
.team-card--link:hover .team-card__plus {
	background: var(--primary);
	color: var(--white);
}
/* CTA role line: dark, underlined, arrow nudges on hover */
.team-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-title);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.team-card__cta svg {
	transition: transform 0.3s ease;
}
.team-card--link:hover .team-card__cta svg {
	transform: translateX(4px);
}

/* ============ OUR VALUE ============ */
/* White band; centered head over six full-width principle rows. */
.values {
	padding-top: 96px;
	padding-bottom: 96px;
	background: var(--white);
}

/* Centered intro: eyebrow, title, supporting copy on a readable measure */
.values__head {
	margin-bottom: 56px;
	text-align: center;
}
.values__lead {
	max-width: 560px;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

.values__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---- Principle row ---- */
/* index | title | desc on one line; whole row darkens on hover */
.value {
	display: grid;
	grid-template-columns: auto 1fr 440px;
	grid-template-areas: "index title desc";
	align-items: center;
	gap: 64px;
	padding: 24px 32px;
	background: rgba(235, 235, 235, 0.50);
	transition: background 0.4s ease;
	transition-property: all !important;
}
.value:hover {
	background: var(--bg-reverse);
}

.value__index {
	grid-area: index;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--primary);
}

.value__title {
	grid-area: title;
	font-size: 24px;
	font-weight: 700;
	color: var(--text-title);
	transition: color 0.4s ease;
}
.value:hover .value__title {
	color: var(--white);
}

.value__desc {
	grid-area: desc;
	font-size: 16px;
	line-height: 1.5;
	color: #606060;
	transition: color 0.4s ease;
}
.value:hover .value__desc {
	color: #c1c1c1;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1199px) {
	/* Drop the spacers so the grid packs tight on smaller viewports */
	.team-card--empty {
		display: none;
	}
	.team__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.story-card__body,
	.team-card__body {
		padding-top: 20px;
	}

	/* Pull the description in a touch so the title keeps room */
	.value {
		grid-template-columns: auto 1fr minmax(0, 42%);
		gap: 24px;
	}
	.value__title {
		font-size: 20px;
	}
	.value__desc {
		font-size: 14px;
	}
}

@media (max-width: 991px) {
	.section-title-hero {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.section-title-hero .title {
		margin-bottom: 20px;
	}

	.story {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.story__title {
		margin-bottom: 48px;
	}
	/* Collapse to one column; drop the stagger offset */
	.story__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.story__col {
		gap: 16px;
	}
	/* Left column: lift the founder card above its copy when stacked */
	.story__col:first-child {
		flex-direction: column-reverse;
	}
	.story__copy p + p {
		margin-top: 16px;
	}
	.story-card__body,
	.team-card__body {
		padding-top: 16px;
	}

	.team {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	/* Stack the head; let the copy take its own line */
	.team__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 40px;
	}
	.team__lead {
		max-width: 520px;
	}
	.team__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.team-card--link,
	.team-card--member {
		padding: 20px;
	}

	.values {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.values__head {
		margin-bottom: 40px;
	}
	/* Index spans both rows; title sits above its description */
	.value {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"index title"
			"index desc";
		align-items: start;
		gap: 8px 24px;
		padding: 16px;
	}
	.value__title {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.story-card {
		padding: 16px;
	}
	.story-card__name,
	.team-card__name {
		font-size: 18px;
	}
	.team-card--link,
	.team-card--member {
		padding: 16px;
	}
}

@media (max-width: 539px) {
	.section-title-hero {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.section-title-hero .title {
		margin-bottom: 16px;
	}
	/* Drop the manual line break so the lead wraps naturally on narrow screens */
	.about-hero__lead br {
		display: none;
	}

	.story {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.story__title {
		margin-bottom: 32px;
	}
	.team {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	/* Single column on mobile */
	.team__grid {
		grid-template-columns: 1fr;
	}

	.values {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.value {
		padding: 20px;
		gap: 4px 16px;
	}
	.value__index {
		font-size: 28px;
	}
}

/* Respect reduced-motion: no hover zoom */
@media (prefers-reduced-motion: reduce) {
	.story-card__media img,
	.team-card__media img {
		transition: none;
	}
	.story-card:hover .story-card__media img,
	.team-card:hover .team-card__media img {
		transform: none;
	}
	.value,
	.value__title,
	.value__desc {
		transition: none;
	}
}