.about-hero {
	padding: 48px 0 24px;                 /* breathing room under the sticky header */
}
.about-hero__title {
	margin: 0;
	color: var( --yd-heading );           /* "Your" / "Partner" stay near-black */
	font-family: var( --yd-font );
	font-weight: 400;                      /* light, airy strokes like the reference */
	font-size: clamp( 46px, 9vw, 150px );
	line-height: 1.02;
	letter-spacing: -0.02em;
}
.about-hero__line {
	display: block;                        /* guarantees the exact two-line layout */
}
.about-hero__accent {
	color: var( --yd-primary );            /* brand red (was blue in the reference) */
}


.ym-morph {
	--ym-ink: #0a0a0a;
	--ym-font: var( --yd-font, "Helvetica Neue", Helvetica, Arial, sans-serif );

	position: relative;
	height: 320vh;                         /* scroll length of the effect (unchanged) */
	background: #fff;
	font-family: var( --ym-font );
}

.ym-stage {
	position: sticky;                      /* fallback; GSAP pin takes over when JS runs */
	top: 0;
	width: min( calc( 100% - 80px ), calc( var( --yd-container ) - 80px ) );
	height: 100vh;
	margin: 0 auto;                        /* centre within the full-width section */
	overflow: hidden;
	background: #fff;                      /* everything outside the clip reads as white */
}

.ym-hero {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;

	will-change: -webkit-mask-size, mask-size;
	backface-visibility: hidden;
}
.ym-hero.is-masking {
	-webkit-mask-image: url( "../images/logo_yen_mask.svg" );
	        mask-image: url( "../images/logo_yen_mask.svg" );
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 47.5% 56%;
	        mask-position: 47.5% 56%;
	/* Starting size (JS overrides per scroll frame). */
	-webkit-mask-size: 160000px;
	        mask-size: 160000px;
}

.ym-tagline {
	position: absolute;
	left: 0;
	right: 0;
	top: 91%;                                 /* more breathing room below the wordmark */
	z-index: 3;
	transform: translateY( -50% );
	margin: 0;
	padding: 0 22px;
	text-align: center;
	color: #000000;                           /* site default black */
	font-family: var( --yd-font );            /* global font family */
	font-weight: 500;                         /* Medium */
	font-size: clamp( 18px, 2.7vw, 44px );    /* slightly larger; scales on tablet/mobile */
	line-height: 1.3;
	letter-spacing: 0.01em;
	pointer-events: none;
}

.ym-tagline.is-anim {
	opacity: 0;
	transform: translateY( calc( -50% + 30px ) ) scale( 0.94 );
	transition: opacity 1.8s cubic-bezier( 0.22, 1, 0.36, 1 ),
		transform 2s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.ym-tagline.is-anim.is-visible {
	opacity: 1;
	transform: translateY( -50% ) scale( 1 );
}

/* ------------------Responsive----------------- */
@media (max-width: 900px) {
	.about-hero {
		padding: 32px 0 16px;
	}
	.about-hero__title {
		font-size: clamp( 34px, 11vw, 76px );
	}
	/* Match the site .container's mobile gutters (22px) so the morph image lines
	   up with the heading on phones/tablets (desktop stays 40px gutters). */
	.ym-stage {
		width: calc( 100% - 44px );
	}
}
.about-stats {
	position: relative;
	overflow: hidden;                      /* clips .about-stats__fill to the section */
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: #fff;
	padding: 80px 0 110px;                  /* extra breathing room below the last stat row */
	font-family: var( --yd-font );
}

.about-stats__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: clamp( 40px, 6vw, 90px );
	align-items: start;
	width: 100%;
}

.about-stats__heading {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	font-weight: 400;
	font-size: clamp( 60px, 13vw, 230px );  /* dominant, like the reference */
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var( --yd-heading );
}

.about-stats__label {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: center;                     /* vertically centred against the heading */
	margin: 0;
	margin-right: clamp( 20px, 8vw, 150px ); /* right padding, matching the reference */
	text-align: left;                        /* "Client" / "Retention" left-aligned */
	font-size: clamp( 22px, 2.2vw, 40px );
	font-weight: 500;
	line-height: 1.2;
	color: var( --yd-heading );
}
.about-stats__label span {
	display: block;                         /* "Client" / "Retention" on two lines */
}

