/* =============================================================================
   ARSOW NEPAL — MODERN DESIGN ENHANCEMENT LAYER
   -----------------------------------------------------------------------------
   Version:  1.4.0
   Purpose:  Visual + interaction upgrade ONLY — shadows, motion, hover
             states, spacing polish, 3D tilt, animated gradients, glow.
             No content, copy, page structure, or Redux Theme Options /
             Customizer settings are touched by this file or anywhere else
             in this update.
   Loads:    AFTER style.css and AFTER the Redux-generated custom-styles.css
             (see framework/inc/enqueue.php), so it can safely refine hover
             states without fighting your saved Theme Options colors.
   Revert:   Safe to remove any time — just delete/dequeue the
             'sd-modern-enhancements' handle in framework/inc/enqueue.php
             and the site returns to the original v1.0.0 look.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Built entirely from your existing brand palette (accent #16c8dc, ink
   #435061, body #637285, muted #91a1b4) — no new colors introduced.
----------------------------------------------------------------------------- */
:root {
	--sd2-accent:        #16c8dc;
	--sd2-accent-dark:   #0ea5b8;
	--sd2-accent-deep:   #0b7f8f;
	--sd2-ink:           #435061;
	--sd2-body:          #637285;
	--sd2-muted:         #91a1b4;
	--sd2-line:          #e3e7ee;

	--sd2-radius-s: 8px;
	--sd2-radius-m: 14px;
	--sd2-radius-l: 22px;

	--sd2-shadow-xs: 0 1px 3px rgba(23,43,58,.06);
	--sd2-shadow-s:  0 6px 18px rgba(23,43,58,.08);
	--sd2-shadow-m:  0 16px 36px -10px rgba(23,43,58,.18);
	--sd2-shadow-l:  0 30px 60px -18px rgba(23,43,58,.26);
	--sd2-glow:      0 14px 30px -6px rgba(22,200,220,.45);

	--sd2-ease:  cubic-bezier(.22,1,.36,1);
	--sd2-speed: .35s;
	--sd2-parallax: 0px;
}


/* -----------------------------------------------------------------------------
   2. GLOBAL POLISH
----------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}
::selection {
	background: var(--sd2-accent);
	color: #fff;
}
.sd-entry-thumb img,
.sd-staff-col img,
.sd-campaign-thumb img,
.sd-event-thumb img,
.sd-single-images img,
.sd-entry-gallery img {
	transition: transform .6s var(--sd2-ease);
}

/* Modern keyboard focus ring — accessibility + premium feel together */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--sd2-accent);
	outline-offset: 3px;
	border-radius: 2px;
}


/* -----------------------------------------------------------------------------
   3. BUTTONS & CALLS TO ACTION
----------------------------------------------------------------------------- */

