/* ==========================================================================
   widgets.css — every QB Elementor widget.
   Loaded through get_style_depends() and on the CPT views.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.shp-hero{
	position:relative;
	display:flex;
	align-items:center;
	min-block-size:92vh;
	padding-block:clamp(40px, 5vw, 70px) clamp(50px, 7vw, 100px);
	overflow:hidden;
	isolation:isolate;
	--shp-hero-veil:.62;
}
.shp-hero__bg{
	position:absolute;
	inset:-6% 0;
	z-index:-3;
	background-size:cover;
	background-position:center;
	transform:scale(1.06);
}
.shp-hero__veil{
	position:absolute;
	inset:0;
	z-index:-2;
	background:
		linear-gradient(to top, var(--shp-bg) 1%, rgba(var(--shp-bg-rgb), var(--shp-hero-veil)) 60%, rgba(var(--shp-bg-rgb), .4)),
		linear-gradient(to right, rgba(var(--shp-bg-rgb), .94) 8%, transparent 72%);
}
.shp-hero__glow{
	position:absolute;
	inset-block-start:-25%;
	inset-inline-end:-12%;
	inline-size:62%;
	block-size:130%;
	z-index:-1;
	background:radial-gradient(circle, rgba(var(--shp-primary-rgb), .2), transparent 62%);
	pointer-events:none;
	animation:shp-breathe 9s ease-in-out infinite;
}
@keyframes shp-breathe{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.07);}}

.shp-hero__inner{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
	align-items:center;
	gap:clamp(26px, 4vw, 64px);
}
.shp-hero__content{max-inline-size:min(560px, 46vw);}
.shp-hero__title{margin-block:18px 0;font-size:clamp(2.4rem, 1.1rem + 3.9vw, 4.4rem);}
.shp-hero__text{margin-block-start:22px;font-size:1rem;max-inline-size:520px;}
.shp-hero__actions{margin-block-start:34px;display:flex;flex-wrap:wrap;gap:14px;}

.shp-hero__media{position:relative;}
@media (min-width:1100px){
	.shp-hero__media--bleed{margin-inline-end:calc((100cqw - var(--shp-container)) / -2);}
}
.shp-hero__media img{
	inline-size:100%;
	object-fit:contain;
	filter:drop-shadow(0 34px 70px rgba(0,0,0,.65));
	animation:shp-float 7s ease-in-out infinite;
}
@keyframes shp-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.shp-hero__reflect{
	position:absolute;
	inset-inline:6%;
	inset-block-end:-4%;
	block-size:16%;
	background:radial-gradient(ellipse at center, rgba(var(--shp-primary-rgb), .3), transparent 70%);
	filter:blur(18px);
	pointer-events:none;
}
.shp-hero__scroll{
	position:absolute;
	inset-block-end:26px;
	inset-inline-start:50%;
	transform:translateX(-50%);
	inline-size:24px;
	block-size:40px;
	border-radius:14px;
	border:1px solid rgba(var(--shp-ink-rgb), .22);
	display:grid;
	justify-items:center;
	padding-block-start:8px;
}
.shp-hero__scroll span{
	inline-size:3px;
	block-size:8px;
	border-radius:3px;
	background:var(--shp-primary);
	animation:shp-scroll 1.8s var(--shp-ease) infinite;
}
@keyframes shp-scroll{0%{opacity:0;transform:translateY(-4px);}40%{opacity:1;}100%{opacity:0;transform:translateY(14px);}}

/* Clear the floating header. */
.shp-header-over .shp-hero{padding-block-start:calc(var(--shp-header-h) + 40px);}

@media (max-width:900px){
	.shp-hero{min-block-size:auto;padding-block:40px 60px;}
	.shp-header-over .shp-hero{padding-block-start:calc(var(--shp-header-h) + 20px);}
	.shp-hero__inner{grid-template-columns:minmax(0,1fr);}
	.shp-hero__media{order:-1;max-inline-size:520px;margin-inline:auto;}
	.shp-hero__scroll{display:none;}
}

/* ==========================================================================
   About Story
   ========================================================================== */
.shp-story{padding-block:var(--shp-space-section);}
.shp-story__grid{
	display:grid;
	grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
	align-items:center;
	gap:clamp(28px, 5vw, 76px);
}
.shp-story--media-end .shp-story__figure{order:2;}
.shp-story__figure{position:relative;margin:0;}
.shp-story__figure.is-framed{
	padding:16px;
	border-radius:calc(var(--shp-radius) + 10px);
	background:linear-gradient(160deg, rgba(var(--shp-ink-rgb), .06), rgba(var(--shp-ink-rgb), .01));
	border:var(--shp-hair);
	box-shadow:var(--shp-shadow-m);
}
.shp-story__media{
	display:block;
	overflow:hidden;
	border-radius:var(--shp-radius);
	aspect-ratio:1 / 1;
}
.shp-story__media img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.2s var(--shp-ease);}
.shp-story__figure:hover .shp-story__media img{transform:scale(1.05);}
.shp-story__ring{
	position:absolute;
	inset:-14px;
	border-radius:calc(var(--shp-radius) + 20px);
	border:1px solid rgba(var(--shp-primary-rgb), .18);
	pointer-events:none;
	opacity:0;
	transition:opacity .5s var(--shp-ease), inset .5s var(--shp-ease);
}
.shp-story__figure:hover .shp-story__ring{opacity:1;inset:-22px;}
@media (max-width:900px){
	.shp-story__ring,
	.shp-story__figure:hover .shp-story__ring{inset:-8px;}
}
.shp-story__content .shp-secHead{margin-block-end:0;}
.shp-story__btn{margin-block-start:30px;}

@media (max-width:900px){
	.shp-story__grid{grid-template-columns:minmax(0,1fr);}
	.shp-story--media-end .shp-story__figure{order:0;}
}

/* ==========================================================================
   Stats
   ========================================================================== */
.shp-stats{position:relative;}
.shp-stats--band{background:var(--shp-primary);padding-block:clamp(30px, 4vw, 48px);}
.shp-stats--cards{padding-block:clamp(30px, 4vw, 52px);}
.shp-stats--plain{padding-block:clamp(26px, 3vw, 44px);}
.shp-stats__grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:20px;}
.shp-stats__item{text-align:center;position:relative;padding-inline:10px;}
.shp-stats--divided .shp-stats__item + .shp-stats__item::before{
	content:"";
	position:absolute;
	inset-inline-start:0;
	inset-block:14%;
	inline-size:1px;
	background:rgba(var(--shp-ink-rgb), .22);
}
.shp-stats--cards .shp-stats__item{
	padding:26px 18px;
	border-radius:var(--shp-radius);
	background:linear-gradient(160deg, rgba(var(--shp-ink-rgb), .05), rgba(var(--shp-ink-rgb), .015));
	border:var(--shp-hair);
	transition:transform .5s var(--shp-ease), border-color .4s ease, box-shadow .5s var(--shp-ease);
}
.shp-stats--cards .shp-stats__item:hover{
	transform:translateY(-6px);
	border-color:rgba(var(--shp-primary-rgb), .4);
	box-shadow:0 20px 44px rgba(var(--shp-primary-rgb), .16);
}
.shp-stats--cards .shp-stats__item + .shp-stats__item::before{display:none;}

