/* ==========================================================================
   base.css — design tokens, reset, typography, buttons, animation engine.
   Loaded on every view. Real token values are printed by inc/dynamic-css.php.
   ========================================================================== */

/* ---- Token fallbacks (overridden by the inline dynamic block) ---- */
:root{
	--shp-primary:#16C4EC;
	--shp-primary-rgb:22, 196, 236;
	--shp-primary-dark:#0B93B8;
	--shp-primary-soft:rgba(22,196,236,.12);
	--shp-accent:#4FA3E0;
	--shp-accent-rgb:79, 163, 224;

	--shp-bg:#061420;
	--shp-bg-rgb:6, 20, 32;
	--shp-bg-soft:#0B2033;
	--shp-card:#0C2135;
	--shp-card-rgb:12, 33, 53;
	--shp-dark:#030D16;
	--shp-dark-rgb:3, 13, 22;
	--shp-line:#17324A;

	--shp-ink:#FFFFFF;
	--shp-ink-rgb:255, 255, 255;
	--shp-body:#9DB2C4;
	--shp-muted:#6E869B;

	--shp-container:1280px;
	--shp-radius:14px;
	--shp-logo-h:72px;
	--shp-logo-h-m:50px;

	--shp-font-h:Impact, "Arial Narrow", sans-serif;
	--shp-font-b:system-ui, -apple-system, "Segoe UI", sans-serif;
	--shp-font-m:ui-monospace, Menlo, monospace;
	--shp-font-ar:"Segoe UI", Tahoma, sans-serif;
	--shp-fs-base:16px;
	--shp-h-weight:400;
	--shp-h-track:.01em;
	--shp-h-case:uppercase;
	--shp-h1:clamp(2.6rem, 1.4rem + 5vw, 5.2rem);
	--shp-h2:clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);
	--shp-h3:clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
	--shp-h4:clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
	--shp-h5:clamp(1.1rem, 1rem + .5vw, 1.35rem);
	--shp-h6:1.05rem;

	--shp-banner-h:520px;
	--shp-banner-h-m:380px;
	--shp-banner-overlay:.72;

	--shp-anim-dur:900ms;
	--shp-anim-dist:30px;
	--shp-anim-stagger:90ms;
	--shp-ease:cubic-bezier(.22,1,.36,1);

	/* Derived — CSS only */
	--shp-gutter:clamp(18px, 4vw, 40px);
	--shp-space-section:clamp(64px, 8vw, 132px);
	--shp-space-block:clamp(28px, 4vw, 56px);
	--shp-header-h:96px;
	--shp-shadow-s:0 2px 10px rgba(var(--shp-dark-rgb), .35);
	--shp-shadow-m:0 18px 42px rgba(var(--shp-dark-rgb), .45);
	--shp-shadow-l:0 36px 90px rgba(var(--shp-dark-rgb), .6);
	--shp-glow:0 0 0 1px rgba(var(--shp-primary-rgb), .35), 0 12px 40px rgba(var(--shp-primary-rgb), .28);
	--shp-hair:1px solid rgba(var(--shp-ink-rgb), .08);
	--shp-grad:linear-gradient(120deg, var(--shp-primary), var(--shp-accent));
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--shp-bg);
	color:var(--shp-body);
	font-family:var(--shp-font-b);
	font-size:var(--shp-fs-base);
	line-height:1.75;
	overflow-x:clip;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