/* --- "Read more / view more" outline-style links, every context --- */
.sd-more,
.sd-blog-page .sd-more,
.sd-latest-blog-wide .sd-more,
.sd-footer-widgets .sd-more,
.sd-404-sidebar-widget .sd-more,
.ev-listing-item .sd-more,
.sd-church-event-style2 .sd-more,
.sd-sermon-page-content .sd-more,
.sd-content-wide .sd-more,
.sd-nav-previous a,
.sd-nav-next a {
	border-radius: var(--sd2-radius-s);
	letter-spacing: .03em;
	transition: background var(--sd2-speed) var(--sd2-ease),
	            color var(--sd2-speed) var(--sd2-ease),
	            border-color var(--sd2-speed) var(--sd2-ease),
	            box-shadow var(--sd2-speed) var(--sd2-ease),
	            transform var(--sd2-speed) var(--sd2-ease);
}
.sd-more:hover,
.sd-blog-page .sd-more:hover,
.sd-latest-blog-wide .sd-more:hover,
.sd-footer-widgets .sd-more:hover,
.sd-404-sidebar-widget .sd-more:hover,
.ev-listing-item .sd-more:hover,
.sd-church-event-style2 .sd-more:hover,
.sd-sermon-page-content .sd-more:hover,
.sd-content-wide .sd-more:hover,
.sd-nav-previous a:hover,
.sd-nav-next a:hover {
	background: linear-gradient(135deg, var(--sd2-accent), var(--sd2-accent-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: var(--sd2-glow);
	transform: translateY(-3px);
}

/* --- Primary filled CTAs: donate, checkout, submit, header button --- */
.sd-donate-button,
.sd-custom-url-donate,
.sd-header-checkout,
.sd-extra-button,
.sd-submit-comments,
.wpcf7-submit,
.sd-woo .single_add_to_cart_button,
.sd-woo .sd-add-to-cart,
.sd-cart-totals .checkout-button,
.sd-checkout-payment input[type="submit"],
.sd-add-cart a {
	background: linear-gradient(135deg, var(--sd2-accent) 0%, var(--sd2-accent-dark) 100%);
	border: none;
	box-shadow: var(--sd2-shadow-s);
	transition: box-shadow var(--sd2-speed) var(--sd2-ease),
	            transform var(--sd2-speed) var(--sd2-ease),
	            background var(--sd2-speed) var(--sd2-ease);
}
.sd-donate-button:hover,
.sd-custom-url-donate:hover,
.sd-header-checkout:hover,
.sd-extra-button:hover,
.sd-submit-comments:hover,
.wpcf7-submit:hover,
.sd-woo .single_add_to_cart_button:hover,
.sd-woo .sd-add-to-cart:hover,
.sd-cart-totals .checkout-button:hover,
.sd-checkout-payment input[type="submit"]:hover,
.sd-add-cart a:hover {
	background: linear-gradient(135deg, var(--sd2-accent-dark) 0%, var(--sd2-accent-deep) 100%);
	box-shadow: var(--sd2-glow);
	transform: translateY(-3px);
}
.sd-extra-button {
	border-radius: var(--sd2-radius-s);
}


/* -----------------------------------------------------------------------------
   4. HEADER & NAVIGATION
----------------------------------------------------------------------------- */

/* Frosted, elevated header once the page scrolls — hooks into the
   .is-sticky class your existing sticky.js already toggles, so this is a
   pure visual layer on a behaviour you already have (no new JS logic). */
.sticky-wrapper.is-sticky {
	box-shadow: var(--sd2-shadow-m);
}
.sticky-wrapper.is-sticky .sd-header-style1,
.sticky-wrapper.is-sticky #mega-menu-wrap-main-header-menu {
	background-color: rgba(255,255,255,.96);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
}

/* Logo micro-interaction */
.sd-logo a {
	display: inline-block;
	transition: transform var(--sd2-speed) var(--sd2-ease);
}
.sd-logo a:hover {
	transform: scale(1.04);
}

/* Top-level nav links — animated underline sweep */
.sd-menu-nav ul > li > a,
#mega-menu-main-header-menu > li > a {
	position: relative;
}
.sd-menu-nav ul > li > a::after,
#mega-menu-main-header-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 2px;
	background: var(--sd2-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--sd2-speed) var(--sd2-ease);
}
.sd-menu-nav ul > li:hover > a::after,
#mega-menu-main-header-menu > li:hover > a::after,
.sd-menu-nav ul > li.current-menu-item > a::after,
#mega-menu-main-header-menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Mobile menu toggle */
.sd-responsive-menu-toggle a {
	display: inline-block;
	transition: color var(--sd2-speed) var(--sd2-ease), transform var(--sd2-speed) var(--sd2-ease);
}
.sd-responsive-menu-toggle a:hover {
	color: var(--sd2-accent);
	transform: translateY(-1px);
}


/* -----------------------------------------------------------------------------
   5. CARDS, THUMBNAILS & CONTENT BLOCKS
   One consistent lift + shadow + image-zoom language across every card
   component: staff, testimonials, events, campaigns, blog, church news,
   shop products and sidebar widgets.
----------------------------------------------------------------------------- */

/* --- Image zoom-on-hover for thumbnails --- */
.sd-entry-thumb,
.sd-staff-col figure,
.sd-campaign-thumb,
.sd-event-thumb,
.sd-single-images figure,
.sd-entry-gallery figure {
	overflow: hidden;
	border-radius: var(--sd2-radius-m);
}
.sd-entry-thumb:hover img,
.sd-staff-col:hover figure img,
.sd-campaign-thumb:hover img,
.sd-event-thumb:hover img,
.sd-single-images figure:hover img,
.sd-entry-gallery figure:hover img {
	transform: scale(1.08);
}