.shp-stats__value{
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:2px;
	font-family:var(--shp-font-h);
	font-size:clamp(2.1rem, 1.2rem + 2.6vw, 3.2rem);
	line-height:1;
	color:#04121C;
	font-variant-numeric:tabular-nums;
}
.shp-stats__suffix{font-style:normal;}
.shp-stats__label{
	display:block;
	margin-block-start:10px;
	font-family:var(--shp-font-m);
	font-size:.72rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(4,18,28,.72);
}
.shp-stats--cards .shp-stats__value,
.shp-stats--plain .shp-stats__value{color:var(--shp-ink);}
.shp-stats--cards .shp-stats__value{background:var(--shp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.shp-stats--cards .shp-stats__label,
.shp-stats--plain .shp-stats__label{color:var(--shp-muted);}

@media (max-width:700px){
	.shp-stats__grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:26px 12px;}
	.shp-stats--divided .shp-stats__item:nth-child(odd)::before{display:none;}
}

/* ==========================================================================
   Categories
   ========================================================================== */
.shp-cats{padding-block:var(--shp-space-section);}
.shp-cats__grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(18px, 2.4vw, 32px);}
.shp-cat{
	position:relative;
	display:flex;
	flex-direction:column;
	border-radius:var(--shp-radius);
	overflow:hidden;
	background:linear-gradient(170deg, var(--shp-card), rgba(var(--shp-dark-rgb), .96));
	border:var(--shp-hair);
	box-shadow:var(--shp-shadow-s);
	transition:transform .55s var(--shp-ease), box-shadow .55s var(--shp-ease), border-color .45s ease;
}
.shp-cat:hover{
	border-color:rgba(var(--shp-primary-rgb), .4);
	box-shadow:var(--shp-shadow-m), 0 0 46px rgba(var(--shp-primary-rgb), .18);
}
.shp-cat__link{position:absolute;inset:0;z-index:3;}
.shp-cat__media{
	position:relative;
	aspect-ratio:16 / 11;
	background:#fff;
	overflow:hidden;
	display:grid;
	place-items:center;
}
.shp-cat__media img{inline-size:100%;block-size:100%;object-fit:contain;padding:18px;transition:transform 1s var(--shp-ease);}
.shp-cat:hover .shp-cat__media img{transform:scale(1.06);}
.shp-cat__ph{color:rgba(0,0,0,.14);}
.shp-cat__badge{
	position:absolute;
	inset-block-start:12px;
	inset-inline-start:12px;
	z-index:2;
	padding:6px 14px;
	border-radius:8px;
	background:var(--shp-primary);
	color:#04121C;
	font-family:var(--shp-font-m);
	font-size:.66rem;
	letter-spacing:.1em;
	box-shadow:0 8px 20px rgba(var(--shp-primary-rgb), .34);
}
.shp-cat__body{padding:24px 26px 28px;display:grid;gap:12px;}
.shp-cat__title{font-size:1.35rem;color:var(--shp-primary);transition:color .35s ease;}
.shp-cat:hover .shp-cat__title{color:var(--shp-ink);}
.shp-cat__more{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--shp-font-m);
	font-size:.72rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--shp-body);
}
.shp-cat__more .shp-icon{transition:transform .4s var(--shp-ease);}
.shp-cat:hover .shp-cat__more{color:var(--shp-primary);}
.shp-cat:hover .shp-cat__more .shp-icon{transform:translateX(5px);}

/* ==========================================================================
   Brand showcase
   ========================================================================== */
.shp-showcase{position:relative;padding-block:clamp(50px, 7vw, 110px);text-align:center;overflow:hidden;--shp-word:rgba(var(--shp-primary-rgb), .35);}
.shp-showcase__glow{
	position:absolute;
	inset-block-start:38%;
	inset-inline-start:50%;
	transform:translate(-50%, -50%);
	inline-size:min(1100px, 96vw);
	block-size:min(700px, 70vw);
	background:radial-gradient(ellipse, rgba(var(--shp-primary-rgb), .18), transparent 65%);
	pointer-events:none;
}
.shp-showcase__word{
	position:absolute;
	inset-block-start:24%;
	inset-inline:0;
	text-align:center;
	font-family:var(--shp-font-h);
	font-size:min(13vw, 210px);
	line-height:1;
	letter-spacing:.06em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:clip;
	pointer-events:none;
	user-select:none;
}
.shp-showcase__word--outline{
	color:transparent;
	-webkit-text-stroke:2px var(--shp-word);
	text-stroke:2px var(--shp-word);
}
.shp-showcase__word--solid{color:var(--shp-word);opacity:.5;}
.shp-showcase__word--glow{
	color:transparent;
	-webkit-text-stroke:2px var(--shp-word);
	text-shadow:0 0 34px rgba(var(--shp-primary-rgb), .55);
}
.shp-showcase__media{position:relative;margin:0;z-index:1;}
.shp-showcase__media img{
	inline-size:min(100%, 1400px);
	margin-inline:auto;
	object-fit:contain;
	filter:drop-shadow(0 40px 80px rgba(0,0,0,.7));
}
/* Photographic plates keep a visible rectangle against the page — fade it out. */
.shp-showcase--blend .shp-showcase__media img{
	-webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
		linear-gradient(to bottom, transparent, #000 6%, #000 88%, transparent);
	mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
		linear-gradient(to bottom, transparent, #000 6%, #000 88%, transparent);
	-webkit-mask-composite:source-in;
	mask-composite:intersect;
}
.shp-showcase__caption{
	position:relative;
	margin-block-start:22px;
	font-family:var(--shp-font-m);
	font-size:.76rem;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--shp-muted);
}

/* ==========================================================================
   Icon boxes
   ========================================================================== */
.shp-boxes{padding-block:var(--shp-space-section);}
.shp-boxes__grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(16px, 2vw, 26px);}
.shp-box{
	position:relative;
	display:grid;
	gap:14px;
	align-content:start;
	padding:30px 28px 34px;
	border-radius:var(--shp-radius);
	overflow:hidden;
	transition:transform .55s var(--shp-ease), border-color .4s ease, box-shadow .5s var(--shp-ease), background .5s ease;
}
.shp-boxes--card .shp-box{
	background:linear-gradient(170deg, rgba(var(--shp-ink-rgb), .045), rgba(var(--shp-ink-rgb), .012));
	border:var(--shp-hair);
}
.shp-boxes--bordered .shp-box{border:1px solid rgba(var(--shp-ink-rgb), .12);}
.shp-boxes--bare .shp-box{padding-inline:0;}
.shp-box:hover{transform:translateY(-8px);border-color:rgba(var(--shp-primary-rgb), .4);box-shadow:0 22px 50px rgba(var(--shp-dark-rgb), .5);}
.shp-box__link{position:absolute;inset:0;z-index:3;}
.shp-box__icon{
	display:grid;
	place-items:center;
	inline-size:48px;
	block-size:48px;
	border-radius:12px;
	color:var(--shp-primary);
	background:var(--shp-primary-soft);
	border:1px solid rgba(var(--shp-primary-rgb), .28);
	transition:transform .5s var(--shp-ease), background .4s ease, box-shadow .5s var(--shp-ease);
}
.shp-box:hover .shp-box__icon{
	transform:translateY(-3px) rotate(-6deg);
	background:var(--shp-primary);
	color:#04121C;
	box-shadow:0 12px 28px rgba(var(--shp-primary-rgb), .4);
}
.shp-box__num{
	position:absolute;
	inset-block-start:18px;
	inset-inline-end:22px;
	font-family:var(--shp-font-h);
	font-size:2.4rem;
	color:rgba(var(--shp-ink-rgb), .06);
	line-height:1;
}
.shp-box__title{font-size:1.1rem;letter-spacing:.04em;}
.shp-box__text{font-size:.93rem;color:var(--shp-muted);}
.shp-box__edge{
	position:absolute;
	inset-block-end:0;
	inset-inline-start:0;
	inline-size:0;
	block-size:2px;
	background:var(--shp-grad);
	transition:inline-size .6s var(--shp-ease);
}
.shp-box:hover .shp-box__edge{inline-size:100%;}

/* ==========================================================================
   Clients — a logo wall that behaves like a product showcase.

   · equal discs on a centred, balanced grid (never a ragged last row);
   · the hovered disc lifts, a gradient ring circles it and a light follows
     the pointer across the logo;
   · the others step back — dimmed, desaturated, slightly smaller — so the
     eye lands on one brand at a time;
   · the name rises from under the disc.
   ========================================================================== */
@property --shp-ring-a{syntax:"<angle>";initial-value:0deg;inherits:false;}

.shp-clients{
	padding-block:var(--shp-space-section);
	--shp-logo-size:128px;
	--shp-client-gap:clamp(22px, 3vw, 44px);
}

/* Balanced grid: every row centred, whatever the count. */
.shp-clients__row{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:calc(var(--shp-client-gap) + 12px) var(--shp-client-gap);
	max-inline-size:calc(var(--shp-logo-size) * 6 + var(--shp-client-gap) * 5 + 40px);
	margin-inline:auto;
	padding-block-end:34px;
}

.shp-client{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0;
	flex:0 0 auto;
	inline-size:var(--shp-logo-size);
	text-decoration:none;
	transition:opacity .5s var(--shp-ease), filter .5s var(--shp-ease), transform .6s var(--shp-ease);
}

.shp-client__disc{
	position:relative;
	display:grid;
	place-items:center;
	inline-size:var(--shp-logo-size);
	block-size:var(--shp-logo-size);
	border-radius:50%;
	isolation:isolate;
	background:radial-gradient(circle at 30% 25%, rgba(var(--shp-ink-rgb), .09), rgba(var(--shp-ink-rgb), .02) 70%);
	box-shadow:
		0 0 0 1px rgba(var(--shp-ink-rgb), .1),
		0 14px 34px rgba(var(--shp-dark-rgb), .55);
	transition:transform .7s var(--shp-ease), box-shadow .7s var(--shp-ease);
	--sx:50%;
	--sy:30%;
}

/*
 * The frame clips the circle with clip-path: a stylesheet reset on img
 * (Elementor zeroes border-radius and forces height:auto) cannot undo it, and
 * Safari keeps the curve while the logo scales.
 */
