/* =============================================================
   TopTier — Page-specific styles
   ============================================================= */

/* ===== Hire Talent — Multi-step form ===== */
.tt-hire {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 0;
	min-height: calc(100vh - 68px);
}
.tt-hire__side {
	background: var(--tt-ink-900);
	color: #fff;
	padding: clamp(40px, 6vw, 80px);
	position: relative;
	overflow: hidden;
}
.tt-hire__side::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 10%, rgba(30, 94, 255, 0.3), transparent 40%),
		linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: auto, 32px 32px, 32px 32px;
	pointer-events: none;
}
.tt-hire__side > * { position: relative; z-index: 1; }
.tt-hire__side h1 {
	font-size: clamp(2rem, 3.5vw, 3rem);
	color: #fff;
	margin-bottom: var(--tt-space-5);
	max-width: 14ch;
}
.tt-hire__side p {
	color: var(--tt-ink-200);
	margin-bottom: var(--tt-space-6);
	max-width: 45ch;
}
.tt-hire__side-list {
	display: flex; flex-direction: column; gap: 20px;
	margin-top: var(--tt-space-6);
}
.tt-hire__side-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: var(--tt-fs-sm);
	color: var(--tt-ink-100);
}
.tt-hire__side-list li::before {
	content: '';
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--tt-blue-500);
	color: #fff;
	display: grid; place-items: center;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
	background-repeat: no-repeat;
	background-position: center;
}

.tt-hire__main {
	background: #fff;
	padding: clamp(40px, 5vw, 72px);
	display: flex;
	flex-direction: column;
}
.tt-hire__progress {
	height: 4px;
	background: var(--tt-ink-100);
	border-radius: 2px;
	margin-bottom: var(--tt-space-6);
	overflow: hidden;
}
.tt-hire__progress-bar {
	height: 100%;
	background: var(--tt-blue-500);
	width: 12.5%;
	transition: width var(--tt-t-med) var(--tt-ease);
}
.tt-hire__step-count {
	font-size: var(--tt-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tt-ink-500);
	font-weight: 600;
	margin-bottom: var(--tt-space-3);
}
.tt-hire__step-title {
	font-family: var(--tt-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--tt-ink-900);
	margin-bottom: var(--tt-space-5);
	max-width: 22ch;
}
.tt-hire__options { display: grid; gap: 12px; }
.tt-hire__options--2 { grid-template-columns: 1fr 1fr; }
.tt-hire__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: var(--tt-space-6);
	gap: var(--tt-space-4);
}
.tt-hire__step { display: none; flex: 1; flex-direction: column; }
.tt-hire__step.is-active { display: flex; }

.tt-hire__result {
	text-align: center;
	max-width: 480px;
	margin: auto;
	display: none;
}
.tt-hire__result.is-visible { display: block; }
.tt-hire__result-icon {
	width: 72px; height: 72px;
	margin: 0 auto var(--tt-space-5);
	border-radius: 50%;
	background: var(--tt-blue-50);
	color: var(--tt-blue-600);
	display: grid; place-items: center;
}
.tt-hire__result h2 { margin-bottom: var(--tt-space-3); }

@media (max-width: 960px) {
	.tt-hire { grid-template-columns: 1fr; min-height: auto; }
	.tt-hire__side { padding: var(--tt-space-7) var(--tt-space-5); }
	.tt-hire__main { padding: var(--tt-space-7) var(--tt-space-5); }
	.tt-hire__options--2 { grid-template-columns: 1fr; }
}

/* ===== Careers: benefit cards ===== */
.tt-benefit-card {
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-lg);
	padding: var(--tt-space-5);
	transition: all var(--tt-t-med) var(--tt-ease);
}
.tt-benefit-card:hover {
	border-color: var(--tt-blue-300);
	transform: translateY(-2px);
	box-shadow: var(--tt-shadow-md);
}
.tt-benefit-card__icon {
	width: 48px; height: 48px;
	background: var(--tt-blue-50);
	color: var(--tt-blue-600);
	border-radius: var(--tt-r-md);
	display: grid; place-items: center;
	margin-bottom: var(--tt-space-4);
}
.tt-benefit-card h4 { margin-bottom: 8px; color: var(--tt-ink-900); }
.tt-benefit-card p  { font-size: var(--tt-fs-sm); color: var(--tt-ink-500); line-height: 1.6; }