img,svg,video,canvas{max-inline-size:100%;block-size:auto;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
figure,blockquote,p,h1,h2,h3,h4,h5,h6{margin:0;}
table{border-collapse:collapse;inline-size:100%;}
:focus-visible{outline:2px solid var(--shp-primary);outline-offset:3px;border-radius:4px;}
::selection{background:rgba(var(--shp-primary-rgb), .35);color:#fff;}

/* ---- Page background image ----
   Painted first (::before) so the ambient glow layers on top of it. */
body.shp-has-bg::before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:0;
	background-image:var(--shp-bg-image, none);
	background-size:var(--shp-bg-size, cover);
	background-position:center top;
	background-repeat:no-repeat;
	background-attachment:var(--shp-bg-attach, fixed);
	opacity:var(--shp-bg-opacity, .7);
}

/* ---- Ambient glow ---- */
body.shp-ambient::after{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:0;
	background:
		radial-gradient(60% 45% at 78% 4%, rgba(var(--shp-primary-rgb), .16), transparent 62%),
		radial-gradient(48% 40% at 8% 82%, rgba(var(--shp-accent-rgb), .12), transparent 60%);
}
.shp-page{position:relative;z-index:1;}

/* Sections that must let the artwork through. */
.shp-section,
.shp-story,
.shp-cats,
.shp-boxes,
.shp-clients,
.shp-products,
.shp-quote,
.shp-contact,
.shp-showcase,
.shp-cta{background-color:transparent;}

@media (hover:none){
	/* iOS ignores background-attachment:fixed and repaints on every scroll. */
	body.shp-has-bg::before{background-attachment:scroll;background-size:cover;}
}

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6{
	font-family:var(--shp-font-h);
	color:var(--shp-ink);
	font-weight:var(--shp-h-weight);
	letter-spacing:var(--shp-h-track);
	text-transform:var(--shp-h-case);
	line-height:1.04;
	text-wrap:balance;
}
h1{font-size:var(--shp-h1);}
h2{font-size:var(--shp-h2);}
h3{font-size:var(--shp-h3);}
h4{font-size:var(--shp-h4);}
h5{font-size:var(--shp-h5);}
h6{font-size:var(--shp-h6);}

.shp-grad{
	background:var(--shp-grad);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
.shp-mono{font-family:var(--shp-font-m);letter-spacing:.14em;text-transform:uppercase;}

/* ---- Layout ---- */
.shp-container{
	inline-size:min(100% - (var(--shp-gutter) * 2), var(--shp-container));
	margin-inline:auto;
}
.shp-container--narrow{inline-size:min(100% - (var(--shp-gutter) * 2), 860px);}
.shp-container--wide{inline-size:min(100% - (var(--shp-gutter) * 2), 1520px);}
.shp-section{padding-block:var(--shp-space-section);position:relative;}
.shp-section--tight{padding-block:var(--shp-space-block);}
.shp-section--soft{background:var(--shp-bg-soft);}

.shp-grid{display:grid;gap:clamp(18px, 2.2vw, 30px);}
.shp-grid--2{grid-template-columns:repeat(2, minmax(0,1fr));}
.shp-grid--3{grid-template-columns:repeat(3, minmax(0,1fr));}
.shp-grid--4{grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:1024px){
	.shp-grid--3,.shp-grid--4{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:600px){
	.shp-grid--2,.shp-grid--3,.shp-grid--4{grid-template-columns:minmax(0,1fr);}
}

/* ---- Section head ---- */
.shp-secHead{margin-block-end:clamp(28px, 4vw, 54px);max-inline-size:760px;}
.shp-secHead--center{margin-inline:auto;text-align:center;}
.shp-secHead__title{margin-block-start:14px;}
.shp-secHead__text{margin-block-start:16px;color:var(--shp-body);}

/* ---- Eyebrow ---- */
.shp-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-family:var(--shp-font-m);
	font-size:.74rem;
	letter-spacing:.24em;
	text-transform:uppercase;
	color:var(--shp-primary);
}
.shp-eyebrow__dot{color:var(--shp-primary);filter:drop-shadow(0 0 6px rgba(var(--shp-primary-rgb), .8));}

/* ---- Buttons ---- */
/* Registered so the hover lift and the press can ease on their own while the
   magnetic pull follows the pointer frame by frame. */
@property --lift{syntax:"<length>";initial-value:0px;inherits:false;}
@property --press{syntax:"<number>";initial-value:1;inherits:false;}

.shp-btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:14px 28px;
	border-radius:calc(var(--shp-radius) - 4px);
	font-family:var(--shp-font-m);
	font-size:.78rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	line-height:1;
	white-space:nowrap;
	isolation:isolate;
	overflow:hidden;
	--mag-x:0px;
	--mag-y:0px;
	--lift:0px;
	--press:1;
	transform:translate3d(var(--mag-x), calc(var(--mag-y) + var(--lift)), 0) scale(var(--press));
	transition:--lift .45s var(--shp-ease), --press .2s ease, box-shadow .45s var(--shp-ease), color .3s ease, border-color .3s ease, transform .45s var(--shp-ease);
}
/* The label leans a little further than the body — a sense of depth. */
.shp-btn > span,
.shp-btn > .shp-btn__icon{
	transform:translate3d(calc(var(--mag-x) * .35), calc(var(--mag-y) * .35), 0);
	transition:transform .45s var(--shp-ease);
}
/* While the pointer is on it, follow the pointer instantly — only the lift eases. */
.shp-btn[data-shp-magnetic]:hover{transition:--lift .45s var(--shp-ease), --press .2s ease, box-shadow .45s var(--shp-ease), color .3s ease, border-color .3s ease;}
.shp-btn[data-shp-magnetic]:hover > span{transition:none;}
.shp-btn:active{--press:.97;}
.shp-btn::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:var(--shp-grad);
	transform:translateY(0);
	transition:opacity .4s var(--shp-ease);
}
.shp-btn::after{
	content:"";
	position:absolute;
	inset-block:0;
	inset-inline-start:-140%;
	inline-size:60%;
	z-index:-1;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	transform:skewX(-18deg);
	transition:inset-inline-start .7s var(--shp-ease);
}
.shp-btn:hover::after{inset-inline-start:140%;}
.shp-btn__icon{transition:transform .4s var(--shp-ease);}
.shp-btn:hover > .shp-btn__icon{transform:translate3d(calc(var(--mag-x) * .35 + 4px), calc(var(--mag-y) * .35), 0);}