.about-stats__list {
	grid-column: 1 / -1;
	grid-row: 2;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.about-stats__list li {
	position: relative;
	display: grid;
	grid-template-columns: 53% 18% 1fr;
	align-items: baseline;
	column-gap: 24px;
	/* Extra top padding = more breathing room between each divider and its number,
	   like the reference. Consistent on every row. */
	padding: clamp( 44px, 5vw, 88px ) 0 clamp( 28px, 3vw, 52px );
}

.about-stats__list li::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 53%;                               /* content-width rule (rows 2 and 3) */
	height: 1px;
	background: rgba( 20, 20, 43, .18 );
}
.about-stats__list li:first-child::before {
	left: 0;                                 /* first divider = full container width */
}
.about-stats__list li strong {
	grid-column: 2;
	font-size: clamp( 40px, 5vw, 96px );
	font-weight: 400;
	line-height: 1;
	color: var( --yd-heading );
}
.about-stats__list li span {
	grid-column: 3;
	align-self: center;
	font-size: clamp( 18px, 1.8vw, 34px );
	font-weight: 400;
	color: var( --yd-heading );
}

.about-stats__fill {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	background: var( --yd-primary );
	clip-path: inset( 100% 0 0 0 );
	will-change: clip-path;
	pointer-events: none;
}
.about-stats__fill .about-stats__heading,
.about-stats__fill .about-stats__label,
.about-stats__fill .about-stats__list li strong,
.about-stats__fill .about-stats__list li span {
	color: #fff;
}
.about-stats__fill .about-stats__list li::before {
	background: rgba( 255, 255, 255, .4 );
}

@media (max-width: 900px) {
	
	.about-stats {
		height: auto;
		min-height: auto;
		padding: 48px 0;
	}
	.about-stats__inner {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}
	
	.about-stats__heading {
		grid-column: 1;
		grid-row: auto;
		font-size: clamp( 48px, 16vw, 100px );
	}
	.about-stats__label {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-right: 0;
		text-align: left;
	}
	.about-stats__list {
		grid-column: 1;
		grid-row: auto;
	}
	.about-stats__list li {
		grid-template-columns: auto 1fr;
		column-gap: 16px;
	}
	.about-stats__list li strong {
		grid-column: 1;
	}
	.about-stats__list li span {
		grid-column: 2;
		justify-self: end;
		text-align: right;
	}
}

.gp {
	--gp-red: #e4002b; 
	position: relative;
	overflow: hidden;
	padding: 40px 0 64px;
	background: radial-gradient(circle at 74% 58%, rgba(180, 236, 255, .42) 0%, rgba(180, 236, 255, .20) 22%, rgba(255, 255, 255, 0) 48%), radial-gradient(circle at 90% 12%, rgba(206, 177, 255, .20) 0%, rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 10% 10%, rgba(255, 214, 226, .16) 0%, rgba(255, 255, 255, 0) 40%), #fff;
	font-family: var( --yd-font );
	padding-top: 160px;
}


.gp__header {
	text-align: center;
	padding-bottom: 18px;
}
.gp__title {
	font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--yd-heading);
}
.gp__title span {
    color: var(--yd-primary);
}
.gp__sub {
	margin: 8px 0 18px;
	color: var( --yd-heading );
	font-weight: 400;
	font-size: clamp( 13px, 1.35vw, 20px );
	line-height: 1.3;
}

/* --- Map stage --- */
.gp__stage {
	position: relative;
	margin-top: 26px;
}
.gp__map {
	position: relative;
	width: 100%;
}
.gp__map-img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
}

/* --- Markers (injected by js/about-map.js) --- */
.gp__markers {
	position: absolute;
	inset: 0;
	pointer-events: auto;
}
.gp-marker {
	--len: 60px;
	position: absolute; 
	width: 0;
	height: 0;
}
.gp-marker__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	background: var( --gp-red );
	border-radius: 50%;
	transform: translate( -50%, -50% );
	z-index: 10;
    
}

.gp-marker__dot::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid var( --gp-red );;
    transform:translate(-50%,-50%);
    animation:pulseMarker 2s infinite;
}

.gp-marker__dot::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid var( --gp-red );
    transform:translate(-50%,-50%);
    animation:pulseMarker 2s infinite .6s;
}

.gp-marker .gp-marker__line,
.gp-marker .gp-marker__label{
    opacity:0;
    visibility:hidden;
    transition:all .35s ease;
}
.gp-marker__dot{
    opacity:1;
    visibility:visible;
}
.gp-marker:hover .gp-marker__line,
.gp-marker:hover .gp-marker__label{

    opacity:1;
    visibility:visible;

}