.shp-client__frame{
	position:absolute;
	inset:0;
	z-index:1;
	display:grid;
	place-items:center;
	border-radius:50%;
	overflow:hidden;
	clip-path:circle(50% at 50% 50%);
	isolation:isolate;
}
/* A hairline and a soft inner shade — logos made on different backgrounds
   end up looking like one set. */
.shp-client__frame::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	border-radius:50%;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.14),
		inset 0 -18px 30px rgba(0,0,0,.2),
		inset 0 10px 22px rgba(255,255,255,.05);
	pointer-events:none;
}

/* Specific enough to beat `.elementor img`, and every reset spelled out. */
.shp-client .shp-client__logo{
	position:absolute;
	inset:0;
	inline-size:100%;
	block-size:100%;
	width:100%;
	height:100%;
	max-inline-size:none;
	max-block-size:none;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	box-shadow:none;
	object-fit:cover;
	object-position:center;
	transition:transform .8s var(--shp-ease), filter .6s ease, opacity .45s ease;
}

/* Whole logo on a plate — chosen, or decided automatically for wide or
   transparent artwork. The plate turns dark for a light logo. */
.shp-client--contain .shp-client__frame,
.shp-client.is-contain .shp-client__frame{background:radial-gradient(circle at 34% 28%, #ffffff, #e6ecf2 80%);}
.shp-client.is-plate-dark .shp-client__frame{background:radial-gradient(circle at 34% 28%, #1c3a57, #081827 80%);}
.shp-client--contain .shp-client__logo,
.shp-client.is-contain .shp-client__logo{
	inset:18%;
	inline-size:64%;
	block-size:64%;
	width:64%;
	height:64%;
	object-fit:contain;
}

/* While the automatic mode decides, the logo waits unseen — no jump. */
html.js .shp-client--auto:not(.is-cover):not(.is-contain) .shp-client__logo{opacity:0;}

.shp-client__initials{
	position:relative;
	z-index:1;
	display:grid;
	place-items:center;
	inline-size:100%;
	block-size:100%;
	padding:14%;
	font-family:var(--shp-font-h);
	font-size:.92rem;
	line-height:1.15;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-align:center;
	color:var(--shp-ink);
}
.shp-client:not(:has(.shp-client__logo)) .shp-client__frame{
	background:radial-gradient(circle at 30% 25%, rgba(var(--shp-primary-rgb), .22), rgba(var(--shp-primary-rgb), .04) 72%);
}

/* The rotating gradient ring. */
.shp-client__ring{
	position:absolute;
	z-index:2;
	inset:-5px;
	border-radius:50%;
	padding:2px;
	background:conic-gradient(from var(--shp-ring-a), transparent 0deg, var(--shp-primary) 70deg, var(--shp-accent) 140deg, transparent 210deg, transparent 360deg);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude;
	opacity:0;
	transform:scale(.92);
	transition:opacity .5s ease, transform .7s var(--shp-ease);
	animation:shp-ring-spin 2.6s linear infinite;
	animation-play-state:paused;
	pointer-events:none;
}
@keyframes shp-ring-spin{to{--shp-ring-a:360deg;}}

/* The light that follows the pointer. */
.shp-client__spot{
	position:absolute;
	z-index:3;
	inset:0;
	border-radius:50%;
	background:radial-gradient(circle at var(--sx) var(--sy), rgba(255,255,255,.34), rgba(255,255,255,0) 46%);
	mix-blend-mode:soft-light;
	opacity:0;
	transition:opacity .45s ease;
	pointer-events:none;
}

.shp-client__name{
	position:absolute;
	inset-block-start:calc(100% + 12px);
	inset-inline:-40px;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:7px;
	font-family:var(--shp-font-m);
	font-size:.66rem;
	letter-spacing:.18em;
	text-transform:uppercase;
	white-space:nowrap;
	color:var(--shp-ink);
	opacity:0;
	transform:translateY(8px);
	transition:opacity .45s ease, transform .6s var(--shp-ease);
	pointer-events:none;
}
.shp-client__name::before{
	content:"";
	inline-size:5px;
	block-size:5px;
	border-radius:50%;
	background:var(--shp-primary);
	box-shadow:0 0 10px rgba(var(--shp-primary-rgb), .9);
}
.shp-clients.no-names .shp-client__name{display:none;}
@media (max-width:600px){
	.shp-client__name{inset-inline:-6px;white-space:normal;text-align:center;line-height:1.4;}
}

/* ---- Hover / focus ---- */
.shp-client:hover .shp-client__disc,
.shp-client:focus-visible .shp-client__disc{
	transform:translateY(-10px) scale(1.07);
	box-shadow:
		0 0 0 1px rgba(var(--shp-primary-rgb), .35),
		0 26px 60px rgba(var(--shp-primary-rgb), .28),
		0 0 70px rgba(var(--shp-primary-rgb), .18);
}
.shp-client:hover .shp-client__logo{transform:scale(1.04);}
.shp-client:hover .shp-client__ring,
.shp-client:focus-visible .shp-client__ring{opacity:1;transform:scale(1);animation-play-state:running;}
.shp-client:hover .shp-client__spot{opacity:1;}
.shp-client:hover .shp-client__name,
.shp-client:focus-visible .shp-client__name{opacity:1;transform:none;}
.shp-client:focus-visible{outline:none;}

/* Focus mode: the rest step back. */
.shp-clients.is-focus .shp-clients__row:hover .shp-client:not(:hover),
.shp-clients.is-focus .shp-clients__track:hover .shp-client:not(:hover){
	opacity:.38;
	filter:grayscale(1) saturate(.4);
	transform:scale(.94);
}

/* Optional: grey until hovered. */
.shp-clients.is-gray .shp-client__logo{filter:grayscale(1) brightness(1.05);}
.shp-clients.is-gray .shp-client:hover .shp-client__logo{filter:none;}

/* ---- Entrance: discs pop in one after another ----
   Only where the section actually animates — a wall without data-shp-anim
   (the clients archive, or "None" chosen in the widget) is simply shown. */
.shp-anim-on .shp-clients[data-shp-anim] .shp-client{opacity:0;transform:translateY(26px) scale(.9);}
.shp-anim-on .shp-clients[data-shp-anim].shp-in .shp-client{
	opacity:1;
	transform:none;
	transition:opacity .8s var(--shp-ease), transform 1s cubic-bezier(.34,1.56,.64,1), filter .5s ease;
	transition-delay:calc(var(--i) * 80ms);
}
/* Once arrived, hover must answer at once — not after its entrance delay. */
.shp-anim-on .shp-clients.is-arrived .shp-client{transition-delay:0ms;}
html.no-js .shp-clients .shp-client{opacity:1 !important;transform:none !important;}

/* ---- Marquee ---- */
.shp-clients__viewport{
	overflow:hidden;
	padding-block:20px 50px;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.shp-clients__track{
	display:flex;
	gap:var(--shp-client-gap);
	inline-size:max-content;
	animation:shp-scrollx 38s linear infinite;
}
.shp-clients__viewport:hover .shp-clients__track{animation-play-state:paused;}
.shp-clients--marquee .shp-client{opacity:1 !important;transform:none;}
@keyframes shp-scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.shp-rtl .shp-clients__track{animation-direction:reverse;}

/* ---- Responsive ---- */
@media (max-width:900px){
	.shp-clients{--shp-logo-size:112px;}
}
@media (max-width:600px){
	/* A tidy three-up grid instead of a wrapping row. */
	.shp-clients{--shp-logo-size:clamp(84px, 26vw, 104px);--shp-client-gap:16px;}
	.shp-clients__row{display:grid;grid-template-columns:repeat(3, var(--shp-logo-size));justify-content:center;row-gap:44px;}
	.shp-client__name{font-size:.6rem;letter-spacing:.12em;}
}
@media (hover:none){
	/* On touch the name is always there — there is no hover to reveal it. */
	.shp-client__name{opacity:.7;transform:none;}
	.shp-client__ring{display:none;}
}

@media (prefers-reduced-motion:reduce){
	.shp-client__ring,.shp-clients__track{animation:none !important;}
	.shp-client,.shp-client__disc,.shp-client__logo{transition:none !important;}
}

/* ==========================================================================
   Products grid + filters
   ========================================================================== */
.shp-products{padding-block:var(--shp-space-section);}
.shp-filters{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	margin-block-end:clamp(26px, 3.4vw, 44px);
}
.shp-filters__pill{
	padding:11px 22px;
	border-radius:999px;
	border:1px solid rgba(var(--shp-ink-rgb), .12);
	background:rgba(var(--shp-ink-rgb), .02);
	color:var(--shp-body);
	font-family:var(--shp-font-m);
	font-size:.72rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	transition:color .3s ease, background .35s ease, border-color .3s ease, transform .4s var(--shp-ease), box-shadow .4s var(--shp-ease);
}
.shp-filters__pill:hover{color:var(--shp-primary);border-color:rgba(var(--shp-primary-rgb), .45);transform:translateY(-2px);}
.shp-filters__pill.is-active{
	background:var(--shp-grad);
	border-color:transparent;
	color:#04121C;
	box-shadow:0 10px 26px rgba(var(--shp-primary-rgb), .32);
}

.shp-products__grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(16px, 2.2vw, 28px);}
.shp-prod{
	position:relative;
	display:flex;
	flex-direction:column;
	border-radius:var(--shp-radius);
	overflow:hidden;
	background:linear-gradient(170deg, var(--shp-card), rgba(var(--shp-dark-rgb), .96));
	border:var(--shp-hair);
	box-shadow:var(--shp-shadow-s);
	transition:transform .55s var(--shp-ease), box-shadow .55s var(--shp-ease), border-color .45s ease, opacity .4s ease;
}
.shp-prod:hover{border-color:rgba(var(--shp-primary-rgb), .4);box-shadow:var(--shp-shadow-m), 0 0 40px rgba(var(--shp-primary-rgb), .16);}
.shp-prod.is-hidden{display:none;}
.shp-prod__link{position:absolute;inset:0;z-index:3;}
.shp-prod__media{position:relative;aspect-ratio:1 / 1;background:#fff;display:grid;place-items:center;overflow:hidden;}
.shp-prod__media img{inline-size:100%;block-size:100%;object-fit:contain;padding:16px;transition:transform 1s var(--shp-ease);}
.shp-prod:hover .shp-prod__media img{transform:scale(1.07);}
.shp-prod__ph{color:rgba(0,0,0,.14);}
.shp-prod__badge{
	position:absolute;
	inset-block-start:10px;
	inset-inline-start:10px;
	z-index:2;
	padding:5px 12px;
	border-radius:7px;
	background:var(--shp-primary);
	color:#04121C;
	font-family:var(--shp-font-m);
	font-size:.62rem;
	letter-spacing:.1em;
}
.shp-prod__body{padding:20px 22px 24px;display:grid;gap:8px;}
.shp-prod__title{font-size:1.12rem;transition:color .35s ease;}
.shp-prod:hover .shp-prod__title{color:var(--shp-primary);}
.shp-prod__tagline{
	font-family:var(--shp-font-m);
	font-size:.68rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--shp-primary);
}
.shp-prod__more{
	margin-block-start:8px;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--shp-font-m);
	font-size:.68rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--shp-muted);
}
.shp-prod__more .shp-icon{transition:transform .4s var(--shp-ease);}
.shp-prod:hover .shp-prod__more{color:var(--shp-primary);}
.shp-prod:hover .shp-prod__more .shp-icon{transform:translateX(5px);}
.shp-products__empty{text-align:center;color:var(--shp-muted);padding-block:40px;}
.shp-products__foot{margin-block-start:clamp(30px, 4vw, 52px);display:flex;justify-content:center;}

/* ==========================================================================
   Quote form
   ========================================================================== */
.shp-quote{padding-block:var(--shp-space-section);}
.shp-quote__grid{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	gap:clamp(28px, 4.5vw, 70px);
	align-items:center;
}
.shp-quote--form-start .shp-quote__card{order:-1;}
.shp-quote__aside .shp-secHead{margin-block-end:0;}
.shp-quote__contact{margin-block-start:30px;display:grid;gap:14px;}
.shp-quote__contact a,.shp-quote__static{
	display:inline-flex;
	align-items:center;
	gap:12px;
	font-family:var(--shp-font-m);
	font-size:.82rem;
	letter-spacing:.06em;
	color:var(--shp-body);
	transition:color .3s ease, transform .4s var(--shp-ease);
}
.shp-quote__contact a:hover{color:var(--shp-primary);transform:translateX(4px);}
.shp-quote__contact .shp-icon{color:var(--shp-primary);flex:0 0 auto;}

.shp-quote__card{
	position:relative;
	padding:clamp(26px, 3vw, 42px);
	border-radius:calc(var(--shp-radius) + 6px);
	background:linear-gradient(165deg, rgba(var(--shp-card-rgb), .96), rgba(var(--shp-dark-rgb), .94));
	border:var(--shp-hair);
	box-shadow:var(--shp-shadow-l);
}
.shp-quote__card::before{
	content:"";
	position:absolute;
	inset:-1px;
	border-radius:inherit;
	padding:1px;
	background:linear-gradient(140deg, rgba(var(--shp-primary-rgb), .5), transparent 45%);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
	pointer-events:none;
}
.shp-quote__title{font-size:1.5rem;margin-block-end:22px;}
.shp-quote__context{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-block-end:20px;
	padding:8px 16px;
	border-radius:999px;
	background:var(--shp-primary-soft);
	border:1px solid rgba(var(--shp-primary-rgb), .3);
	color:var(--shp-primary);
	font-family:var(--shp-font-m);
	font-size:.7rem;
	letter-spacing:.1em;
}
.shp-quote__notice{
	padding:16px 20px;
	border-radius:var(--shp-radius);
	border:1px dashed rgba(var(--shp-primary-rgb), .4);
	color:var(--shp-muted);
	font-size:.88rem;
}

/* Contact Form 7 inside the card */
.shp-quote__form .wpcf7-form p{margin-block-end:18px;}
.shp-quote__form label{
	display:block;
	font-family:var(--shp-font-m);
	font-size:.68rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--shp-muted);
	margin-block-end:8px;
}
.shp-quote__form .wpcf7-form-control-wrap{display:block;}
.shp-quote__form input[type=submit],.shp-quote__form .wpcf7-submit{
	inline-size:100%;
	padding:16px 28px;
	border:0;
	border-radius:calc(var(--shp-radius) - 4px);
	background:var(--shp-grad);
	color:#04121C;
	font-family:var(--shp-font-m);
	font-size:.78rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	cursor:pointer;
	box-shadow:0 12px 30px rgba(var(--shp-primary-rgb), .3);
	transition:transform .4s var(--shp-ease), box-shadow .4s var(--shp-ease), filter .3s ease;
}
.shp-quote__form input[type=submit]:hover,.shp-quote__form .wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(var(--shp-primary-rgb), .45);}
.shp-quote__form .wpcf7-spinner{margin-inline-start:12px;}
.shp-quote__form .wpcf7-not-valid-tip{color:#ff8b7a;font-size:.8rem;margin-block-start:6px;}
.shp-quote__form .wpcf7-response-output{
	margin:20px 0 0 !important;
	padding:14px 18px !important;
	border-radius:var(--shp-radius) !important;
	border:1px solid rgba(var(--shp-primary-rgb), .35) !important;
	color:var(--shp-ink);
	font-size:.9rem;
}
.shp-quote__form .wpcf7 form.invalid .wpcf7-response-output,
.shp-quote__form .wpcf7 form.unaccepted .wpcf7-response-output{border-color:rgba(255,139,122,.5) !important;}
.shp-quote__form .wpcf7 form.sent .wpcf7-response-output{border-color:rgba(var(--shp-primary-rgb), .6) !important;background:var(--shp-primary-soft);}

@media (max-width:900px){
	.shp-quote__grid{grid-template-columns:minmax(0,1fr);}
	.shp-quote--form-start .shp-quote__card{order:0;}
}

/* ==========================================================================
   Contact info
   ========================================================================== */
.shp-contact{padding-block:var(--shp-space-section);}
.shp-contact__grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(16px, 2vw, 26px);}
.shp-contactCard{
	position:relative;
	display:grid;
	gap:10px;
	align-content:start;
	padding:28px 26px 32px;
	border-radius:var(--shp-radius);
	overflow:hidden;
	background:linear-gradient(170deg, rgba(var(--shp-ink-rgb), .045), rgba(var(--shp-ink-rgb), .012));
	border:var(--shp-hair);
	transition:transform .5s var(--shp-ease), border-color .4s ease, box-shadow .5s var(--shp-ease);
}
.shp-contactCard:hover{transform:translateY(-6px);border-color:rgba(var(--shp-primary-rgb), .38);box-shadow:0 20px 44px rgba(var(--shp-dark-rgb), .45);}
.shp-contactCard__icon{
	display:grid;
	place-items:center;
	inline-size:44px;
	block-size:44px;
	border-radius:12px;
	color:var(--shp-primary);
	background:var(--shp-primary-soft);
	border:1px solid rgba(var(--shp-primary-rgb), .25);
}
.shp-contactCard__label{
	font-family:var(--shp-font-m);
	font-size:.7rem;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--shp-muted);
}
.shp-contactCard__body{display:grid;gap:8px;color:var(--shp-ink);}
.shp-contactCard__body p{font-size:1rem;}
.shp-contactCard__phone{display:flex;align-items:baseline;gap:10px;transition:color .3s ease, transform .4s var(--shp-ease);}
.shp-contactCard__phone em{font-style:normal;font-size:.76rem;color:var(--shp-muted);min-inline-size:72px;}
.shp-contactCard__phone:hover{color:var(--shp-primary);transform:translateX(4px);}
.shp-contactCard__link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:var(--shp-primary);
	font-size:.94rem;
	transition:gap .35s var(--shp-ease);
}
.shp-contactCard__link:hover{gap:14px;}
.shp-contact__social{margin-block-start:clamp(26px, 3vw, 40px);display:flex;justify-content:center;}