/* ===== About: team ===== */
.tt-team-member { text-align: left; }
.tt-team-member__photo {
	aspect-ratio: 4/5;
	border-radius: var(--tt-r-lg);
	overflow: hidden;
	background: var(--tt-ink-50);
	margin-bottom: var(--tt-space-4);
	position: relative;
}
.tt-team-member__photo img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--tt-t-slow) var(--tt-ease);
	filter: grayscale(0.2);
}
.tt-team-member:hover .tt-team-member__photo img { transform: scale(1.04); filter: grayscale(0); }
.tt-team-member__photo::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10, 22, 40, 0.4) 0%, transparent 40%);
	pointer-events: none;
}
.tt-team-member__name {
	font-family: var(--tt-font-display);
	font-size: var(--tt-fs-lg);
	font-weight: 500;
	color: var(--tt-ink-900);
	margin-bottom: 4px;
}
.tt-team-member__role { font-size: var(--tt-fs-sm); color: var(--tt-ink-500); }

/* ===== About: impact chart card ===== */
.tt-chart-card {
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-lg);
	padding: var(--tt-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--tt-space-4);
}
.tt-chart-card__head { display: flex; justify-content: space-between; align-items: baseline; }
.tt-chart-card__title { font-size: var(--tt-fs-sm); color: var(--tt-ink-500); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.tt-chart-card__value {
	font-family: var(--tt-font-display);
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--tt-ink-900);
	letter-spacing: -0.02em;
}
.tt-chart-card__delta {
	font-size: var(--tt-fs-sm);
	color: var(--tt-success);
	font-weight: 600;
	display: inline-flex; align-items: center; gap: 4px;
}
.tt-chart-bar-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	font-size: var(--tt-fs-sm);
	padding: 6px 0;
}
.tt-chart-bar-row__label { color: var(--tt-ink-700); }
.tt-chart-bar-row__bar {
	grid-column: 1 / -1;
	height: 8px;
	background: var(--tt-ink-100);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 4px;
}
.tt-chart-bar-row__fill {
	display: block; height: 100%;
	background: linear-gradient(to right, var(--tt-blue-500), var(--tt-blue-300));
	border-radius: 4px;
	transition: width 900ms var(--tt-ease);
}

/* Simple donut made with CSS conic-gradient (editable via --value in template) */
.tt-donut {
	--value: 75;
	width: 160px; height: 160px;
	border-radius: 50%;
	background: conic-gradient(var(--tt-blue-500) calc(var(--value) * 1%), var(--tt-ink-100) 0);
	display: grid; place-items: center;
	position: relative;
	margin: 0 auto;
}
.tt-donut::before {
	content: '';
	position: absolute; inset: 14px;
	border-radius: 50%;
	background: #fff;
}
.tt-donut__label {
	position: relative;
	font-family: var(--tt-font-display);
	font-weight: 500;
	font-size: 1.75rem;
	color: var(--tt-ink-900);
}

/* ===== About: milestone timeline ===== */
.tt-milestones { border-left: 2px solid var(--tt-ink-100); padding-left: var(--tt-space-5); }
.tt-milestone { position: relative; padding-bottom: var(--tt-space-6); }
.tt-milestone:last-child { padding-bottom: 0; }
.tt-milestone::before {
	content: '';
	position: absolute;
	left: calc(var(--tt-space-5) * -1 - 6px);
	top: 6px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--tt-blue-500);
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--tt-ink-100);
}
.tt-milestone__year {
	font-family: var(--tt-font-display);
	font-size: var(--tt-fs-xl);
	font-weight: 500;
	color: var(--tt-blue-600);
	line-height: 1;
	margin-bottom: 6px;
}
.tt-milestone__title {
	font-weight: 600; color: var(--tt-ink-900);
	margin-bottom: 6px; font-size: var(--tt-fs-base);
}
.tt-milestone__text { color: var(--tt-ink-500); font-size: var(--tt-fs-sm); }