.gp-marker__label{
    opacity:0;
    visibility:hidden;
    transition:all .35s ease;
}

/* Left marker animation */

.gp-marker--left .gp-marker__label{
    transform:translateX(-10px);
}

/* Right marker animation */

.gp-marker--right .gp-marker__label{
    transform:translateX(10px);
}

/* Down marker animation */

.gp-marker--down .gp-marker__label{
    transform:translateY(10px);
}


.gp-marker:hover .gp-marker__label{
    opacity:1;
    visibility:visible;
}

.gp-marker--left:hover .gp-marker__label{
    transform: translateY(-50%);
}

.gp-marker--right:hover .gp-marker__label{
    transform: translateY(-50%);
}

.gp-marker--down:hover .gp-marker__label{
    transform: translateY(-50%);
}


.gp-marker__line{
    transition:transform .35s ease;
}

/* Horizontal line */

.gp-marker--left .gp-marker__line,
.gp-marker--right .gp-marker__line{
    transform:scaleX(0);
    transform-origin:left center;
}

/* Vertical line */

.gp-marker--down .gp-marker__line{
    transform:scaleY(0);
    transform-origin:top center;
}


.gp-marker--left:hover .gp-marker__line,
.gp-marker--right:hover .gp-marker__line{
    transform:scaleX(1);
}

.gp-marker--down:hover .gp-marker__line{
    transform:scaleY(1);
}

@keyframes pulseMarker{

    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:1;
    }

    70%{
        transform:translate(-50%,-50%) scale(3);
        opacity:0;
    }

    100%{
        transform:translate(-50%,-50%) scale(3.2);
        opacity:0;
    }

}

.gp-marker__line {
	position: absolute;
	background: var( --gp-red );
}
.gp-marker__label {
	position: absolute;
	font-weight: 700;
	color: var( --gp-red );
	font-size: clamp( 10px, 0.95vw, 15px );
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
}
/* label to the RIGHT of the dot */
.gp-marker--right .gp-marker__line { left: 0; top: 0; height: 2px; width: var( --len ); transform: translateY( -50% ); }
.gp-marker--right .gp-marker__label { left: calc( var( --len ) + 8px ); top: 0; transform: translateY( -50% ); }
/* label to the LEFT of the dot */
.gp-marker--left .gp-marker__line { right: 0; top: 0; height: 2px; width: var( --len ); transform: translateY( -50% ); }
.gp-marker--left .gp-marker__label { right: calc( var( --len ) + 8px ); top: 0; transform: translateY( -50% ); text-align: right; }
/* label BELOW the dot */
.gp-marker--down .gp-marker__line { left: 0; top: 0; width: 2px; height: var( --len ); transform: translateX( -50% ); }
.gp-marker--down .gp-marker__label { left: 0; top: calc( var( --len ) + 10px ); transform: translateX( -50% ); text-align: center; }

/* --- Responsive --- */
@media (max-width: 900px) {
	.gp { padding: 28px 0 44px; }
	.gp-marker__label { font-size: clamp( 9px, 1.6vw, 12px ); }
}
@media (max-width: 560px) {
	.gp__badge { width: clamp( 120px, 34vw, 160px ); }
	.gp-marker__label { font-size: 9px; letter-spacing: 0.03em; }
}

.office-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    margin-top: 60px;
}

.office-card h3 {
    margin: 0 0 28px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--yd-heading);
}

.office-card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--yd-body);
}

.office-card .address {
    margin-bottom: 20px;
}

.office-card .email {
    margin-bottom: 28px;
}

.office-card .email span {
    color: var(--yd-heading);
    font-weight: 600;
}

.office-card .email a {
    color: var(--yd-heading);
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;
}

.office-card .email a:hover {
    color: var(--yd-primary);
}

.office-card .hours {
    color: var(--yd-body);
}


/* ===========================
   Tablet
=========================== */

@media (max-width: 991px) {
    .office-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* ===========================
   Mobile
=========================== */

@media (max-width: 767px) {
    .office-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 40px;
    }

    .office-card h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .office-card p {
        font-size: 16px;
    }
}

.pricing {
	--pr-ink: var( --yd-heading );
	position: relative;
	background: #fff;
	font-family: var( --yd-font );
}
.pricing__container {
	display: flex;
	align-items: flex-start;
	gap: clamp( 32px, 3vw, 90px );
}

