/* ============================================================
   QOJO MEDIA — ABOUT PAGE
   ============================================================ */

.qojo-about {
	padding: 72px 0 96px;
	background: var(--qojo-white);
}

.qojo-about__hero {
	max-width: 800px;
	margin-bottom: 64px;
}

.qojo-about__hero h1 {
	font-size: clamp(38px, 5vw, 56px);
	line-height: 1.05;
	margin: 16px 0 20px;
}

.qojo-about__intro {
	font-size: 19px;
	line-height: 1.65;
	color: var(--qojo-grey-700);
	margin: 0;
}

.qojo-about__grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 64px;
	align-items: start;
}

/* Floating side menu: sticky goes on the aside (the grid item) so it has the
   full column height to travel in. Putting sticky on the inner nav fails
   because the aside is only as tall as the menu itself. */
.qojo-about__sidebar {
	position: sticky;
	top: 32px;
	align-self: start;
}

.qojo-about__menu {
	background: var(--qojo-white);
	border: 1px solid var(--qojo-grey-200);
	border-radius: var(--qojo-radius-lg);
	padding: 28px;
	box-shadow: 0 8px 28px rgba(8, 9, 43, 0.06);
}

.qojo-about__menu-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qojo-grey-500);
	margin: 0 0 16px;
}

.qojo-about__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qojo-about__menu li {
	margin-bottom: 4px;
}

.qojo-about__menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--qojo-radius-md);
	color: var(--qojo-secondary);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.qojo-about__menu a:hover {
	background: var(--qojo-offwhite);
	color: var(--qojo-primary);
}

.qojo-about__menu a.is-active {
	background: rgba(26, 37, 255, 0.07);
	color: var(--qojo-primary);
	border-left-color: var(--qojo-primary);
	font-weight: 600;
}

/* Content sections */
.qojo-about__section {
	margin-bottom: 72px;
	scroll-margin-top: 32px;
}

.qojo-about__section:last-child {
	margin-bottom: 0;
}

.qojo-about__section h2 {
	font-size: clamp(26px, 3vw, 34px);
	margin: 0 0 20px;
}

.qojo-about__section p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--qojo-grey-800);
	margin: 0 0 18px;
	max-width: 720px;
}

.qojo-about__principles {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	max-width: 720px;
}

.qojo-about__principles li {
	position: relative;
	padding: 18px 0 18px 28px;
	border-bottom: 1px solid var(--qojo-grey-200);
	font-size: 16px;
	line-height: 1.65;
	color: var(--qojo-grey-800);
}

.qojo-about__principles li:first-child {
	border-top: 1px solid var(--qojo-grey-200);
}

.qojo-about__principles li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 27px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--qojo-primary);
}

.qojo-about__principles strong {
	color: var(--qojo-secondary);
}

/* Team */
.qojo-about__team {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 32px;
	max-width: 720px;
}

.qojo-about__member {
	background: var(--qojo-offwhite);
	border-radius: var(--qojo-radius-lg);
	overflow: hidden;
	text-align: center;
	padding-bottom: 28px;
}

.qojo-about__member img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 4.4;
	object-fit: cover;
	object-position: top;
	display: block;
}

.qojo-about__member h3 {
	font-size: 21px;
	margin: 22px 0 6px;
}

.qojo-about__role {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qojo-primary);
	margin: 0;
}

.qojo-about__connect {
	font-size: 14px;
	margin: 8px 0 0;
}

.qojo-about__connect a {
	color: var(--qojo-primary);
	font-weight: 600;
}

.qojo-about__connect a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.qojo-about__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.qojo-about__menu {
		position: static;
	}

	.qojo-about__menu ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.qojo-about__menu li {
		margin-bottom: 0;
	}

	.qojo-about__menu a {
		border-left: none;
		border: 1px solid var(--qojo-grey-200);
		padding: 8px 14px;
		font-size: 14px;
	}

	.qojo-about__menu a.is-active {
		border-color: var(--qojo-primary);
	}
}

/* Contact page: email boxes in the sticky sidebar */
.qojo-contact__emails ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qojo-contact__emails li {
	padding: 14px 0;
	border-bottom: 1px solid var(--qojo-grey-200);
}

.qojo-contact__emails li:last-of-type {
	border-bottom: none;
}

.qojo-contact__emails li span {
	display: block;
	font-size: 13px;
	color: var(--qojo-grey-500);
	margin-bottom: 4px;
}

.qojo-contact__emails li a {
	font-size: 16px;
	font-weight: 600;
	color: var(--qojo-secondary);
	text-decoration: none;
	word-break: break-all;
}

.qojo-contact__emails li a:hover {
	color: var(--qojo-primary);
}

.qojo-contact__locale {
	font-size: 13px;
	color: var(--qojo-grey-500);
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--qojo-grey-200);
}

.qojo-about__content a {
	color: var(--qojo-primary);
	text-decoration: none;
}

.qojo-about__content a:hover {
	text-decoration: underline;
}

@media (max-width: 560px) {
	.qojo-about__team {
		grid-template-columns: 1fr;
	}

	.qojo-about {
		padding: 48px 0 64px;
	}
}