/*
 * Styles for sections this build adds, kept out of rtl.css.
 *
 * rtl.css is the original site's own stylesheet and is matched against it, so
 * additions live here and load after it. Anything in this file is a deliberate
 * departure from the original and can be read as such.
 */

/* ── The figures band ────────────────────────────────────────────────────── */

.ps-counters { padding-top: 54px; padding-bottom: 54px; }
.ps-counters-title { margin-bottom: 0; }

.ps-counters-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-counter {
	flex: 1 1 19%;
	min-width: 150px;
	padding: 4px 18px;
	text-align: center;
	/* A hairline between cells rather than a border on each, so the first and
	   last do not carry a stray edge. Logical property: this is an RTL site. */
	border-inline-start: 1px solid rgba(247, 169, 46, .35);
}
.ps-counter:first-child { border-inline-start: 0; }

.ps-counter-num,
.ps-counter-suffix {
	display: inline-block;
	font-family: Heebo, arial, sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #f7a92e;
	font-variant-numeric: tabular-nums;
}

.ps-counter-label {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
}

/* The count-up is decoration. Without it the number is simply already there. */
@media (prefers-reduced-motion: reduce) {
	.ps-counter-num { transition: none; }
}

@media (max-width: 900px) {
	.ps-counter { flex: 1 1 44%; }
	.ps-counter:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 480px) {
	.ps-counter { flex: 1 1 100%; border-inline-start: 0; }
}

/* ── Service cards with a photograph instead of an icon ──────────────────── */

/*
 * The card turns into a column when it carries a photo: the image is the top
 * band and the text sits beneath it. The icon treatment put a small badge
 * beside the text, which is the right shape for a glyph and the wrong shape
 * for a photograph.
 */
.box-generic.ps-box-has-photo {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ps-box-photo {
	position: relative;
	width: 100%;
	/* A fixed ratio so a mixed set of source images still lines up as a row. */
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
	background: #f2f3f6;
}

.ps-box-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Faces and equipment sit above centre in most of these frames. */
	object-position: center 40%;
	transition: transform .5s ease;
}

a.box-generic.ps-box-has-photo:hover .ps-box-photo img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.ps-box-photo img,
	a.box-generic.ps-box-has-photo:hover .ps-box-photo img { transition: none; transform: none; }
}

/* The amber corner mark belongs to the card, not the image, so it stays put. */
.box-generic.ps-box-has-photo .box-generic-text { padding: 20px 22px 22px; }

@supports not (aspect-ratio: 16 / 9) {
	.ps-box-photo { height: 0; padding-bottom: 56.25%; }
	.ps-box-photo img { position: absolute; inset: 0; }
}

/* ── Small photograph in the icon's place ────────────────────────────────── */

/*
 * Used where a section has photographs for only some of its boxes. It occupies
 * the icon badge's footprint, so a photo box and an icon box sit in the same
 * row without the heights disagreeing.
 */
.ps-box-thumb {
	overflow: hidden;
	/*
	 * Circular, not rounded-square. Two of the source images are themselves
	 * circular crops on white, so a square frame showed their corners while the
	 * rest were full-bleed - six thumbnails in two different shapes. A circle
	 * fits those two exactly and gives the others the same silhouette.
	 */
	border-radius: 50%;
	background: #f2f3f6;
}

.ps-box-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/*
 * A certification mark rather than a photograph. Same circle, but the artwork
 * is contained inside it on white: these marks carry their own margins and a
 * cover crop would cut their edges, which on a trademark is wrong as well as
 * ugly.
 */
.ps-box-thumb--logo {
	background: #fff;
	border: 1px solid #ececec;
}

.ps-box-thumb--logo img {
	object-fit: contain;
	object-position: center;
	padding: 9%;
}

/* Dropdown hover intent. The class is set by prosafe-custom.js and holds the
 * menu open while the pointer travels toward it, which a :hover rule cannot do
 * because the path crosses the neighbouring top-level items. The native :hover
 * rule in rtl.css is left in place, so the menu still works with JS disabled. */
.top-menu > ul > li.menu-item-has-children.ps-menu-open > ul {
	display: block;
}

/* Team card email. The card clips overflow and the longest addresses ran
 * past the text column; smaller, left-to-right, and allowed to break at the
 * <wbr> before the @ (or anywhere, as a last resort) instead of being cut. */
.team-box .team-email {
	display: inline-block;
	max-width: 100%;
	font-size: 0.8em;
	direction: ltr;
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}