/* ==========================================================================
   Heading / Button / CTA widget
   ========================================================================== */
.shp-secHead__rule{
	display:block;
	inline-size:72px;
	block-size:3px;
	margin-block-start:20px;
	border-radius:3px;
	background:var(--shp-grad);
}
.shp-secHead--center .shp-secHead__rule{margin-inline:auto;}
.shp-secHead--end{text-align:end;margin-inline-start:auto;}
.shp-secHead--end .shp-secHead__rule{margin-inline-start:auto;}
.shp-btnWrap{display:flex;}
.shp-cta--widget{padding-block:clamp(50px, 6vw, 96px);padding-inline:var(--shp-gutter);background-size:cover;background-position:center;}
.shp-cta--boxed{
	border-radius:calc(var(--shp-radius) + 8px);
	border:var(--shp-hair);
	background-color:rgba(var(--shp-card-rgb), .6);
	overflow:hidden;
}
.shp-cta--widget .shp-secHead{margin-block-end:0;margin-inline:auto;}

/* ==========================================================================
   Marquee
   ========================================================================== */
.shp-marquee{
	overflow:hidden;
	padding-block:clamp(18px, 2.4vw, 34px);
	--shp-marquee-size:5vw;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.shp-marquee--band{background:var(--shp-primary);}
.shp-marquee__track{
	display:flex;
	align-items:center;
	gap:clamp(18px, 2.4vw, 40px);
	inline-size:max-content;
	animation:shp-scrollx 32s linear infinite;
}
.shp-marquee.is-reverse .shp-marquee__track{animation-direction:reverse;}
.shp-marquee:hover .shp-marquee__track{animation-play-state:paused;}
.shp-marquee__item{
	font-family:var(--shp-font-h);
	font-size:var(--shp-marquee-size);
	line-height:1.1;
	letter-spacing:.03em;
	text-transform:uppercase;
	white-space:nowrap;
}
.shp-marquee--outline .shp-marquee__item{
	color:transparent;
	-webkit-text-stroke:1.5px rgba(var(--shp-ink-rgb), .35);
}
.shp-marquee--solid .shp-marquee__item{color:var(--shp-ink);}
.shp-marquee--band .shp-marquee__item{color:#04121C;}
.shp-marquee__sep{color:var(--shp-primary);display:flex;}
.shp-marquee--band .shp-marquee__sep{color:#04121C;}

@media (prefers-reduced-motion:reduce){
	.shp-clients__track,.shp-marquee__track,.shp-hero__media img,.shp-hero__glow,.shp-hero__scroll span{animation:none !important;}
	.shp-clients__track,.shp-marquee__track{inline-size:auto;flex-wrap:wrap;justify-content:center;}
}

/* ==========================================================================
   Shared interactive components (used by widgets and the CPT views)
   ========================================================================== */

/* ---- Tabs ---- */
.shp-tabs__nav{display:flex;flex-wrap:wrap;gap:6px;border-block-end:var(--shp-hair);}
.shp-tabs__btn{
	position:relative;
	padding:16px 22px;
	font-family:var(--shp-font-m);
	font-size:.72rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--shp-muted);
	transition:color .3s ease;
}
.shp-tabs__btn::after{
	content:"";
	position:absolute;
	inset-block-end:-1px;
	inset-inline-start:0;
	inline-size:0;
	block-size:2px;
	background:var(--shp-grad);
	transition:inline-size .45s var(--shp-ease);
}
.shp-tabs__btn:hover{color:var(--shp-body);}
.shp-tabs__btn.is-active{color:var(--shp-primary);}
.shp-tabs__btn.is-active::after{inline-size:100%;}
.shp-tabs__pane{display:none;padding-block-start:clamp(26px, 3vw, 44px);}
.shp-tabs__pane.is-active{display:block;animation:shp-paneIn .45s var(--shp-ease);}
@keyframes shp-paneIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---- Accordion ---- */
.shp-acc{display:grid;gap:12px;}
.shp-acc__item{
	border-radius:var(--shp-radius);
	border:var(--shp-hair);
	background:rgba(var(--shp-ink-rgb), .02);
	overflow:hidden;
	transition:border-color .4s ease, background .4s ease;
}
.shp-acc__item.is-open{border-color:rgba(var(--shp-primary-rgb), .4);background:rgba(var(--shp-primary-rgb), .05);}
.shp-acc__head{
	inline-size:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	padding:20px 24px;
	text-align:start;
	color:var(--shp-ink);
	font-weight:600;
}
.shp-acc__icon{color:var(--shp-primary);transition:transform .45s var(--shp-ease);flex:0 0 auto;}
.shp-acc__item.is-open .shp-acc__icon{transform:rotate(180deg);}
.shp-acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--shp-ease);}
.shp-acc__item.is-open .shp-acc__body{grid-template-rows:1fr;}
.shp-acc__inner{overflow:hidden;}
.shp-acc__item.is-open .shp-acc__inner{padding:0 24px 24px;}

