/*
 * Home - Join us.
 *
 * Read from cp-all-designer/index.html:733-804 and css/app.css:216-240,
 * 290-302, 2537-2635, 3025-3027.
 *
 * Drawn at 1440 (app.css:113): a fixed measure carries across unchanged.
 * Colour, type, padding, the sizes and the gaps arrive from the Style tab and
 * are not repeated here.
 *
 * Left behind:
 * - `.only-th` / `.only-en` (app.css:181-182) and the two copies of every
 *   sentence they switch between. Languages are Polylang's: a page exists once
 *   per language, so the section holds one set of words.
 * - `.career .h-ghost` (app.css:265) — the class is not in this markup.
 * - `flex-direction: column` on `.cstat` (app.css:2627) — the box is a grid,
 *   so the property settles nothing.
 * - `.cstat { padding: 16px 18px }` (app.css:2633) — app.css:3027 sets the
 *   same box 9px 10px at the same width, later in the file.
 */

.custom-home-join-us {
	--custom-sweep-ghost: #566187;          /* app.css:265, the dark-section grey */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	color: #FFFFFF;
}

/* ---- the pictures behind — app.css:2546-2560 ---- */
.custom-home-join-us__pictures {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.custom-home-join-us__picture {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1400ms ease;
}

.custom-home-join-us__picture.is-active {
	opacity: 1;
}

.custom-home-join-us__picture-slot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.custom-home-join-us__pictures::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;                  /* app.css:2553 */
}

/* app.css:2561-2570 — one veil, heaviest where the type sits. */
.custom-home-join-us::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg,
		rgba(10, 20, 45, 0.52) 0%,
		rgba(10, 20, 45, 0.38) 28%,
		rgba(10, 20, 45, 0.16) 52%,
		rgba(10, 20, 45, 0.04) 72%,
		rgba(10, 20, 45, 0) 88%);
}

.custom-home-join-us__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

/* app.css:2571 — the copy takes the wider track. */
.custom-home-join-us__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
}

.custom-home-join-us__copy {
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* The words                                                           */
/* ------------------------------------------------------------------ */

.custom-home-join-us__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

.custom-home-join-us__pulse {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(206, 41, 41, 0.55);
	animation: custom-home-join-us-pulse 2400ms infinite;
}

@keyframes custom-home-join-us-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(206, 41, 41, 0.7); }
	70%  { box-shadow: 0 0 0 12px rgba(206, 41, 41, 0); }
	100% { box-shadow: 0 0 0 0 rgba(206, 41, 41, 0); }
}

.custom-home-join-us__title {
	margin: 0 0 26px;                      /* app.css:2577 */
	font-weight: 700;                      /* app.css:220 */
	line-height: 1.28;
	letter-spacing: 0;
	overflow: visible;
	padding-bottom: 6px;                   /* app.css:2579 measures .06em */
}

.custom-home-join-us__title em {
	position: relative;
	display: inline-block;
	font-style: normal;                    /* app.css:255-260: upright, a step larger than its line */
	font-weight: 700;
	font-size: 108%;  
}

.custom-home-join-us__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 14px;                          /* app.css:238 measures .16em */
	border-radius: 4px;
	background: currentColor;
	opacity: 0.32;                         /* app.css:2582 */
}

.custom-home-join-us__title strong {
	font-weight: 700;
	color: #FFFFFF;                        /* app.css:273 */
}

.custom-home-join-us__description {
	margin: 0 0 38px;                      /* app.css:2587 */
	font-weight: 300;
	line-height: 1.8;
}

/* ---- the two presses — app.css:290-302, 2603 ---- */
.custom-home-join-us__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.custom-home-join-us__press {
	display: inline-flex;
	align-items: center;
	gap: 12px;                             /* app.css:291 measures 11px */
	padding: 16px 30px;                    /* app.css:293 measures 15px 30px */
	white-space: nowrap;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	border-width: 2px;                     /* app.css:293 measures 1.5px */
	border-style: solid;
	border-radius: 16px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--custom-press-ink: #FFFFFF;
	--custom-press-edge: transparent;
	--custom-press-shadow: none;
}