/* --- Left: sticky panel --- */
.pricing__left {
	flex: 0 0 35%;
	max-width: 35%;
	position: sticky;
	top: 62px;
	height: 100vh;
	display: flex;
	align-items: center;
}
.pricing__left-inner {
	max-width: 480px;
}
.pricing__eyebrow {
	display: inline-block;
	margin-bottom: 22px;
	color: var( --yd-primary );
	font-weight: 700;
	font-size: clamp( 13px, 1vw, 15px );
	letter-spacing: 0.02em;
}
.pricing__heading {
	margin: 0 0 3rem;
	color: var( --pr-ink );
	font-weight: 800;
	font-size: clamp( 40px, 4.6vw, 52px );
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.pricing__desc {
	margin: 0 0 36px;
	max-width: 40ch;
	color: var( --yd-body );
	font-weight: 400;
	font-size: clamp( 15px, 1.05vw, 18px );
	line-height: 1.6;
}

.pricing__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	background: #0d0d0d;
	border-radius: 999px;
}
.pricing__toggle-thumb {
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 0;
	background: #fff;
	border-radius: 999px;
	transition: transform 0.45s cubic-bezier( 0.65, 0, 0.35, 1 ), width 0.45s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.pricing__toggle-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp( 14px, 1vw, 16px );
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s ease;
}
.pricing__toggle-btn.is-active {
	color: #0d0d0d;
}
.pricing__toggle-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	background: var( --yd-primary );
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* --- Right: scrolling cards --- */
.pricing__right {
	flex: 1 1 65%;
	max-width: 65%;
	display: flex;
	flex-direction: column;
	gap: clamp( 24px, 3vw, 40px );
	padding: clamp( 60px, 12vh, 140px ) 0;
}

.pricing-card {
	--pr-accent: #2f6bff;
	--pr-accent-dark: #10306e;
	position: relative;
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid rgba( 20, 20, 43, 0.1 );
	border-radius: 20px;
	box-shadow: 0 20px 50px -30px rgba( 20, 20, 43, 0.18 );
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.4s ease;
}
.pricing-card:hover {
	transform: translateY( -6px );
	box-shadow: 0 30px 60px -28px rgba( 20, 20, 43, 0.26 );
}

.pricing-card.is-anim {
	opacity: 0;
	transform: translateY( 46px );
	transition: opacity 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ), transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.pricing-card.is-anim.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}
.pricing-card.is-anim:hover {
	transform: translateY( -6px );
}

.pricing-card--red    { --pr-accent: var( --yd-primary ); --pr-accent-dark: #7a0d1c; }
.pricing-card--dark   { --pr-accent: #3a3a3a; --pr-accent-dark: #0a0a0a; }

.pricing-card__body {
	flex: 1 1 60%;
	padding: clamp( 30px, 3vw, 48px );
}
.pricing-card__title {
	margin: 0 0 6px;
	color: var( --pr-ink );
	font-weight: 800;
	font-size: clamp( 22px, 2vw, 28px );
	letter-spacing: -0.01em;
}
.pricing-card__sub {
	margin: 0 0 26px;
	color: var( --yd-body );
	font-size: clamp( 14px, 1vw, 16px );
}

.pricing-card__price {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 22px;
}
.pricing-card__amount {
	color: var( --pr-ink );
	font-weight: 800;
	font-size: clamp( 22px, 4vw, 32px );
	line-height: 1;
	letter-spacing: -0.02em;
}
.pricing-card__amount sup {
	top: -0.5em;
	font-size: 0.4em;
	font-weight: 700;
}
.pricing-card__price-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 4px;
}
.pricing-card__was {
	color: #a3a3ad;
	font-weight: 700;
	font-size: clamp( 14px, 1vw, 17px );
}
.pricing-card__period {
	color: #6b6b74;
	font-weight: 700;
	font-size: clamp( 12px, 0.85vw, 14px );
}
/* Smooth crossfade while js/about-pricing.js swaps the figures. */
.pricing.is-swapping .pricing-card__amount-num,
.pricing.is-swapping .pricing-card__was {
	transition: opacity 0.16s ease, transform 0.16s ease;
	opacity: 0;
	transform: translateY( 4px );
}

.pricing-card__divider {
	display: block;
	height: 1px;
	margin-bottom: 24px;
	background: rgba( 20, 20, 43, 0.1 );
}

.pricing-card__features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.pricing-card__features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	font-size: clamp( 14px, 1vw, 16px );
	line-height: 1.3;
	color: var( --pr-ink );
}
.pricing-card__features li.is-off {
	color: #b6b6bf;
}