.shp-btn--primary{color:#04121C;box-shadow:0 10px 30px rgba(var(--shp-primary-rgb), .3);}
.shp-btn--primary:hover{--lift:-3px;box-shadow:0 18px 44px rgba(var(--shp-primary-rgb), .45);}

.shp-btn--light{color:var(--shp-dark);}
.shp-btn--light::before{background:var(--shp-ink);}
.shp-btn--light:hover{--lift:-3px;}

.shp-btn--outline{
	color:var(--shp-ink);
	border:1px solid rgba(var(--shp-ink-rgb), .22);
	background:rgba(var(--shp-ink-rgb), .02);
}
.shp-btn--outline::before{opacity:0;}
.shp-btn--outline:hover{color:#04121C;border-color:transparent;--lift:-3px;}
.shp-btn--outline:hover::before{opacity:1;}

.shp-btn--ghost{color:var(--shp-primary);padding-inline:0;}
.shp-btn--ghost::before,.shp-btn--ghost::after{display:none;}
.shp-btn--ghost:hover{color:var(--shp-ink);}

.shp-btn--sm{padding:11px 20px;font-size:.7rem;}
.shp-btn--lg{padding:18px 40px;font-size:.82rem;}
.shp-btn--block{inline-size:100%;}

/* ---- Icon button ---- */
.shp-iconBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	inline-size:42px;
	block-size:42px;
	border-radius:50%;
	color:var(--shp-ink);
	border:1px solid rgba(var(--shp-ink-rgb), .1);
	background:rgba(var(--shp-ink-rgb), .04);
	transition:background .3s ease, border-color .3s ease, transform .4s var(--shp-ease), color .3s ease;
}
.shp-iconBtn:hover{
	background:rgba(var(--shp-primary-rgb), .16);
	border-color:rgba(var(--shp-primary-rgb), .5);
	color:var(--shp-primary);
	transform:translateY(-2px);
}

/* ---- Surfaces ---- */
.shp-surface{
	background:linear-gradient(160deg, rgba(var(--shp-ink-rgb), .05), rgba(var(--shp-ink-rgb), .015));
	border:var(--shp-hair);
	border-radius:var(--shp-radius);
	box-shadow:var(--shp-shadow-m);
}

/* ---- Forms ---- */
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=search],input[type=password],textarea,select{
	inline-size:100%;
	padding:14px 18px;
	border-radius:calc(var(--shp-radius) - 4px);
	border:1px solid rgba(var(--shp-ink-rgb), .1);
	background:rgba(var(--shp-dark-rgb), .5);
	color:var(--shp-ink);
	transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
textarea{min-block-size:140px;resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--shp-muted);}
input:focus,textarea:focus,select:focus{
	outline:none;
	border-color:rgba(var(--shp-primary-rgb), .65);
	box-shadow:0 0 0 4px rgba(var(--shp-primary-rgb), .14);
	background:rgba(var(--shp-dark-rgb), .75);
}
label{display:block;font-family:var(--shp-font-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--shp-muted);margin-block-end:8px;}

/* ---- Rich text ---- */
.shp-rte{color:var(--shp-body);}
.shp-rte > * + *{margin-block-start:1.15em;}
.shp-rte h2,.shp-rte h3,.shp-rte h4{margin-block-start:1.6em;}
.shp-rte a{color:var(--shp-primary);text-decoration:underline;text-underline-offset:4px;transition:color .25s ease;}
.shp-rte a:hover{color:var(--shp-ink);}
.shp-rte ul,.shp-rte ol{padding-inline-start:1.3em;}
.shp-rte ul li{list-style:none;position:relative;padding-inline-start:20px;margin-block-end:10px;}
.shp-rte ul li::before{
	content:"";
	position:absolute;
	inset-inline-start:0;
	inset-block-start:.7em;
	inline-size:7px;
	block-size:7px;
	border-radius:2px;
	background:var(--shp-grad);
	transform:rotate(45deg);
}
.shp-rte ol li{list-style:decimal;margin-block-end:10px;}
.shp-rte blockquote{
	margin:0;
	padding:24px 28px;
	border-inline-start:3px solid var(--shp-primary);
	background:rgba(var(--shp-ink-rgb), .03);
	border-radius:var(--shp-radius);
	color:var(--shp-ink);
	font-size:1.1rem;
}
.shp-rte img{border-radius:var(--shp-radius);}
.shp-rte code{font-family:var(--shp-font-m);background:rgba(var(--shp-ink-rgb), .06);padding:2px 7px;border-radius:5px;font-size:.9em;}
.shp-rte table{margin-block:1.4em;}
.shp-rte th,.shp-rte td{padding:12px 16px;border-block-end:var(--shp-hair);text-align:start;}
.shp-rte th{color:var(--shp-ink);font-family:var(--shp-font-m);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;}

/* ---- Utilities ---- */
.screen-reader-text{
	position:absolute !important;
	inline-size:1px;block-size:1px;
	padding:0;margin:-1px;
	overflow:hidden;clip-path:inset(50%);
	white-space:nowrap;border:0;
}
.shp-skip{
	position:absolute;
	inset-block-start:-100px;
	inset-inline-start:16px;
	z-index:999;
	padding:12px 22px;
	background:var(--shp-primary);
	color:#04121C;
	border-radius:0 0 10px 10px;
	transition:inset-block-start .3s var(--shp-ease);
}
.shp-skip:focus{inset-block-start:0;}
.shp-flip{transform:scaleX(-1);}
.shp-hide{display:none !important;}

