/*
 * Home - Our philosophy.
 *
 * Read from cp-all-designer/index.html:104-141 and css/app.css:908-1016,
 * 1022-1040, 2990-3001, with the shared marks at 188-204, 216-240, 277-281,
 * 310-318, 325-327, 401-402.
 *
 * The design file was 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, because no element in the design's own markup carries it:
 * `.philo__img`, `.philo__img--a`, `.philo__img--b` and every rule hanging off
 * them (app.css:990-1016, 1037-1038, 2998-2999) — index.html prints
 * `.philo__cut`, never `.philo__img`. So is `.jb .philo__ground` (app.css:3587),
 * which belongs to join-business and would otherwise override the ground here.
 */

.custom-home-our-philosophy {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	background: linear-gradient(180deg,
		var(--band-top, #EAF6FD) 0%,
		var(--band-middle, #F7FBFE) 46%,
		var(--band-bottom, #FFFFFF) 100%);   /* app.css:909 */
}

/* ------------------------------------------------------------------ */
/* Sky and ground                                                      */
/* ------------------------------------------------------------------ */

.custom-home-our-philosophy__sky {
	position: absolute;
	inset: 0 0 auto;
	height: 62%;
	z-index: 0;
	opacity: 0.5;
	pointer-events: none;
}

/* app.css:922-924 — two soft circles, each its own size and corner. */
.custom-home-our-philosophy__glow-a,
.custom-home-our-philosophy__glow-b {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(6px);
	background: radial-gradient(circle, var(--glow, transparent) 0%, transparent 70%);
}

.custom-home-our-philosophy__glow-a {
	width: 720px;
	height: 720px;
	top: -260px;
	right: -180px;
}

.custom-home-our-philosophy__glow-b {
	width: 620px;
	height: 620px;
	top: 40px;
	left: -220px;
}

/* app.css:925-931 — the band fades in from the top and carries the picture. */
.custom-home-our-philosophy__ground {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	opacity: 0.32;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
}

.custom-home-our-philosophy__ground-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.custom-home-our-philosophy__ground-picture > img,
.custom-home-our-philosophy__ground-picture > video {
	object-position: center 40%;           /* app.css:927 */
}

/* ------------------------------------------------------------------ */
/* The three tracks                                                    */
/* ------------------------------------------------------------------ */

.custom-home-our-philosophy__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

/* app.css:939 — the centre track is pinned; the flanks take what is left. */
.custom-home-our-philosophy__grid {
	display: grid;
	grid-template-columns: 1fr minmax(0, 660px) 1fr;
	align-items: center;
}

.custom-home-our-philosophy__copy {
	position: relative;
	z-index: 3;
	min-width: 0;
	justify-self: center;
	text-align: center;
}

/* ---- the two die-cuts — app.css:964-989 ---- */
.custom-home-our-philosophy__visual {
	position: relative;
	min-width: 0;
	padding-bottom: 52px;                  /* clamp(34, 3.6*14.4, 54) = 51.84 → even */
}

.custom-home-our-philosophy__cut {
	position: relative;
	width: 100%;
}

.custom-home-our-philosophy__cut > img,
.custom-home-our-philosophy__cut > video {
	position: static;
	width: 100%;
	height: auto;
	max-height: inherit;
	object-fit: contain;
	object-position: bottom left;          /* app.css:972 */
}

.custom-home-our-philosophy__visual-left {
	margin-top: 58px;                      /* clamp(24, 4*14.4, 64) = 57.6 → even */
	margin-left: -40px;                    /* app.css:974 --pad × -.45 = -40.5 → nearest even */
}

.custom-home-our-philosophy__visual-right {
	margin-right: -42px;                   /* app.css:975 */
}

.custom-home-our-philosophy__visual-right .custom-home-our-philosophy__cut > img,
.custom-home-our-philosophy__visual-right .custom-home-our-philosophy__cut > video {
	object-position: bottom right;         /* app.css:989 */
}

/* app.css:976-981 — both of them grow up from their foot, small to full. */
.custom-home-our-philosophy__visual-left .custom-home-our-philosophy__cut,
.custom-home-our-philosophy__visual-right .custom-home-our-philosophy__cut {
	opacity: 0;
	transform: scale(0.62) translateY(30px);
	transform-origin: bottom center;
	transition: opacity 550ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 1050ms cubic-bezier(0.18, 0.9, 0.24, 1);
}

.custom-home-our-philosophy__visual-left.is-in .custom-home-our-philosophy__cut,
.custom-home-our-philosophy__visual-right.is-in .custom-home-our-philosophy__cut {
	opacity: 1;
	transform: none;
}

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

/* ---- eyebrow — app.css:202-209, centred at 944; the root in front so
   Kadence's `.single-content p` margin does not reach it ---- */
.custom-home-our-philosophy .custom-home-our-philosophy__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;                      /* app.css:174, the page's own */
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* ---- title — app.css:216-240 ---- */
.custom-home-our-philosophy__title {
	margin-top: 0;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.custom-home-our-philosophy__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%;  
}

/* app.css:236-239 — a rule under the accented word, at its own weight. */
.custom-home-our-philosophy__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 8px;
	border-radius: 4px;                    /* app.css:238 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

.custom-home-our-philosophy__title strong {
	font-weight: 700;                      /* app.css:226 */
	color: inherit;
}

/* ---- description — app.css:277-280, centred at 946 ---- */
.custom-home-our-philosophy__description {
	margin: 0 auto;
	font-weight: 400;
	line-height: 1.7;
}

/* ---- quote — app.css:947; its type is the body's, and that is said ---- */
.custom-home-our-philosophy__quote {
	margin: 30px auto 32px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	font-style: normal;
	border: 0;
	padding: 0;
}

.custom-home-our-philosophy__quote p {
	margin: 0;
}

/* ---- the press — app.css:310-317, 949-958 ---- */
.custom-home-our-philosophy__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	border-width: 2px;                     /* app.css:952 measures 1px */
	border-style: solid;
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:145 */
	cursor: pointer;
	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 200ms,
	            gap 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--custom-press-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);
}

.custom-home-our-philosophy__link:hover {
	transform: translateY(-2px);
	--custom-press-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);  /* --sh, app.css:146 */
}