.custom-home-join-us__press:hover {
	transform: translateY(-2px);
}

.custom-home-join-us__press-1:hover {
	--custom-press-shadow: 0 14px 30px rgba(206, 41, 41, 0.34);   /* app.css:297 */
}

/* .btn--ghost: an outline that takes its ground only when it is reached. */
.custom-home-join-us__press-2 {
	--custom-press-ground: transparent;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.custom-home-join-us__press-2:hover {
	--custom-press-ground: rgba(255, 255, 255, 0.14);
	--custom-press-edge: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* The figures                                                         */
/* ------------------------------------------------------------------ */

.custom-home-join-us__figures {
	display: grid;
	min-width: 0;
}

.custom-home-join-us__figure {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 18px;
	align-items: center;
	border-radius: 14px;
	border-width: 2px;                     /* app.css:2608 measures 1px */
	border-style: solid;
	-webkit-backdrop-filter: blur(18px);
	        backdrop-filter: blur(18px);
	transition: background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-join-us__figure:hover {
	background-color: rgba(255, 255, 255, 0.15);   /* app.css:2612 */
	transform: translateX(-6px);
}

.custom-home-join-us__figure-mark {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: #FFFFFF;
}

.custom-home-join-us__figure-mark svg,
.custom-home-join-us__figure-mark img,
.custom-home-join-us__figure-mark i {
	width: 30px;
	height: 30px;
	font-size: 30px;
	line-height: 1;
	display: block;
}

.custom-home-join-us__figure-body {
	min-width: 0;
}

.custom-home-join-us__figure-value {
	display: block;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}

/* app.css:2733-2734 — Thai words, so the figure's face and its tightened
   spacing stay off them. */
.custom-home-join-us__figure-title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: #FFFFFF;
}

.custom-home-join-us__figure-after {
	font-size: 16px;                       /* app.css:2618 .55em of 30px = 16.5 → nearest even */
	font-weight: 600;
	letter-spacing: 0;
}

.custom-home-join-us__figure-label {
	display: block;
	margin-top: 6px;                       /* app.css:2619 measures 5px */
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-home-join-us__grid {
		grid-template-columns: 1fr;        /* app.css:2625 */
	}
	.custom-home-join-us__figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));   /* app.css:2626 */
	}
	.custom-home-join-us__figure {
		grid-template-columns: 1fr;        /* app.css:2627 */
		align-items: flex-start;
	}
	.custom-home-join-us__figure-mark {
		display: none;                     /* app.css:2628 */
	}
	.custom-home-join-us__figure-label {
		font-size: 12px;
		line-height: 1.35;                 /* app.css:2630 */
	}
	/* app.css:2593-2595 — the authored break shows on the widest tier alone. */
	.custom-home-join-us__description br {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-home-join-us__figure {
		gap: 14px;                         /* app.css:2633 */
	}
	.custom-home-join-us__press {
		padding: 14px 22px;
		font-size: 14px;
	}
	.custom-home-join-us__title em::after {
		bottom: 2px;
		height: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-home-join-us__picture,
	.custom-home-join-us__pulse,
	.custom-home-join-us__figure,
	.custom-home-join-us__press {
		transition: none;
		animation: none;
	}
	.custom-home-join-us__figure:hover,
	.custom-home-join-us__press:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* One band, one screen — desktop only                                 */
/* ------------------------------------------------------------------ */

/* app.css:2538-2540 gives this band the window's height, and app.css:2830 hands
   it back at 1024 and below. min-height, so a band that outgrows the window
   takes the room it needs and the page scrolls rather than cutting anything
   off. The band already centres what stands in it, further up this file. */
@media (min-width: 1025px) {
	.custom-home-join-us {
		min-height: 100vh;
	}
}