/* ---- Carousel ---- */
.shp-carousel{position:relative;}
.shp-carousel__track{
	display:flex;
	gap:20px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	padding-block-end:6px;
}
.shp-carousel__track::-webkit-scrollbar{display:none;}
.shp-carousel__track > *{scroll-snap-align:start;flex:0 0 clamp(260px, 30%, 360px);}
.shp-carousel__nav{display:flex;gap:10px;justify-content:center;margin-block-start:26px;}

/* ---- Lightbox ---- */
.shp-lightbox{position:fixed;inset:0;z-index:220;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .4s var(--shp-ease), visibility .4s;}
.shp-lightbox.is-open{visibility:visible;opacity:1;}
.shp-lightbox__backdrop{position:absolute;inset:0;background:rgba(var(--shp-dark-rgb), .94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.shp-lightbox__img{
	position:relative;
	max-inline-size:92vw;
	max-block-size:88vh;
	border-radius:var(--shp-radius);
	box-shadow:var(--shp-shadow-l);
	transform:scale(.94);
	transition:transform .45s var(--shp-ease);
}
.shp-lightbox.is-open .shp-lightbox__img{transform:none;}
.shp-lightbox__close{
	position:absolute;
	inset-block-start:24px;
	inset-inline-end:28px;
	z-index:2;
	inline-size:46px;
	block-size:46px;
	border-radius:50%;
	color:var(--shp-ink);
	font-size:26px;
	line-height:1;
	border:1px solid rgba(var(--shp-ink-rgb), .18);
	background:rgba(var(--shp-ink-rgb), .06);
	transition:background .3s ease, transform .4s var(--shp-ease);
}
.shp-lightbox__close:hover{background:rgba(var(--shp-primary-rgb), .22);transform:rotate(90deg);}

/* ==========================================================================
   Section head — title styles
   The design uses two: the condensed uppercase display face, and a rounded
   mixed-case face with a full gradient (home-page section titles, hero).
   ========================================================================== */
.shp-secHead--soft .shp-secHead__title,
.shp-slider--soft .shp-slide__title{
	font-family:var(--shp-font-b);
	font-weight:800;
	text-transform:none;
	letter-spacing:-.015em;
	line-height:1.14;
	color:var(--shp-ink);
}
/* The starred words carry the gradient, exactly as in the mockup. */
.shp-secHead--soft .shp-secHead__title .shp-grad,
.shp-slider--soft .shp-slide__title .shp-grad{
	background:linear-gradient(100deg, var(--shp-primary), var(--shp-accent));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

/* ==========================================================================
   Hero slider — full-bleed, background-only, cinematic.

   Motion model (GPU-only: transform, opacity, clip-path):
   · the incoming slide is unveiled by a clip-path wipe from the direction of
     travel, while its artwork settles from 1.22× to 1.08×;
   · the outgoing slide is pushed back — scaled down, shifted against the
     wipe and dimmed — so the change reads as depth, not a cut;
   · the active artwork keeps a slow drift for the whole autoplay interval;
   · copy leaves fast, then arrives word by word from a mask;
   · a pointer parallax separates artwork and copy on desktop.
   ========================================================================== */
.shp-slider{
	--shp-hero-veil:.58;
	--shp-slide-dur:7000ms;
	--shp-wipe:1300ms;
	--shp-wipe-ease:cubic-bezier(.77,0,.18,1);
	--mx:0;
	--my:0;
	position:relative;
	min-block-size:760px;
	overflow:hidden;
	isolation:isolate;
	background:var(--shp-dark);
}
/* Slides share one grid cell: the frame is as tall as its tallest slide, so
   long copy can never spill up under the header on a phone. */
.shp-slider__viewport{
	position:relative;
	display:grid;
	min-block-size:inherit;
}

/* ---- Slides ---- */
.shp-slide{
	position:relative;
	grid-area:1 / 1;
	z-index:1;
	min-block-size:inherit;
	visibility:hidden;
	pointer-events:none;
}
.shp-slide.is-active{z-index:3;visibility:visible;pointer-events:auto;}
.shp-slide.is-leaving{z-index:2;visibility:visible;}

.shp-slide__media{
	position:absolute;
	inset:0;
	overflow:hidden;
	clip-path:inset(0 0 0 0);
}
.shp-slide__bg{
	position:absolute;
	inset:-4%;
	background-size:cover;
	background-position:center;
	transform:translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) scale(1.08);
	will-change:transform;
}

/* Incoming: wiped in from the direction of travel. */
.shp-slide.is-entering .shp-slide__media{animation:shp-wipe-next var(--shp-wipe) var(--shp-wipe-ease) both;}
.shp-slider.is-dir-prev .shp-slide.is-entering .shp-slide__media{animation-name:shp-wipe-prev;}
.shp-slide.is-entering .shp-slide__bg{animation:shp-settle var(--shp-wipe) var(--shp-wipe-ease) both;}

/* Active: a slow drift for the rest of the interval. */
.shp-slide.is-active:not(.is-entering) .shp-slide__bg{animation:shp-drift var(--shp-slide-dur) linear both;}

/* Outgoing: pushed back into depth. */
.shp-slide.is-leaving .shp-slide__bg{animation:shp-push-next var(--shp-wipe) var(--shp-wipe-ease) both;}
.shp-slider.is-dir-prev .shp-slide.is-leaving .shp-slide__bg{animation-name:shp-push-prev;}
.shp-slide.is-leaving .shp-slide__veil{animation:shp-dim var(--shp-wipe) var(--shp-wipe-ease) both;}

@keyframes shp-wipe-next{from{clip-path:inset(0 0 0 100%);}to{clip-path:inset(0 0 0 0);}}
@keyframes shp-wipe-prev{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes shp-settle{from{transform:scale(1.22);}to{transform:scale(1.08);}}
@keyframes shp-drift{from{transform:translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) scale(1.08);}to{transform:translate3d(calc(var(--mx) * -14px - 1.5%), calc(var(--my) * -10px), 0) scale(1.15);}}
@keyframes shp-push-next{from{transform:scale(1.08);}to{transform:translate3d(-7%,0,0) scale(.96);}}
@keyframes shp-push-prev{from{transform:scale(1.08);}to{transform:translate3d(7%,0,0) scale(.96);}}
@keyframes shp-dim{from{opacity:1;}to{opacity:1;background-color:rgba(var(--shp-dark-rgb), .75);}}

/* In RTL the direction of travel is mirrored. */
.shp-rtl .shp-slide.is-entering .shp-slide__media{animation-name:shp-wipe-prev;}
.shp-rtl .shp-slider.is-dir-prev .shp-slide.is-entering .shp-slide__media{animation-name:shp-wipe-next;}
.shp-rtl .shp-slide.is-leaving .shp-slide__bg{animation-name:shp-push-prev;}
.shp-rtl .shp-slider.is-dir-prev .shp-slide.is-leaving .shp-slide__bg{animation-name:shp-push-next;}

/* ---- Readability layers ---- */
.shp-slide__veil{
	position:absolute;
	inset:0;
	background:
		linear-gradient(to top, var(--shp-bg) 0%, rgba(var(--shp-bg-rgb), 0) 38%),
		linear-gradient(95deg, rgba(var(--shp-bg-rgb), .94) 0%, rgba(var(--shp-bg-rgb), var(--shp-hero-veil)) 42%, rgba(var(--shp-bg-rgb), .1) 78%);
}
.shp-rtl .shp-slide__veil{
	background:
		linear-gradient(to top, var(--shp-bg) 0%, rgba(var(--shp-bg-rgb), 0) 38%),
		linear-gradient(265deg, rgba(var(--shp-bg-rgb), .94) 0%, rgba(var(--shp-bg-rgb), var(--shp-hero-veil)) 42%, rgba(var(--shp-bg-rgb), .1) 78%);
}
.shp-slider__glow{
	position:absolute;
	z-index:4;
	inset-block-start:-30%;
	inset-inline-end:-15%;
	inline-size:70%;
	block-size:150%;
	background:radial-gradient(circle, rgba(var(--shp-primary-rgb), .16), transparent 60%);
	pointer-events:none;
	mix-blend-mode:screen;
	animation:shp-breathe 10s ease-in-out infinite;
}
/* A light sweep crosses the frame on every change. */
.shp-slider__sweep{
	position:absolute;
	z-index:5;
	inset-block:0;
	inline-size:40%;
	inset-inline-start:-50%;
	background:linear-gradient(100deg, transparent, rgba(var(--shp-primary-rgb), .14) 45%, rgba(255,255,255,.08) 50%, transparent 60%);
	transform:skewX(-14deg);
	pointer-events:none;
	opacity:0;
}
.shp-slider.is-changing .shp-slider__sweep{animation:shp-sweep var(--shp-wipe) var(--shp-wipe-ease) both;}
@keyframes shp-sweep{0%{opacity:0;inset-inline-start:-50%;}20%{opacity:1;}100%{opacity:0;inset-inline-start:120%;}}

/* ---- Copy ---- */
.shp-slide__inner{
	position:relative;
	z-index:6;
	display:flex;
	align-items:center;
	min-block-size:inherit;
	padding-block:calc(var(--shp-header-h) + 30px) 150px;
	transform:translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 0);
}
.shp-slide__content{max-inline-size:min(660px, 100%);}

.shp-slide__eyebrow{
	display:inline-flex;
	align-items:center;
	gap:14px;
	font-family:var(--shp-font-m);
	font-size:.74rem;
	letter-spacing:.24em;
	text-transform:uppercase;
	color:var(--shp-primary);
}
.shp-slide__eyebrow::before{
	content:"";
	inline-size:44px;
	block-size:1px;
	background:var(--shp-primary);
	box-shadow:0 0 12px rgba(var(--shp-primary-rgb), .9);
	transform-origin:inline-start;
	transform:scaleX(0);
	transition:transform .9s var(--shp-wipe-ease);
}
.shp-slide__eyebrow span{opacity:0;transform:translateX(-10px);transition:opacity .6s ease, transform .8s var(--shp-ease);}

.shp-slide__title{margin-block:22px 0;font-size:clamp(2.5rem, 1.2rem + 4.2vw, 4.8rem);line-height:1.02;}
/* Words rise from their own mask, one after another. */
.shp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.06em;margin-block:-.06em;}
.shp-w__i{
	display:inline-block;
	transform:translate3d(0, 108%, 0) rotate(4deg);
	transform-origin:0 100%;
	transition:transform 1s var(--shp-wipe-ease);
	transition-delay:calc(var(--i) * 70ms + 380ms);
}
.shp-w__i.shp-grad{padding-inline-end:.04em;}