.pricing-card__check {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	fill: var(--pr-ink);
}
.standard-package .pricing-card__check {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	fill: var(--yd-primary);
}
.pricing-card__features li.is-off .pricing-card__check {
	fill: #d8d8e0;
}

.pricing-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 11px 30px 10px;
	background: var(--pr-ink);
	color: #fff;
	border-radius: 30px;
	font-weight: 700;
	font-size: clamp( 14px, 1vw, 16px );
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease;
}
.pricing-card__cta.casebtn{
	background: var(--yd-primary-dark);
}
.pricing-card__cta.casebtn:hover{
	background: var(--pr-ink);
}
.pricing-card__cta:hover {
	background: var(--yd-primary-dark);
	transform: translateY( -2px );
}

.pricing-card__visual {
	position: relative;
	flex: 0 0 38%;
	max-width: 38%;
	overflow: hidden;
	border-radius: 20px 20px 20px 0px;
}
.pricing-card__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px 20px 20px 20px;
}

.pricing-card__badge {
	position: absolute;
	top: -16px;
	left: clamp( 20px, 2.4vw, 28px );
	z-index: 4;
	padding: 0px 20px;
	background: var( --yd-primary );
	color: #fff;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px -6px rgba( 255, 57, 81, 0.5 );
}


.pricing-card--popular .pricing-card__amount {
	color: var( --yd-primary );
}

.results-box h4{
    margin-bottom:12px;
    font-size:22px;
    font-weight:700;
}

.result-row{
    display:flex;
    gap:32px;
    margin-bottom:10px;
	font-size: 15px;
}

.result-row span{
    color:#555;
}

.result-row strong{
    font-weight:700;
}

/* ----------Responsive------------------------ */
@media (max-width: 900px) {
	.pricing__container {
		flex-direction: column;
	}
	/* Sticky disabled on tablet/mobile — the panel simply flows above the
	   stacked cards. */
	.pricing__left {
		position: static;
		height: auto;
		max-width: 100%;
		padding-bottom: 8px;
	}
	.pricing__right {
		max-width: 100%;
		padding: 0 0 8px;
	}
	.pricing-card {
		flex-direction: column;
	}
	.pricing-card__visual {
		flex: none; 
		max-width: 100%;
		height: 150px;
		border-radius: 20px 20px 20px 20px;
	}
	.pricing-card__visual img {
		border-radius: 20px 20px 20px 20px;
	}
}
@media (max-width: 560px) {
	.pricing-card__body {
		padding: 24px;
	}
	.pricing-card__price {
		flex-wrap: wrap;
	}
}


/*--------------------------------------------------------------
# Our Belief  (about-us.php, below .logos-grid)

  The blush panel and card treatment are taken from .jt-values / .jt-vcard
  in join-team.css. That file is not enqueued on this template, so the rules
  are restated here under their own `belief-` namespace rather than shared —
  nothing here can reach the Join the Team page, and nothing there reaches
  this section.
--------------------------------------------------------------*/
.belief {
	--belief-panel:       #ffedec;   /* the same blush as .jt-values */
	--belief-radius:      26px;
	--belief-card-radius: 18px;

	padding: clamp( 40px, 5vw, 70px ) 0;
	font-family: var( --yd-font );
}

/* Panel and two-column split on one element — no extra wrapper needed. */
.belief__layout {
	display: grid;
	grid-template-columns: minmax( 0, 0.82fr ) minmax( 0, 1.18fr );
	gap: clamp( 28px, 3.4vw, 56px );
	align-items: start;
	padding: clamp( 40px, 5vw, 78px ) clamp( 24px, 3.4vw, 60px );
	border-radius: var( --belief-radius );
	background: var( --belief-panel );
}


/* --- Left column --- */

.belief__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	color: var( --yd-primary );
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

/* The dash in the reference, drawn rather than typed, so the label stays
   clean for translation. */
.belief__eyebrow::before {
	content: "";
	width: 16px;
	height: 2px;
	background: currentColor;
}