/* --- Card lift + shadow (static grid components — safe from clipping) --- */
.sd-staff-col,
.sd-testimonial,
.sd-event-upcoming,
.sd-later-events,
.sd-church-news-item,
.sd-entry-wrapper,
.sd-listing-list-item,
.sd-single-shortcode-campaign,
.sd-sidebar-widget,
.sd-product {
	transition: transform var(--sd2-speed) var(--sd2-ease),
	            box-shadow var(--sd2-speed) var(--sd2-ease);
}
.sd-staff-col:hover,
.sd-testimonial:hover,
.sd-event-upcoming:hover,
.sd-later-events:hover,
.sd-church-news-item:hover,
.sd-entry-wrapper:hover,
.sd-listing-list-item:hover,
.sd-single-shortcode-campaign:hover,
.sd-sidebar-widget:hover,
.sd-product:hover {
	position: relative;
	z-index: 2;
	transform: translateY(-8px);
	box-shadow: var(--sd2-shadow-m);
}

/* --- Slider / carousel items: shadow-only, no transform, so nothing gets
       clipped by the flexslider viewport's overflow:hidden --- */
.sd-carousel-item-content,
.sd-slider-item-content {
	transition: box-shadow var(--sd2-speed) var(--sd2-ease);
}
.sd-carousel-item-content:hover,
.sd-slider-item-content:hover {
	box-shadow: var(--sd2-shadow-s);
}

/* Campaign progress bar — smoother fill + rounded track */
.sd-campaign-percent {
	border-radius: 30px;
	overflow: hidden;
}
.sd-funded-line {
	background: linear-gradient(90deg, var(--sd2-accent), var(--sd2-accent-dark));
	transition: width .8s var(--sd2-ease);
}

/* Testimonial quote mark, softened */
.sd-testimonial:hover .sd-open-quote {
	transform: translateY(-4px) scale(1.05);
}
.sd-open-quote {
	display: inline-block;
	transition: transform var(--sd2-speed) var(--sd2-ease);
}


/* -----------------------------------------------------------------------------
   6. FORMS
----------------------------------------------------------------------------- */
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select,
.wpcf7-captchar,
.sd-volunteer input[type="text"],
.sd-volunteer input[type="email"],
.sd-volunteer textarea,
.sd-volunteer select,
.sd-theme #edd_checkout_form_wrap input.edd-input,
.sd-theme #edd_checkout_form_wrap textarea.edd-input {
	transition: border-color var(--sd2-speed) var(--sd2-ease),
	            box-shadow var(--sd2-speed) var(--sd2-ease);
}
.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus,
.wpcf7-captchar:focus,
.sd-volunteer input:focus,
.sd-volunteer textarea:focus,
.sd-volunteer select:focus,
.sd-theme #edd_checkout_form_wrap input.edd-input:focus,
.sd-theme #edd_checkout_form_wrap textarea.edd-input:focus {
	box-shadow: 0 0 0 4px rgba(22,200,220,.15);
}