.shp-slide__text{
	margin-block-start:24px;
	max-inline-size:540px;
	font-size:1.02rem;
	opacity:0;
	filter:blur(8px);
	transform:translate3d(0, 18px, 0);
	transition:opacity .9s ease, filter .9s ease, transform .9s var(--shp-ease);
}
.shp-slide__actions{
	margin-block-start:36px;
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}
/* Entrance uses the independent `translate` property, so the button's own
   transform — magnetic pull, hover lift — keeps working on top of it. */
.shp-slide__actions .shp-btn{
	opacity:0;
	translate:0 20px;
	transition:opacity .7s ease, translate .9s var(--shp-ease), --lift .45s var(--shp-ease), box-shadow .45s var(--shp-ease), color .3s ease, border-color .3s ease;
}

/* Arrival. */
.shp-slide.is-active .shp-slide__eyebrow::before{transform:scaleX(1);transition-delay:.25s;}
.shp-slide.is-active .shp-slide__eyebrow span{opacity:1;transform:none;transition-delay:.45s;}
.shp-slide.is-active .shp-w__i{transform:none;}
.shp-slide.is-active .shp-slide__text{opacity:1;filter:none;transform:none;transition-delay:.85s;}
.shp-slide.is-active .shp-slide__actions .shp-btn{opacity:1;translate:0 0;}
.shp-slide.is-active .shp-slide__actions .shp-btn:nth-child(1){transition-delay:1s;}
.shp-slide.is-active .shp-slide__actions .shp-btn:nth-child(2){transition-delay:1.1s;}