.belief__title {
	margin: 0;
	color: var( --yd-heading );
	font-size: clamp( 30px, 3.2vw, 44px );
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.belief__accent {
	display: block;
	color: var( --yd-primary );
}

.belief__text {
	margin: 20px 0 0;
	max-width: 46ch;
	color: var( --yd-body );
	font-size: 15px;
	line-height: 1.7;
}

.belief__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 14px 27px;
	border-radius: 100px;
	background: var( --yd-primary );
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.belief__cta:hover,
.belief__cta:focus-visible {
	background: var( --yd-primary-dark );
	color: #fff;
	transform: translateY( -2px );
}

.belief__cta:focus-visible {
	outline: 2px solid var( --yd-primary );
	outline-offset: 3px;
}

.belief__cta-arrow {
	transition: transform 0.25s ease;
}

.belief__cta:hover .belief__cta-arrow {
	transform: translateX( 3px );
}


/* --- Cards --- */

.belief__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	counter-reset: belief-card;
	min-width: 0;
}

.belief-card {
	/* Overridden per tone below; red is the fallback. */
	--belief-fg: var( --yd-primary );
	--belief-bg: rgba( 255, 57, 81, 0.10 );

	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px 24px 26px;
	counter-increment: belief-card;
	border: 1px solid var( --yd-line );
	border-radius: var( --belief-card-radius );
	background: #fff;
	transition:
		transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.35s ease,
		border-color 0.3s ease;
}

.belief-card:hover {
	transform: translateY( -4px );
	border-color: transparent;
	box-shadow: 0 16px 34px rgba( 20, 20, 43, 0.10 );
}

/* First card spans the full width of the card column. */
.belief-card--wide {
	grid-column: 1 / -1;
}