/* -----------------------------------------------------------------------------
   7. PAGINATION, TAGS & SOCIAL ICONS
----------------------------------------------------------------------------- */
.sd-current-page,
.sd-inactive,
.sd-next-page,
.sd-previous-page,
.sd-last-page,
.sd-first-page,
.sd-woo .woocommerce-pagination a.page-numbers,
.sd-woo .woocommerce-pagination span.current {
	transition: background var(--sd2-speed) var(--sd2-ease),
	            color var(--sd2-speed) var(--sd2-ease),
	            border-color var(--sd2-speed) var(--sd2-ease),
	            box-shadow var(--sd2-speed) var(--sd2-ease),
	            transform var(--sd2-speed) var(--sd2-ease);
}
.sd-inactive:hover,
.sd-next-page:hover,
.sd-previous-page:hover,
.sd-last-page:hover,
.sd-first-page:hover,
.sd-woo .woocommerce-pagination a.page-numbers:hover {
	background: linear-gradient(135deg, var(--sd2-accent), var(--sd2-accent-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: var(--sd2-shadow-s);
	transform: translateY(-3px);
}

.tagcloud a {
	display: inline-block;
	transition: box-shadow var(--sd2-speed) var(--sd2-ease), transform var(--sd2-speed) var(--sd2-ease);
}
.tagcloud a:hover {
	box-shadow: var(--sd2-shadow-xs);
	transform: translateY(-2px);
}

.sd-share-icons ul li a {
	display: inline-block;
	transition: transform var(--sd2-speed) var(--sd2-ease);
}
.sd-share-icons ul li a:hover {
	transform: translateY(-4px) scale(1.08);
}


/* -----------------------------------------------------------------------------
   8. SIDEBAR & FOOTER WIDGET LINKS
   Small "nudge right" micro-interaction on hover (color change already
   comes from your existing Theme Options).
----------------------------------------------------------------------------- */
.sd-sidebar-widget ul li a,
.sd-right-col .widget ul li a,
.sd-footer-widgets ul li a {
	display: inline-block;
	transition: transform var(--sd2-speed) var(--sd2-ease);
}
.sd-sidebar-widget ul li a:hover,
.sd-right-col .widget ul li a:hover,
.sd-footer-widgets ul li a:hover {
	transform: translateX(4px);
}
.sd-footer-sidebar-widget .textwidget input[type="submit"] {
	transition: box-shadow var(--sd2-speed) var(--sd2-ease), transform var(--sd2-speed) var(--sd2-ease);
}
.sd-footer-sidebar-widget .textwidget input[type="submit"]:hover {
	box-shadow: var(--sd2-glow);
	transform: translateY(-3px);
}


/* -----------------------------------------------------------------------------
   9. SCROLL-REVEAL SUPPORT
   Class hooks only — activated by framework/js/sd-modern-interactions.js.
   IMPORTANT: .sd-reveal is added by JavaScript at runtime, never present
   in the HTML/PHP itself. If JS is disabled or fails to load, no element
   ever receives it, so everything stays at its normal, fully visible
   state by default — this cannot hide content.
----------------------------------------------------------------------------- */
.sd-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--sd2-ease), transform .7s var(--sd2-ease);
}
.sd-reveal.sd-revealed {
	opacity: 1;
	transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   11. ADVANCED GRADIENTS, GLOW & MOTION
----------------------------------------------------------------------------- */
@keyframes sd2-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes sd2-float-a {
	0%, 100% { transform: translate(0, 0) translateY(var(--sd2-parallax)); }
	50%      { transform: translate(18px, 22px) translateY(var(--sd2-parallax)); }
}
@keyframes sd2-float-b {
	0%, 100% { transform: translate(0, 0) translateY(var(--sd2-parallax)); }
	50%      { transform: translate(-22px, -14px) translateY(var(--sd2-parallax)); }
}
@keyframes sd2-shine {
	0%   { transform: translateX(-120%) skewX(-15deg); }
	100% { transform: translateX(220%) skewX(-15deg); }
}
@keyframes sd2-pulse-glow {
	0%   { box-shadow: var(--sd2-glow), 0 0 0 0 rgba(22,200,220,.5); }
	70%  { box-shadow: var(--sd2-glow), 0 0 0 14px rgba(22,200,220,0); }
	100% { box-shadow: var(--sd2-glow), 0 0 0 0 rgba(22,200,220,0); }
}

/* --- Shine sweep across primary buttons on hover --- */
.sd-donate-button,
.sd-custom-url-donate,
.sd-header-checkout,
.sd-extra-button,
.sd-submit-comments,
.wpcf7-submit {
	position: relative;
	overflow: hidden;
}
.sd-donate-button::after,
.sd-custom-url-donate::after,
.sd-header-checkout::after,
.sd-extra-button::after,
.sd-submit-comments::after,
.wpcf7-submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
	transform: translateX(-120%) skewX(-15deg);
	pointer-events: none;
}
.sd-donate-button:hover::after,
.sd-custom-url-donate:hover::after,
.sd-header-checkout:hover::after,
.sd-extra-button:hover::after,
.sd-submit-comments:hover::after,
.wpcf7-submit:hover::after {
	animation: sd2-shine .9s ease;
}

/* --- Breathing glow ring on the main donate CTA — draws the eye --- */
.sd-donate-button:hover,
.sd-custom-url-donate:hover {
	animation: sd2-pulse-glow 1.8s ease-out infinite;
}