/* Departure — fast, so the next copy is never waiting. */
.shp-slide.is-leaving .shp-slide__content{opacity:0;transform:translate3d(0,-24px,0);transition:opacity .45s ease, transform .5s var(--shp-ease);}

/* ---- Controls ---- */
.shp-slider__bar{
	position:absolute;
	z-index:8;
	inset-inline:0;
	inset-block-end:clamp(26px, 4vw, 48px);
	pointer-events:none;
}
.shp-slider__barInner{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;}
.shp-slider__bar *{pointer-events:auto;}

/* Counter: current / total, the number rolls on change. */
.shp-slider__count{
	display:flex;
	align-items:baseline;
	gap:10px;
	font-family:var(--shp-font-h);
	color:var(--shp-ink);
	line-height:1;
}
.shp-slider__now{display:inline-block;overflow:hidden;block-size:1em;font-size:2.4rem;}
.shp-slider__now span{display:block;transition:transform .8s var(--shp-wipe-ease);}
.shp-slider__total{font-size:1rem;color:var(--shp-muted);}
.shp-slider__total::before{content:"/";margin-inline-end:8px;opacity:.5;}

/* Story-style progress: one bar per slide. */
.shp-slider__tracks{display:flex;gap:8px;margin-block-start:16px;}
.shp-slider__track{
	position:relative;
	inline-size:clamp(34px, 5vw, 64px);
	block-size:3px;
	border-radius:3px;
	background:rgba(var(--shp-ink-rgb), .18);
	overflow:hidden;
	cursor:pointer;
	transition:background .3s ease;
}
.shp-slider__track:hover{background:rgba(var(--shp-ink-rgb), .34);}
.shp-slider__track::after{
	content:"";
	position:absolute;
	inset:0;
	background:var(--shp-grad);
	box-shadow:0 0 12px rgba(var(--shp-primary-rgb), .8);
	transform-origin:inline-start;
	transform:scaleX(0);
}
.shp-slider__track.is-done::after{transform:scaleX(1);}
.shp-slider__track.is-active::after{animation:shp-fill var(--shp-slide-dur) linear both;}
.shp-slider.is-paused .shp-slider__track.is-active::after{animation-play-state:paused;}
.shp-slider.is-static .shp-slider__track.is-active::after{animation:none;transform:scaleX(1);}
@keyframes shp-fill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* Larger hit area than the 3px it draws. */
.shp-slider__track::before{content:"";position:absolute;inset:-14px 0;}

