/* ============================================================
   >>> MERGED FROM global.css (consolidated 2026-08-13)
   ============================================================ */
/* ==========================================================================
   RisingStar Child Theme — GLOBAL STYLES
   Loaded on EVERY page (header.php / footer.php are shared site-wide).

   Contents:
     1. Design tokens (:root palette — single source of truth)
     2. Shared components reused across pages
        (.sol-container, .route-divider, .sol-btn*)
     3. Header styles (formerly header.css)
     4. Footer styles (formerly footer.css)

   Page-specific CSS (e.g. solution.css) is enqueued separately on its own
   template and always loads AFTER this file, so contextual overrides win.
   Font styles are NOT set here — this theme (RisingStar PID)
   sets its own typography via Tailwind + theme tokens.
   ========================================================================== */

/* ===================== 0. PREFLOW STATE NOTE (corrected 2026-08-19)
   ACTUAL STATE: Tailwind preflight is ENABLED site-wide. The complete Play CDN
   is loaded on every new-design page via risingstar_new_design_head() with NO
   corePlugins.preflight=false anywhere in functions.php (confirmed L1108-1112,
   L2062-2066). The "preflight OFF / DISABLED" comments in the reset blocks
   below are STALE — the hand-written resets that follow are now REDUNDANT with
   Tailwind preflight but are KEPT as a defensive layer (they win on specificity
   and protect any context where the CDN does not load). Do NOT re-add
   corePlugins.preflight=false. */

/* ===================== 0. BOX-SIZING RESET (restore Tailwind preflight behavior)
   WP loads Tailwind WITH preflight (the full CDN, no corePlugins.preflight=false) in
   risingstar_new_design_head()) to protect the parent theme's base styles.
   But preflight ALSO sets box-sizing:border-box globally. Without it,
   `w-full` + `px-16` containers revert to the browser default content-box
   and overflow the viewport on mobile (home sec2 "Solutions" title looked
   too wide). Re-apply ONLY this one safe reset so WP matches the design
   (which runs the full Tailwind CDN + preflight). Touching margins/fonts
   is avoided, so the parent theme is unaffected.
   Mirrors Tailwind preflight exactly: `*,::before,::after{box-sizing:border-box}`. */
*, *::before, *::after {
	box-sizing: border-box;
}

/* ===================== 1. DESIGN TOKENS ===================== */
:root {
	--rs-blue-50:  #eff6ff;
	--rs-blue-100: #dbeafe;
	--rs-blue-500: #3b82f6;
	--rs-blue-600: #2563eb;
	--rs-blue-700: #1d4ed8;

	--rs-gray-50:  #f9fafb;
	--rs-gray-100: #f3f4f6;
	--rs-gray-200: #e5e7eb;
	--rs-gray-300: #d1d5db;
	--rs-gray-400: #9ca3af;
	--rs-gray-500: #6b7280;
	--rs-gray-600: #4b5563;
	--rs-gray-700: #374151;
	--rs-gray-900: #111827;

	--rs-white:    #ffffff;
	--rs-red-600:  #dc2626;
}

/* ===================== 0. MINIMAL RESET =====================
   Tailwind Play CDN is injected WITH preflight ENABLED, so the browser's
   default `body { margin: 8px }` is NOT cleared. That pushes the first
   in-flow element (the homepage hero) down 8px while the transparent
   absolute header stays pinned at viewport top:0 — leaving a white strip
   above the dark hero (and the white header text floats over white).
   Reset the root / body and our wrapper to zero. No !important, so the
   WP admin-bar inline `html { margin-top: 32px }` still wins when logged in. */
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }
.wp-site-blocks { padding: 0; }

/* WP core (block-theme flow spacing) adds `margin-block-start: 1.2rem` to
   every direct child of `.wp-site-blocks` via `:where(.wp-site-blocks) > *`.
   That puts a ~1.2rem gap above <main>, i.e. between the header and the page
   content, on every page. Kill it site-wide so <main> is flush to its top.
   `:where()` carries 0 specificity, so this plain selector wins without
   !important. Page-specific hero-flush rules below (home / tax archives) stay
   as-is and only add padding-top:0 for their transparent floating headers. */
.wp-site-blocks > main {
	margin-block-start: 0;
	margin-top: 0;
}

/* Homepage: the hero must be flush to the top of the viewport. The floating
   transparent header overlaps the dark hero, not the white body. */
body.home main { margin-top: 0; padding-top: 0; }

/* When logged in (admin bar), the 32px html offset pushes the hero down too;
   drop the floating header just below the bar so its nav isn't hidden.
   Generic to ALL over-hero headers (homepage, tax archives, the old
   solution-template pages AND the new-design solution/industry pages) so the
   floating bar clears the admin bar everywhere — otherwise the new-design
   pages keep the header at top:0 while the mega panel (which always shifts
   +32px under body.admin-bar) drops to 112px, leaving a 32px gap. */
body.admin-bar .rs-header--over-hero { top: 32px; }

/* Solution/Industry category archive (栏目页): hero must be flush to the
   viewport top so the transparent floating header (--over-hero) sits OVER the
   category hero image, not over a white band above it. Single solution
   articles use the in-flow --flow header and are unaffected. */
body.tax-industries main,
body.tax-solutions main { margin-top: 0; padding-top: 0; }

/* Single solution pages: now also float the header over the dark hero
   (--over-hero), so the hero must be flush to the viewport top — same as the
   homepage / tax archives above. Keeps the transparent bar over the hero
   image, not over a white padding band. */
body.solution-template-default main { margin-top: 0; padding-top: 0; }

/* Link reset (mirrors Tailwind preflight's a-reset), applied site-wide.
   NOTE: preflight is actually ENABLED site-wide (full Tailwind CDN, no
   corePlugins.preflight=false), so this rule is now REDUNDANT with preflight
   but kept defensively. A bare element selector (specificity 0,0,0,1) stays
   below any component class rule, so explicit `text-decoration` on specific
   links and a Tailwind `underline` utility still win where one is wanted. */
a { text-decoration: none; }

/* Homepage right-hand blog list: thin light-grey divider between entries.
   Defined with a full `border-bottom` shorthand (style included) so it renders
   regardless of Tailwind preflight state. The element carries no Tailwind
   border utility, so this is the sole border rule and applies conflict-free. */
.rs-home-blog-item {
	border-bottom: 1px solid #9CA3AF;
}
.rs-home-blog-item:last-child {
	border-bottom: 0;
}
/* Right-hand blog list column: left padding so the divider/items don't hug
   the left capsule. Defined explicitly (with the Tailwind `lg` breakpoint) on
   purpose — the homepage loads Tailwind from precompiled home-tailwind.css
   only (the Play CDN is skipped on the front page), and `lg:pl-10` was never
   compiled into that static file, so it silently did nothing. */
@media (min-width: 1024px) {
	.rs-home-blog-list {
		padding-left: 2.5rem; /* = Tailwind pl-10 */
	}
}

/* Block-margin reset (mirrors Tailwind preflight), SCOPED to the homepage.
   NOTE: preflight is actually ENABLED site-wide, so this is now REDUNDANT with
   preflight but kept defensively. The 4-up STATS bar stacks two <p>s with no
   margin utility, so default margins would double up and make the bar ~2×
   taller than the xunruiCMS reference. `:where()` keeps specificity at 0, so
   the utility classes (mb-*, mt-*) still win — exactly how preflight +
   utilities interact. Scoped to body.home so blog/solution single pages that
   still rely on default paragraph spacing are untouched. */
:where(body.home) p,
:where(body.home) h1, :where(body.home) h2, :where(body.home) h3,
:where(body.home) h4, :where(body.home) h5, :where(body.home) h6 {
	margin: 0;
}

/* <button> reset (mirrors Tailwind preflight), SCOPED to the homepage main.
   NOTE: preflight is actually ENABLED site-wide, so this is now REDUNDANT with
   preflight but kept defensively. Raw <button> elements (solution tabs, the
   Projects carousel arrows) would otherwise show the browser's native 2px
   border + grey background — a dark/black outline, most visible on
   :active/:focus. `:where()` holds specificity at 0, so the Tailwind bg/border
   utilities on those buttons still win (bg-gray-900, border-2, etc.). */
:where(body.home) main button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* ===================== 2. SHARED COMPONENTS ===================== */

/* ----- Container ----- */
.sol-container {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
@media (min-width: 640px)  { .sol-container { padding-left: 2rem;   padding-right: 2rem; } }
@media (min-width: 1024px) { .sol-container { padding-left: 2rem; padding-right: 2rem; } }
/* Hero text inset: pull the headline closer to the left edge than the
   default .sol-container (2.5rem). 2em ≈ 32px at the 16px base font-size,
   matching the homepage hero's md:px-8. Scoped to .sol-hero-inner so other
   .sol-container usages (stats band, content sections) are unaffected. */
.sol-hero-inner { padding-left: 2em; }

/* Container shared by the CTA banner + product detail (centers content, caps
   width). Defined once here so page CSS can drop its duplicate copy. */
.rs-container {
	max-width: var(--rs-max-width);
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 640px) {
	.rs-container { padding: 0 1.5rem; }
}

/* ----- Route divider (blue gradient + dots) ----- */
.route-divider {
	position: relative;
	display: block;
	width: 100%;
	max-width: 120px;
	height: 3px;
	margin: 0 auto 1.5rem;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--rs-blue-500) 10%, var(--rs-blue-500) 90%, transparent 100%);
	flex-shrink: 0;
}
.route-divider::before,
.route-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--rs-blue-500);
	border: 3px solid var(--rs-white);
	box-shadow: 0 0 0 2px var(--rs-blue-500);
}
.route-divider::before { left: 8%; }
.route-divider::after  { right: 8%; }

/* ----- Buttons (design-system) ----- */
.sol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	border-radius: 0.6rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rs-btn-block { width: 100%; }

/* Primary — blue with left-to-right fill on hover */
.sol-btn-primary {
	position: relative;
	overflow: hidden;
	z-index: 1;
	background: var(--rs-blue-600);
	color: var(--rs-white);
	box-shadow: 0 8px 24px -10px rgba(37, 99, 235, 0.55);
}
.sol-btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--rs-blue-700);
	transition: width 0.35s ease;
	z-index: -1;
}
.sol-btn-primary:hover::before { width: 100%; }
.sol-btn-primary:hover { box-shadow: 0 10px 28px -10px rgba(29, 78, 216, 0.6); }

/* Outline — transparent with white border (on dark hero / dark CTA) */
.sol-btn-outline {
	background: transparent;
	color: var(--rs-white);
	border-color: rgba(255, 255, 255, 0.35);
}
.sol-btn-outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.6);
}

/* White — white bg, blue text (on dark CTA block) */
.rs-btn-white {
	background: var(--rs-white);
	color: var(--rs-blue-600);
}
.rs-btn-white::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--rs-gray-200);
	transition: width 0.35s ease;
	z-index: -1;
}
.rs-btn-white { position: relative; overflow: hidden; z-index: 1; }
.rs-btn-white:hover::before { width: 100%; }

/* Keyboard focus ring for buttons (mouse clicks keep their hover state) */
a:focus, button:focus, [tabindex]:focus, .sol-btn:focus { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid #111827;
	outline-offset: 2px;
}
.sol-btn:focus-visible {
	outline: 2px solid #111827;
	outline-offset: 2px;
}

/* ==========================================================================
   3. HEADER STYLES
   Matches the xunrui CMS header design
   (F:\php\WWW\www.rs-pid.com\template\pc\default\home\header.html)
   Single-level navigation (no hover dropdowns) for the early-stage site.
   ========================================================================== */

/* --- Header shell --- */
/* Default: NOT fixed. The header sits in normal flow above the main content
   and scrolls away with the page (matching the xunruiCMS reference). Pages
   that need a fixed/transparent header overlaying a full-bleed hero (e.g.
   future landing pages) can add the .rs-header--transparent class,
   whose position:fixed rule (defined later) wins by source order. */
.rs-header {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #f3f4f6;
}

.rs-header-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

@media (min-width: 640px) {
	.rs-header-inner {
		padding: 0 2rem;
	}
}

@media (min-width: 1024px) {
	.rs-header-inner {
		padding: 0 2rem;
	}
}

.rs-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

@media (min-width: 1024px) {
	.rs-header-row {
		height: 80px;
	}
}

/* --- Left group (logo + nav) --- */
.rs-header-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.rs-header-left {
		gap: 2.5rem;
	}
}

/* --- Logo --- */
.rs-header-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

/* Header logo — hard-cap the container AND the img so block-theme image
   resets can't render the logo at full intrinsic size. The <a> container is
   clipped to the intended height (44 / 36), so even if the <img> somehow
   renders larger, the visible logo stays within the bar. Specificity (0,2,0)
   + !important mirrors the base header rules. */
.rs-header .rs-header-logo {
	height: 36px;
	max-height: 36px;
	overflow: hidden;
}
.rs-header .rs-header-logo-img {
	display: block;
	height: 36px;
	max-height: 36px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.rs-header .rs-header-logo {
		height: 44px;
		max-height: 44px;
	}
	.rs-header .rs-header-logo-img {
		height: 44px;
		max-height: 44px;
	}
}

/* --- Desktop Nav (single level) --- */
.rs-header-nav {
	display: none;
}

@media (min-width: 1024px) {
	.rs-header-nav {
		display: block;
	}
}

.rs-header-nav-list {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-header-nav-list li {
	margin: 0;
	padding: 0;
}

.rs-header-nav-link {
	display: inline-block;
	padding: 0.5rem 18px;
	font-size: 16px;
	font-weight: 600;
	color: #374151;
	text-decoration: none;
	transition: color 0.15s;
}

.rs-header-nav-link:hover,
.rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header-nav-list li.current_page_item > .rs-header-nav-link {
	color: #2563eb;
}

/* --- Dropdown caret (top-level items with children) --- */
.rs-nav-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-top: 4px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	transition: transform 0.2s ease;
}
.rs-header-nav-list li.menu-item-has-children {
	position: relative;
}
.rs-header-nav-list li.menu-item-has-children.is-open > a .rs-nav-caret {
	transform: rotate(180deg);
}

/* --- Desktop dropdown panel --- */
.rs-header-nav-list .rs-sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border: 1px solid #e5e7eb;
	border-top: 3px solid #2563eb;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 100;
}
/* Reveal on hover (desktop) and on .is-open (JS toggle / keyboard) */
@media (min-width: 1024px) {
	.rs-header-nav-list li.menu-item-has-children:hover > .rs-sub-menu,
	.rs-header-nav-list li.menu-item-has-children.is-open > .rs-sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}
.rs-header-nav-list .rs-sub-menu li {
	margin: 0;
	padding: 0;
}
.rs-header-nav-list .rs-sub-menu .rs-header-nav-link {
	display: block;
	padding: 0.625rem 1rem;
	font-size: 15px;
	font-weight: 500;
	color: #4b5563;
	white-space: nowrap;
	border-bottom: 1px solid #f3f4f6;
}
.rs-header-nav-list .rs-sub-menu li:last-child .rs-header-nav-link {
	border-bottom: none;
}
.rs-header-nav-list .rs-sub-menu .rs-header-nav-link:hover {
	background: #eff6ff;
	color: #2563eb;
}

/* Mobile: hide desktop dropdown behaviour, use accordion instead.
   NOTE: the actual collapse/expand animation lives further down
   (.rs-sub-menu { max-height } / .is-open { max-height:1200px }).
   Keep this block to just reset list styling — do NOT set display:none
   here, otherwise it overrides the max-height transition above. */
.rs-mobile-nav-list .rs-sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rs-mobile-nav-list .rs-sub-menu .rs-mobile-nav-link {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #6b7280;
}
.rs-mobile-nav-list .rs-sub-menu .rs-mobile-nav-link:hover {
	color: #2563eb;
}
.rs-mobile-nav-list .rs-nav-caret {
	float: right;
	margin-top: 0.55rem;
	transition: transform 0.2s ease;
}
.rs-mobile-nav-list li.menu-item-has-children.is-open > a .rs-nav-caret {
	transform: rotate(180deg);
}

/* --- Right group (search + CTA) --- */
.rs-header-right {
	display: none;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 1024px) {
	.rs-header-right {
		display: flex;
	}
}

.rs-header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.15s;
}

.rs-header-search-toggle:hover {
	color: #2563eb;
}

.rs-header-search-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

.rs-header-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border-radius: 0.75rem;
	text-decoration: none;
	transition: background 0.15s;
	white-space: nowrap;
}

.rs-header-cta:hover {
	background: #1d4ed8;
}

/* --- WooCommerce header icons (My Account + Cart) --- */
.rs-header-wc {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.rs-header-wc-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563 !important;
	text-decoration: none;
	transition: color 0.15s;
}

.rs-header-wc-link:hover {
	color: #2563eb !important;
}

.rs-header-wc-link svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* --- Mini Cart block in header --- */
.rs-header-wc .wc-block-mini-cart {
	display: inline-flex;
	align-items: center;
}
.rs-header-wc .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563;
	text-decoration: none;
	background: none !important;
	border: none !important;
	cursor: pointer;
	transition: color 0.15s;
	line-height: 1;
	position: relative;
}
.rs-header-wc .wc-block-mini-cart__button:hover {
	color: #2563eb;
}
.rs-header-wc .wc-block-mini-cart__icon {
	width: 1.25rem;
	height: 1.25rem;
}
.rs-header-wc .wc-block-mini-cart__badge {
	position: absolute;
	top: 0.125rem;
	right: 0.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #2563eb;
	border-radius: 9999px;
	border: 2px solid #fff;
}
.rs-header-wc .wc-block-mini-cart__quantity-badge {
	display: inline-flex;
	position: relative;
}
.rs-header-wc .wc-block-mini-cart__amount {
	display: none;
}

/* --- Mobile toggle --- */
.rs-header-mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563;
	background: none;
	border: none;
	cursor: pointer;
	margin-left: auto;
}

.rs-header-mobile-toggle:hover {
	color: #2563eb;
}

.rs-header-mobile-toggle svg {
	width: 1.5rem;
	height: 1.5rem;
}

@media (min-width: 1024px) {
	.rs-header-mobile-toggle {
		display: none;
	}
}

/* --- Search dropdown (floating card — matches design reference) --- */
.rs-search-dropdown {
	position: fixed;
	width: 480px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
	padding: 20px;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 60;
}

.rs-search-dropdown.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Dark circular close button, top-right (turns red on hover, per reference) */
.rs-search-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #111827;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
	z-index: 1;
}

.rs-search-close:hover {
	background: #dc2626;
	transform: scale(1.1);
}

.rs-search-close svg {
	width: 1rem;
	height: 1rem;
}

.rs-search-form {
	display: block;
}

/* Bordered input group, stretches full width of the card */
.rs-search-input-wrap {
	display: flex;
	align-items: stretch;
	border: 2px solid #d1d5db;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s;
}

.rs-search-input-wrap:focus-within {
	border-color: #3b82f6;
}

.rs-search-input {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: #111827;
	background: transparent;
	border: none;
	outline: none;
}

.rs-search-input::placeholder {
	color: #9ca3af;
}

.rs-search-submit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}

.rs-search-submit:hover {
	background: #1d4ed8;
}

.rs-search-submit svg {
	width: 1rem;
	height: 1rem;
}


/* --- Solution header: NOT fixed (scrolls away) ---
   On solution single pages the header is in normal flow (relative), so it
   scrolls away with the page instead of overlaying the hero. The sticky
   section-nav below the hero is what pins to the top on scroll. */