/* --- Page banner (every subpage): gradient wash + floating glow orb +
       animated accent line under the title bar --- */
.sd-page-top {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #f9fafb 0%, #eef8f9 50%, #f9fafb 100%);
	background-size: 200% auto;
	animation: sd2-gradient-shift 10s ease infinite;
	border-bottom: none;
}
.sd-page-top::before {
	content: "";
	position: absolute;
	width: 200px;
	height: 200px;
	top: -110px;
	right: 6%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sd2-accent), transparent 70%);
	filter: blur(45px);
	opacity: .22;
	pointer-events: none;
	z-index: 0;
	animation: sd2-float-a 9s ease-in-out infinite;
}
.sd-page-top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sd2-accent), var(--sd2-accent-dark), var(--sd2-accent));
	background-size: 200% auto;
	animation: sd2-gradient-shift 6s linear infinite;
}
.sd-page-top > .container {
	position: relative;
	z-index: 1;
}
/* Hero variant (page/post with a featured banner image set) */
.sd-page-top-bg h1 {
	box-shadow: var(--sd2-shadow-m);
	transition: box-shadow var(--sd2-speed) var(--sd2-ease);
}


/* -----------------------------------------------------------------------------
   12. 3D TILT ON CARDS
   Pointer-fine devices only (paired with sd-modern-interactions.js).
   On touch devices / when JS doesn't run, --sd2-rx/--sd2-ry simply stay at
   their 0deg default and the card still gets the normal Section 5 lift —
   nothing ever depends on this running.
----------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.sd-staff-col,
	.sd-testimonial,
	.sd-event-upcoming,
	.sd-later-events,
	.sd-single-shortcode-campaign,
	.sd-product {
		--sd2-rx: 0deg;
		--sd2-ry: 0deg;
		--sd2-lift: 0px;
		transform: perspective(900px) rotateX(var(--sd2-ry)) rotateY(var(--sd2-rx)) translateY(var(--sd2-lift));
		transition: transform .15s ease-out, box-shadow var(--sd2-speed) var(--sd2-ease);
	}
	.sd-staff-col:hover,
	.sd-testimonial:hover,
	.sd-event-upcoming:hover,
	.sd-later-events:hover,
	.sd-single-shortcode-campaign:hover,
	.sd-product:hover {
		--sd2-lift: -10px;
		box-shadow: var(--sd2-shadow-l);
	}
}


/* -----------------------------------------------------------------------------
   13. EXPANDED SUBPAGE COVERAGE
   Comments, 404, prev/next post nav, related posts, author box, shop grid —
   the areas beyond the homepage that hadn't been touched yet.
----------------------------------------------------------------------------- */

/* Comments */
.sd-commentlist > li {
	transition: box-shadow var(--sd2-speed) var(--sd2-ease);
	border-radius: var(--sd2-radius-m);
}
.sd-commentlist > li:hover {
	box-shadow: var(--sd2-shadow-s);
}
.sd-respond-inputs input[type="text"],
.sd-respond-inputs input[type="email"],
.sd-respond-inputs input[type="url"],
.sd-respond-textarea textarea {
	transition: border-color var(--sd2-speed) var(--sd2-ease), box-shadow var(--sd2-speed) var(--sd2-ease);
}
.sd-respond-inputs input:focus,
.sd-respond-textarea textarea:focus {
	box-shadow: 0 0 0 4px rgba(22,200,220,.15);
}

/* 404 page — gentle life without being distracting */
.sd-main-404 {
	animation: sd2-float-a 8s ease-in-out infinite;
}
.sd-404-page .sd-donate-button,
.sd-404-page .sd-more {
	margin-top: 6px;
}

/* Prev / next post navigation, related posts, author box */
.sd-prev-post,
.sd-next-post {
	transition: transform var(--sd2-speed) var(--sd2-ease);
}
.sd-prev-post:hover {
	transform: translateX(-4px);
}
.sd-next-post:hover {
	transform: translateX(4px);
}
.sd-author-box {
	transition: box-shadow var(--sd2-speed) var(--sd2-ease);
	border-radius: var(--sd2-radius-m);
}
.sd-author-box:hover {
	box-shadow: var(--sd2-shadow-s);
}