/* ---- Preloader ---- */
/* ==========================================================================
   Preloader — the brand hands the page over.

   1. Stage: deep navy, a slow breathing glow, smoke rising behind the mark.
   2. The mark: the logo disc, circled by a ring that draws with real loading
      progress, over a soft orbiting highlight.
   3. The name rises letter by letter (word by word in Arabic, so the script
      keeps its joins); a quiet percentage counts beneath.
   4. Hand-over: the ring closes and flares, then the whole stage collapses
      into the mark — a circle closing on the logo — revealing the page.
   Everything animates transform, opacity or clip-path only.
   ========================================================================== */
.shp-preloader{
	--pl-progress:0;
	position:fixed;
	inset:0;
	z-index:9999;
	display:grid;
	place-items:center;
	overflow:hidden;
	background:
		radial-gradient(60% 50% at 50% 46%, rgba(var(--shp-primary-rgb), .1), transparent 70%),
		var(--shp-dark);
	clip-path:circle(150% at 50% 46%);
	color:var(--shp-ink);
}

/* ---- Stage ---- */
.shp-preloader__glow{
	position:absolute;
	inset-block-start:46%;
	inset-inline-start:50%;
	inline-size:min(90vw, 760px);
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(circle, rgba(var(--shp-primary-rgb), .22), rgba(var(--shp-accent-rgb), .06) 42%, transparent 68%);
	transform:translate(-50%, -50%) scale(.9);
	animation:shp-pl-breathe 3.2s ease-in-out infinite;
	pointer-events:none;
}
.shp-rtl .shp-preloader__glow{transform:translate(50%, -50%) scale(.9);animation-name:shp-pl-breathe-rtl;}
@keyframes shp-pl-breathe{0%,100%{opacity:.55;transform:translate(-50%, -50%) scale(.9);}50%{opacity:1;transform:translate(-50%, -50%) scale(1.06);}}
@keyframes shp-pl-breathe-rtl{0%,100%{opacity:.55;transform:translate(50%, -50%) scale(.9);}50%{opacity:1;transform:translate(50%, -50%) scale(1.06);}}

/* Smoke: soft plumes that rise, swell and thin out behind the mark. */
.shp-preloader__smoke{position:absolute;inset:0;pointer-events:none;}
.shp-preloader__smoke span{
	position:absolute;
	inset-block-end:18%;
	inset-inline-start:calc(50% - 110px);
	inline-size:220px;
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(circle, rgba(var(--shp-primary-rgb), .34), rgba(var(--shp-accent-rgb), .08) 48%, transparent 70%);
	filter:blur(26px);
	opacity:0;
	animation:shp-pl-plume 4.2s cubic-bezier(.3,.1,.3,1) infinite;
}
.shp-preloader__smoke span:nth-child(2){inset-inline-start:calc(50% - 170px);animation-delay:1.4s;animation-duration:4.8s;}
.shp-preloader__smoke span:nth-child(3){inset-inline-start:calc(50% - 40px);animation-delay:2.6s;animation-duration:4.4s;}
@keyframes shp-pl-plume{
	0%{opacity:0;transform:translate3d(0, 40px, 0) scale(.5);}
	25%{opacity:.9;}
	100%{opacity:0;transform:translate3d(30px, -340px, 0) scale(1.8);}
}

/* ---- The mark ---- */
.shp-preloader__core{
	position:relative;
	z-index:2;
	display:grid;
	justify-items:center;
	gap:30px;
	text-align:center;
}
.shp-preloader__mark{
	position:relative;
	display:grid;
	place-items:center;
	inline-size:clamp(116px, 18vw, 150px);
	aspect-ratio:1;
	opacity:0;
	transform:scale(.82);
	animation:shp-pl-in .9s cubic-bezier(.34,1.56,.64,1) .1s forwards;
}
@keyframes shp-pl-in{to{opacity:1;transform:none;}}

.shp-preloader__disc{
	position:relative;
	inline-size:78%;
	aspect-ratio:1;
	border-radius:50%;
	overflow:hidden;
	display:grid;
	place-items:center;
	background:radial-gradient(circle at 32% 26%, rgba(var(--shp-ink-rgb), .14), rgba(var(--shp-ink-rgb), .03) 70%);
	box-shadow:
		0 0 0 1px rgba(var(--shp-primary-rgb), .3),
		0 0 44px rgba(var(--shp-primary-rgb), .35),
		inset 0 0 26px rgba(var(--shp-primary-rgb), .18);
}
.shp-preloader__disc img{inline-size:100%;block-size:100%;object-fit:cover;}
.shp-preloader__mono{
	font-family:var(--shp-font-h);
	font-weight:700;
	font-size:2.2rem;
	letter-spacing:.02em;
	background:var(--shp-title-grad, var(--shp-grad));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
/* A highlight that orbits the disc. */
.shp-preloader__disc::after{
	content:"";
	position:absolute;
	inset:-40%;
	background:conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.28) 82%, transparent 94%);
	animation:shp-spin 2.4s linear infinite;
	mix-blend-mode:soft-light;
}

