/* Pin Labz Design — PP Hero. Scoped to .ppd-hero */
.ppd-hero{
	--fg:#fff;--fg-soft:rgba(255,255,255,.82);--fg-line:rgba(255,255,255,.55);
	position:relative;isolation:isolate;display:flex;min-height:88vh;overflow:hidden;
	background:var(--ppd-night);color:var(--fg);font-family:var(--ppd-font);
}
.ppd-hero-on-light .ppd-hero{--fg:var(--ppd-ink);--fg-soft:var(--ppd-muted);--fg-line:var(--ppd-line);background:var(--ppd-mist)}
.ppd-hero *,.ppd-hero *::before,.ppd-hero *::after{box-sizing:border-box}

/* Media */
.ppd-hero-media{position:absolute;inset:0;z-index:-1}
.ppd-hero-media picture{display:contents}
.ppd-hero-media img,.ppd-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;margin:0;max-width:none;border:0;border-radius:0}
.ppd-hero-video{opacity:0;transition:opacity .9s var(--ppd-ease)}
.ppd-hero.is-playing .ppd-hero-video{opacity:1}
.ppd-hero.ppd-no-media .ppd-hero-media{background:radial-gradient(120% 90% at 85% 20%,rgba(227,32,39,.45),transparent 60%),radial-gradient(90% 80% at 70% 90%,rgba(181,22,28,.35),transparent 60%),var(--ppd-night)}
.ppd-hero-on-light .ppd-hero.ppd-no-media .ppd-hero-media{background:radial-gradient(120% 90% at 85% 20%,rgba(255,74,80,.25),transparent 60%),radial-gradient(90% 80% at 70% 90%,rgba(227,32,39,.25),transparent 60%),var(--ppd-mist)}

/* Overlay: colour + strength come from the widget; the shape is a mask */
.ppd-hero-overlay{position:absolute;inset:0;background:#000;opacity:.62}
.ppd-ov-side .ppd-hero-overlay{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 28%,rgba(0,0,0,.35) 62%,transparent 88%);mask-image:linear-gradient(90deg,#000 0%,#000 28%,rgba(0,0,0,.35) 62%,transparent 88%)}
.ppd-ov-bottom .ppd-hero-overlay{-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 85%);mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 85%)}

/* Layout */
.ppd-hero-inner{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:120px 40px 96px;display:flex;flex-direction:column;justify-content:center}
.ppd-hero-content{display:flex;flex-direction:column;align-items:flex-start;max-width:680px;margin-right:auto}

/* Boxed tag — echoes the boxed strength on the vial label */
.ppd-hero-tag{display:inline-block;margin-bottom:28px;padding:9px 16px 8px;border:1.5px solid transparent;border-radius:2px;
	background:linear-gradient(var(--ppd-night),var(--ppd-night)) padding-box,var(--ppd-foil) border-box;
	font:600 12px/1 var(--ppd-font);letter-spacing:.22em;text-transform:uppercase;color:var(--ppd-accent)}
.ppd-hero-on-light .ppd-hero-tag{background:linear-gradient(var(--ppd-mist),var(--ppd-mist)) padding-box,var(--ppd-foil) border-box}
.ppd-tag-solid .ppd-hero-tag{background:none;border-color:var(--fg-line)}

/* Heading — light, wide-tracked like the wordmark */
.ppd-hero .ppd-hero-title{margin:0 0 22px;padding:0;font:700 clamp(36px,5.6vw,76px)/1.04 var(--ppd-font);letter-spacing:.02em;text-transform:uppercase;color:var(--fg);text-wrap:balance}
.ppd-hero .ppd-hero-text{margin:0 0 34px;max-width:52ch;font:400 clamp(16px,1.35vw,19px)/1.6 var(--ppd-font-b);letter-spacing:0;color:var(--fg-soft)}

/* Buttons */
.ppd-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ppd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border:1.5px solid transparent;border-radius:999px;
	font:600 14px/1 var(--ppd-font);letter-spacing:.12em;text-transform:uppercase;text-decoration:none!important;cursor:pointer;
	position:relative;overflow:hidden;isolation:isolate;transition:color .3s,background-color .3s,border-color .3s,transform .3s var(--ppd-ease)}