/* WooCommerce shop grid extras */
.sd-shop-thumb-overlay {
	transition: opacity var(--sd2-speed) var(--sd2-ease);
}
.sd-thumb-add-cart {
	transition: transform var(--sd2-speed) var(--sd2-ease), box-shadow var(--sd2-speed) var(--sd2-ease);
}
.sd-thumb-add-cart:hover {
	transform: translateY(-3px);
	box-shadow: var(--sd2-shadow-s);
}


/* -----------------------------------------------------------------------------
   15. PARALLAX SCROLL DEPTH
----------------------------------------------------------------------------- */

/* Hero/banner background images drift slightly slower than the page —
   classic parallax depth. Disabled on touch devices below, where fixed
   backgrounds are unreliable and can hurt scroll performance. */
.sd-page-top-bg {
	background-attachment: fixed;
}
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.sd-page-top-bg {
		background-attachment: scroll;
	}
}

/* The decorative floating orbs in Section 11 now also drift with scroll
   position via --sd2-parallax (updated by sd-modern-interactions.js,
   capped at 60px, defaults to 0px so nothing depends on JS running). */


/* -----------------------------------------------------------------------------
   16. PAGE TRANSITIONS
   Fade-in is pure CSS (zero JS dependency — cannot get stuck invisible).
   Fade-out only runs for a deliberately narrow, known-safe allowlist of
   plain navigation links (main menu, pagination, "more" links, logo,
   footer links). Donate buttons, add-to-cart, lightboxes and any other
   special-behaviour element are never touched, so their existing
   functionality is guaranteed unaffected.
----------------------------------------------------------------------------- */
body {
	animation: sd2-page-fade-in .5s var(--sd2-ease) both;
}
@keyframes sd2-page-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
html.sd2-navigating body {
	opacity: 0;
	transition: opacity .2s ease;
	animation: none;
}


/* -----------------------------------------------------------------------------
   17. ANIMATED ICONS
----------------------------------------------------------------------------- */
.sd-icon-box i {
	display: inline-block;
	transition: transform var(--sd2-speed) var(--sd2-ease), color var(--sd2-speed) var(--sd2-ease);
}
.sd-icon-box:hover i {
	transform: scale(1.15) rotate(-8deg);
}
.sd-question-widget i {
	display: inline-block;
	transition: transform var(--sd2-speed) var(--sd2-ease);
}
.sd-question-widget:hover i {
	transform: rotate(90deg);
}


/* -----------------------------------------------------------------------------
   19. IMPACT STATS SECTION
   Styles the new sd_impact_stats VC shortcode (framework/inc/vc/shortcodes/
   sd-impact-stats.php). Numbers get the gradient-text treatment and a
   count-up animation (see sd-modern-interactions.js Module 5).
----------------------------------------------------------------------------- */
.sd-impact-stats {
	padding: 60px 0;
	text-align: center;
}
.sd-impact-stats-head {
	margin-bottom: 40px;
}
.sd-impact-stats-head h3 {
	font-size: 26px;
	color: var(--sd2-ink);
	margin-bottom: 8px;
}
.sd-impact-stats-head p {
	color: var(--sd2-body);
}
.sd-impact-stats-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sd-stat-item {
	position: relative;
	padding: 10px 15px;
}
.sd-impact-stats-row > div:not(:first-child) .sd-stat-item::before {
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	left: 0;
	width: 1px;
	background: var(--sd2-line);
}
.sd-stat-number {
	display: block;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.1;
	background: linear-gradient(135deg, var(--sd2-accent-deep), var(--sd2-accent), var(--sd2-accent-dark));
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--sd2-accent-dark);
	animation: sd2-gradient-shift 8s ease infinite;
}
.sd-stat-label {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sd2-muted);
}
@media (max-width: 767px) {
	.sd-impact-stats-row > div .sd-stat-item::before { display: none; }
	.sd-stat-number { font-size: 32px; }
}


/* -----------------------------------------------------------------------------
   20. ACCESSIBILITY — respect reduced-motion preference
   The universal !important rule below already neutralizes every animation
   and transition added in this file (including all of the above), no
   matter where in the file it's defined.
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sd-reveal {
		opacity: 1;
		transform: none;
	}
	body {
		animation: none;
		opacity: 1;
	}
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}