/* =========================================================
   Positrix Power / KALORIE v3: modern futuristic layer
   Loaded last. Hero ("hx"), bento batteries, glass and glow surfaces, timeline, scroll effects.
   Motion is limited by prefers-reduced-motion; the hero has a pause control.
   ========================================================= */

@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root { --hx-ease: cubic-bezier(.7, 0, .2, 1); --pp-radius: 14px; --pp-radius-lg: 20px; --pp-bg: #f1f5f2; }
body { background: var(--pp-bg); }

/* scroll progress */
.pp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--pp-orange), #fff 50%, var(--pp-green)); box-shadow: 0 0 12px rgba(237, 135, 20, .6); pointer-events: none; }

/* sharper reveal */
.pp-js .pp-reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .8s var(--hx-ease), transform .8s var(--hx-ease), filter .8s var(--hx-ease); transition-delay: calc(var(--d, 0) * .09s); }
.pp-js .pp-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- hero ---------- */
.hx { position: relative; background: #050d08; color: #fff; overflow: hidden; isolation: isolate; --mx: 72%; --my: 30%; }
.hx__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hx__fx { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hx__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 80% at 65% 40%, #000 25%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 65% 40%, #000 25%, transparent 85%); }
.hx__inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding-block: clamp(34px, 5vw, 64px) 18px; min-height: min(84vh, 760px); }

.hx__title { font-size: clamp(2.35rem, 3.9vw + .7rem, 4.7rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; color: #fff; margin: 0 0 .4em; }
.hx__line { display: block; }
.hx__w--india { position: relative; }
.hx__w--india::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--pp-tri); transform: scaleX(0); transform-origin: left; animation: hx-draw 1s var(--hx-ease) 1.1s forwards; border-radius: 2px; }
@keyframes hx-draw { to { transform: scaleX(1); } }
.hx__lead { color: #c3d4c8; font-size: clamp(1rem, .35vw + .95rem, 1.14rem); max-width: 54ch; margin-bottom: 1.3em; animation: hx-fade 1s ease .7s both; }
@keyframes hx-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hx__now { display: flex; align-items: center; gap: 18px; margin: 0 0 8px; }
.hx__num { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--pp-font-heading); }
.hx__num b { font-size: clamp(2.6rem, 3vw + 1rem, 3.8rem); line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.hx__num i { font-style: normal; font-weight: 700; font-size: .9rem; color: #6f877a; }
.hx__roll { display: block; height: 1.5em; overflow: hidden; font: 800 .86rem/1.5em var(--pp-font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-orange); padding-left: 18px; border-left: 2px solid rgba(255, 255, 255, .2); }
.hx__rolltrack { display: block; transition: transform .8s var(--hx-ease); }
.hx__rolltrack span { display: block; height: 1.5em; white-space: nowrap; }
.hx__slides { display: grid; margin-bottom: 24px; min-height: 0; }
.hx__sl { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); filter: blur(4px); transition: opacity .6s ease, transform .7s var(--hx-ease), filter .6s, visibility .6s; }
.hx__sl.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .2s; }
.hx__sl-t { margin: 0 0 6px; font: 800 clamp(1.25rem, 1vw + 1rem, 1.75rem)/1.2 var(--pp-font-heading); letter-spacing: -.02em; }
.hx__sl-d { margin: 0 0 10px; color: #aec3b5; max-width: 50ch; }
.hx__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; animation: hx-fade 1s ease 1s both; }

.hx__stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1.04; margin-inline: auto; --px: 0px; --py: 0px; }
.hx__floor { position: absolute; left: 14%; right: 14%; bottom: 3%; height: 56px; background: radial-gradient(closest-side, rgba(237, 135, 20, .6), rgba(18, 140, 35, .2) 60%, transparent); filter: blur(12px); animation: hx-floor 5s ease-in-out infinite; }
@keyframes hx-floor { 50% { opacity: .55; transform: scaleX(.9); } }
.hx__img { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; clip-path: inset(100% 0 0 0); opacity: 0; transition: clip-path 1s var(--hx-ease), opacity .3s .5s; }
.hx__img.is-active { clip-path: inset(0); opacity: 1; transition: clip-path 1s var(--hx-ease), opacity .01s; }
.hx__img.is-prev { clip-path: inset(0 0 100% 0); opacity: 1; transition: clip-path 1s var(--hx-ease); }
.hx__hud { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; visibility: hidden; transform: translate3d(var(--px), var(--py), 0); transition: transform .35s ease-out, visibility .6s; }
.hx__hud.is-active { visibility: visible; }
.hx__hud.is-active .hx__chip { opacity: 1; transform: none; transition-delay: calc(var(--k) * .13s + .45s); }
.hx__chip em { font: 800 .66rem var(--pp-font-heading); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--pp-orange); }
.hx__chip strong { font: 800 1.02rem var(--pp-font-heading); letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.hx__chip::after { content: ""; position: absolute; top: 50%; width: 38px; height: 1px; background: linear-gradient(90deg, rgba(237, 135, 20, .9), transparent); }
.hx__chip--1 { left: -2%; top: 10%; } .hx__chip--1::after { left: 100%; }
.hx__chip--2 { right: -3%; top: 43%; } .hx__chip--2::after { right: 100%; background: linear-gradient(270deg, rgba(237, 135, 20, .9), transparent); }
.hx__chip--3 { left: 0; bottom: 17%; } .hx__chip--3::after { left: 100%; }

.hx__bar { display: flex; align-items: center; gap: 22px; padding-block: 12px 20px; border-top: 1px solid rgba(255, 255, 255, .1); position: relative; z-index: 2; }
.hx .pp-ctrl { gap: 8px; }
.hx .pp-ctrl__btn { border-radius: 50%; width: 42px; height: 42px; }
.hx__tabs { display: flex; flex: 1; gap: 8px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.hx__tabs li { flex: 1; min-width: 0; }
.hx__tabs button { appearance: none; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0 0; cursor: pointer; color: #6f877a; font: 700 .68rem var(--pp-font-heading); letter-spacing: .1em; text-transform: uppercase; transition: color .3s; }
.hx__tabs button span { display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx__tabs button:hover, .hx__tabs button[aria-current="true"] { color: #fff; }
.hx__tabs i { display: block; height: 3px; background: rgba(255, 255, 255, .16); position: relative; overflow: hidden; border-radius: 2px; }
.hx__tabs i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pp-orange), #ffc276); transform: scaleX(0); transform-origin: left; }
.hx__tabs button[aria-current="true"] i::after { animation: pp-prog var(--pp-slide-ms, 7000ms) linear forwards; }
.hx.is-paused .hx__tabs button[aria-current="true"] i::after, .hx.is-hover .hx__tabs button[aria-current="true"] i::after { animation-play-state: paused; }
.hx.is-static .hx__tabs button[aria-current="true"] i::after { animation: none; transform: scaleX(1); }
.hx__scroll { flex: none; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px; display: grid; justify-items: center; padding-top: 7px; }
.hx__scroll span { width: 3px; height: 8px; background: var(--pp-orange); border-radius: 2px; animation: hx-wheel 1.8s ease-in-out infinite; }
@keyframes hx-wheel { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- stats, ticker: glass finish ---------- */
.pp-stats { position: relative; }
.pp-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 160px at 20% 0, rgba(237, 135, 20, .16), transparent 70%), radial-gradient(600px 160px at 90% 100%, rgba(18, 140, 35, .22), transparent 70%); pointer-events: none; }

/* ---------- battery bento ---------- */
.pp-battery { background: radial-gradient(900px 420px at 0 0, rgba(18, 140, 35, .1), transparent 62%), radial-gradient(800px 420px at 100% 100%, rgba(237, 135, 20, .12), transparent 62%), var(--pp-bg); }
.pp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "feat feat auto inv" "feat feat smf smf"; gap: 18px; }
.pp-bcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pp-border); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 26, 18, .05), 0 18px 40px -18px rgba(12, 26, 18, .2); transition: box-shadow .35s, border-color .35s, transform .3s ease-out; --gx: 50%; --gy: 0%; will-change: transform; }
.pp-bcard::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--gx) var(--gy), rgba(237, 135, 20, .16), transparent 62%); }
.pp-bcard:hover { border-color: var(--pp-orange); box-shadow: 0 30px 60px -20px rgba(12, 26, 18, .35), 0 0 0 1px rgba(237, 135, 20, .4); }
.pp-bcard:hover::before { opacity: 1; }
.pp-bcard--feat { grid-area: feat; background: linear-gradient(160deg, #0c1a12, #14281c 70%); color: #e6efe9; border-color: #1f3a29; }
.pp-bcard--auto { grid-area: auto; } .pp-bcard--inv { grid-area: inv; } .pp-bcard--smf { grid-area: smf; flex-direction: row; }
.pp-bcard__media { display: grid; place-items: center; aspect-ratio: 5 / 4; background: radial-gradient(circle at 50% 55%, #fff 0, #e6eee9 75%); overflow: hidden; flex: none; }
.pp-bcard--feat .pp-bcard__media { aspect-ratio: auto; flex: 1; min-height: 280px; background: radial-gradient(circle at 50% 55%, #fff 0, #dfe9e3 80%); margin: 14px; border-radius: 18px; }
.pp-bcard--smf .pp-bcard__media { aspect-ratio: auto; width: 42%; }
.pp-bcard__media img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--hx-ease); }
.pp-bcard:hover .pp-bcard__media img { transform: scale(1.08) rotate(-1.5deg); }
.pp-bcard__body { position: relative; z-index: 2; padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; border-top: 3px solid var(--pp-orange); }
.pp-bcard--feat .pp-bcard__body { border-top-color: var(--pp-green); }
.pp-bcard--smf .pp-bcard__body { border-top: 0; border-left: 3px solid var(--pp-green); }
.pp-bcard h3 { margin-bottom: .45em; font-size: 1.35rem; }
.pp-bcard--feat h3 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); }
.pp-bcard h3 a { color: inherit; text-decoration: none; }
.pp-bcard--feat .pp-bcard__body > p { color: #b9cbbf; }
.pp-bcard--feat .pp-chips--static li { background: rgba(255, 255, 255, .1); color: #fff; }
.pp-bcard--feat .pp-link { color: var(--pp-orange); }
.pp-bcard--feat .pp-mii-chip { color: #b9d9c0; }
.pp-bcard .pp-link { margin-top: auto; }
.pp-bcard .pp-charge { margin-top: auto; }
.pp-bcard .pp-charge + .pp-link { margin-top: 0; }

/* ---------- glass + glow surfaces ---------- */
.pp-section__head h2 { font-size: clamp(1.8rem, 2.6vw + .8rem, 2.9rem); letter-spacing: -.035em; }
.pp-section__head .pp-eyebrow::before { box-shadow: 0 0 12px var(--pp-orange); }
.pp-product-card, .pp-whycard, .pp-supcard, .pp-railcard, .pp-dealer, .pp-faqlist details { border-radius: 18px; }
.pp-product-card { box-shadow: 0 1px 2px rgba(12, 26, 18, .04); }
.pp-product-card:hover { box-shadow: 0 24px 50px -20px rgba(12, 26, 18, .3), 0 0 0 1px rgba(18, 140, 35, .5); }
.pp-product-card__media img { mix-blend-mode: multiply; }
.pp-whycard { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, #f6f9f7); }
.pp-whycard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a), transparent 0 60%, var(--pp-orange) 80%, var(--pp-green) 92%, transparent); -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 exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s; animation: hx-edge 4s linear infinite; pointer-events: none; }
.pp-whycard:hover::before { opacity: 1; }
.pp-whycard span { border-radius: 14px; clip-path: none; box-shadow: 0 0 0 1px rgba(237, 135, 20, .4), 0 10px 30px -8px rgba(237, 135, 20, .5); }
.pp-section--dark, .pp-finderwrap, .pp-cta { background-image: radial-gradient(700px 300px at 10% 0, rgba(18, 140, 35, .22), transparent 70%), radial-gradient(600px 300px at 100% 100%, rgba(237, 135, 20, .16), transparent 70%); background-color: var(--pp-ink); }
.pp-ind { border-radius: 18px; backdrop-filter: blur(10px); background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); }
.pp-ind:hover { box-shadow: 0 0 0 1px rgba(237, 135, 20, .5), 0 20px 50px -20px rgba(0, 0, 0, .7); transform: translateY(-3px); }
.pp-railcard { background: #fff; }
.pp-supcard { background: linear-gradient(180deg, #fff, #f3f7f4); }
.pp-mii2 { background-image: linear-gradient(180deg, #050d08, #0b1d12); }
.pp-mii2::after { content: "MADE IN INDIA"; position: absolute; left: 0; bottom: -0.18em; white-space: nowrap; font: 800 clamp(5rem, 14vw, 13rem)/1 var(--pp-font-heading); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); pointer-events: none; z-index: -1; animation: hx-outline 40s linear infinite; }
@keyframes hx-outline { from { transform: translateX(0); } to { transform: translateX(-30%); } }
.pp-process li span { border-radius: 14px; box-shadow: 0 0 0 1px rgba(237, 135, 20, .5), 0 0 30px rgba(237, 135, 20, .25); }
@supports (animation-timeline: view()) {
	.pp-process::before { transform-origin: top; animation: hx-line linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
	@keyframes hx-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
.pp-pagehero { background: radial-gradient(700px 320px at 85% -10%, rgba(18, 140, 35, .4), transparent 70%), radial-gradient(520px 260px at 0 110%, rgba(237, 135, 20, .28), transparent 70%), linear-gradient(180deg, #07120b, #0c1a12); }
.pp-pagehero__title { background: linear-gradient(180deg, #fff 40%, #bfd3c5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-btn { border-radius: 10px; }
.pp-btn--cut { border-radius: 0; }

/* ---------- company timeline ---------- */
.pp-tl-section { background: radial-gradient(800px 380px at 10% 0, rgba(18, 140, 35, .25), transparent 70%), radial-gradient(700px 380px at 100% 100%, rgba(237, 135, 20, .18), transparent 70%), #07120b; color: #e6efe9; overflow: hidden; }
.pp-tl-section h2 { color: #fff; }
.pp-tl-section .pp-section__head p { color: #aec3b5; }
.pp-tl { position: relative; list-style: none; margin: 0 auto; padding: 8px 0; max-width: 980px; display: grid; gap: clamp(28px, 4vw, 56px); }
.pp-tl__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .14); }
.pp-tl__fill { position: absolute; inset: 0; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--pp-orange), var(--pp-green)); box-shadow: 0 0 14px rgba(237, 135, 20, .7); }
.pp-tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
.pp-tl__node { position: absolute; left: 50%; top: 22px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #07120b; border: 2px solid rgba(255, 255, 255, .35); transition: border-color .4s, box-shadow .4s, background-color .4s; z-index: 2; }
.pp-tl__item.is-lit .pp-tl__node { border-color: var(--pp-orange); background: var(--pp-orange); box-shadow: 0 0 0 6px rgba(237, 135, 20, .2), 0 0 24px rgba(237, 135, 20, .9); }
.pp-tl__card { position: relative; grid-column: 1; text-align: right; padding: 22px 24px 24px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(12px); opacity: .35; transform: translateY(18px); transition: opacity .7s var(--hx-ease), transform .7s var(--hx-ease), border-color .4s; }
.pp-tl__item:nth-child(odd) .pp-tl__card { grid-column: 2; text-align: left; }
.pp-tl__item.is-lit .pp-tl__card { opacity: 1; transform: none; border-color: rgba(237, 135, 20, .45); }
.pp-tl__year { display: block; font: 800 clamp(2.6rem, 3.4vw + 1rem, 4.2rem)/1 var(--pp-font-heading); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .6); }
.pp-tl__item.is-lit .pp-tl__year { background: linear-gradient(180deg, #fff, var(--pp-orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.pp-tl__when { font: 800 .74rem var(--pp-font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-orange); margin: 6px 0 8px; }
.pp-tl__card h3 { color: #fff; font-size: 1.2rem; margin-bottom: .4em; }
.pp-tl__card p { color: #b9cbbf; font-size: .94rem; }
.pp-tl__img { display: block; width: 100%; max-height: 190px; object-fit: cover; border-radius: 12px; margin: 12px 0 8px; }
.pp-tl__src { font-size: .78rem !important; color: #7f978a !important; margin: 8px 0 0; }
.pp-tl-hint { margin-top: 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
	.hx__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; padding-top: 24px; }
	.hx__copy { display: contents; }
	.hx__inner > .hx__stage { order: 4; margin: 8px auto 20px; max-width: 420px; }
	.pp-mii-badge--hero { order: 1; justify-self: start; }
	.hx__title { order: 2; } .hx__lead { order: 3; } .hx__now { order: 5; } .hx__slides { order: 6; } .hx__cta { order: 7; }
	.hx__chip { padding: 8px 12px; } .hx__chip strong { font-size: .9rem; } .hx__chip::after { display: none; }
	.hx__chip--1 { left: 0; } .hx__chip--2 { right: 0; }
	.hx__tabs button span { display: none; }
	.pp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "feat feat" "auto inv" "smf smf"; }
	.pp-tl__line { left: 18px; } .pp-tl__node { left: 18px; }
	.pp-tl__item { grid-template-columns: 1fr; padding-left: 48px; }
	.pp-tl__card, .pp-tl__item:nth-child(odd) .pp-tl__card { grid-column: 1; text-align: left; }
}
@media (max-width: 767px) {
	.hx__scroll { display: none; }
	.hx__bar { gap: 12px; }
	.hx__stage { max-width: 340px; }
	.hx__tag { font-size: .66rem; padding: 6px 12px; }
	.hx__now { gap: 12px; }
	.pp-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "feat" "auto" "inv" "smf"; }
	.pp-bcard--smf { flex-direction: column; } .pp-bcard--smf .pp-bcard__media { width: auto; aspect-ratio: 5 / 4; }
	.pp-bcard--smf .pp-bcard__body { border-left: 0; border-top: 3px solid var(--pp-green); }
	.pp-bcard--feat .pp-bcard__media { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.hx__blob, .hx__w, .hx__w--brand, .hx__w--india::after, .hx__lead, .hx__cta, .hx__card, .hx__edge, .hx__img.is-active img, .hx__scan, .hx__floor, .hx__scroll span, .pp-whycard::before, .pp-mii2::after { animation: none !important; }
	.hx__w, .hx__lead, .hx__cta, .hx__card { opacity: 1; transform: none; filter: none; }
	.hx__w--india::after { transform: scaleX(1); }
	.hx__img, .hx__sl, .hx__chip, .hx__rolltrack { transition: none; }
	.pp-js .pp-reveal { opacity: 1; transform: none; filter: none; transition: none; }
	.pp-process::before { animation: none; }
}

/* seamless product on the glass card */
.hx__title { font-size: clamp(2.3rem, 3.5vw + .7rem, 4.3rem); }

/* ---------- page-level modernisation (cards, forms, tables, footer) ---------- */
.pp-group { border-radius: 26px; border: 1px solid var(--pp-border); border-top-width: 1px; background: linear-gradient(180deg, #fff, #f4f8f5); position: relative; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(12, 26, 18, .35); }
.pp-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--pp-green), #5fe08a); }
.pp-group:nth-child(2)::before { background: linear-gradient(90deg, var(--pp-orange), #ffc276); }
.pp-group__item { border-radius: 14px; transition: border-color .25s, background-color .25s, transform .25s, box-shadow .25s; }
.pp-group__item:hover { transform: translateX(4px); box-shadow: 0 10px 30px -14px rgba(18, 140, 35, .5); }
.pp-group__thumb { border-radius: 10px; }
.pp-helpbox { border-radius: 22px; background: radial-gradient(500px 200px at 0 0, rgba(18, 140, 35, .35), transparent 70%), radial-gradient(500px 200px at 100% 100%, rgba(237, 135, 20, .28), transparent 70%), var(--pp-ink); }

.pp-sidenav { border-radius: 20px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px); box-shadow: 0 20px 50px -30px rgba(12, 26, 18, .4); }
.pp-sidenav li a { border-radius: 10px; }
.pp-sidenav li.is-active > a, .pp-sidenav a[aria-current="page"] { background: linear-gradient(90deg, rgba(18, 140, 35, .14), transparent); box-shadow: inset 3px 0 0 var(--pp-green); }

.pp-product__main { border-radius: 26px; background: radial-gradient(ellipse 80% 70% at 50% 45%, #fff 0 55%, #e9f0ec 100%); box-shadow: 0 40px 80px -40px rgba(12, 26, 18, .45), 0 0 0 1px rgba(255, 255, 255, .7) inset; }
.pp-product__main img { mix-blend-mode: multiply; transition: transform .6s var(--hx-ease); }
.pp-product__main:hover img { transform: scale(1.05); }
.pp-product__thumbs a { border-radius: 14px; }
.pp-product__summary { padding: clamp(18px, 2.4vw, 30px); border-radius: 26px; background: linear-gradient(180deg, #fff, #f5f9f6); border: 1px solid var(--pp-border); box-shadow: 0 30px 70px -40px rgba(12, 26, 18, .4); position: sticky; top: calc(var(--pp-header-h) + 20px); align-self: start; }
.pp-product__lead { font-size: 1.08rem; }
.pp-tabs { backdrop-filter: blur(14px); background: rgba(241, 245, 242, .86); }
.pp-tabs a { position: relative; border-bottom: 0; }
.pp-tabs a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--pp-orange), #ffc276); transform: scaleX(0); transition: transform .3s var(--hx-ease); }
.pp-tabs a:hover::after, .pp-tabs a.is-active::after { transform: scaleX(1); }
.pp-table-wrap { border-radius: 18px; box-shadow: 0 20px 50px -34px rgba(12, 26, 18, .45); }
.pp-table caption { background: linear-gradient(90deg, var(--pp-ink), var(--pp-ink-3)); }
.pp-table tbody tr { transition: background-color .2s; }
.pp-table tbody tr:hover { background: var(--pp-green-100); }
.pp-psec h2 { position: relative; padding-left: 18px; }
.pp-psec h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--pp-orange), var(--pp-green)); }
.pp-faq, .pp-tags li { border-radius: 14px; }

.pp-enquiry-form { border-radius: 26px; box-shadow: 0 40px 80px -45px rgba(12, 26, 18, .5); position: relative; overflow: hidden; }
.pp-enquiry-form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pp-tri); }
.pp-field input[type="text"], .pp-field input[type="email"], .pp-field input[type="tel"], .pp-field input[type="date"], .pp-field input[type="file"], .pp-field select, .pp-field textarea { border-radius: 12px; background: #f7faf8; border-color: #cfd9d2; }
.pp-field input:focus, .pp-field select:focus, .pp-field textarea:focus { background: #fff; border-color: var(--pp-green); box-shadow: 0 0 0 4px rgba(18, 140, 35, .18), 0 0 24px rgba(18, 140, 35, .2); }
.pp-formpage__side, .pp-ccard, .pp-cert, .pp-doc, .pp-job, .pp-quote, .pp-badges li { border-radius: 20px; }
.pp-ccard, .pp-cert, .pp-doc { transition: transform .3s var(--hx-ease), box-shadow .3s, border-color .3s; }
.pp-ccard:hover, .pp-cert:hover, .pp-doc:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(12, 26, 18, .45); border-color: var(--pp-green); }
.pp-gallery__item a { border-radius: 18px; box-shadow: 0 16px 36px -24px rgba(12, 26, 18, .5); }
.pp-gallery__item a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); pointer-events: none; }
.pp-pills a, .pp-pills button { border-radius: 99px; }
.pp-cap__icon, .pp-doc__icon { border-radius: 14px; }
.pp-duo__card { border-radius: 24px; }
.pp-helpbox, .pp-empty--box, .pp-note { border-radius: 18px; }
.pp-footer { background: radial-gradient(900px 300px at 10% 0, rgba(18, 140, 35, .22), transparent 70%), radial-gradient(700px 300px at 100% 100%, rgba(237, 135, 20, .14), transparent 70%), var(--pp-ink); }
.pp-footer__tricolour { background-size: 200% 100%; animation: pp-stripe 10s linear infinite; }
.pp-social a { transition: transform .3s var(--hx-ease), background-color .2s; }
.pp-social a:hover { transform: translateY(-3px) rotate(-6deg); }
.pp-editorial__img img { border-radius: 24px; }
.pp-qcard, .pp-mii-fact { border-radius: 20px; }

@media (max-width: 1023px) { .pp-product__summary { position: static; } }

/* ---------- leadership ---------- */
.pp-leader { background: linear-gradient(180deg, #fff, #eef4f0); overflow: hidden; }
.pp-leader__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 84px); align-items: center; }
.pp-leader__photo { position: relative; margin: 0; max-width: 420px; justify-self: center; width: 100%; }
.pp-leader__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 28px; box-shadow: 0 50px 90px -40px rgba(12, 26, 18, .6); position: relative; z-index: 1; }
.pp-leader__photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 28px; border: 2px solid var(--pp-orange); z-index: 0; }
.pp-leader__photo::after { content: ""; position: absolute; inset: -40px auto auto -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(18, 140, 35, .35), transparent 70%); filter: blur(10px); z-index: 0; }
.pp-leader__tag { position: absolute; left: 22px; bottom: 22px; z-index: 2; width: 74px; height: 8px; background: var(--pp-tri); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.pp-leader__ph { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 28px; background: var(--pp-ink); color: var(--pp-orange); }
.pp-leader h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem); letter-spacing: -.035em; margin-bottom: .1em; }
.pp-leader__role { font: 800 .9rem var(--pp-font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-orange-700); margin: 0 0 18px; }
.pp-leader__line { font-size: 1.12rem; color: #33443a; max-width: 52ch; }
.pp-leader__msg { margin: 20px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--pp-orange); font-size: 1.1rem; color: #2a3a30; max-width: 60ch; }
@media (max-width: 899px) { .pp-leader__inner { grid-template-columns: minmax(0, 1fr); } .pp-leader__photo { max-width: 340px; } .pp-leader__photo::before { inset: 14px -10px -14px 10px; } }
/* ---------- product sidebar: no inner scrollbar, collapsible groups ---------- */
.pp-layout__side { min-width: 0; align-self: stretch; }
.pp-sidenav { position: static; max-height: none; overflow: visible; padding: 18px; }
@media (min-width: 1024px) and (min-height: 860px) { .pp-sidenav { position: sticky; top: calc(var(--pp-header-h) + 20px); } }
.pp-sidenav__h { margin-bottom: 10px; }
.pp-sidenav__group { border-top: 1px solid var(--pp-border); padding: 0; margin: 0; }
.pp-sidenav__group + .pp-sidenav__group { margin-top: 0; padding-top: 0; }
.pp-sidenav__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding: 14px 4px; font: 800 1rem var(--pp-font-heading); color: var(--pp-ink); }
.pp-sidenav__top::-webkit-details-marker { display: none; }
.pp-sidenav__top::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; margin-left: auto; margin-right: 4px; opacity: .6; }
.pp-sidenav__group[open] > .pp-sidenav__top::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pp-sidenav__n { order: 2; font: 800 .7rem var(--pp-font-heading); padding: 2px 8px; border-radius: 99px; background: var(--pp-green-100); color: var(--pp-green-700); }
.pp-sidenav__group > ul { padding: 0 0 12px; }
.pp-sidenav__all a { font-weight: 700; color: var(--pp-green-700); }
.pp-sidenav li a { padding: 8px 10px; line-height: 1.35; overflow-wrap: anywhere; }
.pp-sidenav li ul { margin: 2px 0 6px 12px; }
.pp-sidenav__help { display: block; margin-top: 8px; padding: 14px; border-radius: 14px; background: var(--pp-ink); color: #cfdcd3; font-size: .85rem; text-decoration: none; }
.pp-sidenav__help span { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 800 .86rem var(--pp-font-heading); color: var(--pp-orange); }
.pp-sidenav__help:hover { color: #fff; }
@media (max-width: 1023px) { .pp-sidenav { padding: 14px 16px; } }

@keyframes hx-edge { to { --a: 360deg; } }