/* ==========================================================================
   Hello Candidate — the only hand-written CSS this page needs.

   Everything visual is Tailwind utilities in the template. This file exists
   for the three things utilities genuinely cannot express:
     1. @font-face declarations for the brand faces (hosted on the CDN)
     2. the dashed-line "draw" effect on the decorative SVG connectors
     3. a couple of overrides for the third-party Taggbox widget embed
   ========================================================================== */

/* ---- 1. Brand faces ---------------------------------------------------- */
@font-face {
	font-family: Georgia-Bold;
	src: url("https://cloud.tagbox.com/website/tagbox/assets/section-library/fonts/Georgia-Bold.woff") format("woff");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: Georgia-Italic;
	src: url("https://cloud.tagbox.com/website/tagbox/assets/section-library/fonts/Georgia-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: AvenirBook;
	src: url("https://cloud.tagbox.com/website/tagbox/assets/section-library/fonts/AvenirLTStd-Book.woff") format("woff");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: AvenirBlack;
	src: url("https://cloud.tagbox.com/website/tagbox/assets/section-library/fonts/AvenirLTStd-Black.woff") format("woff");
	font-weight: 900;
	font-display: swap;
}

@font-face {
	font-family: "League Gothic";
	src: url("https://cloud.tagbox.com/website/tagbox/assets/section-library/fonts/LeagueGothic-Regular.woff") format("woff");
	font-weight: 400;
	font-display: swap;
}

/* ---- 2. SVG connector draw --------------------------------------------
   AOS handles every other animation on the page declaratively. Drawing a
   dashed path is the one effect it cannot express, so the connectors are
   marked data-aos="hc-draw" and AOS's own .aos-animate class starts these
   keyframes. No JavaScript of ours is involved.
   ----------------------------------------------------------------------- */
[data-aos="hc-draw"] .hc-line {
	/* stroke-dasharray is left to each SVG's own attribute so a connector can
	   carry the dash pattern its design calls for; only the offset is animated,
	   which marches the dashes along the path as it comes into view. */
	stroke-dashoffset: 1400;
	opacity: 0;
}

[data-aos="hc-draw"] .hc-arrow,
[data-aos="hc-draw"] .hc-dot {
	opacity: 0;
}

[data-aos="hc-draw"].aos-animate .hc-line {
	opacity: 1;
	animation: hc-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
		hc-dash-flow 2.8s linear 1.6s infinite;
}

[data-aos="hc-draw"].aos-animate .hc-dot {
	animation: hc-pop 0.5s ease-out 0.15s forwards;
}

/* SVG elements default to transform-origin 0 0 in the view box, so a bare
   scale() would pull the dot toward the corner. Scale it about itself.
   NB: a CSS transform REPLACES an element's SVG transform attribute, so a
   dot's position must live in cx/cy, never in transform="...". */
[data-aos="hc-draw"] .hc-dot {
	transform-box: fill-box;
	transform-origin: center;
}

[data-aos="hc-draw"].aos-animate .hc-arrow {
	animation: hc-fade 0.6s ease-out 1.2s forwards;
}

@keyframes hc-draw {
	to {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes hc-dash-flow {
	from {
		stroke-dashoffset: 0;
	}

	to {
		stroke-dashoffset: -48px;
	}
}

@keyframes hc-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes hc-fade {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	[data-aos="hc-draw"] .hc-line,
	[data-aos="hc-draw"] .hc-arrow,
	[data-aos="hc-draw"] .hc-dot {
		animation: none !important;
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

/* ---- 3. Taggbox widget embed ------------------------------------------ */
.hc-widget .tb_app_container {
	min-height: fit-content !important;
}

.hc-widget .tb_onsite_upload_btn_wrap {
	display: none;
}

.hc-widget::after {
	display: none;
}

/* ---- 4. Font shorthands ----------------------------------------------
   Named once here so the markup reads `ff-display` rather than repeating
   an arbitrary-value utility on every heading.
   ---------------------------------------------------------------------- */
.ff-display {
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
}

.ff-italic {
	font-family: Georgia-Italic, Georgia, serif;
	font-style: italic;
}

.ff-body {
	font-family: AvenirBook, ui-sans-serif, system-ui, sans-serif;
}

.ff-black {
	font-family: AvenirBlack, ui-sans-serif, system-ui, sans-serif;
}

.ff-gothic {
	font-family: "League Gothic", Impact, sans-serif;
}

/* ---- 5. Hero Banner ---------------------------------------------------
   A wide cinematic banner: the team photo reads clearly through the top
   two-thirds, and the brand pink rises from the bottom as a soft ellipse
   rather than a hard horizontal band.
   ----------------------------------------------------------------------- */
.hc-hero-banner {
	background-color: #1b2233;
	min-height: 540px;
}

/* From tablet up the banner holds a wide 2:1 frame like the reference,
   capped so it never eats a tall desktop screen. */
@media (min-width: 768px) {
	.hc-hero-banner {
		aspect-ratio: 2 / 1;
		min-height: 600px;
		max-height: 880px;
	}
}

.hc-hero-bg {
	background-image: url('https://cloud.tagbox.com/website/tagbox/assets/section-library/images/workwithus/banner-img.png?ver=1.0.1');
	/* Source is 1920x1081; in a 2:1 frame it is width-constrained, so favour
	   the lower part of the photo to keep the team in shot rather than sky. */
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Figma lays a flat black layer over the whole photo (the render measures
   ~0.52x the source brightness, evenly across R/G/B), which is what lets the
   white wordmark and logos read clearly. The pink/purple wash sits above it. */
.hc-hero-top-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	pointer-events: none;
	z-index: 1;
}

/* Brand wash over the lower half of the photo (Figma: Taggbox design,
   node 23670-15980). Deep purple at the floor, pink through the middle,
   fading to fully transparent pink so the team shows through above it.
   Colours come from hero.gradient in json/hello-candidate.json via the
   custom properties below; the fallbacks match the Figma values. */
.hc-hero-bottom-gradient {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 62%;
	background: linear-gradient(0deg,
			var(--hc-grad-from, #683687) 0%,
			var(--hc-grad-via, #BF4393D6) 52%,
			var(--hc-grad-to, #D6569600) 100%);
	pointer-events: none;
	z-index: 2;
}

.hc-eyebrow-line {
	display: inline-block;
	flex-shrink: 0;
	height: 1px;
	width: 44px;
	background-color: rgba(255, 255, 255, 0.75);
	vertical-align: middle;
}

@media (min-width: 640px) {
	.hc-eyebrow-line {
		width: 72px;
	}
}

@media (min-width: 768px) {
	.hc-eyebrow-line {
		width: 104px;
	}
}

/* Sized here with clamp() rather than utility classes so the headline scales
   smoothly with the banner instead of stepping at each breakpoint. */
.hc-hero-title {
	font-family: AvenirBlack, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	font-size: clamp(34px, 5.6vw, 124px);
	line-height: 1;
	text-shadow: 0 2px 14px rgba(60, 25, 85, 0.3);
}

.hc-hero-subtitle {
	font-family: AvenirBook, ui-sans-serif, system-ui, sans-serif;
	font-weight: 400;
	color: #ffffff;
	letter-spacing: 0.01em;
	font-size: clamp(16px, 2.3vw, 36px);
	line-height: 1.35;
	text-shadow: 0 1px 8px rgba(60, 25, 85, 0.25);
}

/* ---- 6. AOS offset guard ----------------------------------------------
   AOS parks fade-left/right elements at translateX(+/-100px) until they
   scroll into view, which widens the document. Using overflow-x: clip
   clips stray horizontal overflows WITHOUT establishing a scroll container,
   which preserves position: sticky throughout the document.
   ----------------------------------------------------------------------- */
html,
body {
	overflow-x: clip !important;
}

/* ---- 7. Gradient headline --------------------------------------------
   The "Candidate," wordmark uses the Figma radial fill (purple -> pink ->
   orange -> black). Figma also rotates this gradient, which CSS radial
   gradients cannot express, so this is the unrotated version.
   background-clip:text needs a transparent fill, so a plain colour
   fallback is declared first for anything that cannot clip to text.
   ---------------------------------------------------------------------- */
.hc-gradient-text {
	color: #FF538F;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.hc-gradient-text {
		background-image: radial-gradient(109.22% 109.22% at 61.27% 91.58%,
				#8128C4 0%,
				#FF538F 50%,
				#FF8C4A 75%,
				#000000 100%);
		/* Map the gradient to the word itself, not the left padding. */
		background-origin: content-box;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* ---- 8. Google Sans (redesigned sections; was Poppins) ----------------------------
   The section-A redesign uses a geometric sans at weights the CDN's Avenir
   does not carry (it only ships Book 400 and Black 900). Poppins is loaded
   from Google Fonts for these blocks. Scoped to `ff-sans*` classes so the
   sections below B keep Georgia until their designs land.
   ---------------------------------------------------------------------- */
.ff-sans {
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 400;
}

.ff-sans-medium {
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	/* Figma headings are Google Sans Regular. */
	font-weight: 400;
}

.ff-sans-semi {
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
}

.ff-sans-bold {
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
}

.ff-sans-italic {
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 400;
	font-style: italic;
}

/* ---- 9. Timeline Transitions (Minimal CSS) --------------------------- */
.journey-item {
	transition: opacity 0.4s ease, filter 0.4s ease;
	opacity: 0.25;
	filter: blur(1.5px);
}

.journey-item.active {
	opacity: 1;
	filter: blur(0);
}

.journey-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 140px;
	align-self: start;
}

.journey-sticky-img-wrap {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-sticky-img-wrap.active {
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}

.grayscale {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* ---- 10. People First (Matter.js physics cards) ---------------------- */
.people-first {
	/* Black with the thin wavy line artwork (1440x746) laid over it. */
	background-color: #000000;
	background-image: url('https://cloud.tagbox.com/website/tagbox/assets/svg/backgrounds/thin-wavy-line@2x.svg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 90px 0 0px;
	text-align: center;
	color: #ffffff;
}

.people-first h2 {
	color: #ffffff;
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 1.0;
	margin: 0 0 12px;
}

.people-first .section-subtitle {
	color: #ffffff;
	max-width: 878px;
	margin: 0 auto 10px;
	line-height: 1.6;
	font-size: 24px;
	padding: 0 20px;
}

.pf-wrap {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.pf-scene {
	position: relative;
	width: 100%;
	height: 400px;
	touch-action: pan-y;
}

.pf-card {
	position: absolute;
	left: 0;
	top: 0;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
	border-radius: 16px;
	will-change: transform;
}

.pf-card:active {
	cursor: grabbing;
}

.pf-card img.pf-card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	border-radius: 16px;
}

.pf-card-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 12px;
	border-radius: 16px;
}

.pf-card-content img.pf-card-icon {
	width: 25px;
	height: 25px;
	flex-shrink: 0;
}

.pf-card-content h6 {
	margin: 0;
	font-weight: 500;
	color: #000000;
	font-size: 15px;
	white-space: nowrap;
	font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
}

@media (max-width: 1200px) {
	.people-first h2 {
		font-size: 54px;
	}

	.people-first .section-subtitle {
		font-size: 22px;
	}
}

@media (max-width: 991px) {
	.people-first h2 {
		font-size: 44px;
	}

	.people-first .section-subtitle {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.people-first {
		padding: 50px 0 0px;
	}

	.people-first h2 {
		font-size: 30px;
		line-height: 1.15;
		padding-left: 20px;
		padding-right: 20px;
	}

	.people-first .section-subtitle {
		font-size: 16px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.pf-scene {
		height: 250px;
	}

	.pf-card-content img.pf-card-icon {
		width: 15px;
		height: 15px;
	}

	.pf-card-content h6 {
		font-size: 12px;
	}
}

/* ---- 11. Values that Guide Us Every Day (Slider) -------------------- */
.valuesSwiper {
	overflow: visible !important;
}

/* ---- Links inherit their container colour ------------------------------
   The theme's base layer paints every <a> primary-700 (pink). On this page
   links take the colour of the element around them (purple names, black
   contact rows) as in Figma. Kept inside @layer base so any text-* utility
   on a link still wins.
   ---------------------------------------------------------------------- */
@layer base {

	main a,
	footer a {
		color: inherit;
	}
}

/* ---- Footer contour lines ----------------------------------------------
   Figma lays the thin wavy-line artwork over the pink -> purple footer
   gradient. The SVG's lines are light, so a screen blend keeps only the
   lines and lets the gradient show through everywhere else.
   ---------------------------------------------------------------------- */
.hc-footer-lines {
	background-image: url('https://cloud.tagbox.com/website/tagbox/assets/svg/backgrounds/thin-wavy-line@2x.svg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	mix-blend-mode: screen;
	opacity: 0.9;
}