/* The ring: a track, and a bar that draws with the loading progress. */
.shp-preloader__ring{
	position:absolute;
	inset:0;
	inline-size:100%;
	block-size:100%;
	transform:rotate(-90deg);
	overflow:visible;
}
.shp-rtl .shp-preloader__ring{transform:rotate(-90deg) scaleY(-1);}
.shp-preloader__track{fill:none;stroke:rgba(var(--shp-ink-rgb), .08);stroke-width:1.5;}
.shp-preloader__bar{
	fill:none;
	stroke:url(#shp-pl-grad);
	stroke-width:2.5;
	stroke-linecap:round;
	stroke-dasharray:100;
	stroke-dashoffset:calc(100 - var(--pl-progress) * 100);
	filter:drop-shadow(0 0 6px rgba(var(--shp-primary-rgb), .9));
	transition:stroke-dashoffset .35s ease-out;
}
/* A spark that rides the head of the bar. */
.shp-preloader__spark{
	position:absolute;
	inset:0;
	transform:rotate(calc(var(--pl-progress) * 360deg));
	transition:transform .35s ease-out;
}
.shp-preloader__spark::before{
	content:"";
	position:absolute;
	inset-block-start:-3px;
	inset-inline-start:calc(50% - 3px);
	inline-size:6px;
	block-size:6px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 0 10px 3px rgba(var(--shp-primary-rgb), .95);
}
.shp-rtl .shp-preloader__spark{transform:rotate(calc(var(--pl-progress) * -360deg));}

/* ---- The name ---- */
.shp-preloader__word{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0 .02em;
	font-family:var(--shp-font-h);
	font-weight:600;
	font-size:clamp(1.25rem, 1rem + 1.2vw, 1.8rem);
	letter-spacing:.32em;
	text-transform:uppercase;
	line-height:1;
	padding-inline-start:.32em;
}
.shp-rtl .shp-preloader__word{letter-spacing:0;gap:0 .4em;padding-inline-start:0;font-family:var(--shp-font-ar);}
.shp-preloader__char{display:inline-block;overflow:hidden;padding-block:.08em;}
.shp-preloader__char > span{
	display:inline-block;
	transform:translate3d(0, 110%, 0);
	animation:shp-pl-rise .9s cubic-bezier(.77,0,.18,1) forwards;
	animation-delay:calc(var(--i) * 45ms + .45s);
}
.shp-preloader__char--space{inline-size:.5em;}
@keyframes shp-pl-rise{to{transform:none;}}

.shp-preloader__meta{
	display:flex;
	align-items:center;
	gap:12px;
	font-family:var(--shp-font-m);
	font-size:.66rem;
	letter-spacing:.3em;
	text-transform:uppercase;
	color:var(--shp-muted);
	opacity:0;
	animation:shp-pl-fade .8s ease 1s forwards;
}
.shp-preloader__meta::before{
	content:"";
	inline-size:34px;
	block-size:1px;
	background:linear-gradient(90deg, transparent, var(--shp-primary));
}
.shp-preloader__meta::after{
	content:"";
	inline-size:34px;
	block-size:1px;
	background:linear-gradient(90deg, var(--shp-primary), transparent);
}
.shp-preloader__pct{min-inline-size:3.2ch;color:var(--shp-ink);font-variant-numeric:tabular-nums;}
@keyframes shp-pl-fade{to{opacity:1;}}

/* ---- Hand-over ---- */
.shp-preloader.is-closing .shp-preloader__bar{filter:drop-shadow(0 0 14px rgba(var(--shp-primary-rgb), 1));}
.shp-preloader.is-closing .shp-preloader__mark{animation:shp-pl-flare .7s cubic-bezier(.34,1.56,.64,1) forwards;}
.shp-preloader.is-closing .shp-preloader__word,
.shp-preloader.is-closing .shp-preloader__meta{transition:opacity .4s ease, transform .5s ease;opacity:0;transform:translateY(-10px);}
@keyframes shp-pl-flare{0%{opacity:1;transform:scale(1);}40%{opacity:1;transform:scale(1.08);}100%{opacity:1;transform:scale(.9);}}

.shp-preloader.is-done{
	animation:shp-pl-close 1s cubic-bezier(.77,0,.18,1) forwards;
	pointer-events:none;
}
@keyframes shp-pl-close{
	0%{clip-path:circle(150% at 50% 46%);}
	100%{clip-path:circle(0% at 50% 46%);visibility:hidden;}
}
/* The page rises into place as the stage closes over it. */
/* Only with JS running — without it the page is never held back. */
html.js .shp-preloading .shp-page{opacity:0;transform:translateY(18px) scale(.985);}
.shp-loaded .shp-page{opacity:1;transform:none;transition:opacity .9s ease .15s, transform 1.1s cubic-bezier(.22,1,.36,1) .15s;}

/* Returning within the session: a quick, quiet hand-over. */
.shp-preloader.is-quick .shp-preloader__word,
.shp-preloader.is-quick .shp-preloader__meta,
.shp-preloader.is-quick .shp-preloader__smoke{display:none;}
.shp-preloader.is-quick.is-done{animation-duration:.6s;}

@media (max-width:560px){
	.shp-preloader__smoke span{inline-size:160px;inset-inline-start:calc(50% - 80px);}
	.shp-preloader__word{letter-spacing:.22em;}
}

@media (prefers-reduced-motion:reduce){
	.shp-preloader__glow,.shp-preloader__smoke span,.shp-preloader__disc::after{animation:none;}
	.shp-preloader__smoke{display:none;}
	.shp-preloader__mark,.shp-preloader__meta{animation:none;opacity:1;transform:none;}
	.shp-preloader__char > span{animation:none;transform:none;}
	.shp-preloader.is-done{animation:none;opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s .3s;}
	html.js .shp-preloading .shp-page,.shp-loaded .shp-page{opacity:1;transform:none;transition:none;}
}

@keyframes shp-spin{to{transform:rotate(360deg);}}

/* ---- Progress + to top ---- */
.shp-progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:9998;pointer-events:none;}
.shp-progress span{display:block;block-size:100%;inline-size:0;background:var(--shp-grad);box-shadow:0 0 14px rgba(var(--shp-primary-rgb), .7);transition:inline-size .1s linear;}