/* ===== Quiz CTA (short lead form block) ===== */
.tt-quiz {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--tt-space-7);
	align-items: center;
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-xl);
	padding: clamp(32px, 5vw, 56px);
	overflow: hidden;
	position: relative;
}
.tt-quiz::after {
	content: '';
	position: absolute;
	right: -10%; top: -20%;
	width: 300px; aspect-ratio: 1;
	background: radial-gradient(circle, var(--tt-blue-50) 30%, transparent 70%);
	pointer-events: none;
}
.tt-quiz > * { position: relative; z-index: 1; }
.tt-quiz h2 { margin-bottom: var(--tt-space-3); }
.tt-quiz p  { color: var(--tt-ink-500); margin-bottom: var(--tt-space-4); }
.tt-quiz__form {
	display: flex; flex-direction: column; gap: 12px;
	padding: var(--tt-space-5);
	background: var(--tt-ink-50);
	border-radius: var(--tt-r-lg);
}
@media (max-width: 900px) { .tt-quiz { grid-template-columns: 1fr; } }

/* ===== Featured articles (blog landing) ===== */
.tt-featured-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--tt-space-5);
}
.tt-featured-grid__main .tt-card__media { aspect-ratio: 16/9; }
.tt-featured-grid__main .tt-article-card__title { font-size: var(--tt-fs-xl); }
.tt-featured-grid__side { display: grid; gap: var(--tt-space-4); }
@media (max-width: 900px) {
	.tt-featured-grid { grid-template-columns: 1fr; }
}

/* ===== About hero with team imagery ===== */
.tt-about-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tt-space-5);
	margin-top: var(--tt-space-6);
	padding-top: var(--tt-space-5);
	border-top: var(--tt-border);
}
.tt-about-hero__stat-num {
	font-family: var(--tt-font-display);
	font-size: 2rem;
	font-weight: 500;
	color: var(--tt-ink-900);
	line-height: 1;
}
.tt-about-hero__stat-label { font-size: var(--tt-fs-sm); color: var(--tt-ink-500); margin-top: 4px; }

/* ===== In-demand skills pill grid ===== */
.tt-skills {
	display: flex; flex-wrap: wrap; gap: 10px;
}
.tt-skills__pill {
	padding: 10px 18px;
	border: 1.5px solid var(--tt-ink-100);
	border-radius: var(--tt-r-pill);
	font-size: var(--tt-fs-sm);
	font-weight: 500;
	color: var(--tt-ink-700);
	background: #fff;
	transition: all var(--tt-t-fast) var(--tt-ease);
	display: inline-flex; align-items: center; gap: 8px;
}
.tt-skills__pill:hover {
	border-color: var(--tt-blue-500);
	color: var(--tt-blue-600);
	background: var(--tt-blue-50);
}
.tt-skills__pill::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--tt-blue-500);
}

/* ===== Careers subnav specific ===== */
.tt-section[id] { scroll-margin-top: 120px; }

/* ========== Mobile overrides for inline-styled grids ========== */
@media (max-width: 900px) {
	/* Force any .tt-grid (even with inline grid-template-columns) to stack */
	.tt-grid[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: var(--tt-space-5) !important;
	}
}


/* ===== Contact page ===== */
.tt-contact-page {
	display: grid;
	gap: var(--tt-space-6);
}
.tt-contact-page__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--tt-space-5);
}
.tt-contact-page__card {
	position: relative;
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-xl);
	padding: clamp(28px, 4vw, 40px);
	box-shadow: var(--tt-shadow-md);
	overflow: hidden;
}
.tt-contact-page__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at top right, rgba(32, 78, 207, 0.08), transparent 34%),
		linear-gradient(to right, rgba(10, 22, 40, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 22, 40, 0.04) 1px, transparent 1px);
	background-size: auto, 28px 28px, 28px 28px;
	pointer-events: none;
}
.tt-contact-page__card > * {
	position: relative;
	z-index: 1;
}
.tt-contact-page__card--dark {
	background: linear-gradient(135deg, #0d0f13 0%, #183483 100%);
	border-color: rgba(255,255,255,0.08);
	color: #fff;
}
.tt-contact-page__card--dark::before {
	background:
		radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 34%),
		linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: auto, 28px 28px, 28px 28px;
}
.tt-contact-page__label {
	display: inline-flex;
	align-items: center;
	margin-bottom: 18px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(30, 94, 255, 0.08);
	color: var(--tt-blue-700);
	font-size: 1.07rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}