.rs-header.rs-header--flow {
	position: relative;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

/* --- About header: floats OVER the editor-built hero (absolute), NOT fixed ---
   The hero is a Kadence alignfull row built in the block editor with its own
   (mid/dark) background image + gradient overlay. The header overlays it
   (absolute, top:0) instead of occupying flow space and pushing the hero down.
   Because it is absolute (not fixed), it scrolls away with the page.

   Transparent initially (white logo / white nav text over the hero) and turns
   solid white on hover — design system: transparent -> solid on hover. The page
   gives the hero NO top offset (see about.css) so the hero is flush under the
   bar and the transparent bar sits over the hero image, not over a white gap. */
.rs-header.rs-header--over-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
	border-bottom-color: transparent;
}
.rs-header.rs-header--over-hero .rs-header-logo-img {
	filter: brightness(0) invert(1);
}
/* NOTE: the base .rs-header-* rules use !important (to defeat the
   block theme's default styles), so every transparent-state override here
   MUST also carry !important — otherwise the dark default color wins and
   only the logo (which uses filter, not color) turns white. Matches the
   xunruiCMS pattern: header.absolute.text-white .nav-item{color:#fff!important}. */
.rs-header.rs-header--over-hero .rs-header-nav-link,
.rs-header.rs-header--over-hero .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header.rs-header--over-hero .rs-header-nav-list li.current_page_item > .rs-header-nav-link {
	color: #fff;
}
.rs-header.rs-header--over-hero .rs-header-nav-link:hover {
	color: #60a5fa;
}
.rs-header.rs-header--over-hero .rs-header-search-toggle {
	color: #fff;
}
.rs-header.rs-header--over-hero .rs-header-search-toggle:hover {
	color: #60a5fa;
}
.rs-header.rs-header--over-hero .rs-header-wc-link {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .rs-header-wc-link:hover {
	color: #60a5fa !important;
}
.rs-header.rs-header--over-hero .wc-block-mini-cart__button {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .wc-block-mini-cart__button:hover {
	color: #60a5fa !important;
}
.rs-header.rs-header--over-hero .rs-header-cta {
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.rs-header.rs-header--over-hero .rs-header-cta:hover {
	color: #fff;
	background: #2563eb;
	border-color: #2563eb;
}
.rs-header.rs-header--over-hero .rs-header-mobile-toggle {
	color: #fff;
}
.rs-header.rs-header--over-hero .rs-header-mobile-toggle:hover {
	color: #60a5fa;
}

/* Hover-reveal solid white (design system: transparent -> solid on hover).
   Also applies when a dropdown is open via JS (click/keyboard) — without
   :hover the header would stay transparent and the white dropdown text
   would be invisible. */
.rs-header.rs-header--over-hero:hover,
.rs-header.rs-header--over-hero.dropdown-open {
	background: #fff;
	border-bottom-color: #e5e7eb;
}
.rs-header.rs-header--over-hero:hover .rs-header-logo-img,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-logo-img {
	filter: none;
}
.rs-header.rs-header--over-hero:hover .rs-header-nav-link,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-link,
.rs-header.rs-header--over-hero:hover .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header.rs-header--over-hero:hover .rs-header-nav-list li.current_page_item > .rs-header-nav-link,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-list li.current_page_item > .rs-header-nav-link {
	color: #374151;
}
.rs-header.rs-header--over-hero:hover .rs-header-nav-link:hover,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-link:hover {
	color: #2563eb;
}
.rs-header.rs-header--over-hero:hover .rs-header-search-toggle {
	color: #4b5563;
}
.rs-header.rs-header--over-hero:hover .rs-header-search-toggle:hover {
	color: #2563eb;
}
.rs-header.rs-header--over-hero:hover .rs-header-cta {
	color: #fff;
	background: #2563eb;
	border-color: #2563eb;
}
.rs-header.rs-header--over-hero:hover .rs-header-mobile-toggle {
	color: #4b5563;
}
.rs-header.rs-header--over-hero:hover .rs-header-mobile-toggle:hover {
	color: #2563eb;
}
.rs-header.rs-header--over-hero:hover .rs-header-wc-link {
	color: #4b5563 !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-wc-link:hover {
	color: #2563eb !important;
}
.rs-header.rs-header--over-hero:hover .wc-block-mini-cart__button {
	color: #4b5563 !important;
}
.rs-header.rs-header--over-hero:hover .wc-block-mini-cart__button:hover {
	color: #2563eb !important;
}

/* --- Solid white header (normal flow, NOT floating over the hero) ---
   Use this variant for pages whose content should begin under a normal
   white header (e.g. Contact). It sits in normal document flow
   (position: relative) so it occupies space and pushes the hero down —
   it never floats over the main area. Pick per page in header.php. */
.rs-header.rs-header--solid {
	position: relative;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

/* Note: .rs-header--transparent and .is-solid were removed — the header
   now uses .rs-header--flow (solution), .rs-header--over-hero (about), or
   .rs-header--solid (contact) instead. */

/* --- Hide the block theme's default header (we provide our own) --- */
.wp-block-template-part-header,
.wp-block-site-title,
.wp-block-navigation {
	display: none;
}

/* ==========================================================================
   4. FOOTER STYLES
   Matches the xunrui CMS footer design
   (F:\php\WWW\www.rs-pid.com\template\pc\default\home\footer.html)
   ========================================================================== */

/* --- Footer Container --- */
.rs-footer {
	background: #F8FAFC;
	border-top: 1px solid #e2e8f0;
	margin-top: 0;
}

.rs-footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
	padding-top: 3.5rem;
	padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.rs-footer-inner {
		padding: 0 2rem;
		padding-top: 3.5rem;
		padding-bottom: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.rs-footer-inner {
		padding: 0 2rem;
		padding-top: 3.5rem;
		padding-bottom: 1.5rem;
	}
}

/* --- Footer Grid (3 columns with dividers) --- */
.rs-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.rs-footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
	.rs-footer-brand-col {
		padding-right: 3rem;
	}
	.rs-footer-contact-col {
		padding: 0 3rem;
		border-left: 1px solid #cbd5e1;
		border-right: 1px solid #cbd5e1;
	}
	.rs-footer-social-col {
		padding-left: 3rem;
	}
}

/* --- Shared column title --- */
.rs-footer-col-title {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
}

/* --- Col 1: Brand + Address (stacked: logo on top, address below) --- */
.rs-footer-brand-col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Image logo, desaturated to pure black */
.rs-footer-logo-link {
	display: inline-block;
	text-decoration: none;
	line-height: 0;
}

.rs-footer-logo-img {
	display: block;
	width: 230px;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	/* Force the logo to monochrome black (invert + grayscale) */
	filter: grayscale(1) brightness(0);
}

.rs-footer-address {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #111827;
	width: 230px;
	max-width: 230px;
}

.rs-footer-address p {
	margin: 0;
}

/* --- Col 2: Get in touch --- */
.rs-footer-contact-intro {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #111827;
	margin: 0 0 1.5rem;
}

.rs-footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.rs-footer-contact-link {
	display: inline-block;
	color: #111827;
	text-decoration: none;
	border-bottom: 1px solid #111827;
	padding-bottom: 0.25rem;
	transition: color 0.2s, border-color 0.2s;
}

.rs-footer-contact-link:hover {
	color: #2563eb;
	border-color: #2563eb;
}

/* --- Col 3: Social + Certifications --- */
.rs-footer-social-grid {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 1rem 2rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.rs-footer-social-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #111827;
	text-decoration: none;
	transition: color 0.2s;
}

.rs-footer-social-link:hover {
	color: #2563eb;
}

.rs-social-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.rs-footer-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.rs-footer-badge {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #111827;
	border: 1px solid #111827;
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
	cursor: default;
	transition: color 0.2s, border-color 0.2s;
}

.rs-footer-badge:hover {
	color: #2563eb;
	border-color: #2563eb;
}

/* --- Bottom Bar --- */
.rs-footer-bottom {
	background: #E2E8F0;
}

.rs-footer-bottom-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0.3rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.rs-footer-bottom-inner {
		padding: 0.3rem 2rem;
	}
}

@media (min-width: 1024px) {
	.rs-footer-bottom-inner {
		padding: 0.3rem 2rem;
	}
}

.rs-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.5rem;
}

.rs-footer-legal-link {
	font-size: 0.75rem;
	color: #6b7280;
	text-decoration: none;
	transition: color 0.3s;
}

.rs-footer-legal-link:hover {
	color: #2563eb;
}

.rs-footer-copyright {
	font-size: 0.75rem;
	color: #6b7280;
}

/* --- Send Us a Message (inline email combo box) --- */
/* ── Back-to-top floating button ── */
.rs-backtop {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 55;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #fff;
	color: #0a0a0a;
	border: 1px solid #e2e8f0;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, color 0.2s, background 0.2s, border-color 0.2s;
}
.rs-backtop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rs-backtop:hover {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}
.rs-backtop svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}
@media (max-width: 768px) {
	.rs-backtop { right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; }
	.rs-backtop svg { width: 1.375rem; height: 1.375rem; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.rs-footer-inner {
		padding-top: 2.5rem;
		padding-bottom: 1.25rem;
	}

	.rs-footer-grid {
		gap: 2rem;
	}

	.rs-footer-brand {
		align-items: flex-start;
		align-self: flex-start;
	}

	.rs-footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Hide the block theme's default footer on all pages --- */
.wp-block-template-part-footer,
.wp-block-footer-site-nav,
.wp-block-footer-copyright {
	display: none !important;
}


/* ============================================================
   >>> MERGED FROM header-mega.css (consolidated 2026-08-13)
   ============================================================ */
/* ==========================================================================
   Header mega-menu (Solutions) + thumbnail dropdowns (Industries & other parents)
   Consumed by RisingStar_Nav_Walker. Faithfully mirrors the xunruiCMS reference
   (template/pc/default/home/header.html + public/static/css/global.css):
   - Solutions  -> full-width split panel: left sidebar of L2 + right panels
                   with L3 sublinks + a thumbnail.
   - Industries / other parents -> thumbnail + name card dropdown.
   ========================================================================== */

/* The mega <li> must be static so its full-width panel positions against the
   (relative) header, not the narrow <li>. Thumb <li> keeps the default
   position:relative so its panel drops under the item. */
.rs-header-nav-list li.rs-nav-mega {
	position: static;
}

/* ---------- Full-width mega panel (Solutions) ----------
   Use position:fixed (NOT absolute) so the panel spans the FULL viewport
   width regardless of ancestor positioning. No ancestor of the header uses
   transform/filter, so fixed resolves to the viewport as intended.

   Background split (mirrors xunruiCMS .mega-menu > .shadow-2xl):
   a linear-gradient paints the left column WHITE and the right column #F4F4F6,
   split at the 30/70 boundary of the centered 1440px container.
   calc(50vw - 288px) == (left edge of the centered 1440 container) + 432px
   (432px = 30% of 1440), so the color edge lines up with the column edge at
   any viewport width. Without this, the gray right panel never bled to the
   viewport edges and left white strips (the "gray + white" bug). */
.rs-mega {
	position: fixed;
	top: 80px; /* desktop header height (.rs-header-row = 80px @ >=1024px) */
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to right, #ffffff calc(50vw - 288px), #F4F4F6 calc(50vw - 288px));
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Transparent bridge above the panel: closes the gap between the top-level
   nav item and the (fixed) panel so the dropdown no longer flickers / disappears
   while the cursor travels from the item down into the panel. */
.rs-mega::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -24px;
	height: 24px;
}

/* Logged-in admin bar pushes the header down 32px; keep the panel flush. */
body.admin-bar .rs-mega {
	top: 112px;
}

@media (min-width: 1024px) {
	.rs-header-nav-list li.rs-nav-mega:hover > .rs-mega,
	.rs-header-nav-list li.rs-nav-mega > .rs-mega:hover,
	.rs-header-nav-list li.rs-nav-mega.is-open > .rs-mega {
		opacity: 1;
		visibility: visible;
	}
}

.rs-mega-inner {
	max-width: 1440px;
	margin: 0 auto;
	/* No horizontal padding: the 30/70 columns must span the full 1440 so the
	   split aligns with the gradient above (calc(50vw - 288px)). */
	padding: 0;
	display: flex;
	min-height: 420px;
}

/* ---------- Left sidebar (30%) — L2 list + follow indicator + CTA ---------- */
.rs-mega-side {
	box-sizing: border-box;
	width: 30%;
	background: #ffffff;
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
}

.rs-mega-side-label {
	margin: 0 0 1.25rem;
	padding-left: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}

.rs-mega-side-list {
	position: relative; /* containing block for .rs-mega-indicator */
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

/* The gray highlight that follows the active L2 link (xunruiCMS .sidebar-indicator).
   JS moves its top/height to match the hovered link. */
.rs-mega-indicator {
	position: absolute;
	left: -1.5rem;
	right: -1.5rem;
	top: 0;
	height: 0;
	background: linear-gradient(to right, transparent 0%, #F4F4F6 60%, #F4F4F6 100%);
	transition: top 0.45s ease, height 0.45s ease;
	z-index: 0;
}

.rs-mega-side-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.95rem 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
	border-radius: 0.5rem;
	position: relative;
	z-index: 1;
	background-color: transparent;
	transition: color 0.15s;
}

.rs-mega-chevron {
	width: 1rem;
	height: 1rem;
	margin-left: auto;
	color: #2563eb;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.rs-mega-side-link:hover,
.rs-mega-side-link.is-active {
	color: #2563eb;
}

.rs-mega-side-link.is-active .rs-mega-chevron {
	opacity: 1;
}

/* Left sidebar CTA — gray-gradient pill + dark round arrow (xunruiCMS .quote-group-blue) */
.rs-mega-side-cta {
	margin-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
}

.rs-mega-side-cta-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f4f6 35%, #e5e7eb 100%);
	border-radius: 0.5rem;
	white-space: nowrap;
	transition: background 0.3s;
}

.rs-mega-side-cta:hover .rs-mega-side-cta-btn {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #e5e7eb 35%, #d1d5db 100%);
}

.rs-mega-side-cta-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #111827;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.3s;
	flex-shrink: 0;
}

.rs-mega-side-cta-arrow svg {
	width: 0.5rem;
	height: 0.5rem;
	color: #fff;
}

.rs-mega-side-cta:hover .rs-mega-side-cta-arrow {
	background: #2563eb;
	transform: translateX(4px);
}

/* ---------- Right content (70%) — panels ---------- */
.rs-mega-content {
	box-sizing: border-box;
	width: 70%;
	background: #F4F4F6;
	padding: 2rem 2.5rem;
}

.rs-mega-panel {
	display: none;
}

.rs-mega-panel.is-active {
	display: block;
}

.rs-mega-panel-inner {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

.rs-mega-panel-text {
	flex: 1;
	min-width: 0;
}

.rs-mega-panel-text h3 {
	margin: 0 0 1rem;
	font-size: 1.875rem;
	font-weight: 700;
	color: #111827;
}

.rs-mega-panel-text p {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #6b7280;
	max-width: 38rem;
}

/* Right "Discover" CTA — gray-gradient pill + dark round arrow (xunruiCMS .quote-group) */
.rs-mega-discover {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
	text-decoration: none;
}

.rs-mega-discover-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f4f6 35%, #e5e7eb 100%);
	border-radius: 9999px;
	white-space: nowrap;
	transition: background 0.3s;
}

.rs-mega-discover:hover .rs-mega-discover-btn {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #e5e7eb 35%, #d1d5db 100%);
}

.rs-mega-discover-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #111827;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.3s;
	flex-shrink: 0;
}

.rs-mega-discover-arrow svg {
	width: 0.5rem;
	height: 0.5rem;
	color: #fff;
}

.rs-mega-discover:hover .rs-mega-discover-arrow {
	background: #2563eb;
	transform: translateX(4px);
}

.rs-mega-sublinks {
	border-top: 1px solid #e5e7eb;
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rs-mega-sublinks a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.rs-mega-sub-arrow {
	width: 0.625rem;
	height: 0.625rem;
	color: #2563eb;
	opacity: 0.35;
	flex-shrink: 0;
	transition: transform 0.25s, opacity 0.25s;
}

.rs-mega-sublinks a:hover {
	color: #2563eb;
}

.rs-mega-sublinks a:hover .rs-mega-sub-arrow {
	opacity: 1;
	transform: translateX(6px);
}

.rs-mega-panel-thumb {
	width: 18rem;
	flex-shrink: 0;
}

.rs-mega-panel-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.75rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Thumbnail + name dropdown — industrial 1x4 mega row ----------
   Reworked per expert review: the old 2x2 rounded card floating like a
   consumer-app bubble is replaced by a wide, hard-edged 1x4 module that
   reads like a metal panel extending down from the nav bar. */
.rs-header-nav-list li.rs-nav-thumb {
	position: relative;
}

.rs-thumb-drop {
	position: absolute;
	top: calc(100% + 14px);     /* 挂在一级栏目下方 14px */
	left: 50%;                  /* 水平居中：面板中线对齐一级栏目中线 */
	z-index: 100;
	width: 880px;               /* 1x4 横向一字排开（专家建议 800–1000px） */
	background: #ffffff;
	border: 1px solid #E5E7EB;  /* 极细浅灰边框，金属模块感 */
	border-radius: 2px;         /* 极小微圆角（硬朗工业风） */
	/* 硬朗的垂直阴影：一条 0 模糊的实色偏移 + 一层克制投影 */
	box-shadow: 0 12px 0 rgba(15, 23, 42, 0.04), 0 18px 36px rgba(15, 23, 42, 0.12);
	padding: 1.25rem;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%); /* 水平居中 */
}

/* Transparent bridge above the panel (same gap fix as .rs-mega). */
.rs-thumb-drop::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -36px;
	height: 36px;
}

@media (min-width: 1024px) {
	.rs-header-nav-list li.rs-nav-thumb:hover > .rs-thumb-drop,
	.rs-header-nav-list li.rs-nav-thumb > .rs-thumb-drop:hover,
	.rs-header-nav-list li.rs-nav-thumb.is-open > .rs-thumb-drop {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
	}
}

.rs-thumb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* 1x4 一字排开 */
	gap: 1rem;
	width: 100%;
}

.rs-thumb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #ffffff;
	border-radius: 2px;
	overflow: hidden;
}

.rs-thumb-card-img {
	aspect-ratio: 4 / 3;        /* 更方正的工业比例 */
	overflow: hidden;
	background: #f4f4f6;
}

.rs-thumb-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);            /* 默认黑白 */
	transition: filter 0.4s ease;       /* 悬停转彩色，不放大（尊重"别放大"偏好） */
}

.rs-thumb-card:hover .rs-thumb-card-img img {
	filter: grayscale(0%);
}

.rs-thumb-card-name {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	padding: 0.75rem 0.875rem 0.875rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #111827;            /* 深黑主标题 */
	transition: color 0.15s ease;
}


/* ============================================================
   >>> MERGED FROM pre-footer.css (consolidated 2026-08-13)
   ============================================================ */
/* ==========================================================================
   Pre-footer role selector (template-parts/pre-footer-role.php)
   Loaded globally so the band renders correctly on every page that includes
   the part — not only on the Contact page.
   ========================================================================== */