.shp-totop{
	position:fixed;
	inset-block-end:26px;
	inset-inline-end:26px;
	z-index:90;
	inline-size:48px;
	block-size:48px;
	border-radius:50%;
	display:grid;
	place-items:center;
	color:#04121C;
	background:var(--shp-grad);
	box-shadow:0 12px 30px rgba(var(--shp-primary-rgb), .35);
	opacity:0;
	visibility:hidden;
	transform:translateY(16px) scale(.9);
	transition:opacity .4s var(--shp-ease), transform .4s var(--shp-ease), visibility .4s;
}
.shp-totop.is-visible{opacity:1;visibility:visible;transform:none;}
.shp-totop:hover{transform:translateY(-3px);}

/* ==========================================================================
   Animation engine — [data-shp-anim]
   ========================================================================== */
.shp-anim-on [data-shp-anim]{
	opacity:0;
	transition:opacity var(--shp-anim-dur) var(--shp-ease), transform var(--shp-anim-dur) var(--shp-ease), filter var(--shp-anim-dur) var(--shp-ease), clip-path var(--shp-anim-dur) var(--shp-ease);
	transition-delay:var(--shp-delay, 0ms);
	will-change:opacity, transform;
}
.shp-anim-on [data-shp-anim="up"]{transform:translateY(var(--shp-anim-dist));}
.shp-anim-on [data-shp-anim="down"]{transform:translateY(calc(var(--shp-anim-dist) * -1));}
.shp-anim-on [data-shp-anim="start"]{transform:translateX(calc(var(--shp-anim-dist) * -1));}
.shp-anim-on [data-shp-anim="end"]{transform:translateX(var(--shp-anim-dist));}
.shp-anim-on [data-shp-anim="zoom"]{transform:scale(.92);}
.shp-anim-on [data-shp-anim="blur"]{filter:blur(14px);transform:translateY(calc(var(--shp-anim-dist) / 2));}
.shp-anim-on [data-shp-anim="reveal"]{clip-path:inset(0 0 100% 0);transform:translateY(var(--shp-anim-dist));}
.shp-anim-on [data-shp-anim="reveal-x"]{clip-path:inset(0 100% 0 0);}
.shp-anim-on [data-shp-anim="fade"]{transform:none;}

.shp-anim-on [data-shp-anim].shp-in{
	opacity:1;
	transform:none;
	filter:none;
	clip-path:inset(0 0 0 0);
}

/* Split-line headings.
   The initial offset is applied ONLY after animations.js has armed the element
   (.shp-split-ready). Without that guard a heading whose reveal never fires
   would stay translated behind overflow:hidden — i.e. invisible text. */
.shp-splitLine{display:block;overflow:hidden;}
.shp-splitLine__inner{
	display:block;
	transition:transform 1s var(--shp-ease);
	transition-delay:var(--shp-line-delay, 0ms);
}
.shp-split-ready .shp-splitLine__inner{transform:translateY(105%);}
.shp-in .shp-splitLine__inner,
.shp-splitLine.shp-in .shp-splitLine__inner,
.shp-split-ready.shp-in .shp-splitLine__inner{transform:none;}

/* Tilt + shine */
[data-shp-tilt]{transform-style:preserve-3d;transition:transform .5s var(--shp-ease);}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
	.shp-anim-on [data-shp-anim]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;}
	.shp-splitLine__inner{transform:none !important;}
}

html.no-js .shp-anim-on [data-shp-anim]{opacity:1;transform:none;filter:none;clip-path:none;}
html.no-js .shp-preloader{display:none;}

/* ==========================================================================
   Touch refinement — the motion language stays, the physics change.
   Shorter travel, quicker settle, and no effects that need a pointer.
   ========================================================================== */