.tt-contact-page__card--dark .tt-contact-page__label {
	background: rgba(255,255,255,0.08);
	color: #fff;
}
.tt-contact-page__title {
	font-family: var(--tt-font-display);
	font-size: clamp(2rem, 3vw, 2.7rem);
	line-height: 1.08;
	margin-bottom: 14px;
	color: var(--tt-ink-900);
}
.tt-contact-page__card--dark .tt-contact-page__title {
	color: #fff;
}
.tt-contact-page__card--dark .tt-contact-page__title,
.tt-contact-page__card--dark .tt-contact-page__title a,
.tt-contact-page__card--dark .tt-contact-page__title a:link,
.tt-contact-page__card--dark .tt-contact-page__title a:visited,
.tt-contact-page__card--dark .tt-contact-page__title a:hover,
.tt-contact-page__card--dark .tt-contact-page__title a:active {
	color: #fff !important;
}
.tt-contact-page__title-link,
.tt-contact-page__title-link:visited {
	color: inherit;
	text-decoration: none;
}
.tt-contact-page__card--dark .tt-contact-page__title-link,
.tt-contact-page__card--dark .tt-contact-page__title-link:visited {
	color: #fff;
}
.tt-contact-page__title-link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
}
.tt-contact-page__copy {
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.75;
	color: var(--tt-ink-600);
	max-width: 34ch;
	margin-bottom: 0;
}
.tt-contact-page__card--dark .tt-contact-page__copy {
	color: rgba(255,255,255,0.82);
}
.tt-contact-page__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tt-space-4);
}
.tt-contact-page__meta-item {
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-lg);
	padding: 22px 24px;
}
.tt-contact-page__meta-item strong {
	display: block;
	font-size: var(--tt-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tt-ink-500);
	margin-bottom: 8px;
}
.tt-contact-page__meta-item span,
.tt-contact-page__meta-item a {
	font-size: var(--tt-fs-md);
	font-weight: 600;
	color: var(--tt-ink-900);
}
.tt-contact-page__note {
	padding: 24px 28px;
	border-radius: var(--tt-r-lg);
	background: var(--tt-ink-50);
	border: var(--tt-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.tt-contact-page__note strong {
	font-size: var(--tt-fs-sm);
	color: var(--tt-ink-700);
}
.tt-contact-page__note a {
	font-size: var(--tt-fs-md);
	font-weight: 600;
	color: var(--tt-ink-900);
}

@media (max-width: 900px) {
	.tt-contact-page__grid,
	.tt-contact-page__meta {
		grid-template-columns: 1fr;
	}
}


/* ===== Legal pages ===== */
.tt-legal-page {
	display: grid;
	gap: var(--tt-space-5);
}
.tt-legal-page__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tt-space-4);
}
.tt-legal-page__meta-card {
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-lg);
	padding: 22px 24px;
	box-shadow: var(--tt-shadow-sm);
}
.tt-legal-page__meta-card span {
	display: block;
	font-size: var(--tt-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tt-ink-500);
	margin-bottom: 8px;
}
.tt-legal-page__meta-card strong,
.tt-legal-page__meta-card a {
	font-size: var(--tt-fs-md);
	color: var(--tt-ink-900);
}
.tt-legal-page__content {
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-xl);
	padding: clamp(28px, 4vw, 48px);
	box-shadow: var(--tt-shadow-md);
}
.tt-legal-page__content > *:first-child { margin-top: 0; }
.tt-legal-page__content > *:last-child { margin-bottom: 0; }
.tt-legal-page__content h2 {
	font-family: var(--tt-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	line-height: 1.15;
	margin: 40px 0 16px;
	color: var(--tt-ink-900);
}
.tt-legal-page__content p,
.tt-legal-page__content li {
	font-size: var(--tt-fs-md);
	line-height: 1.8;
	color: var(--tt-ink-600);
}
.tt-legal-page__content ul {
	margin: 16px 0 0 1.2rem;
	display: grid;
	gap: 10px;
}
.tt-legal-page__content a {
	color: var(--tt-blue-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
@media (max-width: 900px) {
	.tt-legal-page__meta {
		grid-template-columns: 1fr;
	}
}