.ppd-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ppd-btn:active{transform:translateY(1px)}
.ppd-btn--light{background:#fff;color:#000}
.ppd-btn--ink{background:var(--ppd-mist);color:var(--ppd-ink);border-color:var(--ppd-line)}
.ppd-btn--foil{background:var(--ppd-foil);color:var(--ppd-on-foil)}
.ppd-btn--outline-light{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.ppd-btn--outline-ink{border-color:var(--ppd-ink);color:var(--ppd-ink);background:transparent}
/* Hover: foil wipes in from the left */
.ppd-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ppd-foil);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ppd-ease)}
.ppd-btn:hover::before,.ppd-btn:focus-visible::before{transform:scaleX(1)}
.ppd-btn:hover,.ppd-btn:focus-visible{color:var(--ppd-on-foil);border-color:transparent}
.ppd-btn--foil::before{background:#fff}

/* Foil strip — the one shimmer moment */
.ppd-hero-foil{display:block;width:min(420px,100%);height:2px;margin:40px 0 22px;border-radius:2px;background:var(--ppd-foil);background-size:200% 100%;opacity:.95}

/* Trust points */
.ppd-hero .ppd-hero-trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none;font:400 14px/1.4 var(--ppd-font-b);letter-spacing:0;color:var(--fg-soft)}
.ppd-hero-trust li{display:flex;align-items:center;gap:8px;margin:0;padding:0}
.ppd-hero-trust svg{flex:0 0 16px;color:var(--ppd-accent)}
.ppd-hero-on-light .ppd-hero-trust svg{color:var(--ppd-accent)}

/* Pause control */
.ppd-hero-pause{position:absolute;right:20px;bottom:20px;z-index:2;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--fg-line);border-radius:50%;background:rgba(0,0,0,.25);color:var(--fg);cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}
.ppd-hero-pause[hidden]{display:none}
.ppd-hero-pause:hover,.ppd-hero-pause:focus-visible{background:rgba(0,0,0,.5);color:var(--fg)}
.ppd-hero-on-light .ppd-hero-pause{background:rgba(0,0,0,.4)}
.ppd-hero-pause .ppd-i-play{display:none}
.ppd-hero.is-paused .ppd-hero-pause .ppd-i-play{display:block}
.ppd-hero.is-paused .ppd-hero-pause .ppd-i-pause{display:none}

/* One orchestrated load-in: content rises, then the foil strip shimmers once */
.ppd-intro .ppd-hero-content>*{animation:ppd-rise .9s var(--ppd-ease) both}
.ppd-intro .ppd-hero-content>:nth-child(2){animation-delay:.08s}
.ppd-intro .ppd-hero-content>:nth-child(3){animation-delay:.16s}
.ppd-intro .ppd-hero-content>:nth-child(4){animation-delay:.24s}
.ppd-intro .ppd-hero-content>:nth-child(n+5){animation-delay:.32s}
.ppd-intro .ppd-hero-foil{animation:ppd-rise .9s var(--ppd-ease) .32s both,ppd-shimmer 2.4s ease-in-out 1s 1 both}
@keyframes ppd-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ppd-shimmer{0%{background-position:0 0}100%{background-position:-200% 0}}
body.elementor-editor-active .ppd-intro .ppd-hero-content>*{animation:none}

/* Tablet */
@media (max-width:1024px){
	.ppd-hero-inner{padding:100px 32px 80px}
}
/* Mobile */
@media (max-width:767px){
	.ppd-hero-inner{padding:96px 20px 48px;justify-content:flex-end}
	.ppd-ov-side .ppd-hero-overlay{-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 38%,rgba(0,0,0,.4) 70%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,#000 38%,rgba(0,0,0,.4) 70%,transparent 100%)}
	.ppd-hero-tag{margin-bottom:20px;font-size:11px;padding:8px 12px 7px}
	.ppd-hero .ppd-hero-title{letter-spacing:.04em;margin-bottom:16px}
	.ppd-hero .ppd-hero-text{margin-bottom:26px}
	.ppd-hero-btnfull-yes .ppd-hero-actions{width:100%}
	.ppd-hero-btnfull-yes .ppd-btn{flex:1 1 100%}
	.ppd-hero-foil{margin:30px 0 18px}
	.ppd-hero .ppd-hero-trust{gap:8px 20px;font-size:13px}
	.ppd-hero-pause{right:14px;top:14px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){
	.ppd-intro .ppd-hero-content>*,.ppd-intro .ppd-hero-foil{animation:none}
	.ppd-hero-video{transition:none}
	.ppd-btn,.ppd-btn::before{transition:none}
}