.pre-footer {
	background: #F4F4F6;
	padding: 48px 0;
}
.pre-footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.pre-footer-text {
	font-size: 1.5rem;
	font-weight: 600;
	color: #000;
	line-height: 1.4;
	max-width: 600px;
}
.pre-footer-select-wrap {
	position: relative;
}
.pre-footer-select {
	appearance: none;
	-webkit-appearance: none;
	width: 420px;
	max-width: 100%;
	height: 48px;
	padding: 0 2.5rem 0 1.25rem;
	background: #fff;
	border: none;
	border-radius: 9999px;
	font-size: .9375rem;
	font-weight: 500;
	color: #1f2937;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
	cursor: pointer;
	transition: box-shadow .2s;
}
.pre-footer-select:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
.pre-footer-select:focus {
	outline: none;
	border: 2.5px dashed #93C5FD;
	box-shadow: none;
}
.pre-footer-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: color .2s;
}
.pre-footer-arrow svg {
	width: .75rem;
	height: .75rem;
	color: #6b7280;
	transition: color .2s;
}
.pre-footer-select-wrap:hover .pre-footer-arrow svg {
	color: #dc2626;
}
/* ============================================================
   RisingStar — FROZEN core components (shared across industry pages)

   · header (.site-nav)
   · hero (.hero / .hero-scrim / .hero CTA buttons)
   · section-nav (.section-nav / anchor navigation)

   ⛔  LOCKED — AI must not modify these three blocks or their
       styles. Any change must be approved explicitly.          ⛔
   ============================================================ */

/* ============================================================
   Typography override — HIGHEST PRIORITY over theme defaults
   ------------------------------------------------------------
   This theme prints its global font/heading
   styles inline in <head> AFTER enqueued stylesheets, so the
   parent theme's h1/h2/h3 (and body) would otherwise win. The
   custom font tokens (font-headline-*, text-headline-*, …) now
   generate real CSS and already beat element selectors by class
   specificity; this !important safety net guarantees EVERY text
   node uses Inter even where a utility class is missing.
   Front-end only — this file is enqueued solely on new-design pages.
   ============================================================ */
html, body {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* ── Tailwind preflight border base ──
   WP new-design pages now load Tailwind WITH preflight ENABLED (no
   corePlugins.preflight=false). Historically preflight was disabled, which
   dropped the default `border-style` Tailwind's preflight sets, so this base
   layer was added then. It is now REDUNDANT with preflight but kept defensively
   so utilities like `border` / `border-t` / `border-line` always render. */
*, *::before, *::after {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

/* ── Hero ── */
.hero{position:relative;min-height:72vh;display:flex;flex-direction:column;background:#0a0a0a;overflow:hidden}
.hero::before{display:none}
.hero::after{display:none}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 25%,rgba(0,0,0,0) 60%),linear-gradient(to right,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25) 100%)}
.hero-ph{position:absolute;inset:0}
.hero-ph::before{display:none}
.hero-ph .ph-badge{position:absolute;top:20px;left:20px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.hero-ph .ph-text{position:absolute;left:20px;bottom:20px;max-width:500px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.5)}
.hero-ph .ph-text b{color:#fff}

/* ── Hero responsive image swap (page-managed hero figures, shared by home + solutions + industries) ──
   background-image-style heroes (solutions / industries) get three CSS custom
   props emitted inline by risingstar_hero_bg_style(): --rs-hero-bg-pc (default
   desktop), --rs-hero-bg-mobile (narrow), --rs-hero-bg-original (ultra-wide).
   The <picture>-style hero (front-page) handles its own swap via <source media>,
   so the @media rules below only matter for the bg-image hero blocks. */
@media (max-width: 767px) {
  .hero[style*="--rs-hero-bg-pc"] { background-image: var(--rs-hero-bg-mobile) !important; }
}
/* BANDWIDTH CAP — ultra-wide tier intentionally disabled (see the matching
   TODO(bandwidth) note in risingstar_hero_bg_style(), functions.php).
   While server bandwidth is limited, ALL viewports above 767px share the
   ≤1536px image (--rs-hero-bg-pc); nothing larger is ever fetched.
   When hosting is upgraded, restore the ultra-wide tier by un-commenting
   this block (and re-emitting --rs-hero-bg-original in functions.php):

@media (min-width: 1921px) {
  .hero[style*="--rs-hero-bg-pc"] { background-image: var(--rs-hero-bg-original) !important; }
}
*/

/* ── Hero mobile adaptation (single source; aligns with F:\0807 responsive intent) ──
   The hero inner wrapper (.flex-1) carries fixed Tailwind px-16 / pt-32 / pb-20,
   which cramps content on phones. Override only below Tailwind's `md` breakpoint
   (768px) using higher specificity than the utilities so desktop is untouched. */
@media (max-width: 767px) {
  .hero .flex-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 5.5rem;
    padding-bottom: 3rem;
  }
}