.shp-slider__arrows{display:flex;gap:12px;}
.shp-slider__arrow{
	position:relative;
	display:grid;
	place-items:center;
	inline-size:58px;
	block-size:58px;
	border-radius:50%;
	color:var(--shp-ink);
	border:1px solid rgba(var(--shp-ink-rgb), .18);
	background:rgba(var(--shp-dark-rgb), .35);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
	overflow:hidden;
	isolation:isolate;
	transition:border-color .4s ease, color .4s ease, transform .5s var(--shp-ease);
}
.shp-slider__arrow::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	border-radius:50%;
	background:var(--shp-grad);
	transform:scale(0);
	transition:transform .55s var(--shp-wipe-ease);
}
.shp-slider__arrow:hover{color:#04121C;border-color:transparent;}
.shp-slider__arrow:hover::before{transform:scale(1);}
.shp-slider__arrow .shp-icon{transition:transform .5s var(--shp-wipe-ease);}
.shp-slider__arrow--next:hover .shp-icon{transform:translateX(3px);}
.shp-slider__arrow--prev .shp-icon{transform:scaleX(-1);}
.shp-slider__arrow--prev:hover .shp-icon{transform:scaleX(-1) translateX(3px);}
.shp-rtl .shp-slider__arrow--prev .shp-icon{transform:none;}
.shp-rtl .shp-slider__arrow--next .shp-icon{transform:scaleX(-1);}

/* ---- Responsive ---- */
@media (max-width:900px){
	.shp-slider{min-block-size:620px;}
	/* Clear the floating header with real room, then let the copy set the height. */
	.shp-slide__inner{padding-block:calc(var(--shp-header-h) + 56px) 140px;align-items:flex-end;}
	.shp-slide__veil{
		background:linear-gradient(to top, var(--shp-bg) 4%, rgba(var(--shp-bg-rgb), .82) 45%, rgba(var(--shp-bg-rgb), .35) 100%);
	}
	.shp-rtl .shp-slide__veil{
		background:linear-gradient(to top, var(--shp-bg) 4%, rgba(var(--shp-bg-rgb), .82) 45%, rgba(var(--shp-bg-rgb), .35) 100%);
	}
	.shp-slider__arrow{inline-size:48px;block-size:48px;}
	.shp-slider__now{font-size:1.9rem;}
}
@media (max-width:560px){
	.shp-slider{min-block-size:560px;}
	.shp-slide__inner{padding-block:calc(var(--shp-header-h) + 44px) 124px;}
	.shp-slide__eyebrow{font-size:.62rem;letter-spacing:.16em;gap:10px;}
	.shp-slide__eyebrow::before{inline-size:28px;}
	.shp-slide__title{margin-block-start:16px;font-size:clamp(2rem, .9rem + 6vw, 2.6rem);line-height:1.05;}
	.shp-slide__text{margin-block-start:18px;font-size:.93rem;line-height:1.75;}
	.shp-slide__actions{margin-block-start:28px;flex-direction:column;align-items:stretch;gap:12px;}
	.shp-slide__actions .shp-btn{justify-content:center;white-space:normal;text-align:center;}
	.shp-slider__arrows{display:none;}
	.shp-slider__track{inline-size:clamp(28px, 12vw, 48px);}
}

/* ---- Reduced motion: a plain crossfade, nothing moves ---- */
@media (prefers-reduced-motion:reduce){
	.shp-slide__media,.shp-slide__bg,.shp-slide__veil,.shp-slider__sweep,.shp-slider__glow{animation:none !important;}
	.shp-slide__bg{transform:scale(1.05) !important;}
	.shp-slide{transition:opacity .4s ease;}
	.shp-slide:not(.is-active){opacity:0;}
	.shp-w__i,.shp-slide__text,.shp-slide__eyebrow span{transform:none !important;opacity:1 !important;filter:none !important;transition:none !important;}
	.shp-slide__actions .shp-btn{translate:none !important;opacity:1 !important;}
	.shp-slide__eyebrow::before{transform:scaleX(1) !important;}
	.shp-slider__track.is-active::after{animation:none;transform:scaleX(1);}
}

/* ==========================================================================
   Responsive pass — every block checked at 1024 / 900 / 700 / 560 / 380.
   ========================================================================== */
@media (max-width:1024px){
	.shp-hero__content{max-inline-size:none;}
	.shp-hero__text{max-inline-size:none;}
	.shp-quote__grid{gap:clamp(24px, 4vw, 40px);}
}

@media (max-width:700px){
	.shp-secHead{margin-block-end:clamp(22px, 5vw, 34px);}
	.shp-cta__actions,.shp-hero__actions{gap:10px;}
	.shp-box{padding:24px 22px 28px;}
	.shp-contactCard{padding:24px 22px 26px;}
	.shp-quote__card{padding:22px 20px;}
	.shp-showcase__word{inset-block-start:20%;}
}

@media (max-width:560px){
	/* Full-width buttons read better than two cramped pills. */
	.shp-hero__actions,.shp-cta__actions,.shp-single__actions{flex-direction:column;align-items:stretch;}
	.shp-hero__actions .shp-btn,
	.shp-cta__actions .shp-btn,.shp-single__actions .shp-btn{inline-size:100%;}
	.shp-btn--lg{padding:16px 24px;}
	.shp-stats__grid{gap:22px 10px;}
	.shp-stats__label{font-size:.64rem;letter-spacing:.1em;}
	.shp-filters{gap:8px;}
	.shp-filters__pill{padding:9px 16px;font-size:.66rem;}
}

@media (max-width:380px){
	.shp-marquee{--shp-marquee-size:9vw;}
}

/* Long category or product names must never push the card wider. */
.shp-cat__title,.shp-prod__title,.shp-jobCard__title,.shp-box__title{overflow-wrap:anywhere;}

/* Wide content inside rich text scrolls in its own box, never the page. */
.shp-rte table,.shp-rte pre{display:block;max-inline-size:100%;overflow-x:auto;}

/* ---- Category cards: small-screen tuning ---- */
@media (max-width:700px){
	.shp-cat__media{aspect-ratio:16 / 10;}
	.shp-cat__media img{padding:14px;}
	.shp-cat__body{padding:20px 20px 24px;}
	.shp-cat__title{font-size:1.2rem;}
}
@media (max-width:480px){
	.shp-cat__media{aspect-ratio:4 / 3;}
	.shp-cat__badge{inset-block-start:10px;inset-inline-start:10px;padding:5px 11px;font-size:.6rem;}
}

/* ==========================================================================
   QB - Products Slider
   Category tabs over a strip of small cards that never stops moving. The
   motion is driven frame by frame in JS (see productsSlider in ui.js): it
   glides to a crawl under the pointer, can be dragged and flung, and eases
   back to cruising speed — CSS only has to paint.
   ========================================================================== */
.shp-pslider{
	--ps-card:200px;
	--ps-gap:16px;
	--ps-radius:18px;
	--ps-ratio:1 / 1;
	--ps-plate:#ffffff;
	--ps-accent:var(--shp-primary);
	padding-block:var(--shp-space-section);
	position:relative;
}
.shp-pslider .shp-secHead{margin-block-end:clamp(22px, 3vw, 34px);}
.shp-pslider__tabs{justify-content:center;margin-block-end:clamp(22px, 3vw, 36px);}

.shp-pslider__stage{position:relative;}
.shp-pslider__panel[hidden]{display:none;}
.shp-pslider__panel.is-entering{animation:shp-ps-in .7s cubic-bezier(.22,1,.36,1) both;}
@keyframes shp-ps-in{from{opacity:0;transform:translate3d(0, 14px, 0);}to{opacity:1;transform:none;}}

/* A row is a window onto an endless track. */
.shp-pslider__row{
	position:relative;
	overflow:hidden;
	padding-block:14px 26px;
	margin-inline:calc(var(--shp-gutter) * -1);
	padding-inline:var(--shp-gutter);
	touch-action:pan-y;
	cursor:grab;
	/* A window onto the strip, measured in pixels — always left to right,
	   or in RTL the strip would hang off the far edge. Cards restore the
	   page direction themselves. */
	direction:ltr;
}
.shp-pslider__row.is-dragging{cursor:grabbing;}
.shp-pslider__row + .shp-pslider__row{margin-block-start:calc(var(--ps-gap) - 34px);}
.shp-pslider.has-fade .shp-pslider__row{
	-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
/* The track always runs left-to-right in pixels; each card keeps the page's own direction. */
.shp-pslider__track{
	display:flex;
	gap:var(--ps-gap);
	inline-size:max-content;
	direction:ltr;
	will-change:transform;
	transform:translate3d(0, 0, 0);
}

/* ---- Card ---- */
.shp-pcard{
	position:relative;
	flex:0 0 var(--ps-card);
	inline-size:var(--ps-card);
	display:flex;
	flex-direction:column;
	border-radius:var(--ps-radius);
	color:var(--shp-ink);
	text-decoration:none;
	background:linear-gradient(168deg, rgba(var(--shp-ink-rgb), .07), rgba(var(--shp-ink-rgb), .02) 70%);
	border:1px solid rgba(var(--shp-ink-rgb), .08);
	box-shadow:0 14px 34px -20px rgba(0,0,0,.7);
	isolation:isolate;
	-webkit-user-drag:none;
	user-select:none;
	transition:transform .6s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .6s ease, background .4s ease;
}
.shp-rtl .shp-pcard{direction:rtl;}

.shp-pcard__media{
	position:relative;
	display:grid;
	place-items:center;
	margin:8px;
	aspect-ratio:var(--ps-ratio);
	border-radius:calc(var(--ps-radius) - 6px);
	overflow:hidden;
	background:radial-gradient(110% 90% at 50% 35%, var(--ps-plate) 0%, color-mix(in srgb, var(--ps-plate) 92%, #9fb4c6) 100%);
	color:#9fb3c4;
}
@supports not (background:color-mix(in srgb, red 50%, blue)){
	.shp-pcard__media{background:var(--ps-plate);}
}
.shp-pcard__media img{
	inline-size:100%;
	block-size:100%;
	object-fit:contain;
	padding:10%;
	mix-blend-mode:multiply;
	pointer-events:none;
	-webkit-user-drag:none;
	transition:transform .9s cubic-bezier(.22,1,.36,1);
}
/* A band of light crosses the plate on hover. */
.shp-pcard__shine{
	position:absolute;
	inset:0;
	background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
	transform:translateX(-120%);
	transition:transform .9s cubic-bezier(.22,1,.36,1);
	pointer-events:none;
	mix-blend-mode:soft-light;
}

.shp-pcard__no{
	position:absolute;
	z-index:2;
	inset-block-start:16px;
	inset-inline-start:16px;
	display:inline-flex;
	align-items:baseline;
	gap:1px;
	padding:4px 9px 3px;
	border-radius:9px;
	font-family:var(--shp-font-h);
	font-weight:700;
	font-size:.86rem;
	line-height:1;
	color:#06243a;
	background:rgba(255,255,255,.8);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	box-shadow:0 4px 12px rgba(6,36,58,.12);
	transition:transform .5s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.shp-pcard__no em{font-style:normal;font-size:.78em;color:var(--ps-accent);}

.shp-pcard__body{display:grid;gap:3px;padding:6px 16px 16px;min-inline-size:0;}
.shp-pcard__cat{
	font-family:var(--shp-font-m);
	font-size:.6rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--shp-muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.shp-rtl .shp-pcard__cat{letter-spacing:0;font-family:var(--shp-font-ar);font-size:.72rem;}
.shp-pcard__title{
	font-family:var(--shp-font-h);
	font-size:1.06rem;
	font-weight:600;
	line-height:1.15;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.shp-pcard__go{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-block-start:6px;
	font-family:var(--shp-font-m);
	font-size:.62rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ps-accent);
	opacity:.55;
	transition:opacity .4s ease, gap .4s cubic-bezier(.22,1,.36,1);
}
.shp-rtl .shp-pcard__go .shp-icon{transform:scaleX(-1);}

/* ---- Hover / focus ---- */
.shp-pcard:hover,
.shp-pcard:focus-visible{
	transform:translate3d(0, -7px, 0);
	border-color:color-mix(in srgb, var(--ps-accent) 55%, transparent);
	box-shadow:
		0 26px 50px -24px color-mix(in srgb, var(--ps-accent) 55%, transparent),
		0 0 0 1px color-mix(in srgb, var(--ps-accent) 25%, transparent);
	outline:none;
}
.shp-pcard:hover .shp-pcard__media img{transform:scale(1.08);}
.shp-pcard:hover .shp-pcard__shine{transform:translateX(120%);}
.shp-pcard:hover .shp-pcard__no{transform:scale(1.08);background:var(--ps-accent);color:#fff;}
.shp-pcard:hover .shp-pcard__no em{color:#fff;}
.shp-pcard:hover .shp-pcard__go{opacity:1;gap:10px;}
.shp-pslider__row.is-dragging .shp-pcard{transform:none;transition:none;}

/* ---- Arrival: cards rise in one after another ---- */
.shp-anim-on .shp-pslider[data-shp-anim] .shp-pcard{opacity:0;translate:0 18px;}
.shp-anim-on .shp-pslider[data-shp-anim].shp-in .shp-pcard{
	opacity:1;
	translate:0 0;
	transition:opacity .7s ease, translate .9s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .6s ease;
	transition-delay:calc(min(var(--i), 8) * 60ms);
}
html.no-js .shp-pslider .shp-pcard{opacity:1 !important;translate:none !important;}

/* ---- Small screens ---- */
@media (max-width:560px){
	.shp-pcard__body{padding:4px 12px 13px;}
	.shp-pcard__title{font-size:.96rem;}
	.shp-pcard__no{inset-block-start:13px;inset-inline-start:13px;font-size:.78rem;}
	.shp-pslider{--ps-card:150px;--ps-gap:12px;}
	.shp-pslider.has-fade .shp-pslider__row{
		-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}
}

/* ---- Reduced motion: a still, swipeable strip ---- */
.shp-pslider.is-static .shp-pslider__row{overflow-x:auto;scroll-snap-type:x mandatory;cursor:auto;scrollbar-width:none;}
.shp-pslider.is-static .shp-pslider__row::-webkit-scrollbar{display:none;}
.shp-pslider.is-static .shp-pcard{scroll-snap-align:start;}
@media (prefers-reduced-motion:reduce){
	.shp-pcard,.shp-pcard__media img,.shp-pcard__shine{transition:none !important;}
	.shp-pslider__panel.is-entering{animation:none;}
}