@media (hover:none){
	:root{
		--shp-anim-dist:18px;
		--shp-anim-dur:640ms;
		--shp-anim-stagger:60ms;
	}

	/* Hover-only flourishes never fire on touch, so stop reserving for them. */
	.shp-btn::after,
	.shp-card__shine,
	.shp-story__ring{display:none;}

	/* Tap feedback replaces hover feedback. */
	.shp-btn:active{--press:.97;}
	.shp-iconBtn:active,
	.shp-filters__pill:active{transform:scale(.97);}
	.shp-card:active,
	.shp-cat:active,
	.shp-prod:active,
	.shp-box:active,
	.shp-jobCard:active{transform:translateY(-2px) scale(.995);}

	/* Every interactive target clears the 44px guideline. */
	.shp-nav--mobile .shp-nav__link,
	.shp-footer__menu a,
	.shp-footer__contactItem a,
	.shp-social__link,
	.shp-pag__item .page-numbers{min-block-size:44px;display:flex;align-items:center;}
	.shp-social__link,
	.shp-pag__item .page-numbers{justify-content:center;}
	.shp-slider__dot{padding:12px 6px;}

	/* Momentum scrolling inside horizontal strips. */
	.shp-tabs__nav,
	.shp-carousel__track,
	.shp-filters{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
}

@media (hover:none) and (max-width:560px){
	/* Reveal sooner on a short screen so content is never "missing". */
	.shp-anim-on [data-shp-anim]{transition-duration:520ms;}
	.shp-anim-on [data-shp-anim="zoom"]{transform:scale(.97);}
	.shp-anim-on [data-shp-anim="blur"]{filter:blur(8px);}
}

/* ==========================================================================
   Layout guard — one set of edges for the whole site, and never a sideways
   scroll.

   1. Nothing may widen the page. `clip` (not `hidden`) is used on the page
      wrapper because it does not create a scroll container, so the sticky
      header keeps working. iOS Safari zooms the whole page out when anything
      overflows — that is what made full-width bands look short on phones.
   2. Elementor's boxed sections line up with the theme container — the same
      edge as the header and the hero copy — and keep a gutter on small
      screens instead of running text to the glass.
   ========================================================================== */
html{overflow-x:hidden;}
@supports (overflow:clip){
	html{overflow-x:clip;}
	.shp-page{overflow-x:clip;}
}
html,body{max-inline-size:100%;}
img,video,iframe,svg{max-inline-size:100%;}

/* Same content edge as .shp-container, everywhere. A width set on a section
   in the editor is more specific and still wins. */
body .elementor-section.elementor-section-boxed > .elementor-container{
	max-inline-size:calc(var(--shp-container) + var(--shp-gutter) * 2);
	padding-inline:var(--shp-gutter);
}
body[class*="elementor-kit-"]{--container-max-width:var(--shp-container);}
@media (max-width:1024px){
	body .e-con.e-con-boxed > .e-con-inner{padding-inline:var(--shp-gutter);}
}
/* A widget that brings its own container, dropped into a boxed section,
   must not add a second gutter. */
body .elementor-section-boxed .shp-container,
body .e-con-boxed .shp-container{inline-size:100%;}

/* ==========================================================================
   Share
   ========================================================================== */
.shp-share{position:relative;display:inline-flex;}
.shp-share__toggle{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:15px 20px;
	border-radius:calc(var(--shp-radius) - 4px);
	font-family:var(--shp-font-m);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--shp-ink);
	border:1px solid rgba(var(--shp-ink-rgb), .16);
	background:rgba(var(--shp-ink-rgb), .03);
	isolation:isolate;
	transition:border-color .3s ease, color .3s ease, transform .4s var(--shp-ease);
}
.shp-share__toggle:hover,
.shp-share.is-open .shp-share__toggle{border-color:rgba(var(--shp-primary-rgb), .6);color:var(--shp-primary);}
.shp-share__toggle .shp-icon{transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.shp-share__toggle:hover .shp-icon{transform:rotate(-12deg) scale(1.1);}
.shp-share.is-open .shp-share__toggle .shp-icon{transform:rotate(-90deg);}
.shp-share__pulse{
	position:absolute;
	inset:-1px;
	z-index:-1;
	border-radius:inherit;
	box-shadow:0 0 0 0 rgba(var(--shp-primary-rgb), .5);
	opacity:0;
}
.shp-share__toggle:hover .shp-share__pulse{animation:shp-share-pulse 1.4s ease-out infinite;opacity:1;}
@keyframes shp-share-pulse{0%{box-shadow:0 0 0 0 rgba(var(--shp-primary-rgb), .45);}100%{box-shadow:0 0 0 14px rgba(var(--shp-primary-rgb), 0);}}

.shp-share__panel{
	position:absolute;
	z-index:60;
	inset-block-end:calc(100% + 14px);
	inset-inline-start:0;
	inline-size:min(360px, calc(100vw - 32px));
	padding:18px;
	border-radius:22px;
	color:var(--shp-ink);
	background:linear-gradient(165deg, #142c42, #081624);
	-webkit-backdrop-filter:blur(18px);
	backdrop-filter:blur(18px);
	border:1px solid rgba(var(--shp-ink-rgb), .1);
	box-shadow:0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--shp-primary-rgb), .08);
	transform-origin:var(--shp-share-origin, 20px) 100%;
	opacity:0;
	transform:translateY(10px) scale(.92);
	transition:opacity .28s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.shp-share__panel:not([hidden]){display:block;}
.shp-share.is-open .shp-share__panel{opacity:1;transform:none;}

.shp-share__head{display:flex;align-items:center;gap:12px;padding-block-end:14px;margin-block-end:14px;border-block-end:1px solid rgba(var(--shp-ink-rgb), .08);}
.shp-share__thumb{flex:0 0 52px;inline-size:52px;block-size:52px;border-radius:12px;object-fit:contain;padding:4px;background:#fff;}
.shp-share__meta{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1;}
.shp-share__meta strong{font-family:var(--shp-font-h);font-size:1.1rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shp-share__meta span{font-family:var(--shp-font-m);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--shp-muted);}
.shp-share__close{display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;color:var(--shp-muted);background:rgba(var(--shp-ink-rgb), .05);transition:color .3s ease, background .3s ease, transform .4s ease;}
.shp-share__close:hover{color:var(--shp-ink);background:rgba(var(--shp-ink-rgb), .12);transform:rotate(90deg);}

.shp-share__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, 1fr);gap:8px 6px;}
.shp-share__grid li{opacity:0;transform:translateY(12px) scale(.7);}
.shp-share.is-open .shp-share__grid li{
	opacity:1;
	transform:none;
	transition:opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
	transition-delay:calc(var(--i) * 40ms + 80ms);
}
.shp-share__channel{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 2px;border-radius:14px;color:var(--shp-ink);transition:background .3s ease;}
.shp-share__channel:hover{background:rgba(var(--shp-ink-rgb), .05);}
.shp-share__icon{
	--brand:var(--shp-primary);
	display:grid;
	place-items:center;
	inline-size:48px;
	block-size:48px;
	border-radius:50%;
	color:var(--shp-ink);
	background:rgba(var(--shp-ink-rgb), .06);
	box-shadow:inset 0 0 0 1px rgba(var(--shp-ink-rgb), .08);
	transition:background .35s ease, color .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.shp-share__channel:hover .shp-share__icon{background:var(--brand);color:#fff;transform:translateY(-4px) scale(1.06);box-shadow:0 12px 26px -6px var(--brand);}
.shp-share__channel--whatsapp .shp-share__icon{--brand:#25d366;}
.shp-share__channel--facebook .shp-share__icon{--brand:#1877f2;}
.shp-share__channel--x .shp-share__icon{--brand:#111;}
.shp-share__channel--telegram .shp-share__icon{--brand:#27a7e7;}
.shp-share__channel--linkedin .shp-share__icon{--brand:#0a66c2;}
.shp-share__channel--pinterest .shp-share__icon{--brand:#e60023;}
.shp-share__channel--mail .shp-share__icon{--brand:var(--shp-primary);}
.shp-share__name{font-size:.66rem;color:var(--shp-muted);letter-spacing:.02em;}

.shp-share__copy{
	display:flex;
	align-items:center;
	gap:10px;
	margin-block-start:14px;
	padding:6px 6px 6px 14px;
	border-radius:14px;
	background:rgba(0,0,0,.25);
	border:1px solid rgba(var(--shp-ink-rgb), .08);
}
.shp-rtl .shp-share__copy{padding:6px 14px 6px 6px;}
.shp-share__url{flex:1;min-inline-size:0;font-family:var(--shp-font-m);font-size:.7rem;color:var(--shp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shp-share__copyBtn{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 14px;
	border-radius:10px;
	font-family:var(--shp-font-m);
	font-size:.66rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#04121c;
	background:var(--shp-grad);
	overflow:hidden;
	transition:transform .3s ease;
}
.shp-share__copyBtn:active{transform:scale(.96);}
.shp-share__copyIcon,.shp-share__copyDone{display:grid;place-items:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;}
.shp-share__copyDone{position:absolute;inset-inline-start:14px;opacity:0;transform:scale(.3) rotate(-40deg);}
.shp-share.is-copied .shp-share__copyIcon{opacity:0;transform:scale(.3);}
.shp-share.is-copied .shp-share__copyDone{opacity:1;transform:none;}
.shp-share.is-copied .shp-share__copyBtn{background:#25d366;}

/* Phones without a native share sheet: a bottom sheet. */
.shp-share__scrim{position:fixed;inset:0;z-index:59;background:rgba(2,8,14,.55);opacity:0;transition:opacity .3s ease;}
.shp-share.is-open .shp-share__scrim{opacity:1;}
@media (max-width:560px){
	.shp-share__panel{
		position:fixed;
		inset-inline:12px;
		inset-block-end:12px;
		inline-size:auto;
		transform-origin:50% 100%;
		transform:translateY(40px);
	}
	.shp-share.is-open .shp-share__panel{transform:none;}
}
@media (prefers-reduced-motion:reduce){
	.shp-share__panel,.shp-share__grid li{transition:opacity .2s ease !important;transform:none !important;}
	.shp-share__toggle:hover .shp-share__pulse{animation:none;}
}