/*
 * proof/service-tiles, after designwithblink.com's services row, with the
 * shared centred head (proof_section_head, pf-head--home). The
 * row is full bleed (pulls out by the gutter); tiles 524 square, 6 apart,
 * standing still: the row scrolls sideways by mouse drag (proof.js, with
 * the lime "Drag" bubble as on the video carousel) or by swipe, without
 * snapping. A light dark overlay and a touch less saturation calm the photos
 * so the white type reads. Desktop: the hovered tile shows its
 * sub-services as tags that build up from the left; touch / below 1025:
 * always visible. Padded top and bottom alike.
 */

.pf-block.pf-stilesec {
	padding-top: calc(160 * var(--pf-u));
	padding-bottom: calc(160 * var(--pf-u));
	background: #fff;
}
/* Row: full bleed, scrolls sideways freely: it stays exactly where a drag or swipe leaves it. */
.pf-block .pf-stile-row {
	margin: calc(88 * var(--pf-u)) calc(-1 * var(--pf-gutter)) 0;
	padding-bottom: calc(8 * var(--pf-u));
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: none; /* the "Drag" bubble (proof.js) stands in */
	touch-action: pan-x pan-y;
	user-select: none;
}
.pf-block .pf-stile-row::-webkit-scrollbar {
	display: none;
}
.pf-block .pf-stile-track {
	display: flex;
	gap: calc(16 * var(--pf-u));
	width: max-content;
	padding: 0 var(--pf-gutter);
}
/* "Drag" cursor, as on the video carousel (position: fixed, moved by proof.js). */
.pf-block .pf-stile-drag {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	width: calc(106 * var(--pf-u));
	height: calc(106 * var(--pf-u));
	min-width: 72px;
	min-height: 72px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #f4ffe0 0%, #d6fb8e 45%, #bdf94a 100%);
	box-shadow: 0 0 0 calc(5 * var(--pf-u)) rgba(189, 249, 74, 0.45);
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(20 * var(--pf-t));
	color: #000;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6) rotate(-6deg);
	transition: opacity 0.2s, transform 0.2s;
}
.pf-block .pf-stile-drag.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1) rotate(-6deg);
}
.pf-block .pf-stile-drag.is-down {
	transform: translate(-50%, -50%) scale(0.88) rotate(-6deg);
}
/* reset.css paints links #c36 and underlines on hover: everything explicit. */
.pf-block .pf-stile,
.pf-block .pf-stile:hover,
.pf-block .pf-stile:focus {
	position: relative;
	display: block;
	flex: 0 0 calc(524 * var(--pf-u));
	aspect-ratio: 1;
	overflow: hidden;
	background: #e9e8e6;
	color: #fff;
	text-decoration: none;
	-webkit-user-drag: none;
}
.pf-block .pf-stile:focus-visible {
	outline: 3px solid var(--pf-lime);
	outline-offset: -3px;
}
.pf-block .pf-stile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85);
	pointer-events: none;
	-webkit-user-drag: none;
	transition: transform 0.6s ease;
}
.pf-block .pf-stile:hover .pf-stile-img {
	transform: scale(1.04);
}
/* Light overlay over the whole photo, darker gradient under the type. */
.pf-block .pf-stile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 17, 20, 0.2);
}
.pf-block .pf-stile::after {
	content: "";
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.pf-block .pf-stile-cap {
	position: absolute;
	left: calc(36 * var(--pf-u));
	right: calc(36 * var(--pf-u));
	bottom: calc(34 * var(--pf-u));
	z-index: 2;
	display: block;
}
.pf-block .pf-stile-title {
	display: block;
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(34 * var(--pf-t));
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #fff;
}
.pf-block .pf-stile-items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, margin 0.4s ease;
}
.pf-block .pf-stile-item {
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	font-family: var(--pf-sans);
	font-size: calc(13 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	transition-delay: calc(var(--pf-n, 0) * 90ms);
}
.pf-block .pf-stile:hover .pf-stile-items,
.pf-block .pf-stile:focus-visible .pf-stile-items {
	max-height: 140px;
	margin-top: 14px;
}
.pf-block .pf-stile:hover .pf-stile-item,
.pf-block .pf-stile:focus-visible .pf-stile-item {
	opacity: 1;
	transform: none;
}

/* Touch devices and anything below 1025: normal cursor, tags always on. */
@media (hover: none), (max-width: 1024px) {
	.pf-block .pf-stile-row {
		cursor: grab;
	}
	.pf-block .pf-stile-drag {
		display: none;
	}
	/* The hover / focus reveal must never apply here: a touch gives the
	   tile :hover / :focus / :active for a moment when the swipe starts,
	   which re-applied the desktop max-height and margin and made the
	   tags jump. Same selectors, same specificity, inside this query. */
	.pf-block .pf-stile-items,
	.pf-block .pf-stile:hover .pf-stile-items,
	.pf-block .pf-stile:focus .pf-stile-items,
	.pf-block .pf-stile:focus-visible .pf-stile-items,
	.pf-block .pf-stile:active .pf-stile-items {
		max-height: none;
		margin-top: 12px;
		overflow: visible;
		transition: none;
	}
	.pf-block .pf-stile-item,
	.pf-block .pf-stile:hover .pf-stile-item,
	.pf-block .pf-stile:focus-visible .pf-stile-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.pf-block .pf-stile:hover .pf-stile-img,
	.pf-block .pf-stile:hover .pf-svc-video {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.pf-block.pf-stilesec {
		padding-top: 96px;
		padding-bottom: 96px;
	}
	.pf-block .pf-stile-row {
		margin-top: 56px;
	}
	.pf-block .pf-stile-track {
		gap: 12px;
	}
	.pf-block .pf-stile,
	.pf-block .pf-stile:hover,
	.pf-block .pf-stile:focus {
		flex-basis: 60vw;
	}
	.pf-block .pf-stile-cap {
		left: 22px;
		right: 22px;
		bottom: 20px;
	}
	.pf-block .pf-stile-title {
		font-size: 28px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-stile,
	.pf-block .pf-stile:hover,
	.pf-block .pf-stile:focus {
		flex-basis: 82vw;
	}
	.pf-block .pf-stile-title {
		font-size: 26px;
	}
	.pf-block .pf-stile-item {
		padding: 5px 10px;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Illustrations instead of photos (2026-10-14): the artboard motifs are
 * 1776 x 1380, so the tiles take that ratio and lose the dulling overlay
 * and desaturation; only the gradient under the caption stays. Tiles
 * with a video (SEO & GEO) layer the silent intro/loop over the still.
 * ------------------------------------------------------------------ */
.pf-block .pf-stile,
.pf-block .pf-stile:hover,
.pf-block .pf-stile:focus {
	aspect-ratio: 1776 / 1380;
	background: #0b50c8;
}
.pf-block .pf-stile-img {
	filter: none;
}
.pf-block .pf-stile::before {
	background: none;
}
.pf-block .pf-stile::after {
	inset: 55% 0 0;
	background: linear-gradient(to bottom, rgba(6, 37, 88, 0) 0%, rgba(6, 37, 88, 0.55) 100%);
}
.pf-block .pf-stile .pf-svc-video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: transform 0.6s ease;
}
.pf-block .pf-stile:hover .pf-svc-video {
	transform: scale(1.04);
}
.pf-block .pf-stile.is-video .pf-svc-video--intro,
.pf-block .pf-stile.is-video.is-loop .pf-svc-video--loop {
	opacity: 1;
}
.pf-block .pf-stile.is-video.is-loop .pf-svc-video--intro {
	opacity: 0;
}
/* Layers: image 0, video 1, gradient 2, caption 3. */
.pf-block .pf-stile::after {
	z-index: 2;
}
.pf-block .pf-stile-cap {
	z-index: 3;
}

/* Readable captions on the bright illustrations (2026-10-14): a deeper
   navy gradient that starts higher, a soft shadow behind the title and
   solid chips for the sub-services. */
.pf-block .pf-stile::after {
	inset: 35% 0 0;
	background: linear-gradient(to bottom, rgba(6, 37, 88, 0) 0%, rgba(6, 37, 88, 0.45) 45%, rgba(6, 37, 88, 0.85) 100%);
}
.pf-block .pf-stile-title {
	font-weight: 600;
}
.pf-block .pf-stile-item {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(6, 37, 88, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-weight: 500;
}