.custom-home-our-philosophy__link-mark {
	line-height: 1;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-our-philosophy__link:hover .custom-home-our-philosophy__link-mark {
	transform: translateX(6px);            /* app.css:317 measures 5px */
}

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

@media (max-width: 1024px) {
	.custom-home-our-philosophy__grid {
		grid-template-columns: 1fr;        /* app.css:1023 */
	}
	.custom-home-our-philosophy__visual-right {
		display: none;                     /* app.css:1024 */
	}
	.custom-home-our-philosophy__visual-left {
		order: -1;                         /* app.css:1036 */
		margin-top: 0;
		margin-left: 0;                    /* app.css:1025 */
		padding-bottom: 34px;              /* clamp(20, 4*9.2, 34) = 36.8 → cap */
	}
	.custom-home-our-philosophy__cut > img,
	.custom-home-our-philosophy__cut > video {
		object-position: bottom center;    /* app.css:1034 */
	}
	.custom-home-our-philosophy__description {
		line-height: 1.6;                  /* app.css:1040 */
	}
	/* app.css:903 — the author's own line breaks close up below the wide tier. */
	.custom-home-our-philosophy__description br {
		display: none;
	}
}

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

@media (max-width: 767px) {
	.custom-home-our-philosophy__visual-left {
		padding-bottom: 20px;              /* clamp(20, 4*4.2, 34) = 16.8 → floor */
	}
	.custom-home-our-philosophy__description {
		line-height: 1.5;                  /* app.css:2992 */
	}
	.custom-home-our-philosophy__quote {
		margin: 14px 0;                    /* app.css:3001 */
	}
	.custom-home-our-philosophy__title em::after {
		bottom: 2px;
		height: 4px;
	}
}

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

/* app.css:915-917 (.philo) gives this band the window's height, and app.css:2830 hands it back
   at 1024 and below, where the content sets the height as it does everywhere
   else. min-height, so a band that outgrows the window takes the room it needs
   and the page scrolls rather than cutting anything off. */
@media (min-width: 1025px) {
	.custom-home-our-philosophy {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* A flex item with auto side margins shrinks to its own content, so the
	   content box is told its width again: the whole band, up to the cap. */
	.custom-home-our-philosophy > .custom-home-our-philosophy__inner {
		width: 100%;
	}
}

/* app.css:208 — the eyebrow's foot is min(22, 2.4 --vhu): 19.2 at 1024;
   a phone sets it at 14 (app.css, 640px tier) */
@media (max-width: 1024px) {
	.custom-home-our-philosophy .custom-home-our-philosophy__eyebrow {
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.custom-home-our-philosophy .custom-home-our-philosophy__eyebrow {
		margin-bottom: 14px;
	}
}