.belief-card--red    { --belief-fg: var( --yd-primary ); --belief-bg: rgba( 255, 57, 81, 0.10 ); }
.belief-card--blue   { --belief-fg: #3b6ef0;             --belief-bg: rgba( 59, 110, 240, 0.10 ); }
.belief-card--purple { --belief-fg: #8b2fc9;             --belief-bg: rgba( 139, 47, 201, 0.10 ); }

.belief-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

/* Generated, so adding or reordering a card cannot leave the numbering wrong. */
.belief-card__num::before {
	content: counter( belief-card, decimal-leading-zero );
}

.belief-card__num {
	display: grid;
	place-items: center;
	min-width: 34px;
	height: 30px;
	padding: 0 9px;
	border-radius: 9px;
	background: var( --belief-bg );
	color: var( --belief-fg );
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.belief-card__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var( --belief-fg );
}

.belief-card__icon svg {
	width: 100%;
	height: 100%;
}

.belief-card__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	width: 30px;
	height: 30px;
	border: 1px solid var( --yd-line );
	border-radius: 50%;
	color: var( --yd-body );
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.belief-card__mark svg {
	width: 15px;
	height: 15px;
}

.belief-card:hover .belief-card__mark {
	transform: translate( 2px, -2px );
	border-color: var( --belief-fg );
	background: var( --belief-fg );
	color: #fff;
}

.belief-card__title {
	margin: 0 0 10px;
	color: var( --yd-heading );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.belief-card__text {
	margin: 0;
	color: var( --yd-body );
	font-size: 14.5px;
	line-height: 1.7;
}
.page.page-id-157 .yt-band--cream{
	background-color: #fff;
}


/* --- Responsive --- */

@media ( max-width: 1024px ) {
	.belief__layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.belief__text {
		max-width: none;
	}
}

@media ( max-width: 640px ) {
	.belief__layout {
		padding: 30px 20px 32px;
		border-radius: 20px;
	}

	.belief__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* One column, so the span would be a no-op that breaks the flow. */
	.belief-card--wide {
		grid-column: auto;
	}

	.belief-card:hover {
		transform: none;
	}
}


/*--------------------------------------------------------------
# Our Evolution — company timeline  (about-us.php, page foot)

  A horizontal rail of year cards. Scrolling is native; js/about-timeline.js
  adds arrow paging and hides the nav while everything already fits.

  Each item sets one --evo-fg, and the dot, stem, card border, year, title
  underline, icon badge and skyline all read from it — so extra entries need no
  new CSS beyond another nth-child step if a fifth hue is ever wanted.

  Namespaced `evo-`; nothing here can reach another component.
--------------------------------------------------------------*/
.evo {
	--evo-band: #fbfbfd;
	--evo-gap:  22px;
	--evo-dot:  24px;   /* rail dot: full ring diameter */
	--evo-rail: 82px;   /* headroom above the cards for the dot + stem */
	--evo-bleed: 4px;   /* small top pad; the ring no longer overflows upward */

	/* Skyline silhouette, tinted per card via --evo-fg. */
	--evo-skyline: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 78' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 78V56h10V44h8v12h10V34h12v22h8V46h14v-9h6v9h10v19h10V40h13v25h9V52h12v13h8V30h7v35h11V44h13v21h9V50h12v15h9V36h8v29h11V54h13v11h8V42h12v23h9V58h11v7h10V46h12v19h9V52h13v13h8V38h7v27h12V56h10v22z'/%3E%3C/svg%3E" );

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp( 56px, 7vw, 96px ) 0 clamp( 56px, 6vw, 88px );
	background: var( --evo-band );
	font-family: var( --yd-font );
}

/* Dotted decoration, top-right. Same radial-gradient grid as .jt-values__decor,
   masked so it fades out instead of ending on a hard edge. */
.evo__decor {
	position: absolute;
	top: 40px;
	right: -40px;
	z-index: -1;
	width: 260px;
	height: 240px;
	pointer-events: none;
	background-image: radial-gradient( rgba( 20, 20, 43, 0.16 ) 1px, transparent 1.4px );
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient( circle at 70% 30%, #000 10%, transparent 70% );
	        mask-image: radial-gradient( circle at 70% 30%, #000 10%, transparent 70% );
}


/* --- Header --- */

.evo__head {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 0.86fr );
	gap: clamp( 24px, 4vw, 72px );
	align-items: start;
	margin-bottom: clamp( 12px, 1.6vw, 24px );
}

.evo__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	color: var( --yd-primary );
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.evo__eyebrow::before {
	content: "";
	width: 20px;
	height: 2px;
	background: currentColor;
}

.evo__title {
	margin: 0;
	color: var( --yd-heading );
	font-size: 52px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.025em;
}

/* Guarantees the two-line split at any width. */
.evo__title span {
	display: block;
}

.evo__title::after {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-top: 16px;
	border-radius: 3px;
	background: var( --yd-primary );
}

.evo__intro {
	margin: 0;
	padding-top: clamp( 0px, 1.6vw, 26px );
	max-width: 58ch;
	color: var( --yd-body );
	font-size: clamp( 15px, 1.05vw, 16px );
	line-height: 1.8;
}


/* --- Rail --- */

.evo__viewport {
	position: relative;
	margin-top: clamp( 20px, 2.4vw, 32px );
}

.evo__track {
	display: flex;
	gap: var( --evo-gap );
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* overflow-x:auto makes overflow-y compute to auto, so this box clips at its
	   padding edge. The top pad clears the dot's ring, the bottom the card shadow. */
	padding: var( --evo-bleed ) 2px 20px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.evo__track::-webkit-scrollbar {
	display: none;
}

.evo__track:focus-visible {
	outline: 2px solid var( --yd-primary );
	outline-offset: 4px;
	border-radius: 16px;
}

/* Four across; the headroom holds the dot and its stem. */
.evo-item {
	--evo-fg: var( --yd-primary );

	position: relative;
	flex: 0 0 calc( ( 100% - 3 * var( --evo-gap ) ) / 4 );
	min-width: 0;
	padding-top: var( --evo-rail );
	scroll-snap-align: start;
}

/* One rail segment per item, stretched half a gap each side so neighbouring
   segments meet and read as a single continuous line — and it scrolls with the
   cards, unlike an absolutely-positioned overlay would. */
.evo-item::before {
	content: "";
	position: absolute;
	top: calc( var( --evo-dot ) / 2 );
	left: calc( var( --evo-gap ) / -2 );
	right: calc( var( --evo-gap ) / -2 );
	height: 1px;
	background: rgba( 20, 20, 43, 0.14 );
}

.evo-item__dot {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	width: var( --evo-dot );
	height: var( --evo-dot );
	transform: translateX( -50% );
	border-radius: 50%;
	/* The ring is a real border over an opaque background, not a box-shadow.
	   A background always paints over the rail line behind it, so the line can
	   never show through the gap the way a stacked shadow can. */
	border: 3px solid var( --evo-fg );
	background: var( --evo-band );
}

/* Inner dot, sitting in the ring's gap. */
.evo-item__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var( --evo-fg );
}

/* Dashed drop from the dot to the card, ending in a small ring that sits on
   the card's coloured top border. */
.evo-item__stem {
	position: absolute;
	top: var( --evo-dot );
	left: 50%;
	width: 0;
	height: calc( var( --evo-rail ) - var( --evo-dot ) - 4px );
	transform: translateX( -50% );
	border-left: 1px dashed var( --evo-fg );
	opacity: 0.6;
}

.evo-item__stem::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	transform: translateX( -50% );
	border: 1.5px solid var( --evo-fg );
	border-radius: 50%;
	background: #fff;
}

/* Cycling palette — one variable per item drives everything coloured inside it. */
.evo-item:nth-child( 4n + 1 ) { --evo-fg: var( --yd-primary ); }
.evo-item:nth-child( 4n + 2 ) { --evo-fg: #7c3aed; }
.evo-item:nth-child( 4n + 3 ) { --evo-fg: #2563eb; }
.evo-item:nth-child( 4n )     { --evo-fg: #f5a524; }


/* --- Card --- */

.evo-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 330px;
	padding: 26px 24px 30px;
	border-top: 3px solid var( --evo-fg );
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba( 20, 20, 43, 0.07 );
	transition: transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.35s ease;
}

.evo-card:hover {
	transform: translateY( -5px );
	box-shadow: 0 20px 44px rgba( 20, 20, 43, 0.13 );
}

/* City skyline along the card foot. An SVG mask filled with the card's own
   colour, so it tints itself and costs no image request. */
.evo-card::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 76px;
	opacity: 0.2;
	pointer-events: none;
	background: var( --evo-fg );
	-webkit-mask-image: var( --evo-skyline );
	        mask-image: var( --evo-skyline );
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

/* Content sits above the skyline. */
.evo-card > * {
	position: relative;
	z-index: 1;
}

.evo-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.evo-card__year {
	margin: 0;
	color: var( --evo-fg );
	font-size: clamp( 26px, 2.2vw, 32px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.evo-card__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* Tint derived from the card colour, so there is no second variable to keep
	   in step. Browsers without color-mix fall back to the flat tint below. */
	background: rgba( 20, 20, 43, 0.05 );
	background: color-mix( in srgb, var( --evo-fg ) 13%, #fff );
	color: var( --evo-fg );
}

.evo-card__icon svg,
.evo-card__icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.evo-card__title {
	margin: 0 0 12px;
	color: var( --yd-heading );
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.evo-card__title::after {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin-top: 12px;
	border-radius: 3px;
	background: var( --evo-fg );
}

.evo-card__text {
	margin: 0;
	color: var( --yd-body );
	font-size: 14.5px;
	line-height: 1.75;
}


/* --- Arrows --- */

.evo__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: clamp( 14px, 1.8vw, 24px );
}

/* Set by js/about-timeline.js when the rail has nothing to scroll — visible
   arrows that cannot do anything read as broken. */
.evo__nav.is-idle {
	display: none;
}

.evo-nav {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var( --yd-heading );
	box-shadow: 0 6px 18px rgba( 20, 20, 43, 0.12 );
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.evo-nav svg {
	width: 21px;
	height: 21px;
}

.evo-nav:hover:not( :disabled ),
.evo-nav:focus-visible:not( :disabled ) {
	transform: translateY( -2px );
	background: var( --yd-primary );
	color: #fff;
}

.evo-nav:focus-visible {
	outline: 2px solid var( --yd-primary );
	outline-offset: 3px;
}

.evo-nav:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}


/* --- Responsive --- */

@media ( max-width: 1200px ) {
	.evo-item {
		flex-basis: calc( ( 100% - 2 * var( --evo-gap ) ) / 3 );
	}
}

@media ( max-width: 900px ) {
	.evo__head {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}

	.evo__title {
		font-size: 40px;
	}

	.evo__intro {
		padding-top: 0;
	}

	.evo-item {
		flex-basis: calc( ( 100% - var( --evo-gap ) ) / 2 );
	}
}

@media ( max-width: 640px ) {
	.evo {
		--evo-rail: 74px;
	}

	.evo__title {
		font-size: 32px;
	}

	.evo-item {
		flex-basis: min( 84%, 300px );
	}

	.evo-card {
		min-height: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.evo__track {
		scroll-behavior: auto;
	}

	.evo-card:hover,
	.evo-nav:hover:not( :disabled ) {
		transform: none;
	}
}