/* ── Site Nav (header) ── */
.site-nav{position:relative;top:0;left:0;right:0;z-index:100;transition:all .4s cubic-bezier(.23,1,.32,1)}
.site-nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.site-nav.scrolled .nav-logo{color:#0a0a0a}
.site-nav.scrolled .nav-link{color:#374151}
.site-nav.scrolled .nav-link:hover{color:#2563eb}
.site-nav.scrolled .nav-cta{border-color:#2563eb;color:#2563eb}
.site-nav.scrolled .nav-cta:hover{background:#2563eb;color:#fff}

/* ── Section Nav (anchor navigation bar) ── */
.section-nav{position:relative;z-index:40;background:#fff;border-bottom:1px solid #e5e7eb;transition:top 0.3s}
.section-nav.stuck{position:fixed;top:0;left:0;right:0;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.section-nav-inner{display:flex;align-items:center;height:52px;max-width:1440px;margin:0 auto;padding:0 4rem}
.nav-dropdown-btn{display:flex;align-items:center;gap:.5rem;padding:.375rem .875rem;font-size:.875rem;font-weight:700;color:#111827;background:#EBF0FF;border-radius:.25rem;cursor:pointer;margin-right:2rem;transition:background .2s}
.nav-dropdown-btn:hover{background:#dbeafe}
.nav-dropdown-btn svg{width:.75rem;height:.75rem;color:#6b7280}
.nav-link-item{display:inline-flex;align-items:center;gap:.5rem;padding:0 1.25rem;height:52px;font-size:.8125rem;font-weight:600;color:#111827;position:relative;z-index:1;white-space:nowrap;text-decoration:none;transition:color .2s}
.nav-link-item:hover{color:#2563eb}
.nav-link-item.active{color:#2563eb}
.nav-num{font-size:.6875rem;font-weight:700;color:#9ca3af;min-width:1.25rem}
.nav-link-item.active .nav-num{color:#2563eb}
.nav-indicator{position:absolute;bottom:0;height:2px;background:#111827;border-radius:1px;transition:left .35s ease,width .35s ease}
.nav-actions{display:flex;align-items:center;gap:.625rem;margin-left:auto}
.nav-quote-btn{padding:.5rem 1rem;font-size:.8125rem;font-weight:600;color:#111827;background:linear-gradient(to right,rgba(255,255,255,0) 0%,#f3f4f6 35%,#e5e7eb 100%);border-radius:9999px;cursor:pointer;transition:background .3s}
.nav-quote-btn:hover{background:linear-gradient(to right,rgba(255,255,255,0) 0%,#e5e7eb 35%,#d1d5db 100%)}
.nav-circle-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:#111827;cursor:pointer;transition:transform .3s ease,background .3s}
.nav-circle-btn svg{width:.75rem;height:.75rem;color:#fff}
.nav-actions:hover .nav-circle-btn{background:#2563eb;transform:translateX(3px)}

/* ── Industries switcher (section-nav leftmost trigger) ── */
.rs-ind-switch{position:relative;display:flex;align-items:center;flex-shrink:0;margin-right:2rem}
.rs-ind-switch-btn{display:flex;align-items:center;gap:.25rem;font-size:1rem;font-weight:700;color:#111827;background:none;border:0;padding:0;margin:0;line-height:inherit;cursor:pointer;font-family:inherit}
.rs-ind-switch-btn:hover .rs-ind-caret{color:#111827}
.rs-ind-caret{transition:transform .2s ease}
.rs-ind-switch.open .rs-ind-caret{transform:rotate(180deg)}
.rs-ind-menu{position:absolute;top:calc(100% + 10px);left:-12px;min-width:230px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 44px -14px rgba(0,0,0,.22);padding:8px;z-index:60}
.rs-ind-menu[hidden]{display:none}
.rs-ind-menu-label{display:block;padding:6px 12px 6px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af}
.rs-ind-menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:10px 12px;border-radius:9px;font-size:.875rem;font-weight:600;color:#4b5563;text-decoration:none;transition:background .15s,color .15s}
.rs-ind-menu a svg{width:.875rem;height:.875rem;color:#9ca3af;opacity:0;transform:translateX(-4px);transition:all .15s ease}
.rs-ind-menu a:hover{background:#f4f4f6;color:#111827}
.rs-ind-menu a:hover svg{opacity:1;transform:translateX(0)}

/* ── Hero CTA (monochrome white pill → blue on hover) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.875rem 2rem;
  font-weight: 600;
  box-shadow: none;
  transition: all 0.3s;
}
.btn-primary::before { display: none; }
.btn-primary:hover {
  background-color: #3B82F6;
  color: #ffffff;
  border-color: #3B82F6;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}
.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  padding: 0.875rem 2rem;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn-secondary::before { display: none; }
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Hero variant: force the ghost + glow treatment (overrides the generic
   white-fill .btn-secondary defined later in this file, which is for light sections). */
.hero .btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
}
.hero .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* ── Playful CTA micro-interaction — unified across all CTAs (arrow rotates 45° + label slides up) ──
   NOTE: .play-ico is an INLINE arrow chip (no disc). Discs live only on .rs-mega-*-arrow. */
.play-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;transition:transform .3s ease}
.nav-actions:hover .nav-circle-btn .play-ico,
.cta-play:hover .play-ico,
.btn-primary:hover .play-ico,
.rs-header-cta:hover .play-ico,
.rs-mobile-cta:hover .play-ico{transform:rotate(45deg)}

.play-txt{display:inline-block;overflow:hidden;vertical-align:middle;line-height:1.5;height:1.5em;white-space:nowrap}
.play-txt>span{display:block;line-height:1.5;height:1.5em;white-space:nowrap;transition:transform .3s ease}
.nav-actions:hover .nav-quote-btn .play-txt>span,
.cta-play:hover .play-txt>span,
.btn-primary:hover .play-txt>span,
.rs-header-cta:hover .play-txt>span,
.rs-mobile-cta:hover .play-txt>span{transform:translateY(-1.5em)}

/* ── Anchor scroll offset (paired with sticky section-nav) ── */
section[id]{scroll-margin-top:88px;}

/* ============================================================
   RisingStar — FROZEN blocks: Deployment zones & FAQ
   Reused across solutions pages.

   ⛔  LOCKED — AI must not modify these blocks or their
       styles. Any change must be approved explicitly.      ⛔
   ============================================================ */

/* ── Deployment zones (sidebar + panels) ── */
.dep-sidebar{width:300px;flex-shrink:0;background:#fff;border-right:1px solid #e5e7eb;position:relative}
.dep-sidebar-indicator{position:absolute;left:0;right:0;top:0;height:0;background:#EBF0FF;border-radius:0;transition:top .4s ease,height .4s ease;z-index:0}
.dep-sidebar-link{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-size:.9375rem;font-weight:600;color:#374151;cursor:pointer;transition:color .15s;border-radius:0;position:relative;z-index:1;background:transparent;border-left:3px solid transparent}
.dep-sidebar-link .dep-arrow{opacity:0;transition:opacity .15s;margin-left:auto}
.dep-sidebar-link.active{color:#111827;border-left-color:#2563eb}
.dep-sidebar-link.active .dep-arrow{opacity:1;color:#2563eb}
.dep-sidebar-link:hover{color:#2563eb}
/* NOTE: div.dep-panel specificity (0,1,1) beats Tailwind's .flex (0,1,0) even though the Play CDN injects its <style> after this file. */
div.dep-panel{display:none}
div.dep-panel.active{display:flex;animation:panelFadeIn .25s cubic-bezier(.4,0,.2,1) forwards}
@keyframes panelFadeIn { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }

/* ── Deployment — active-state overrides ── */
.dep-sidebar-indicator {
  position: absolute;
  left: 0;
  width: 2px;
  background-color: #2563eb;
  transition: all 0.3s ease;
}
.dep-sidebar-link.active {
  color: #2563eb;
  background-color: #f9f9fb;
}
.dep-sidebar-link.active .text-slatey {
  color: #6b7280;
}
.dep-sidebar-link.active .dep-arrow {
  opacity: 1;
  color: #2563eb;
}

/* ── Deployment — right-card image fix (scoped to panels) ── */
.dep-panel .img-ph{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1rem;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 50%,#eff6ff 100%);overflow:hidden}
.dep-panel .img-ph .ph-badge{position:static;background:#2563eb;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:6px;margin-bottom:0}
.dep-panel .img-ph .ph-text{position:static;text-align:left;max-width:100%}

/* ── FAQ ── */
.faq-section{background:#fff}
.faq-grid{display:grid;grid-template-columns:320px 1fr;gap:4rem}
.faq-item{border-bottom:1px solid #e5e7eb}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.5rem;padding:24px 0;transition:background .15s ease}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:hover{background:#fafafa;margin:0 -1rem;padding-left:1rem;padding-right:1rem}
.faq-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:#9ca3af;flex-shrink:0;width:2rem;letter-spacing:.04em;transition:color .2s}
.faq-item[open] .faq-num{color:#111827}
.faq-q{flex:1;font-size:16px;font-weight:600;color:#111827;line-height:1.5}
.faq-toggle{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.faq-toggle .bar-h,.faq-toggle .bar-v{position:absolute;background:#9ca3af;transition:all .25s ease}
.faq-toggle .bar-h{width:12px;height:1.5px}
.faq-toggle .bar-v{width:1.5px;height:12px}
.faq-item[open] .faq-toggle .bar-v{transform:scaleY(0)}
.faq-item[open] .faq-toggle .bar-h{background:#111827}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.23,1,.32,1)}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-body-inner{overflow:hidden}
.faq-answer{padding:0 0 28px 3.5rem;font-size:15px;line-height:1.8;color:#6b7280}

/* ============================================================
   RisingStar — FROZEN blocks: Bottom CTA & Footer
   Reused across solutions pages.

   ⛔  LOCKED — AI must not modify these blocks or their
       styles. Any change must be approved explicitly.      ⛔
   ============================================================ */

/* ── Footer ── */
footer{background:#F4F4F6}
footer a{transition:color .2s ease}
footer a:hover{color:#2563eb}

/* ============================================================
   RisingStar — Shared content card hover (unified across pages)
   · .card = base behavior only (no background/border by design —
     each card's own Tailwind utilities own its cosmetics)
   · .card:hover = lift + soft shadow; border & color unchanged
   · .dark-card:hover = same lift language, shadow tuned for dark bg

   ⛔  LOCKED — AI must not modify these rules. Any change must
       be approved explicitly.                              ⛔
   ============================================================ */

/* ── Content card ── */
.card{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s cubic-bezier(.23,1,.32,1)}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(10,10,10,.07)}
.dark-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.2),0 16px 40px -12px rgba(0,0,0,.45)}

/* ============================================================
   RisingStar — CTA pill button (GLOBAL component)
   Internal spacing (text ↔ arrow) lives here so EVERY CTA is
   consistent without each page having to remember a gap class.
   Colour/shape are supplied per-page via Tailwind utilities
   (bg-*, px-*, rounded-full, font-bold, shadow-*…). Do NOT set
   background/colour here — it would override page-specific buttons
   (e.g. onboard's black pill).
   ============================================================ */
.cta-play{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}

/* ============================================================
   RisingStar — Header bar / Mega menu / Thumbnail dropdown / Mobile nav / Footer
   (the rs-* component family) — CANONICAL SHARED SOURCE
   ------------------------------------------------------------
   Consolidated here from home.html's inline <style> so every template
   (home + all solution/industry pages) pulls these from ONE file.
   The mega/thumb rules previously lived only in the WP theme's
   assets/css/header-mega.css; they are merged in here (refined version
   with the transparent ::before bridge that closes the dropdown gap)
   so this template folder is the single source of truth.

   Frozen together with the other shared blocks - do NOT fork per-page.
   ============================================================ */

/* ---- Header bar (.rs-header) ---- */
.rs-header { position: relative; z-index: 50; background: #fff; border-bottom: 1px solid #f3f4f6; }
    .rs-header-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.25rem; }
    @media (min-width: 640px) { .rs-header-inner { padding: 0 2rem; } }
    @media (min-width: 1024px) { .rs-header-inner { padding: 0 2rem; } }

    .rs-header-row { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    @media (min-width: 1024px) { .rs-header-row { height: 80px; } }

    .rs-header-left { display: flex; align-items: center; gap: 1.5rem; }
    @media (min-width: 1024px) { .rs-header-left { gap: 2.5rem; } }

    .rs-header-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
    .rs-header .rs-header-logo { height: 36px; max-height: 36px; overflow: hidden; }
    .rs-header .rs-header-logo-img {
        display: block;
        height: 36px;
        max-height: 36px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
    @media (min-width: 1024px) {
        .rs-header .rs-header-logo { height: 44px; max-height: 44px; }
        .rs-header .rs-header-logo-img { height: 44px; max-height: 44px; }
    }

    .rs-header-nav { display: none; }
    @media (min-width: 1024px) { .rs-header-nav { display: block; } }

    .rs-header-nav-list { display: flex; align-items: center; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
    .rs-header-nav-list li { margin: 0; padding: 0; }

    .rs-header-nav-link {
        display: inline-block;
        padding: 0.5rem 18px;
        font-size: 16px;
        font-weight: 600;
        color: #374151;
        text-decoration: none;
        transition: color 0.15s;
    }
    .rs-header-nav-link:hover,
    .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
    .rs-header-nav-list li.current_page_item > .rs-header-nav-link { color: #0a0a0a; }

    /* Dropdown caret */
    .rs-nav-caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 6px;
        vertical-align: middle;
        border-top: 4px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        transition: transform 0.2s ease;
    }
    .rs-header-nav-list li.menu-item-has-children { position: relative; }
    .rs-header-nav-list li.menu-item-has-children.is-open > a .rs-nav-caret { transform: rotate(180deg); }

    /* Right group */
    .rs-header-right { display: none; align-items: center; gap: 0.5rem; }
    @media (min-width: 1024px) { .rs-header-right { display: flex; } }

    .rs-header-search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        color: #4b5563;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.15s;
    }
    .rs-header-search-toggle:hover { color: #0a0a0a; }
    .rs-header-search-toggle svg { width: 1.25rem; height: 1.25rem; }

    /* Header CTA — monochrome ink ghost pill (new design system).
       Reference: ceiling-mount.html anchor-nav .nav-cta.pill (white ghost over dark,
       ink fill on hover). Here the header is a white bar, so the CTA is an ink ghost
       (neutral border + ink text) that fills to solid ink on hover with a subtle lift. */
    .rs-header-cta {
        display: inline-flex;
        align-items: center;
        padding: 0.6rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #0a0a0a;
        background: transparent;
        border: 1px solid #0a0a0a;
        border-radius: 9999px;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        white-space: nowrap;
    }
    .rs-header-cta:hover {
        background: #0a0a0a;
        color: #fff;
    }

    .rs-header-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        color: #4b5563;
        background: none;
        border: none;
        cursor: pointer;
        margin-left: auto;
    }
    .rs-header-mobile-toggle:hover { color: #0a0a0a; }

    /* Mobile drawer CTA — blue filled pill (matches dark drawer) */
    .rs-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.8rem 1.25rem;
        font-size: 0.9375rem;
        font-weight: 700;
        color: #fff;
        background: #2563eb;
        border: none;
        border-radius: 9999px;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        white-space: nowrap;
    }
    .rs-mobile-cta:hover {
        background: #1d4ed8;
        color: #fff;
    }
    .rs-header-mobile-toggle svg { width: 1.5rem; height: 1.5rem; }
    @media (min-width: 1024px) { .rs-header-mobile-toggle { display: none; } }

    /* Inline header search — sits inside the header bar and expands leftward from the icon */
    .rs-header-search-inline {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        display: flex;
        align-items: center;
        width: 0;
        max-width: calc(100vw - 32px);
        overflow: hidden;
        background: #fff;
        border-radius: 9999px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
        transition: width 0.34s cubic-bezier(.22,.61,.36,1);
        z-index: 55;
    }
    .rs-header-search-inline.active { width: 320px; }
    .rs-search-form-inline { display: flex; align-items: center; width: 100%; }
    .rs-search-input-inline {
        flex: 1; min-width: 0; border: none; outline: none; background: transparent;
        padding: 0 0.25rem 0 1.1rem; height: 44px; font-size: 12px; color: #111827;
    }
    .rs-search-input-inline::placeholder { color: #9ca3af; font-size: 12px; }

    /* Solid white header variant */
    .rs-header.rs-header--solid { position: relative; background: #fff; border-bottom: 1px solid #e5e7eb; }

    /* Over-hero transparent variant */
    .rs-header.rs-header--over-hero {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: transparent;
        border-bottom-color: transparent;
    }
    .rs-header.rs-header--over-hero .rs-header-logo-img { filter: brightness(0) invert(1); }
    .rs-header.rs-header--over-hero .rs-header-nav-link,
    .rs-header.rs-header--over-hero .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
    .rs-header.rs-header--over-hero .rs-header-nav-list li.current_page_item > .rs-header-nav-link { color: #fff; }
    .rs-header.rs-header--over-hero .rs-header-nav-link:hover { color: #0a0a0a; }
    .rs-header.rs-header--over-hero .rs-header-search-toggle { color: #fff; }
    .rs-header.rs-header--over-hero .rs-header-search-toggle:hover { color: #0a0a0a; }
    .rs-header.rs-header--over-hero .rs-header-cta {
        color: #fff;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.35);
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .rs-header.rs-header--over-hero .rs-header-cta:hover {
        color: #fff;
        background: #0a0a0a;
        border-color: #0a0a0a;
        transform: translateY(-1px);
        box-shadow: 0 8px 22px -6px rgba(10,10,10,0.45);
    }
    .rs-header.rs-header--over-hero .rs-header-mobile-toggle { color: #fff; }
    .rs-header.rs-header--over-hero .rs-header-mobile-toggle:hover { color: #0a0a0a; }

    .rs-header.rs-header--over-hero:hover,
    .rs-header.rs-header--over-hero.dropdown-open { background: #fff; border-bottom-color: #e5e7eb; }
    .rs-header.rs-header--over-hero:hover .rs-header-logo-img,
    .rs-header.rs-header--over-hero.dropdown-open .rs-header-logo-img { filter: none; }
    .rs-header.rs-header--over-hero:hover .rs-header-nav-link,
    .rs-header.rs-header--over-hero:hover .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
    .rs-header.rs-header--over-hero:hover .rs-header-nav-list li.current_page_item > .rs-header-nav-link { color: #374151; }
    .rs-header.rs-header--over-hero:hover .rs-header-nav-link:hover { color: #0a0a0a; }
    .rs-header.rs-header--over-hero:hover .rs-header-search-toggle { color: #4b5563; }
    .rs-header.rs-header--over-hero:hover .rs-header-search-toggle:hover { color: #0a0a0a; }
    .rs-header.rs-header--over-hero:hover .rs-header-cta { color: #fff; background: #0a0a0a; border-color: #0a0a0a; }
    .rs-header.rs-header--over-hero:hover .rs-header-mobile-toggle { color: #4b5563; }
    .rs-header.rs-header--over-hero:hover .rs-header-mobile-toggle:hover { color: #0a0a0a; }

/* ---- Mega menu + thumbnail dropdown (from WP header-mega.css, refined) ---- */
/* ==========================================================================
   Header mega-menu (Solutions) + thumbnail dropdowns (Industries & other parents)
   Consumed by RisingStar_Nav_Walker. Faithfully mirrors the xunruiCMS reference
   (template/pc/default/home/header.html + public/static/css/global.css):
   - Solutions  -> full-width split panel: left sidebar of L2 + right panels
                   with L3 sublinks + a thumbnail.
   - Industries / other parents -> thumbnail + name card dropdown.
   ========================================================================== */

/* The mega <li> must be static so its full-width panel positions against the
   (relative) header, not the narrow <li>. Thumb <li> keeps the default
   position:relative so its panel drops under the item. */
.rs-header-nav-list li.rs-nav-mega {
	position: static;
}

/* ---------- Full-width mega panel (Solutions) ----------
   Use position:fixed (NOT absolute) so the panel spans the FULL viewport
   width regardless of ancestor positioning. No ancestor of the header uses
   transform/filter, so fixed resolves to the viewport as intended.

   Background split (mirrors xunruiCMS .mega-menu > .shadow-2xl):
   a linear-gradient paints the left column WHITE and the right column #F4F4F6,
   split at the 30/70 boundary of the centered 1440px container.
   calc(50vw - 288px) == (left edge of the centered 1440 container) + 432px
   (432px = 30% of 1440), so the color edge lines up with the column edge at
   any viewport width. Without this, the gray right panel never bled to the
   viewport edges and left white strips (the "gray + white" bug). */
.rs-mega {
	position: fixed;
	top: 80px; /* desktop header height (.rs-header-row = 80px @ >=1024px) */
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to right, #ffffff calc(50vw - 288px), #F4F4F6 calc(50vw - 288px));
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Transparent bridge above the panel: closes the gap between the top-level
   nav item and the (fixed) panel so the dropdown no longer flickers / disappears
   while the cursor travels from the item down into the panel. */
.rs-mega::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -24px;
	height: 24px;
}

/* Logged-in admin bar pushes the header down 32px; keep the panel flush. */
body.admin-bar .rs-mega {
	top: 112px;
}

@media (min-width: 1024px) {
	.rs-header-nav-list li.rs-nav-mega:hover > .rs-mega,
	.rs-header-nav-list li.rs-nav-mega > .rs-mega:hover,
	.rs-header-nav-list li.rs-nav-mega.is-open > .rs-mega {
		opacity: 1;
		visibility: visible;
	}
}

.rs-mega-inner {
	max-width: 1440px;
	margin: 0 auto;
	/* No horizontal padding: the 30/70 columns must span the full 1440 so the
	   split aligns with the gradient above (calc(50vw - 288px)). */
	padding: 0;
	display: flex;
	min-height: 420px;
}

/* ---------- Left sidebar (30%) — L2 list + follow indicator + CTA ---------- */
.rs-mega-side {
	box-sizing: border-box;
	width: 30%;
	background: #ffffff;
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
}

.rs-mega-side-label {
	margin: 0 0 1.25rem;
	padding-left: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}

.rs-mega-side-list {
	position: relative; /* containing block for .rs-mega-indicator */
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

/* The gray highlight that follows the active L2 link (xunruiCMS .sidebar-indicator).
   JS moves its top/height to match the hovered link. */
.rs-mega-indicator {
	position: absolute;
	left: -1.5rem;
	right: -1.5rem;
	top: 0;
	height: 0;
	background: linear-gradient(to right, transparent 0%, #F4F4F6 60%, #F4F4F6 100%);
	transition: top 0.45s ease, height 0.45s ease;
	z-index: 0;
}

.rs-mega-side-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.95rem 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
	border-radius: 0.5rem;
	position: relative;
	z-index: 1;
	background-color: transparent;
	transition: color 0.15s;
}

.rs-mega-chevron {
	width: 1rem;
	height: 1rem;
	margin-left: auto;
	color: #0a0a0a;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.rs-mega-side-link:hover,
.rs-mega-side-link.is-active {
	color: #0a0a0a;
}

.rs-mega-side-link.is-active .rs-mega-chevron {
	opacity: 1;
}

/* Left sidebar CTA — gray-gradient pill + dark round arrow (xunruiCMS .quote-group-blue) */
.rs-mega-side-cta {
	margin-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
}

.rs-mega-side-cta-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f4f6 35%, #e5e7eb 100%);
	border-radius: 9999px;
	white-space: nowrap;
	transition: background 0.3s;
}

.rs-mega-side-cta:hover .rs-mega-side-cta-btn {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #e5e7eb 35%, #d1d5db 100%);
}

.rs-mega-side-cta-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #374151;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.3s;
	flex-shrink: 0;
}

.rs-mega-side-cta-arrow .material-symbols-outlined,
.rs-mega-side-cta-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
	color: #fff;
	font-size: 1.125rem;
}

.rs-mega-side-cta:hover .rs-mega-side-cta-arrow {
	background: #1f2937;
	transform: translateX(4px);
}

/* ---------- Right content (70%) — panels ---------- */
.rs-mega-content {
	box-sizing: border-box;
	width: 70%;
	background: #F4F4F6;
	padding: 2rem 2.5rem;
}

.rs-mega-panel {
	display: none;
}

.rs-mega-panel.is-active {
	display: block;
}

.rs-mega-panel-inner {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

.rs-mega-panel-text {
	flex: 1;
	min-width: 0;
}

.rs-mega-panel-text h3 {
	margin: 0 0 1rem;
	font-size: 1.875rem;
	font-weight: 700;
	color: #111827;
}

.rs-mega-panel-text p {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #6b7280;
	max-width: 38rem;
}

/* Right "Discover" CTA — gray-gradient pill + dark round arrow (xunruiCMS .quote-group) */
.rs-mega-discover {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
	text-decoration: none;
}

.rs-mega-discover-btn {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f4f6 35%, #e5e7eb 100%);
	border-radius: 9999px;
	white-space: nowrap;
	transition: background 0.3s;
}

.rs-mega-discover:hover .rs-mega-discover-btn {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #e5e7eb 35%, #d1d5db 100%);
}

.rs-mega-discover-arrow {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #374151;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.3s;
	flex-shrink: 0;
}

.rs-mega-discover-arrow .material-symbols-outlined,
.rs-mega-discover-arrow svg {
	width: 1.125rem;
	height: 1.125rem;
	color: #fff;
	font-size: 1.125rem;
}

.rs-mega-discover:hover .rs-mega-discover-arrow {
	background: #1f2937;
	transform: translateX(4px);
}

.rs-mega-sublinks {
	border-top: 1px solid #e5e7eb;
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rs-mega-sublinks a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.rs-mega-sub-arrow {
	width: 0.625rem;
	height: 0.625rem;
	color: #0a0a0a;
	opacity: 0.35;
	flex-shrink: 0;
	transition: transform 0.25s, opacity 0.25s;
}

.rs-mega-sublinks a:hover {
	color: #0a0a0a;
}

.rs-mega-sublinks a:hover .rs-mega-sub-arrow {
	opacity: 1;
	transform: translateX(6px);
}

.rs-mega-panel-thumb {
	width: 18rem;
	flex-shrink: 0;
}

.rs-mega-panel-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.75rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Thumbnail + name dropdown — industrial 1x4 mega row ----------
   Reworked per expert review: the old 2x2 rounded card floating like a
   consumer-app bubble is replaced by a wide, hard-edged 1x4 module that
   reads like a metal panel extending down from the nav bar. */
.rs-header-nav-list li.rs-nav-thumb {
	position: relative;
}

.rs-thumb-drop {
	position: absolute;
	top: calc(100% + 14px);     /* 挂在一级栏目下方 14px */
	left: 50%;                  /* 水平居中：面板中线对齐一级栏目中线 */
	z-index: 100;
	width: 880px;               /* 1x4 横向一字排开（专家建议 800–1000px） */
	background: #ffffff;
	border: 1px solid #E5E7EB;  /* 极细浅灰边框，金属模块感 */
	border-radius: 2px;         /* 极小微圆角（硬朗工业风） */
	/* 硬朗的垂直阴影：一条 0 模糊的实色偏移 + 一层克制投影 */
	box-shadow: 0 12px 0 rgba(15, 23, 42, 0.04), 0 18px 36px rgba(15, 23, 42, 0.12);
	padding: 1.25rem;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%); /* 水平居中 */
}

/* Transparent bridge above the panel (same gap fix as .rs-mega). */
.rs-thumb-drop::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -36px;
	height: 36px;
}

@media (min-width: 1024px) {
	.rs-header-nav-list li.rs-nav-thumb:hover > .rs-thumb-drop,
	.rs-header-nav-list li.rs-nav-thumb > .rs-thumb-drop:hover,
	.rs-header-nav-list li.rs-nav-thumb.is-open > .rs-thumb-drop {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
	}
}

.rs-thumb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* 1x4 一字排开 */
	gap: 1rem;
	width: 100%;
}

.rs-thumb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #ffffff;
	border-radius: 2px;
	overflow: hidden;
}

.rs-thumb-card-img {
	aspect-ratio: 4 / 3;        /* 更方正的工业比例 */
	overflow: hidden;
	background: #f4f4f6;
}

.rs-thumb-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);            /* 默认黑白 */
	transition: filter 0.4s ease;       /* 悬停转彩色，不放大（尊重"别放大"偏好） */
}

.rs-thumb-card:hover .rs-thumb-card-img img {
	filter: grayscale(0%);
}

.rs-thumb-card-name {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	padding: 0.75rem 0.875rem 0.875rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #111827;            /* 深黑主标题 */
	transition: color 0.15s ease;
}

/* ---- Footer (.rs-footer) ---- */
.rs-footer { background: #F8FAFC; border-top: 1px solid #e2e8f0; margin-top: 0; }
    .rs-footer-inner {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 1.25rem;
        padding-top: 3.5rem;
        padding-bottom: 1.5rem;
    }
    @media (min-width: 640px) { .rs-footer-inner { padding: 0 2rem; padding-top: 3.5rem; padding-bottom: 1.5rem; } }
    @media (min-width: 1024px) { .rs-footer-inner { padding: 0 2rem; padding-top: 3.5rem; padding-bottom: 1.5rem; } }
    .rs-footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; }
    @media (min-width: 768px) {
        .rs-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
        .rs-footer-brand-col { padding-right: 3rem; }
        .rs-footer-contact-col { padding: 0 3rem; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; }
        .rs-footer-social-col { padding-left: 3rem; }
    }
    .rs-footer-col-title { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 1rem; font-family: 'Inter', sans-serif; }
    .rs-footer-brand-col { display: flex; flex-direction: column; gap: 1.5rem; }
    .rs-footer-logo-link { display: inline-block; text-decoration: none; line-height: 0; }
    .rs-footer-logo-img {
        display: block;
        width: 230px;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        filter: grayscale(1) brightness(0);
    }
    .rs-footer-address { font-size: 0.875rem; line-height: 1.6; color: #111827; width: 230px; max-width: 230px; }
    .rs-footer-address p { margin: 0; }
    .rs-footer-contact-intro { font-size: 0.875rem; line-height: 1.6; color: #111827; margin: 0 0 1.5rem; }
    .rs-footer-contact-list { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; font-weight: 500; }
    .rs-footer-contact-link { display: inline-block; color: #111827; text-decoration: none; border-bottom: 1px solid #111827; padding-bottom: 0.25rem; transition: color 0.2s, border-color 0.2s; }
    .rs-footer-contact-link:hover { color: #2563eb; border-color: #2563eb; }
    .rs-footer-social-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 1rem 2rem; font-size: 0.875rem; font-weight: 500; }
    .rs-footer-social-link { display: flex; align-items: center; gap: 0.5rem; color: #111827; text-decoration: none; transition: color 0.2s; }
    .rs-footer-social-link:hover { color: #2563eb; }
    .rs-social-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
    .rs-footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
    .rs-footer-badge {
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #111827;
        border: 1px solid #111827;
        border-radius: 0.25rem;
        padding: 0.25rem 0.5rem;
        cursor: default;
        transition: color 0.2s, border-color 0.2s;
    }
    .rs-footer-badge:hover { color: #2563eb; border-color: #2563eb; }
    .rs-footer-bottom { background: #E2E8F0; }
    .rs-footer-bottom-inner {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0.75rem 1.25rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    @media (min-width: 640px) { .rs-footer-bottom-inner { padding: 0.75rem 2rem; } }
    @media (min-width: 1024px) { .rs-footer-bottom-inner { padding: 0.75rem 2rem; } }
    .rs-footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; }
    .rs-footer-legal-link { font-size: 0.75rem; color: #6b7280; text-decoration: none; transition: color 0.3s; }
    .rs-footer-legal-link:hover { color: #2563eb; }
    .rs-footer-copyright { font-size: 0.75rem; color: #6b7280; }

/* ═══════ Shared component styles (industry / solution pages) ═══════
   Restored here as the single source of truth so every page (solutions
   + industries) gets them. Mirrors WP theme assets/css/shared-core.css. */

/* ── Animations (JS observer in shared-core.js adds .visible) ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse  { 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
@keyframes float  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes drawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.reveal { opacity:0; animation:fadeUp .8s cubic-bezier(.23,1,.32,1) forwards; }
.d1{animation-delay:.1s} .d2{animation-delay:.2s} .d3{animation-delay:.3s} .d4{animation-delay:.4s} .d5{animation-delay:.5s}
/* io-* reveal base states are gated behind .js-anim (added synchronously in
   <head>) so content is NEVER hidden when JS is slow to arrive or fails —
   matches the .hero-enter / .soft-up pattern below. */
.js-anim .io-reveal{opacity:0;transform:translateY(36px);transition:all .8s cubic-bezier(.23,1,.32,1)}
.js-anim .io-reveal.visible{opacity:1;transform:translateY(0)}
.js-anim .io-left{opacity:0;transform:translateX(-40px);transition:all .8s cubic-bezier(.23,1,.32,1)}
.js-anim .io-left.visible{opacity:1;transform:translateX(0)}
.js-anim .io-right{opacity:0;transform:translateX(40px);transition:all .8s cubic-bezier(.23,1,.32,1)}
.js-anim .io-right.visible{opacity:1;transform:translateX(0)}
.js-anim .io-scale{opacity:0;transform:scale(.9);transition:all .7s cubic-bezier(.23,1,.32,1)}
.js-anim .io-scale.visible{opacity:1;transform:scale(1)}

/* ── Cards ── */
.dark-card{box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 30px -10px rgba(0,0,0,0.5);}
.metallic-chamfer { border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2); }

/* ── Spec Visualization (Technical snapshot table) ── */
.spec-viz-row { display: flex; align-items: center; border-bottom: 1px solid #e5e7eb; padding: 1rem 0; }
.spec-viz-row:last-child { border-bottom: none; }
.spec-viz-label { width: 140px; font-size: 13px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em; }
.spec-viz-content { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.spec-viz-cell { font-size: 14px; color: #111827; }
.progress-bar-container { width: 100%; height: 6px; background-color: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 0.5rem; }
.progress-bar-fill { height: 100%; background-color: #2563eb; border-radius: 3px; }

/* ── Cross-link Card ── */
.cross-card{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;border-radius:16px;border:1px solid #e5e7eb;background:#fff;transition:all .35s cubic-bezier(.23,1,.32,1)}
.cross-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-3px);border-color:rgba(37,99,235,.2)}
.cross-card .cross-icon{width:56px;height:56px;border-radius:12px;background:#F4F4F6;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s ease}
.cross-card:hover .cross-icon{background:#111827}
.cross-card:hover .cross-icon .material-symbols-outlined{color:#fff}
.cross-card .cross-icon .material-symbols-outlined{color:#374151;font-size:24px;transition:color .3s}

/* ── Buttons (btn-primary already defined above; these were missing) ── */
.btn-secondary{position:relative;overflow:hidden;z-index:1;transition:color .35s;display:inline-flex;align-items:center;padding:.875rem 2rem;font-size:.875rem;font-weight:600;color:#111827;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem}
.btn-secondary::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;transition:width .35s;z-index:-1;background:#f3f4f6}
.btn-secondary:hover::before{width:100%}
.btn-white-cta{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:.9375rem;font-weight:700;color:#fff;background:#111827;border-radius:9999px;transition:all .3s ease;text-decoration:none}
.btn-white-cta .cta-arrow{display:inline-block;transition:all .3s ease;order:1}
.btn-white-cta:hover{background:#2563eb;color:#fff;gap:1rem}
.btn-white-cta:hover .cta-arrow{transform:rotate(180deg)}

/* ── Misc ── */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
    font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:3px}

/* ── Image Placeholders (generic; .hero-ph / .dep-panel scoped variants already defined) ── */
.img-ph{position:relative;display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 50%,#eff6ff 100%);border:1px solid rgba(37,99,235,.1)}
.img-ph::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(37,99,235,.06),transparent 50%),radial-gradient(circle at 80% 70%,rgba(59,130,246,.05),transparent 50%);pointer-events:none}
.img-ph .ph-badge{position:absolute;top:14px;left:14px;background:#2563eb;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:6px;z-index:2}
.img-ph .ph-text{max-width:80%;text-align:center;font-size:13px;line-height:1.7;color:#6b7280;z-index:2}
.img-ph .ph-text b{color:#1d4ed8}

/* Contact map: desaturated by default, full color on hover */
.rs-map-frame {
	filter: grayscale(50%) opacity(0.85);
	transition: filter 0.4s ease;
}
.rs-map-frame:hover {
	filter: grayscale(0%) opacity(1);
}

/* ── Focus (global root-cause fix): this theme's theme.json emits
   `:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}` inline in <head>, which
   paints a black (currentColor) outline on EVERY element when clicked with the mouse. That inline
   rule loads AFTER our bundle and has 0 specificity (:where), so we must NOT fight it with
   `outline:none` (the inline longhands would win on order). Instead:
     - on mouse :focus, set ONLY outline-color:transparent (inline never declares color, so this
       wins regardless of source order) → invisible border, no black box.
     - on keyboard :focus-visible, paint a uniform ink (#111827) ring site-wide — this is the
       near-black the site uses for headings/body text, and matches what the header already showed.
       Single color source means header, tabs, FAQ, buttons, links and footer all focus identically.
   Scoped to `body *` (NOT just `.wp-site-blocks *`) because the footer and some template parts
   render OUTSIDE the .wp-site-blocks wrapper. Both kept at :where() so component-specific focus
   styles elsewhere keep winning. ── */
:where(body *:focus) {
  outline-color: transparent;
}
:where(body *:focus-visible) {
  outline: 2px solid #111827;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home design source — promoted to SHARED (single source of truth)
   Prototyped inline in home-rev2.html, now canonical for all pages.
   Home-only items are tagged [HOME]. See DESIGN-SPEC.md §4 for naming.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Base typography & page (global) ── */
body { font-family: 'Inter', sans-serif; font-feature-settings: "cv11","ss01"; -webkit-font-smoothing: antialiased; }
::selection { background: #0a0a0a; color: #fff; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ── RV-UPLEFT: slow up-left slide (2s) ── */
.io-upleft{opacity:0;transform:translate(-40px,40px);transition:all 2s cubic-bezier(.23,1,.32,1)}
.io-upleft.visible{opacity:1;transform:translate(0,0)}

/* ── CTA section soft radial background (global) ── */
.cta-section{background:#F4F4F6;position:relative;overflow:hidden}
.cta-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(26,86,219,.10),transparent 60%);pointer-events:none}

/* ── HERO-MEDIA: clip reveal + scan line [HOME hero] ── */
.js-anim .rs-hero-media { animation: rs-hero-reveal 1.1s cubic-bezier(.22,.61,.36,1) .1s both; }
@keyframes rs-hero-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
.js-anim .rs-hero-media::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.9), transparent);
    box-shadow: 0 0 14px rgba(59,130,246,.8); transform: translateY(-12px); opacity: 0;
    z-index: 3; animation: rs-scan 1.3s cubic-bezier(.4,0,.2,1) .25s 1 forwards;
}
@keyframes rs-scan { 0% { transform: translateY(-12px); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }

/* ── HERO-RISE: hero text entrance (IO, staggered) ── */
.js-anim .hero-enter { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s cubic-bezier(.22,.61,.36,1); }
.js-anim .hero-enter.is-visible { opacity: 1; translate: 0 0; }

/* ── MARQUEE: homepage trust ticker [HOME ONLY] ── */
.led-marquee { animation: marquee 20s linear infinite; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* ── ROUTE-DRAW: hero bottom line [HOME ONLY] ── */
.route-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2s ease-out forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.station-dot { animation: dotPulse 2s ease-in-out infinite; }
.station-dot:nth-of-type(2) { animation-delay: .3s; }
.station-dot:nth-of-type(3) { animation-delay: .6s; }
@keyframes dotPulse { 0%,100% { r: 6; opacity: 1; } 50% { r: 9; opacity: .7; } }

/* ── Solution tabs (indicator + panels) ── */
#solution-tabs { isolation: isolate; }
#solution-tabs .rs-sol-tab { position: relative; z-index: 10; }
#tab-indicator { z-index: 0; }

/* ── Card image zoom on hover ── */
.card-img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.group:hover .card-img { transform: scale(1.05); }

/* ── Products: CONVEYOR entrance + silky hover ── */
.js-anim .prod-card { opacity: 0; translate: 60px 0; transition: opacity .7s ease, translate .7s cubic-bezier(.22,.61,.36,1); }
.js-anim .prod-card.is-visible { opacity: 1; translate: 0 0; }
#products .prod-card {
  transition: opacity .7s ease, translate .7s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
#products .prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px -8px rgba(10,10,10,.10), 0 24px 48px -16px rgba(10,10,10,.18);
}
.prod-view:hover .play-txt > span { transform: translateY(-1.5em); }

/* ── STAGGER-DROP: solutions cards top→bottom ── */
.js-anim .solution-card { opacity: 0; translate: 0 -28px; transition: opacity .6s ease, translate .6s cubic-bezier(.22,.61,.36,1), transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.js-anim .solution-card.is-visible { opacity: 1; translate: 0 0; }

/* ── SOFT-RISE: blog + CTA light scroll-in ── */
.js-anim .soft-up { opacity: 0; translate: 0 28px; transition: opacity .85s ease, translate .85s cubic-bezier(.22,.61,.36,1); }
.js-anim .soft-up.is-visible { opacity: 1; translate: 0 0; }

/* Entrance-animation FAILSAFE: if shared-core.js fails to load (network error,
   500, CDN blocked), .js-anim stays applied by the inline head script but
   .is-visible is never added by the observer — leaving the hero (and below-fold
   cards) permanently hidden = black screen. risingstar_home_anim_head() adds
   .rs-anim-failsafe to <html> after 2.5s, force-revealing everything so the page
   is never blank. Has no effect when JS works normally. */
.rs-anim-failsafe .hero-enter,
.rs-anim-failsafe .prod-card,
.rs-anim-failsafe .solution-card,
.rs-anim-failsafe .soft-up,
.rs-anim-failsafe .io-reveal,
.rs-anim-failsafe .io-left,
.rs-anim-failsafe .io-right,
.rs-anim-failsafe .io-scale { opacity: 1 !important; translate: 0 0 !important; transform: none !important; }

/* ── Project carousel (scroll-snap, no Swiper) ── */
.projSwiper { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity; -ms-overflow-style: none; scrollbar-width: none; }
.projSwiper::-webkit-scrollbar { display: none; }
.projSwiper > .swiper-wrapper { display: flex; align-items: stretch; gap: 24px; }
.projSwiper .swiper-slide { flex: 0 0 auto; scroll-snap-align: start; }
.projSwiper .swiper-slide.proj-swiper-slide { width: auto; }

/* ── Count-up stat number ── */
.stat-num { font-variant-numeric: tabular-nums; }

/* ── Section header rule ── */
.sec-rule { width: 48px; height: 3px; background: #0a0a0a; border-radius: 9999px; }

/* ── Mobile drawer (dark; over-hero parity — synced from F:\0807\home.html) ── */
.rs-mobile-menu { position: fixed; inset: 0; z-index: 100000; margin-top: 0; } /* above WP #wpadminbar (99999); margin-top:0 overrides :where(.wp-site-blocks) > * which adds a top margin to every direct child */
.rs-mobile-menu[hidden] { display: none; }
.rs-mobile-overlay {
    position: absolute; inset: 0;
    background: transparent;
    opacity: 0; transition: opacity .3s ease;
}
.rs-mobile-menu.is-open .rs-mobile-overlay { opacity: 1; }
.rs-mobile-panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 320px; max-width: 84vw;
    background: #0a0a0a;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column;
    box-shadow: 24px 0 60px -12px rgba(0, 0, 0, 0.55), 12px 0 24px -8px rgba(0, 0, 0, 0.35);
    transform: translateX(-100%);
    transition: transform .36s cubic-bezier(.22,.61,.36,1);
}
.rs-mobile-menu.is-open .rs-mobile-panel { transform: translateX(0); }
.rs-mobile-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.rs-mobile-logo { height: 32px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.rs-mobile-close {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.45rem; color: #d1d5db; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 9999px; cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.rs-mobile-close:hover { color: #fff; background: rgba(255,255,255,0.14); }
.rs-mobile-close svg, .rs-mobile-close .material-symbols-outlined { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }

/* Quick actions */
.rs-mobile-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.rs-mobile-action {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 0.65rem 0.25rem; border-radius: 0.875rem;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #e5e7eb; text-decoration: none;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.rs-mobile-action .material-symbols-outlined { font-size: 1.35rem; }
.rs-mobile-action:hover { background: #2563eb; border-color: #2563eb; color: #fff; transform: translateY(-1px); }

.rs-mobile-nav { flex: 1; overflow-y: auto; scrollbar-width: none; }
.rs-mobile-nav::-webkit-scrollbar { display: none; }
.rs-mobile-nav-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.rs-mobile-nav-list > li { margin: 0; padding: 0; }
.rs-mobile-nav-list > li + li { margin-top: 0.35rem; }
.rs-mobile-nav-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.8rem 0.5rem; border-radius: 0.75rem;
    font-size: 1.05rem; font-weight: 600; color: #e5e7eb;
    text-decoration: none; transition: color .15s, background .15s, padding-left .2s;
}
.rs-mobile-nav-ico { font-size: 1.3rem; color: #6b7280; transition: color .15s; }
.rs-mobile-nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); padding-left: 0.75rem; }
/* 一级栏目：点击/触摸（移动端 :hover 常驻）时不改变背景与位移，仅子菜单项保留 hover 反馈 */
.rs-mobile-nav-list > li > .rs-mobile-nav-link:hover { color: #e5e7eb; background: transparent; padding-left: 0.5rem; }
/* 一级栏目 hover 时图标变蓝 */
.rs-mobile-nav-list > li > .rs-mobile-nav-link:hover .rs-mobile-nav-ico { color: #3b82f6; }
.rs-mobile-nav-list li.current-menu-item > .rs-mobile-nav-link {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
    box-shadow: inset 3px 0 0 #3b82f6;
}
.rs-mobile-nav-list li.current-menu-item > .rs-mobile-nav-link .rs-mobile-nav-ico { color: #3b82f6; }

.rs-mobile-nav-list .rs-sub-menu {
    display: block; max-height: 0; overflow: hidden;
    list-style: none; margin: 0; padding: 0;
    transition: max-height .3s cubic-bezier(.22,.61,.36,1);
}
.rs-mobile-nav-list .rs-sub-menu > li { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.12); }
.rs-mobile-nav-list li.menu-item-has-children.is-open > .rs-sub-menu { max-height: 1200px; }
.rs-mobile-nav-list .rs-sub-menu .rs-mobile-nav-link {
    font-size: 0.9375rem; font-weight: 500; color: #9ca3af; padding: 0.55rem 0.6rem;
    border-radius: 0.5rem;
}
.rs-mobile-nav-list .rs-sub-menu .rs-mobile-nav-link:hover { color: #d1d5db; background: rgba(255,255,255,0.06); }
.rs-mobile-nav-list .rs-nav-caret {
    display: inline-block; width: 0; height: 0; margin-left: auto; flex-shrink: 0;
    border-top: 4px solid #9ca3af; border-right: 4px solid transparent; border-left: 4px solid transparent;
    transition: transform .25s ease;
    background: none;
}
.rs-mobile-nav-list li.menu-item-has-children.is-open > a .rs-nav-caret { transform: rotate(180deg); }

.rs-mobile-foot { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); }
.rs-mobile-cta {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.25rem; border-radius: 9999px;
    background: #2563eb; color: #fff; border: none;
    font-weight: 700; font-size: 0.9375rem; text-decoration: none;
    box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.7);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rs-mobile-cta:hover { background: #1d4ed8; color: #fff; transform: translateY(-1px); }
.rs-mobile-cta .material-symbols-outlined { font-size: 1.15rem; }
.rs-mobile-contact { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.rs-mobile-contact-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 0.8rem; text-decoration: none; transition: color .15s; }
.rs-mobile-contact-link:hover { color: #fff; }
.rs-mobile-contact-link .material-symbols-outlined { font-size: 1rem; }
.rs-mobile-trust { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rs-mobile-trust span {
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: #9ca3af; border: 1px solid rgba(255,255,255,0.14);
    padding: 0.25rem 0.6rem; border-radius: 9999px;
}

/* Staggered entrance */
@keyframes rsDrawerIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
.rs-mobile-menu.is-open .rs-mobile-panel-head,
.rs-mobile-menu.is-open .rs-mobile-actions,
.rs-mobile-menu.is-open .rs-mobile-nav-list > li,
.rs-mobile-menu.is-open .rs-mobile-foot { animation: rsDrawerIn .35s cubic-bezier(.22,.61,.36,1) both; }
.rs-mobile-menu.is-open .rs-mobile-panel-head { animation-delay: .04s; }
.rs-mobile-menu.is-open .rs-mobile-actions { animation-delay: .08s; }
.rs-mobile-menu.is-open .rs-mobile-nav-list > li:nth-of-type(1) { animation-delay: .12s; }
.rs-mobile-menu.is-open .rs-mobile-nav-list > li:nth-of-type(2) { animation-delay: .16s; }
.rs-mobile-menu.is-open .rs-mobile-nav-list > li:nth-of-type(3) { animation-delay: .20s; }
.rs-mobile-menu.is-open .rs-mobile-nav-list > li:nth-of-type(4) { animation-delay: .24s; }
.rs-mobile-menu.is-open .rs-mobile-nav-list > li:nth-of-type(5) { animation-delay: .28s; }
.rs-mobile-menu.is-open .rs-mobile-nav-list > li:nth-of-type(6) { animation-delay: .32s; }
.rs-mobile-menu.is-open .rs-mobile-foot { animation-delay: .36s; }

/* ============================================================
   RisingStar — Form component (shared single source)
   Used by contact.html / engineer.html / any future form page.
   Colors mirror the tailwind config tokens (ink/border-line/brand).
   NOTE: inputs keep the design-system radius — tailwind config
   overrides `rounded-lg` to 2rem, so we hardcode it here for parity.
   ============================================================ */
.rs-form { display: flex; flex-direction: column; gap: 1.25rem; }
.rs-form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.rs-form .btn-primary,
.rs-form button[type="submit"] { align-self: flex-start; }
@media (min-width: 640px) { .rs-form-row { grid-template-columns: 1fr 1fr; } }
.rs-label { display: block; font-size: 13px; font-weight: 600; color: #0a0a0a; margin-bottom: .375rem; }

.rs-form input.rs-input,
.rs-form textarea.rs-textarea,
.rs-form select.rs-select,
.rs-input,
.rs-textarea,
.rs-select {
  width: 100%;
  border: 1px solid #e2e2e6;
  background: #ffffff;
  border-radius: 2rem;
  padding: .75rem 1rem;
  font-size: 15px;
  line-height: 1.6;
  color: #0a0a0a;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rs-input::placeholder,
.rs-textarea::placeholder { color: #9ca3af; }
.rs-textarea { resize: vertical; }
.rs-input:hover,
.rs-select:hover { border-color: #c4c7c7; }
.rs-input:focus,
.rs-textarea:focus,
.rs-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* Select: strip native chrome, add custom chevron (beautified) */
.rs-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  cursor: pointer;
}
.rs-select option { color: #0a0a0a; }

/* ── Narrow-screen baseline (<=768px) ── */
@media (max-width: 768px) {
    .rs-footer-inner { padding-top: 2.5rem; padding-bottom: 1.25rem; }
    .rs-footer-grid { gap: 2rem; }
    .rs-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .led-ticker-bar { display: none !important; }
    #stretch-media { display: none !important; }
    #stretch-bar > div { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    #stretch-bar .grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    #stretch-bar .io-right { grid-column: 1 / -1 !important; }
    .hero .hero-enter.flex { flex-wrap: wrap; gap: 12px; }
    .hero .hero-enter.flex > a { flex: 0 0 auto; }
    .narrow-hscroll {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        -ms-overflow-style: none;
        scrollbar-width: none;
        gap: 16px !important;
        padding-bottom: 6px;
    }
    .narrow-hscroll::-webkit-scrollbar { display: none; }
    .narrow-hscroll > * {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        width: 80% !important;
        max-width: 320px;
    }
    .rs-footer-contact-col { display: none !important; }
    .rs-footer-address { display: none !important; }
    .rs-footer-badges { display: none !important; }
    .rs-footer-grid { grid-template-columns: 1fr !important; }
    .hero-route-line { display: none !important; }
    /* Anchor (section) nav: hidden on narrow screens — was never designed for mobile */
    .section-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .io-reveal, .io-scale, .hero-enter { opacity:1 !important; transform:none !important; translate:0 0 !important; transition:none !important; animation:none !important; }
    .led-marquee, .route-line, .station-dot, .rs-hero-media, .rs-hero-media::after { animation:none !important; clip-path:none !important; }
}


/* ============================================================
   >>> MERGED FROM contact-page.css (consolidated 2026-08-13)
   ============================================================ */
/* ==========================================================================
   Contact Page Styles — RisingStar Child Theme
   File-based layout mirroring /栏目规划/contact.html.
   Tailwind utility classes come from the global Tailwind CDN runtime
   (preflight disabled so it never resets theme/Kadence styles). This file
   only adds:
     - minimal layout fixes (top margin, full-bleed safety, empty-p removal)
     - the custom component classes used by the hardcoded template
       (.contact-card, .pre-footer*)
     - FluentForm field / checkbox / radio styling (design-system blue)
   ========================================================================== */

/* Kill the default top margin the block theme injects before the first block. */
body.page-id-41 .wp-site-blocks > * {
	margin-block-start: 0;
}

/* Page background: subtle gray so the form + cards float on white. */
body.page-id-41 {
	background: #F8FAFC;
}

/* The article is full-width; inner sections set their own max-width. */
.rs-contact-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Prevent a horizontal scrollbar from any full-bleed element. */
body.page-id-41 {
	overflow-x: hidden;
}

/* Hide the empty paragraph that sometimes precedes the content. */
.rs-contact-content > p:empty {
	display: none;
}

/* The backend-embedded body content (the_content — e.g. the map) is NOT
   width-constrained. The user designs it in the block editor and may place
   full-bleed blocks (a full-width map). We only reset margin/padding here;
   every width decision is left to the editor. Note: the design-system
   typography ramp above (.rs-contact-content h2/h3/p) still applies to this
   area, so map captions stay on the design draft's scale. */
.rs-contact-content-map {
	margin: 0;
	padding: 0;
}

/* Let WordPress / Kadence "full width" (alignfull) blocks inside the body
   content break out to the viewport edges. Without this, a block editor
   alignfull block would be capped by the normal flow width. */
.rs-contact-content-map .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   Typography — explicit design-system scale (like Solution pages)
   The Contact page mixes a hardcoded template, the FluentForm shortcode,
   and a backend-embedded map (the_content). To keep every heading /
   paragraph on the design-system scale — and stop the block theme's
   oversized default h2 from blowing up the form title or the map caption —
   we define the type ramp HERE instead of leaving it to the editor (the
   About approach, which is hands-off on typography).
   Scale mirrors the RisingStar Design System:
     gray-900 #111827 headings · gray-600 #4B5563 body · blue-600 #2563EB links
   ========================================================================== */

/* Base text — inherited by the whole page. The hardcoded cards and hero in
   page-contact.php carry their OWN Tailwind utilities (text-sm, text-lg,
   font-bold, …) that are pixel-identical to the design draft (contact.html),
   so we must NOT override element selectors here — doing so would drift the
   cards away from the draft (e.g. a global `p{font-size:1rem}` would beat the
   cards' `text-sm`). Only the inherited baseline lives here. */
.rs-contact-content {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #374151;
	font-size: 1rem;
	line-height: 1.6;
}

/* Page title — already carries Tailwind size utilities (text-4xl /
   lg:text-5xl); we only normalise weight + colour to the design draft. */
.rs-contact-content h1 {
	font-weight: 800;
	color: #111827;
}

/* Typography for the BACKEND-EMBEDDED body only (the_content — the map and
   its captions). The user designs this in the editor and may drop raw <h2>/
   <p> with no utilities, so we pin them to the design-system scale to stop
   the block theme's oversized default h2 from blowing up. This scope is
   limited to .rs-contact-content-map so it NEVER touches the hardcoded cards
   (which keep their Tailwind utilities from the draft). */
.rs-contact-content-map h2 {
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
}
@media (min-width: 1024px) {
	.rs-contact-content-map h2 {
		font-size: 1.875rem;
	}
}
.rs-contact-content-map h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
}
.rs-contact-content-map h4 {
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 600;
	color: #111827;
}
.rs-contact-content-map p {
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
}
.rs-contact-content-map a {
	color: #2563eb;
}

/* FluentForm title — FluentForm's own skin can render the form title as a
   large h2; pin it to the design-system scale. !important guards against the
   plugin's default CSS. Scoped to .fluentform so it doesn't touch the cards. */
.rs-contact-content .fluentform h2,
.rs-contact-content .fluentform .ff-form-title,
.rs-contact-content .ff-form-title {
	font-size: 1.25rem !important;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
	margin: 0 0 0.75rem !important;
}

/* --- Contact info panel (right column) — consolidated, borderless --- *
   The four contact methods are now a single light-grey panel with no card
   borders or shadows; items are separated by whitespace only and ranked by
   font size (primary Email/WhatsApp > secondary Factory > tertiary times). */
.contact-info-panel {
	background: #F1F5F9;            /* subtle light grey, distinct from #F8FAFC page */
	border-radius: 1rem;
	padding: 2rem 2.25rem;
	height: 100%;                   /* stretch to match the form column height */
	display: flex;
	flex-direction: column;
	justify-content: center;        /* balance the stack against the form */
}

.info-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.5rem 0;
}
/* Whitespace only — no dividers, no shadows. */
.info-item + .info-item {
	border-top: none;
}

.info-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	color: #6b7280;
	margin-top: 0.15rem;
}
.info-body {
	min-width: 0;
}
.info-label {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
}
.info-value {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
}
.info-value:hover {
	color: #1d4ed8;
	text-decoration: underline;
}
.info-sub {
	margin: 0.2rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6b7280;
}

/* Factory — secondary: smaller icon + reduced hierarchy. */
.info-item--secondary .info-icon {
	width: 1.25rem;
	height: 1.25rem;
}
.info-item--secondary .info-label {
	font-size: 0.9375rem;
	font-weight: 600;
}
.info-item--secondary .info-sub {
	font-size: 0.8125rem;
	color: #9ca3af;
}

/* Response Time — tertiary: smallest font. */
.info-item--tertiary .info-icon {
	width: 1.25rem;
	height: 1.25rem;
}
.info-item--tertiary .info-label {
	font-size: 0.875rem;
	font-weight: 600;
}
.info-item--tertiary .info-sub {
	font-size: 0.8125rem;
	color: #9ca3af;
}

/* ==========================================================================
   Micro-interactions — hover lift, focus ring, staggered entrance
   Contact page only. Map (the_content) and FluentForm markup untouched.
   ========================================================================== */

/* 1) Right-panel hover: the whole item lifts ~2px and its bare SVG icon
      scales up 1.1×, hinting interactivity on the primary channels
      (Email / WhatsApp). Pure CSS — no Tailwind `group` wrapper needed. */
.contact-info-panel .info-item {
	transition: transform 0.3s ease-out;
}
.contact-info-panel .info-item:hover {
	transform: translateY(-2px);
}
.contact-info-panel .info-icon {
	transition: transform 0.3s ease-out;
}
.contact-info-panel .info-item:hover .info-icon {
	transform: scale(1.1);
}

/* 2) Entrance: staggered fade-in-up. Left form first, right panel +0.18s,
      guiding the eye from the form to the info panel. Smooth easing (no
      bounce) to match the industrial brand's calm, trustworthy feel.
      CSS load-trigger is used because this module sits above the fold on the
      contact page — it needs no JS and degrades gracefully if scripts are
      blocked. (Scroll-trigger via IntersectionObserver available on request.) */
@keyframes rsContactFadeInUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
body.page-id-41 .lg\:col-span-7,
body.page-id-41 .lg\:col-span-5 {
	animation: rsContactFadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-id-41 .lg\:col-span-5 {
	animation-delay: 0.18s;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	body.page-id-41 .lg\:col-span-7,
	body.page-id-41 .lg\:col-span-5,
	.contact-info-panel .info-item,
	.contact-info-panel .info-icon {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* Pre-footer role-select styles are MERGED INTO THIS FILE (from pre-footer.css,
   consolidated 2026-08-13). There is NO separate assets/css/pre-footer.css anymore.
   They apply globally because template-parts/pre-footer-role.php is included on
   every page (index / 404 / search / legal). See .pre-footer* rules near L1744. */

/* ==========================================================================
   FluentForm shared styles are in talk-to-engineer.css (loaded globally).
   Only page-specific overrides live here.
   ========================================================================== */

/* Contact page textarea — identical sizing to the Talk-to-Engineer page.
   Anchor to `textarea.ff-el-form-control` WITHOUT the `.ff-el-input` ancestor:
   FluentForm actually nests the textarea inside `.ff-el-input--content`
   (note the --content suffix), so the old `.ff-el-input textarea` never
   matched and the textarea fell back to WP's global `small` (13.33px) —
   the same root-cause we fixed on the engineers page. */
body.page-id-41 textarea.ff-el-form-control {
	width: 100%;
	min-height: 150px;
	padding: 0.875rem 1rem !important;
	font-family: inherit !important; /* lock to page font, beat plugin system stack */
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: #1f2937;
	resize: vertical !important;
	box-sizing: border-box;
}

/* Contact page text-inputs (single-line): match the textarea size so the
   form feels of a piece — slightly larger than the shared default.
   `select` is anchored to `.ff-el-form-control` (not `.ff-el-input`) for the
   same --content nesting reason as the textarea above. */
body.page-id-41 .ff-el-input input[type="text"],
body.page-id-41 .ff-el-input input[type="email"],
body.page-id-41 .ff-el-input input[type="tel"],
body.page-id-41 .ff-el-input input[type="number"],
body.page-id-41 .ff-el-input input[type="url"],
body.page-id-41 select.ff-el-form-control {
	font-size: 1.0625rem !important;
}

/* ==========================================================================
   Form section floating effect + enhanced input styling
   ========================================================================== */

/* Form wrapper: white card on the gray page background. */
body.page-id-41 .fluentform {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 2rem 2rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
}

/* Enhanced inputs: more padding, clearer border, premium focus glow.
   textarea/select are anchored to `.ff-el-form-control` (not `.ff-el-input`)
   because they live inside `.ff-el-input--content`. Radius unified to 8px
   (0.5rem) to match the Talk-to-Engineer page. */
body.page-id-41 .ff-el-input input[type="text"],
body.page-id-41 .ff-el-input input[type="email"],
body.page-id-41 .ff-el-input input[type="tel"],
body.page-id-41 .ff-el-input input[type="number"],
body.page-id-41 .ff-el-input input[type="url"],
body.page-id-41 textarea.ff-el-form-control,
body.page-id-41 select.ff-el-form-control {
	padding: 0.875rem 1rem !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 0.5rem !important;
	background: #fff !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.page-id-41 .ff-el-input input[type="text"]:focus,
body.page-id-41 .ff-el-input input[type="email"]:focus,
body.page-id-41 .ff-el-input input[type="tel"]:focus,
body.page-id-41 .ff-el-input input[type="number"]:focus,
body.page-id-41 .ff-el-input input[type="url"]:focus,
body.page-id-41 textarea.ff-el-form-control:focus,
body.page-id-41 select.ff-el-form-control:focus {
	border-color: #9ca3af !important;            /* gray-400 — soft, neutral */
	box-shadow: 0 0 0 4px rgba(243, 244, 246, 0.7) !important; /* gray-100 ring */
	outline: none !important;
}

/* ==========================================================================
   Product Interest — 2-column card grid with checkmark badge
   Mirrors the Talk-to-Engineer "Primary Technical Challenge" treatment:
   option cards built on the clickable <label> (native box visually hidden),
   brand-blue selected state, and a top-right checkmark badge. Target with the
   field's custom CSS class `rs-product-interest` (FluentForm → Advanced →
   CSS Class) for precise scoping; the generic `.ff-el-input-checkbox` rules
   below are a fallback so the 2-column layout still applies if unset.
   ========================================================================== */

/* Visually hide the native checkbox — the card is the control surface. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-input,
body.page-id-41 .rs-product-interest .ff-el-form-check-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	margin: 0 !important;
}

/* Reset the option cell; the label becomes the clickable card. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check,
body.page-id-41 .rs-product-interest .ff-el-form-check {
	margin-bottom: 0 !important;
}

/* 2-column grid — generic fallback + precise class. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-input--content,
body.page-id-41 .rs-product-interest .ff-el-input--content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	padding-top: 0.35rem;   /* clearance for the selected checkmark badge */
}
@media (max-width: 640px) {
	body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-input--content,
	body.page-id-41 .rs-product-interest .ff-el-input--content {
		grid-template-columns: 1fr;
	}
}

/* Shared card surface (the label). */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label,
body.page-id-41 .rs-product-interest .ff-el-form-check-label {
	display: flex !important;
	align-items: center;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #ffffff;
	color: #374151;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:hover,
body.page-id-41 .rs-product-interest .ff-el-form-check-label:hover {
	border-color: #cbd5e1;
	background: #f9fafb;
}
/* Keyboard focus ring (accessibility). */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible),
body.page-id-41 .rs-product-interest .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Selected card: brand border + tint + blue text. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked),
body.page-id-41 .rs-product-interest .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked) {
	border-color: #2563eb;
	background: #eff6ff;
	color: #1d4ed8;
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* Checkmark badge (top-right), only revealed when the option is selected. */
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label::after,
body.page-id-41 .rs-product-interest .ff-el-form-check-label::after {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background-color: #2563eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.8rem;
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity .18s ease, transform .18s ease;
}
body.page-id-41 .ff-el-input.ff-el-input-checkbox .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked)::after,
body.page-id-41 .rs-product-interest .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked)::after {
	opacity: 1;
	transform: scale(1);
}


/* ============================================================
   >>> MERGED FROM talk-to-engineer.css (consolidated 2026-08-13)
   ============================================================ */
/* ==========================================================================
   FluentForm shared form styles (global — shared with Contact page)
   + Talk to Engineer page-specific overrides
   ========================================================================== */

/* ---------- Shared: Inputs, textarea, select ---------- */
.ff-el-input input[type="text"],
.ff-el-input input[type="email"],
.ff-el-input input[type="tel"],
.ff-el-input input[type="number"],
.ff-el-input input[type="url"],
body.page-id-160 textarea.ff-el-form-control,
.ff-el-input select {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem !important;
	font-family: inherit;
	color: #1f2937;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #fff;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	line-height: 1.6 !important;
}

.ff-el-input input:focus,
body.page-id-160 textarea.ff-el-form-control:focus,
.ff-el-input select:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Textarea: comfortable reading height + line-height (overrides FluentForm
   default, which only uses the backend `rows` count and crams the box).
   Higher specificity via body.page-id-160 + !important beats the plugin rule. */
body.page-id-160 textarea.ff-el-form-control {
	width: 100%;
	min-height: 150px;
	padding: 0.875rem 1rem !important;
	font-family: inherit !important; /* lock to page font, beat plugin system stack */
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: #1f2937;
	resize: vertical !important;
	box-sizing: border-box;
}

/* ---------- Shared: Field labels ---------- */
.ff-el-input label,
.ff-el-input .ff-el-input-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.375rem;
}

/* ---------- Shared: Select dropdown custom arrow ---------- */
.ff-el-input select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

/* ---------- Shared: Checkbox & Radio ---------- */
.ff-el-form-check {
	display: block;
	margin-bottom: 0.5rem;
}

.ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: #374151;
	cursor: pointer;
	line-height: 1.4;
	margin-bottom: 0;
}

.ff-el-form-check-input[type="checkbox"],
.ff-el-form-check-input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	opacity: 1 !important;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	border: 1.5px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ff-el-form-check-input[type="checkbox"] {
	border-radius: 6px;
}

.ff-el-form-check-input[type="radio"] {
	border-radius: 50%;
}

.ff-el-form-check-input[type="checkbox"]:hover,
.ff-el-form-check-input[type="radio"]:hover {
	border-color: #2563eb;
}

.ff-el-form-check-input[type="checkbox"]:focus,
.ff-el-form-check-input[type="radio"]:focus,
.ff-el-form-check-input[type="checkbox"]:focus-visible,
.ff-el-form-check-input[type="radio"]:focus-visible,
.fluentform .ff-el-form-check-input[type="checkbox"]:focus,
.fluentform .ff-el-form-check-input[type="radio"]:focus,
.fluentform .ff-el-form-check-input[type="checkbox"]:focus-visible,
.fluentform .ff-el-form-check-input[type="radio"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.ff-el-form-check-input[type="checkbox"]:checked {
	background: #2563eb;
	border-color: #2563eb;
}

.ff-el-form-check-input[type="radio"]:checked {
	border-color: #2563eb;
	background: #fff;
}

/* Checkbox tick */
.ff-el-form-check-input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Radio dot */
.ff-el-form-check-input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2563eb;
	transform: translate(-50%, -50%);
}

/* ---------- Shared: Submit button ----------
   FluentForm outputs an inline <style> + fluentform-public-default.css that
   paints .ff-btn-submit with var(--fluentform-primary) and a 1px border using
   var(--fluentform-border-color) (appears black). We override directly on the
   real button classes with !important so the styling actually wins. */
.ff-btn.ff-btn-submit,
.fluentform button[type="submit"].ff-btn-submit,
.ff-el-group button[type="submit"].ff-btn-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: 320px !important;
	align-self: flex-start !important;
	background: #111827 !important;
	border: 1px solid transparent !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	border-radius: 0.75rem !important;
	padding: 1rem 2.5rem !important;
	cursor: pointer !important;
	transition: background 0.2s, border-color 0.2s !important;
}

.ff-btn.ff-btn-submit:hover,
.fluentform button[type="submit"].ff-btn-submit:hover,
.ff-el-group button[type="submit"].ff-btn-submit:hover {
	background: #000000 !important;
	border-color: transparent !important;
	color: #ffffff !important;
}

/* ---------- Shared: Form title (if enabled) ---------- */
.fluentform h2,
.fluentform .ff-form-title {
	font-size: 1.25rem !important;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
	margin: 0 0 0.75rem !important;
}

/* ==========================================================================
   Talk to Engineer — page-specific overrides
   ========================================================================== */

/* ---------- Subtitle below h1 ---------- */
body.page-id-160 .entry-content > .wp-block-group:first-child h1 + .wp-block-spacer + p,
body.page-id-160 .entry-content > h1 + p {
	font-size: 1.125rem;
	color: #6b7280;
	line-height: 1.7;
	max-width: 48rem;
	margin: -0.5rem 0 2rem;
}

/* ---------- Form container: fieldset must fit INSIDE the card.
   The .fluentform card has max-width:840px + padding:2rem (≈776px content),
   so forcing the fieldset to 840px overrode the inline min-inline-size:100%
   and overflowed the card, pushing inputs/textarea past the card edge. ---------- */
body.page-id-160 .fluentform fieldset {
	width: 100% !important;
	min-inline-size: 0 !important;
	max-width: 100% !important;
}

body.page-id-160 .fluentform,
body.page-id-160 .fluentform_wrapper_2 {
	max-width: 840px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	body.page-id-160 .fluentform fieldset {
		min-inline-size: 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   Visual enhancements (matching Contact page upgrades)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Two-tone background: top third light ice blue, bottom two-thirds white.
   We give <html> a solid bg via :has() so the body background is NOT
   propagated to the canvas (which would pin the split to the viewport and
   re-show blue on every scroll). With propagation stopped, the gradient
   percentage resolves against the body's full content height, giving a true
   "top 1/3 of the page" split. Tunable: change 33% to move the seam.
   -------------------------------------------------------------------------- */
html:has(body.page-id-160) {
	background: #ffffff;
}
body.page-id-160 {
	background-color: #F4F7F9; /* fallback (no :has support) */
	background-image: linear-gradient(
		to bottom,
		#F4F7F9 0,
		#F4F7F9 33%,
		#ffffff 33%,
		#ffffff 100%
	);
}

/* Form wrapper: white card — match design card (.border-line + shadow-hardware-lift). */
body.page-id-160 .fluentform {
	background: #fff !important;
	border: 1px solid #e2e2e6 !important;
	border-radius: 1rem !important;
	padding: 2rem !important;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .06) !important;
}

/* Engineer form — field controls aligned to the design-system tokens
   (.rs-input / .rs-select / .rs-textarea in shared-core.css):
   light 1px #e2e2e6 border, full pill radius (2rem), brand-blue focus ring,
   custom chevron on selects. !important beats FluentForm + the earlier
   contact-page rules above. */
body.page-id-160 .ff-el-input input[type="text"],
body.page-id-160 .ff-el-input input[type="email"],
body.page-id-160 .ff-el-input input[type="tel"],
body.page-id-160 .ff-el-input input[type="number"],
body.page-id-160 .ff-el-input input[type="url"],
body.page-id-160 textarea.ff-el-form-control,
body.page-id-160 .ff-el-input select {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid #e2e2e6 !important;
	border-radius: 2rem !important;
	background: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #0a0a0a !important;
	outline: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
	box-sizing: border-box !important;
}

/* Select: strip native chrome + design chevron (mirrors .rs-select). */
body.page-id-160 .ff-el-input select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding-right: 2.75rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 18px 18px !important;
	cursor: pointer !important;
}

/* Hover: neutral grey border (design hover token #c4c7c7). */
body.page-id-160 .ff-el-input input[type="text"]:hover,
body.page-id-160 .ff-el-input input[type="email"]:hover,
body.page-id-160 .ff-el-input input[type="tel"]:hover,
body.page-id-160 .ff-el-input input[type="number"]:hover,
body.page-id-160 .ff-el-input input[type="url"]:hover,
body.page-id-160 .ff-el-input select:hover {
	border-color: #c4c7c7 !important;
}

/* Focus: brand-blue border + soft ring (design focus token). */
body.page-id-160 .ff-el-input input[type="text"]:focus,
body.page-id-160 .ff-el-input input[type="email"]:focus,
body.page-id-160 .ff-el-input input[type="tel"]:focus,
body.page-id-160 .ff-el-input input[type="number"]:focus,
body.page-id-160 .ff-el-input input[type="url"]:focus,
body.page-id-160 textarea.ff-el-form-control:focus,
body.page-id-160 .ff-el-input select:focus {
	border-color: #2563eb !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
	outline: none !important;
}

/* Field labels — match design .rs-label (13px / 600 / ink). */
body.page-id-160 .ff-el-input label,
body.page-id-160 .ff-el-input .ff-el-input-label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0a0a0a !important;
	margin-bottom: 0.375rem !important;
}

/* ==========================================================================
   Choice-field redesign — card grid (checkbox) + step selector (radio)
   Scope is by a custom CSS class placed on each FluentForm field
   (Advanced → CSS Class):  .rs-tech-challenge  /  .rs-project-stage
   This keeps the styling off any unrelated checkbox (e.g. a consent box).
   FluentForm markup per option:
     .ff-el-form-check  >  label.ff-el-form-check-label (input + span)
   The native input is visually hidden but stays focusable; the label card
   carries the selected / focus state via :has(input:checked/:focus-visible).
   ========================================================================== */

/* Visually hide the native checkbox/radio — the card is the control surface. */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-input,
body.page-id-160 .rs-project-stage .ff-el-form-check-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	margin: 0 !important;
}

/* Reset the option cell; the label becomes the clickable card. */
body.page-id-160 .rs-tech-challenge .ff-el-form-check,
body.page-id-160 .rs-project-stage .ff-el-form-check {
	margin-bottom: 0 !important;
}

/* Shared card surface. */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label,
body.page-id-160 .rs-project-stage .ff-el-form-check-label {
	display: flex !important;
	align-items: center;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #e2e8f0;        /* unified 1.5px border */
	border-radius: 0.5rem;               /* unified 8px radius */
	background: #ffffff;
	color: #374151;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:hover,
body.page-id-160 .rs-project-stage .ff-el-form-check-label:hover {
	border-color: #cbd5e1;
	background: #f9fafb;
}
/* Keyboard focus ring (accessibility). */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible),
body.page-id-160 .rs-project-stage .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* --------------------------------------------------------------------------
   Primary Technical Challenge — 3-column selectable card grid (multi-select)
   -------------------------------------------------------------------------- */
body.page-id-160 .rs-tech-challenge .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.625rem;
	padding-top: 0.35rem;   /* clearance for the selected checkmark badge */
}
@media (max-width: 680px) {
	body.page-id-160 .rs-tech-challenge .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 460px) {
	body.page-id-160 .rs-tech-challenge .ff-el-input--content {
		grid-template-columns: 1fr;
	}
}

/* Selected card: brand border + tint + checkmark badge (top-right). */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked) {
	border-color: #2563eb;
	background: #eff6ff;
	color: #1d4ed8;
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label::after {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background-color: #2563eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.8rem;
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity .18s ease, transform .18s ease;
}
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked)::after {
	opacity: 1;
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   Current Project Stage — horizontal step / pill selector (single-select)
   -------------------------------------------------------------------------- */
body.page-id-160 .rs-project-stage .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
}
@media (max-width: 600px) {
	body.page-id-160 .rs-project-stage .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr);
	}
}
body.page-id-160 .rs-project-stage .ff-el-form-check-label {
	justify-content: center;
	text-align: center;
	font-weight: 600;
	padding: 0.875rem 0.5rem;
	background: #f1f5f9;     /* light, unselected */
	border-color: #e2e8f0;
}
body.page-id-160 .rs-project-stage .ff-el-form-check-label:hover {
	background: #e9eef4;
	border-color: #cbd5e1;
}
body.page-id-160 .rs-project-stage .ff-el-form-check-label:has(.ff-el-form-check-input[type="radio"]:checked) {
	background: #2563eb;
	border-color: #2563eb;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* --------------------------------------------------------------------------
   Section micro-title + subtext (FluentForm field label & help message)
   -------------------------------------------------------------------------- */
body.page-id-160 .rs-tech-challenge .ff-el-input--label,
body.page-id-160 .rs-project-stage .ff-el-input--label {
	margin-bottom: 0.5rem;
}
body.page-id-160 .rs-tech-challenge .ff-el-help-message,
body.page-id-160 .rs-project-stage .ff-el-help-message {
	font-size: 0.8125rem;
	color: #9ca3af;
	line-height: 1.45;
	margin-top: 0.25rem;
	margin-bottom: 0.75rem;
}

/* ==========================================================================
   Melotto-style hero polish (centered hero + brand mark + accents)
   Mirrors the reference contact design: a centered headline/subtitle, a
   subtle red/rose brand asterisk, and asymmetric line-art accents flanking
   the hero title. The page background (#F8FAFC) and the white form card
   already match the reference, so only the hero treatment is added here.
   ========================================================================== */

/* Constrain + center the hero block (Kadence/group wrapper or bare h1). */
body.page-id-160 .entry-content {
	position: relative;
	overflow-x: hidden; /* keep absolutely-positioned accents from causing H-scroll */
}
body.page-id-160 .entry-content > .wp-block-group:first-of-type {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
body.page-id-160 .entry-content > h1,
body.page-id-160 .rs-tt-subtitle,
body.page-id-160 .entry-content > p {
	text-align: center;
}
body.page-id-160 .rs-tt-subtitle {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}
/* Hero stacking context. */
body.page-id-160 .entry-content > .wp-block-group:first-of-type,
body.page-id-160 .entry-content > h1 {
	position: relative;
	z-index: 1;
}

/* Center the form card (it already has the white card + blue focus ring). */
body.page-id-160 .fluentform,
body.page-id-160 .fluentform_wrapper_2 {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Redesign additions: input polish, brand-blue submit, bottom feature cards
   Clean centered layout, no side decorations. Page bg #F4F7F9, white form
   card, three light blue-gray feature cards below the form.
   ========================================================================== */

/* Placeholder text: light gray. */
body.page-id-160 .ff-el-input input::placeholder,
body.page-id-160 textarea.ff-el-form-control::placeholder,
body.page-id-160 .ff-el-input select::placeholder {
	color: #9ca3af;
	opacity: 1;
}

/* Remove any input icons FluentForm may render inside fields. */
body.page-id-160 .fluentform .ff-el-input-icon,
body.page-id-160 .fluentform .ff-input-icon {
	display: none !important;
}

/* Submit button — match design .btn-primary (white/outline pill, brand hover
   + the signature arrow-rotate animation). Scoped to this page so the Contact
   page's dark button is untouched. */
body.page-id-160 .ff-btn.ff-btn-submit,
body.page-id-160 .fluentform button[type="submit"].ff-btn-submit,
body.page-id-160 .ff-el-group button[type="submit"].ff-btn-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	width: auto !important;
	max-width: 320px !important;
	align-self: flex-start !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	color: #111827 !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	border-radius: 9999px !important;
	padding: 0.875rem 2rem !important;
	cursor: pointer !important;
	position: relative !important;
	transition: all 0.3s !important;
}
/* Design .btn-primary animation: an inline arrow that rotates 45° on hover,
   mirroring .play-ico on the design button (FluentForm's static markup can't
   carry the .play-ico span, so we synthesize it with ::after). */
body.page-id-160 .ff-btn.ff-btn-submit::after,
body.page-id-160 .fluentform button[type="submit"].ff-btn-submit::after,
body.page-id-160 .ff-el-group button[type="submit"].ff-btn-submit::after {
	content: "\2192" !important;   /* → */
	display: inline-block !important;
	font-weight: 700 !important;
	transition: transform 0.3s ease !important;
}
body.page-id-160 .ff-btn.ff-btn-submit:hover,
body.page-id-160 .fluentform button[type="submit"].ff-btn-submit:hover,
body.page-id-160 .ff-el-group button[type="submit"].ff-btn-submit:hover {
	background: #3B82F6 !important;
	border-color: #3B82F6 !important;
	color: #ffffff !important;
	box-shadow: 0 16px 40px -8px rgba(0,0,0,.6) !important;
}
body.page-id-160 .ff-btn.ff-btn-submit:hover::after,
body.page-id-160 .fluentform button[type="submit"].ff-btn-submit:hover::after,
body.page-id-160 .ff-el-group button[type="submit"].ff-btn-submit:hover::after {
	transform: rotate(45deg) !important;
}

/* Bottom feature cards (injected via functions.php, below the form).
   Container is wider (1440px) than the 840px form card for a layered look,
   and keeps a generous 100px gap above the footer. */
body.page-id-160 .rs-tt-features {
	max-width: 1440px;
	margin: 3rem auto 100px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
body.page-id-160 .rs-tt-feature-card {
	background: #E9EFF3; /* light blue-gray, slightly deeper than page bg */
	border-radius: 1rem;
	padding: 2rem 1.5rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
	transition: box-shadow .25s ease, transform .25s ease;
}
body.page-id-160 .rs-tt-feature-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .04);
	transform: translateY(-2px);
}
body.page-id-160 .rs-tt-feature-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: #2563EB; /* brand blue */
	display: flex;
	align-items: center;
	justify-content: center;
}
body.page-id-160 .rs-tt-feature-icon svg {
	width: 28px;
	height: 28px;
	color: #fff;
}
body.page-id-160 .rs-tt-feature-card h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 .5rem;
}
body.page-id-160 .rs-tt-feature-card p {
	font-size: .9375rem;
	color: #4b5563;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 700px) {
	body.page-id-160 .rs-tt-features {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   >>> MERGED FROM blog.css (consolidated 2026-08-13)
   ============================================================ */
/* =========================================================
   RisingStar — Blog (listing + article)
   Design language aligned to the RisingStar Design System:
   Primary BLUE #2563EB · hover #1D4ED8 · grays · route divider.
   Font: Inter (scoped to .rs-blog / .rs-article so the parent
   theme's typography is not disturbed elsewhere).
   Reuses .sol-container, .route-divider, .sol-btn-primary (all defined in this file;
   the old global.css was retired and merged here on 2026-08-13).
   ========================================================= */

.rs-blog-hero,
.rs-blog-tabs-wrap,
.rs-blog-grid-wrap,
.rs-blog-news,
.rs-art-hero,
.rs-art-body,
.rs-art-cta,
.rs-art-related {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------- BLOG LISTING : HERO ---------------- */
.rs-blog-hero {
	padding: 3.5rem 0 1rem;
}
.rs-blog-hero-inner {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto;
}
.rs-blog-divider {
	max-width: 8rem;
	margin: 0 auto 1.75rem;
}
.rs-blog-eyebrow {
	color: #2563eb;
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .75rem;
}
.rs-blog-title {
	font-size: 2.25rem;
	line-height: 1.15;
	font-weight: 800;
	color: #111827;
	margin: 0 0 1rem;
}
.rs-blog-sub {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #4b5563;
	margin: 0;
}

/* ---------------- FILTER TABS ---------------- */
.rs-blog-tabs-wrap {
	border-bottom: 1px solid #f3f4f6;
}
.rs-blog-tabs {
	display: flex;
	gap: .5rem;
	padding: 1rem 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.rs-blog-tabs::-webkit-scrollbar { display: none; }
.rs-blog-tab {
	flex: 0 0 auto;
	padding: .5rem 1.25rem;
	font-size: .8125rem;
	font-weight: 600;
	color: #6b7280;
	border: 1px solid transparent;
	border-radius: 9999px;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
}
.rs-blog-tab:hover {
	color: #374151;
	border-color: #e5e7eb;
}
.rs-blog-tab.active {
	color: #111827;
	border-color: #111827;
	background: #fff;
}

/* ---------------- FEATURED ARTICLE ---------------- */
.rs-blog-featured-wrap {
	padding: 3rem 0;
}
.rs-blog-featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .25s, border-color .25s;
}
.rs-blog-featured:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	border-color: #d1d5db;
}
.rs-blog-featured-img {
	overflow: hidden;
	min-height: 18rem;
	background: #f3f4f6;
}
.rs-blog-featured-img img {
	width: 100%;
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
}
.rs-blog-featured-body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------------- CARD GRID ---------------- */
.rs-blog-grid-wrap {
	background: #F4F4F6;
	padding: 3rem 0 4rem;
}
.rs-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.rs-blog-card {
	display: block;
	text-decoration: none;
	transition: transform .25s;
}
.rs-blog-card:hover { transform: translateY(-2px); }
.rs-blog-card-img {
	aspect-ratio: 16 / 10;
	border-radius: .75rem;
	overflow: hidden;
	margin-bottom: 1rem;
	background: #e5e7eb;
}
.rs-blog-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.rs-blog-card:hover .rs-blog-card-img img { transform: scale(1.03); }

.rs-blog-tag {
	display: inline-block;
	padding: .125rem .625rem;
	border-radius: 9999px;
	font-size: .6875rem;
	font-weight: 600;
	margin-bottom: .5rem;
}
.rs-blog-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
	line-height: 1.4;
	margin: 0 0 .5rem;
	transition: color .15s;
}
.rs-blog-card:hover .rs-blog-card-title { color: #2563eb; }
.rs-blog-card-excerpt {
	font-size: .875rem;
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 .75rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rs-blog-meta {
	font-size: .75rem;
	color: #6b7280;
}

/* ---------------- LOAD MORE ---------------- */
.rs-blog-more {
	text-align: center;
	margin-top: 3rem;
}
.rs-blog-more a {
	display: inline-flex;
}

/* ---------------- NEWSLETTER CTA ---------------- */
.rs-blog-news {
	padding: 4rem 0;
}
.rs-blog-news-box {
	background: #F4F4F6;
	border-radius: 1rem;
	padding: 2.5rem;
	text-align: center;
}
.rs-blog-news-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
}
.rs-blog-news-sub {
	font-size: 1rem;
	color: #4b5563;
	margin: 0 auto 2rem;
	max-width: 36rem;
}
.rs-blog-news-form {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	justify-content: center;
	max-width: 28rem;
	margin: 0 auto;
}
.rs-blog-news-input {
	flex: 1;
	padding: .75rem 1rem;
	font-size: .875rem;
	border: 1px solid #d1d5db;
	border-radius: .5rem;
	outline: none;
	font-family: inherit;
}
.rs-blog-news-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.rs-blog-news-btn { white-space: nowrap; }

.rs-blog-empty {
	text-align: center;
	color: #6b7280;
	padding: 3rem 0;
}

/* =========================================================
   ARTICLE (single-post.php)
   ========================================================= */

/* ---------------- HERO ---------------- */
.rs-art-hero {
	position: relative;
	background: #111827;
	overflow: hidden;
}
.rs-art-hero-bg {
	position: absolute;
	inset: 0;
}
.rs-art-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
}
.rs-art-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #111827, rgba(17,24,39,.55) 50%, rgba(17,24,39,.35));
}
.rs-art-hero-inner {
	position: relative;
	padding: 5rem 0 6rem;
}
.rs-art-hero-content { max-width: 48rem; }
.rs-art-badge {
	display: inline-block;
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	padding: .25rem .75rem;
	border-radius: 9999px;
	margin-bottom: 1rem;
}
.rs-art-title {
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
	margin: 0 0 1.25rem;
}
@media (min-width: 1024px) {
	.rs-art-title { font-size: 2.75rem; }
}
.rs-art-lede {
	font-size: 1.125rem;
	line-height: 1.6;
	color: #d1d5db;
	margin: 0 0 1.5rem;
}
.rs-art-byline {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.rs-art-avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: #dbeafe;
	color: #2563eb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .875rem;
	flex: 0 0 auto;
}
.rs-art-author {
	font-size: .875rem;
	font-weight: 600;
	color: #fff;
	margin: 0;
}
.rs-art-date {
	font-size: .75rem;
	color: #6b7280;
	margin: 0;
}

/* ---------------- BODY GRID ---------------- */
.rs-art-body {
	padding: 3rem 0 4rem;
}
.rs-art-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
.rs-art-aside { display: none; }

.rs-art-prose {
	min-width: 0;
}

/* ---------------- TOC SIDEBAR ---------------- */
.rs-art-toc {
	position: sticky;
	top: 6rem;
}
.rs-art-toc-label {
	font-size: .6875rem;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0 0 .75rem;
}
.rs-art-toc-label + .rs-art-toc-label,
.rs-art-share + .rs-art-toc-label {
	margin-top: 2rem;
}
.rs-art-share {
	display: flex;
	gap: .5rem;
}
.rs-art-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	color: #6b7280;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.rs-art-share-btn svg { width: 1rem; height: 1rem; }
.rs-art-share-btn:hover {
	border-color: #111827;
	color: #111827;
}
.rs-art-toc-nav {
	display: flex;
	flex-direction: column;
}
.rs-art-toc-link {
	display: block;
	padding: .375rem 0;
	padding-left: .75rem;
	font-size: .8125rem;
	color: #6b7280;
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.rs-art-toc-link.lvl-3 {
	padding-left: 1.5rem;
	font-size: .75rem;
}
.rs-art-toc-link:hover {
	color: #1f2937;
	border-left-color: #d1d5db;
}
.rs-art-toc-link.active {
	color: #111827;
	font-weight: 600;
	border-left-color: #111827;
}

/* ---------------- PROSE ---------------- */
.rs-art-prose h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #111827;
	margin: 2.5rem 0 1rem;
	padding-top: 1rem;
	border-top: 1px solid #f3f4f6;
	scroll-margin-top: 6rem;
}
.rs-art-prose h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #1f2937;
	margin: 2rem 0 .75rem;
	scroll-margin-top: 6rem;
}
.rs-art-prose p {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #374151;
	margin: 0 0 1.25rem;
}
.rs-art-prose ul {
	list-style: disc;
	padding-left: 1.5rem;
	margin: 0 0 1.25rem;
}
.rs-art-prose ul li {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #374151;
	margin-bottom: .5rem;
}
.rs-art-prose blockquote {
	border-left: 4px solid #111827;
	background: #f9fafb;
	padding: 1rem 1.25rem;
	border-radius: 0 .5rem .5rem 0;
	margin: 1.5rem 0;
	color: #4b5563;
	font-style: italic;
}
.rs-art-prose img {
	border-radius: .75rem;
	margin: 1.5rem 0;
	max-width: 100%;
	height: auto;
}
.rs-art-prose img + em,
.rs-art-prose figure figcaption {
	display: block;
	text-align: center;
	font-size: .8125rem;
	color: #6b7280;
	font-style: italic;
	margin-top: -.75rem;
	margin-bottom: 1.5rem;
}
.rs-art-prose a {
	text-decoration: none;
	transition: color .15s, font-weight .15s;
}
/* Inline content links: keep black (not blue), no underline; bolder + slightly
   darker on hover. CTA / callout buttons are excluded so they keep their own
   white / blue text and never get the prose link color or an underline. */
.rs-art-prose a:not(.rs-art-callout-btn):not(.rs-art-callout-btn--ghost):not(.sol-btn) {
	color: #111827;
}
.rs-art-prose a:not(.rs-art-callout-btn):not(.rs-art-callout-btn--ghost):not(.sol-btn):hover {
	color: #000;
	font-weight: 600;
	text-decoration: none;
}
.rs-art-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: .9375rem;
	border: 1px solid #f3f4f6;
	border-radius: .5rem;
	overflow: hidden;
}
.rs-art-prose table th,
.rs-art-prose table td {
	border: 1px solid #f3f4f6;
}
.rs-art-prose table th {
	background: #f3f4f6;
	padding: .75rem 1rem;
	text-align: left;
	font-weight: 600;
	color: #111827;
}
.rs-art-prose table td {
	padding: .75rem 1rem;
	color: #4b5563;
}
.rs-art-prose table tbody tr:nth-child(even) {
	background: #f9fafb;
}
.rs-art-prose table tbody tr:hover {
	background: #f3f4f6;
}

/* ---------------- CTA BOX ---------------- */
.rs-art-cta {
	background: #F4F4F6;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	padding: 2rem;
	margin-top: 2.5rem;
}
.rs-art-cta-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 .75rem;
}
.rs-art-cta-sub {
	font-size: 1rem;
	color: #4b5563;
	margin: 0 0 1.25rem;
}
.rs-art-cta-btn { display: inline-flex; }

/* ---------------- INLINE CALLOUT (mid-article CRO) ---------------- */
.rs-art-callout {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-left: 4px solid #2563eb;
	border-radius: .75rem;
	padding: 1.25rem 1.5rem;
	margin: 2rem 0;
}
.rs-art-callout-icon {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .5rem;
	background: #2563eb;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rs-art-callout-icon svg { width: 1.25rem; height: 1.25rem; }
.rs-art-callout-body { flex: 1; min-width: 0; }
.rs-art-callout-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 .5rem;
}
.rs-art-callout-text {
	font-size: .9375rem;
	line-height: 1.6;
	color: #4b5563;
	margin: 0 0 1rem;
}
.rs-art-callout-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}
.rs-art-callout-actions a { display: inline-flex; }

/* Callout action buttons — mirror the Design System CTA (left-to-right fill
   on hover, via a ::before pseudo-element). Primary = solid blue; secondary =
   white/blue outline ghost that fills blue on hover. */
.rs-art-callout-btn {
	position: relative;
	overflow: hidden;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: .7rem 1.4rem;
	font-size: .9375rem;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border: 1.5px solid #2563eb;
	border-radius: .5rem;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
	text-decoration: none;
	transition: color .35s;
}
.rs-art-callout-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #1d4ed8;
	transition: width .35s;
	z-index: -1;
}
.rs-art-callout-btn:hover::before { width: 100%; }
.rs-art-callout-btn--ghost {
	color: #2563eb;
	background: #fff;
	border-color: #2563eb;
	box-shadow: none;
}
.rs-art-callout-btn--ghost::before { background: #2563eb; }
.rs-art-callout-btn--ghost:hover { color: #fff; }

/* ---------------- RELATED ---------------- */
.rs-art-related {
	margin-top: 3rem;
}
.rs-art-related-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1.5rem;
}
.rs-art-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.rs-art-related-card {
	text-decoration: none;
}
.rs-art-related-img {
	aspect-ratio: 16 / 10;
	background: #e5e7eb;
	border-radius: .75rem;
	overflow: hidden;
	margin-bottom: .75rem;
}
.rs-art-related-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rs-art-related-h {
	font-size: .875rem;
	font-weight: 700;
	color: #111827;
	line-height: 1.4;
	margin: 0;
	transition: color .15s;
}
.rs-art-related-card:hover .rs-art-related-h { color: #2563eb; }

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 768px) {
	.rs-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.rs-blog-news-form { flex-direction: row; }
	.rs-art-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.rs-blog-grid { grid-template-columns: repeat(3, 1fr); }
	.rs-art-grid {
		grid-template-columns: repeat(12, 1fr);
		gap: 3.5rem;
	}
	.rs-art-aside {
		display: block;
		grid-column: span 3;
	}
	.rs-art-prose {
		grid-column: span 9;
	}
}


/* ============================================================
   >>> MERGED FROM legal.css (consolidated 2026-08-13)
   ============================================================ */
/* ==========================================================================
   RisingStar Child Theme — LEGAL PAGES (Privacy / Cookie / Legal Notice)
   Loaded only on page-legal.php. Uses the shared :root design tokens.
   ========================================================================== */

/* ---------- HERO ---------- */
.rs-legal-hero {
	background: var(--rs-gray-50);
	border-bottom: 1px solid var(--rs-gray-200);
	padding: 4rem 0 3rem;
}
.rs-legal-hero-inner {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}
.rs-legal-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rs-blue-600);
	margin-bottom: 1rem;
}
.rs-legal-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--rs-gray-900);
	line-height: 1.15;
	margin: 0;
}
.rs-legal-hero .route-divider {
	margin-top: 1.5rem;
}
.rs-legal-updated {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	color: var(--rs-gray-500);
}

/* ---------- BODY GRID ---------- */
.rs-legal-body {
	padding: 3.5rem 0 5rem;
}
.rs-legal-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 1024px) {
	.rs-legal-grid {
		grid-template-columns: 240px 1fr;
		gap: 4rem;
		align-items: start;
	}
}

/* ---------- TOC (sticky) ---------- */
.rs-legal-toc {
	position: sticky;
	top: 110px;
}
.rs-legal-toc-title {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rs-gray-500);
	font-weight: 600;
	margin: 0 0 0.9rem;
}
.rs-legal-toc-nav a {
	display: block;
	font-size: 0.9rem;
	color: var(--rs-gray-500);
	text-decoration: none;
	padding: 0.4rem 0 0.4rem 0.9rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.rs-legal-toc-nav a:hover {
	color: var(--rs-blue-600);
}
.rs-legal-toc-nav a.active {
	color: var(--rs-blue-600);
	border-left-color: var(--rs-blue-600);
	font-weight: 600;
}
.rs-legal-toc-nav a.lvl-3 {
	padding-left: 1.8rem;
	font-size: 0.85rem;
}
.rs-legal-top {
	display: inline-block;
	margin-top: 1.5rem;
	font-size: 0.8rem;
	color: var(--rs-gray-500);
	text-decoration: none;
}
.rs-legal-top:hover {
	color: var(--rs-blue-600);
}

/* ---------- PROSE ---------- */
.rs-legal-prose {
	min-width: 0;
}
.rs-legal-prose h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--rs-gray-900);
	margin: 2.75rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rs-gray-200);
	scroll-margin-top: 100px;
}
.rs-legal-prose h2:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.rs-legal-prose h3 {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--rs-gray-900);
	margin: 1.85rem 0 0.75rem;
	scroll-margin-top: 100px;
}
.rs-legal-prose p {
	color: var(--rs-gray-600);
	line-height: 1.85;
	margin: 0 0 1.1rem;
}
.rs-legal-prose ul,
.rs-legal-prose ol {
	margin: 0 0 1.25rem;
	padding-left: 1.3rem;
}
.rs-legal-prose li {
	color: var(--rs-gray-600);
	line-height: 1.85;
	margin-bottom: 0.5rem;
}
.rs-legal-prose ul li {
	list-style: disc;
}
.rs-legal-prose ol li {
	list-style: decimal;
}
.rs-legal-prose a {
	color: var(--rs-blue-600);
}
.rs-legal-prose a:hover {
	color: var(--rs-blue-700);
}
.rs-legal-prose strong {
	color: var(--rs-gray-900);
	font-weight: 600;
}
.rs-legal-prose blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--rs-blue-500);
	background: var(--rs-blue-50);
	border-radius: 0 0.5rem 0.5rem 0;
	color: var(--rs-gray-700);
}
.rs-legal-prose blockquote p:last-child {
	margin-bottom: 0;
}
.rs-legal-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.95rem;
}
.rs-legal-prose th,
.rs-legal-prose td {
	border: 1px solid var(--rs-gray-200);
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
}
.rs-legal-prose th {
	background: var(--rs-gray-50);
	color: var(--rs-gray-900);
	font-weight: 600;
}
.rs-legal-prose hr {
	border: none;
	border-top: 1px solid var(--rs-gray-200);
	margin: 2.5rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   >>> MERGED FROM single-post.php inline <style> (consolidated 2026-08-13)
   Blog article (post) styles: prose, sticky TOC, gradient article hero.
   Loaded on every new-design page via shared-core; only used on /blog/ posts.
   ══════════════════════════════════════════════════════════════════════════ */
.article-prose { color:#3a3a3a; font-size:16px; line-height:1.75; }
.article-prose h2 { font-size:24px; font-weight:600; color:#0a0a0a; line-height:1.3; margin-top:48px; margin-bottom:16px; scroll-margin-top:110px; }
.article-prose h3 { font-size:18px; font-weight:600; color:#0a0a0a; line-height:1.4; margin-top:28px; margin-bottom:10px; scroll-margin-top:110px; }
.article-prose p { margin-bottom:18px; }
.article-prose p a, .article-prose li a, .article-prose td a { color:#3a3a3a; text-decoration:none; }
.article-prose p a:hover, .article-prose li a:hover, .article-prose td a:hover { color:#0a0a0a; }
.article-prose figure { margin:30px 0; }
.article-prose figure img { width:100%; border-radius:1rem; box-shadow:0 8px 40px rgba(0,0,0,0.06); display:block; }
.article-prose table { width:100%; border-collapse:collapse; margin:24px 0 28px; font-size:14px; line-height:1.5; }
.article-prose th { background:#eff6ff; color:#0a0a0a; text-align:left; padding:12px 14px; font-weight:600; border:1px solid #e2e2e6; }
.article-prose td { padding:12px 14px; border:1px solid #e2e2e6; color:#3a3a3a; }
.article-prose tr:nth-child(even) td { background:#f8f9fb; }

.article-prose blockquote { margin:1.5rem 0; padding:1rem 1.25rem; border-left:4px solid var(--rs-blue-600); background:var(--rs-blue-50); border-radius:0 .5rem .5rem 0; color:var(--rs-gray-700); font-family:'Inter', sans-serif; font-size:16px; font-style:normal; line-height:1.9; }
.article-prose blockquote strong:has(+ br) { display:block; margin-bottom:.4em; }
.article-prose blockquote p { margin-bottom:.75rem; }
.article-prose blockquote p:last-child { margin-bottom:0; }
.article-prose blockquote cite { display:block; margin-top:.5rem; font-style:normal; font-size:.875rem; color:#6b7280; }
.article-prose ul.checklist { list-style:none; padding:0; margin:0 0 18px; }
.article-prose ul.checklist li { position:relative; padding-left:28px; margin-bottom:10px; }
.article-prose ul.checklist li::before { content:""; position:absolute; left:0; top:7px; width:16px; height:16px; border-radius:9999px; background:#eff6ff; border:1px solid #2563eb; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%232563eb' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size:11px; background-position:center; background-repeat:no-repeat; }
/* ===== Sticky TOC ===== */
.toc { position:sticky; top:110px; }
.toc-title { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#9ca3af; margin-bottom:14px; }
.toc a { display:block; padding:7px 10px 7px 14px; color:#6b7280; font-size:13px; line-height:1.4; border-left:2px solid #e2e2e6; transition:color .2s,border-color .2s,background-color .2s; }
.toc a:hover { color:#0a0a0a; border-left-color:#2563eb; }
.toc a.active { color:#2563eb; font-weight:600; border-left-color:#2563eb; background-color:rgba(37,99,235,.07); }
.toc .toc-sub a { padding-left:28px; font-size:12px; }
.article-hero { position:relative; background:linear-gradient(135deg,#00174d 0%,#0a0a0a 100%); color:#fff; padding-top:140px; padding-bottom:64px; overflow:hidden; }
.article-hero::after { content:""; position:absolute; right:-10%; top:-20%; width:520px; height:520px; background:radial-gradient(circle,rgba(37,99,235,.35),transparent 60%); pointer-events:none; }

/* ============================================================
   Mobile header: pinned (fixed) on <=767px — PC stays relative/absolute.
   Fixed removes the bar from flow, so we offset the page with body
   padding-top (= mobile header height, 64px). The over-hero variant is
   forced to a SOLID white bar on mobile; its transparent desktop treatment
   would otherwise make white text vanish over light scrolled content.
   z-index kept at 50 so the mobile drawer (60) & search dropdown (60) still
   sit above the header.
   ============================================================ */
@media (max-width: 767px) {
  .rs-header,
  .rs-header.rs-header--over-hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }
  /* over-hero → solid white bar on mobile */
  .rs-header.rs-header--over-hero {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
  }
  .rs-header.rs-header--over-hero .rs-header-logo-img {
    filter: none;
  }
  .rs-header.rs-header--over-hero .rs-header-nav-link,
  .rs-header.rs-header--over-hero .rs-header-search-toggle,
  .rs-header.rs-header--over-hero .rs-header-wc-link,
  .rs-header.rs-header--over-hero .rs-header-mobile-toggle {
    color: #374151 !important;
  }
  .rs-header.rs-header--over-hero .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
  .rs-header.rs-header--over-hero .rs-header-nav-list li.current_page_item > .rs-header-nav-link {
    color: #374151;
  }
  .rs-header.rs-header--over-hero .rs-header-cta {
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
  }
  /* NOTE: no body padding-top here. Every new-design page hero already carries
     its own top padding (pt-20 = 80px, or pt-[4.5rem] = 72px on the home hero),
     which clears the 64px fixed mobile header. Adding a 64px body offset would
     double-count and leave a 64px white gap above the hero. Logged-in users are
     still offset via body.admin-bar below. */
  /* WP admin bar (46px) on mobile */
  body.admin-bar .rs-header,
  body.admin-bar .rs-header.rs-header--over-hero { top: 46px; }
  /* WP injects html{margin-top:32px} when logged in, which shifts in-flow
     content down 32px — but the fixed header ignores it. So 110 (64 header
     + 46 bar) over-counts by 32 and opens a gap between the header and the
     content. Subtract it: 110 - 32 = 78. */
  body.admin-bar { padding-top: 78px; }
}


/* Cart page H1 - override scoped to the cart page only.
   Selector uses body.woocommerce-cart so checkout / account / other page
   titles are NOT affected. English comments only (no CJK) to avoid mojibake
   during future maintenance. */
body.woocommerce-cart .wp-block-post-title {
  margin: 0;
  color: #111827; /* site heading gray (rs-gray-900) */
  font-weight: 700;
  line-height: 1.2;
  font-size: 3em; /* cart page title ~48px (3em @ 16px root) */
  padding-top: 0.75rem; /* small gap below the header on desktop */
}

/* Mobile: the <main> wrapper below clears the fixed 64px header, so the
   title itself only needs a small extra gap. */
@media (max-width: 767px) {
  body.woocommerce-cart .wp-block-post-title {
    padding-top: 0.5rem;
  }
}

/* Cart page outer wrapper - the <main> that holds the cart content.
   Add top spacing on desktop so content clears the sticky site header.
   Scoped to body.woocommerce-cart + the wrapper's data-block-name so it
   never affects checkout / account / other pages. English comments only. */
body.woocommerce-cart main[data-block-name="woocommerce/page-content-wrapper"] {
  padding-top: 2.5rem; /* desktop: keep the cart clear of the fixed header */
}

/* Mobile: header is position:fixed and 64px tall (.rs-header-row @ <=767px),
   so the wrapper must clear it: 64px header + 1rem (16px) breathing gap. */
@media (max-width: 767px) {
  body.woocommerce-cart main[data-block-name="woocommerce/page-content-wrapper"] {
    padding-top: calc(64px + 1rem);
  }
}


/* Floating cart badge (top-right corner, PC/Tablet only) - mirrors shoplist.html .cart-badge.
   Mobile (<768px) hides this entirely - the header has its own .rs-mobile-cart-btn
   next to the hamburger toggle that takes over on narrow screens. */
.rs-cart-badge {
  position: fixed;
  top: 32px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #091E42;
  color: #fff;
  padding: 11px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 32px -8px rgba(9, 30, 66, 0.45);
  transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
}
.rs-cart-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -8px rgba(9, 30, 66, 0.6);
}
.rs-cart-badge-icon { width: 22px; height: 22px; flex: none; fill: currentColor; }
.rs-cart-badge-icon path { fill: currentColor; }
.rs-cart-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: #fff;
  color: #091E42;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
}
/* Add-to-cart "bump": scales up then settles back to normal size.
   Triggered by JS adding .is-bump to .rs-cart-badge. The keyframe ends at
   scale(1) so removing the class leaves no snap. */
@keyframes rs-cart-badge-bump {
  0%   { transform: scale(1); background-color: #091E42; }
  35%  { transform: scale(1.28); background-color: #3b7A57; }
  70%  { transform: scale(0.96); background-color: #3b7A57; }
  100% { transform: scale(1); background-color: #091E42; }
}
.rs-cart-badge.is-bump {
  animation: rs-cart-badge-bump 0.9s cubic-bezier(.34, 1.56, .64, 1);
}
/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .rs-cart-badge.is-bump { animation: none; }
}
@media (max-width: 767px) {
  /* Mobile: header has its own .rs-mobile-cart-btn - hide the floating pill. */
  .rs-cart-badge { display: none !important; }
}

/* Mobile header cart button - sits next to the hamburger menu toggle, hidden on desktop.
   Layout: [logo] ........ [cart-button] [hamburger-toggle]  — both pushed to the right
   edge by the cart button's margin-left:auto; the toggle follows immediately to its right. */
.rs-mobile-cart-btn {
  display: none; /* PC hidden by default */
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: #0a0a0a;  /* solid white header → black icon */
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.rs-mobile-cart-btn:hover {
  color: #0a0a0a;          /* mobile: stay black on hover (white header → black stays legible) */
  opacity: .7;             /* visual feedback via opacity instead of a colour shift */
}
.rs-mobile-cart-btn-icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.rs-mobile-cart-btn-icon path { fill: currentColor; }
.rs-mobile-cart-btn-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #fff;          /* white badge fill */
  color: #2563eb;             /* blue digits */
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  border: 1px solid #2563eb; /* 1px blue ring — keeps the white badge visible on white header bg */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  /* Mobile + small tablet: show the cart button + push it (and the toggle that
     follows) to the right edge. The hamburger toggle's own margin-left:auto
     becomes redundant once the cart button takes the right-pushing role. */
  .rs-mobile-cart-btn {
    display: inline-flex;
    margin-left: auto;
  }
  .rs-header-mobile-toggle { margin-left: 0; }
}
/* Over-hero theme (header floats over a dark hero): apply only on desktop.
   Mobile (<1024px) keeps the cart icon BLACK regardless of header variant —
   the mobile header itself is solid white and the cart button is part of
   that white surface, so a white icon would be invisible. */
@media (min-width: 1024px) {
	.rs-header.rs-header--over-hero .rs-mobile-cart-btn { color: #fff; }
	.rs-header.rs-header--over-hero:hover .rs-mobile-cart-btn { color: #1f2937; }
}