/* ==========================================================================
   PDS custom design system — PT Panca Darma Sejati
   Sits on top of the Spexo theme. Styles every `.pds-*` component used in
   hand-built page content (Home, Services, Contact, Projects, Organization,
   Quality & HSE, Company, Publications, Legal & Certification, News).
   ========================================================================== */

:root {
	--pds-navy: #0d1f2d;
	--pds-blue: #143d5c;
	--pds-gold: #c39a52;
	--pds-gold-dark: #a9803e;
	--pds-ink: #1e2a2a;
	--pds-body: #666666;
	--pds-muted: #6b7280;
	--pds-border: #e3ddd0;
	--pds-surface: #f3f5f7;
	--pds-surface-2: #f8f6f1;
	--pds-white: #ffffff;
	--pds-font-heading: 'IBM Plex Sans', Arial, sans-serif;
	--pds-font-body: 'Schibsted Grotesk', Arial, sans-serif;
	--pds-container: 1240px;
	--pds-shell: 1140px;
	--pds-radius: 14px;
	--pds-radius-sm: 8px;
	--pds-shadow: 0 10px 30px rgba(13, 31, 45, 0.08);
	--pds-shadow-lg: 0 24px 60px rgba(13, 31, 45, 0.14);
}

/* Safety net — nothing on the page should be able to force a horizontal
   scrollbar on mobile. Doesn't affect components with their own
   intentional overflow-x:auto (sliders/carousels), only the page itself. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Drop the theme's default 15px side padding on the shared container
   selectors (header inner, footer inner, page-content, archive wrappers)
   so the header/footer align flush with the full-bleed PDS sections
   instead of sitting 15px further in.
   -------------------------------------------------------------------------- */
.tmpcoder-site-header.page-header .entry-title,
.tmpcoder-site-header .site-footer .footer-inner,
.site-footer:not(.dynamic-footer) .footer-inner,
.tmpcoder-site-header .site-header .header-inner,
.tmpcoder-site-header .site-header:not(.dynamic-header),
.site-main .page-content,
body.post-type-archive .site-main,
body.single-product .site-main,
body.tax-product_cat .site-main {
	padding-left: 0 !important;
	padding-right: 20px !important;
}

/* --------------------------------------------------------------------------
   Break the theme's default page container so PDS sections can run full
   width, edge-to-edge, inside WordPress's normal page/archive templates.
   -------------------------------------------------------------------------- */
body .site-main .page-content:has(.pds-homepage),
body .site-main .page-content:has(.pds-page-hero) {
	max-width: none;
	padding: 0;
	margin: 0;
}
/* No vertical padding on the main content wrapper itself — each section
   below (.pds-section / .pds-page-section) provides its own standard
   spacing, so stacking sections back-to-back never doubles up the gap. */
body .site-main {
	padding: 0 !important;
}
/* The theme prints its own generic page-header/title above the content
   whenever a page isn't flagged has_blocks()/hide_title — redundant here
   since every PDS page already carries its own hero heading. */
.site-main:has(.pds-homepage) > .page-header,
.site-main:has(.pds-page-hero) > .page-header {
	display: none;
}
.pds-homepage,
.pds-page-hero,
.pds-page-section {
	width: 100%;
}
/* Elementor containers default to ~10px padding on every side — zero it
   out on the homepage's outer wrapper so its sections (hero, CTA, etc.)
   run edge-to-edge again instead of sitting inset with a visible gap. */
.pds-homepage,
.pds-homepage > .e-con-inner {
	padding: 0 !important;
	margin: 0 !important;
}

.pds-homepage h1, .pds-homepage h2, .pds-homepage h3, .pds-homepage h4,
.pds-page-hero h1, .pds-page-hero h2,
.pds-page-section h1, .pds-page-section h2, .pds-page-section h3, .pds-page-section h4 {
	font-family: var(--pds-font-heading);
	color: var(--pds-ink);
	margin: 0 0 14px;
	line-height: 1.25;
}
.pds-homepage p, .pds-page-hero p, .pds-page-section p {
	font-family: var(--pds-font-body);
	color: var(--pds-body);
	line-height: 1.7;
}
.pds-homepage *, .pds-page-hero *, .pds-page-section *, .pds-cta * {
	box-sizing: border-box;
}
.pds-homepage img, .pds-page-hero img, .pds-page-section img {
	max-width: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
   Shared section chrome — Home uses .pds-section/.pds-section-wrap,
   inner pages use .pds-page-section/.pds-page-shell. Same visual language.
   -------------------------------------------------------------------------- */
.pds-section,
.pds-page-section {
	padding: 30px 24px;
}
.pds-section.alt,
.pds-page-section.alt {
	background: var(--pds-surface-2);
}

.pds-section-wrap,
.pds-page-shell {
	max-width: var(--pds-shell);
	margin: 0 auto;
}

.container {
	max-width: var(--pds-container);
	margin: 0 auto;
	padding: 0 24px;
}

.pds-section-kicker,
.pds-page-kicker,
.pds-eyebrow,
.pds-kicker {
	display: inline-block;
	font-family: var(--pds-font-body);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pds-gold);
	margin-bottom: 14px;
}

.pds-section-title,
.pds-page-section h2 {
	font-size: 38px !important;
	max-width: 720px;
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll (driven by pds-custom.js — IntersectionObserver)
   -------------------------------------------------------------------------- */
.pds-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.pds-reveal.pds-in-view,
.pds-in-view {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.pds-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Buttons — two independent systems: .pds-btn (hero/CTA) and
   .pds-elegant-btn (document/card links on Publications & Legal).
   -------------------------------------------------------------------------- */
.pds-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 32px;
	border-radius: 999px;
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 15px !important;
	text-decoration: none !important;
	text-transform: capitalize;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	border: 1px solid transparent;
}
.pds-btn:hover { transform: translateY(-2px); }
.pds-btn-primary {
	background: var(--pds-gold);
	color: var(--pds-white);
}
.pds-btn-primary:hover {
	background: var(--pds-navy);
	color: var(--pds-white);
}
.pds-btn-secondary {
	background: transparent;
	color: var(--pds-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.pds-btn-secondary:hover {
	background: var(--pds-white);
	color: var(--pds-navy);
	border-color: var(--pds-white);
}
.pds-cta .pds-btn-secondary {
	color: var(--pds-navy);
	border-color: rgba(13, 31, 45, 0.3);
}
/* Premium "frosted glass" gold variant — add alongside .pds-btn to any
   link or Button widget (works best over a photo/dark backdrop, like the
   hero buttons). */
.pds-btn-glass {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.55) 0%, rgba(169, 128, 62, 0.35) 100%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: rgba(224, 194, 137, 0.7);
	color: var(--pds-white);
	box-shadow: 0 8px 28px rgba(195, 154, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pds-btn-glass:hover {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.75) 0%, rgba(169, 128, 62, 0.55) 100%);
	border-color: var(--pds-gold);
	color: var(--pds-white);
	box-shadow: 0 12px 36px rgba(195, 154, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Button widget → its actual link is nested inside
   .elementor-button-wrapper > .elementor-button, one or more levels
   below the widget wrapper that carries our .pds-btn classes. Reset the
   wrapper to a plain pass-through box and move all the real button
   styling onto .elementor-button, or the two nest into a visible
   "button inside a button" double box. */
.pds-btn:has(.elementor-button) {
	display: block;
	padding: 0;
	border-radius: 0;
	border: none;
	background: none;
}
.pds-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 32px;
	border-radius: 999px;
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 15px !important;
	text-decoration: none !important;
	text-transform: capitalize;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	border: 1px solid transparent;
}
.pds-btn .elementor-button:hover { transform: translateY(-2px); }
.pds-btn-primary .elementor-button {
	background: var(--pds-gold) !important;
	color: var(--pds-white) !important;
	border-color: transparent !important;
}
.pds-btn-primary .elementor-button:hover {
	background: var(--pds-navy) !important;
	color: var(--pds-white) !important;
	border-color: transparent !important;
}
.pds-btn-secondary .elementor-button {
	background: transparent !important;
	color: var(--pds-white) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
}
.pds-btn-secondary .elementor-button:hover {
	background: var(--pds-white) !important;
	color: var(--pds-navy) !important;
	border-color: var(--pds-white) !important;
}
.pds-cta .pds-btn-secondary .elementor-button {
	color: var(--pds-navy) !important;
	border-color: rgba(13, 31, 45, 0.3) !important;
}
.pds-btn-glass .elementor-button {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.55) 0%, rgba(169, 128, 62, 0.35) 100%) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: rgba(224, 194, 137, 0.7) !important;
	color: var(--pds-white) !important;
	box-shadow: 0 8px 28px rgba(195, 154, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pds-btn-glass .elementor-button:hover {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.75) 0%, rgba(169, 128, 62, 0.55) 100%) !important;
	border-color: var(--pds-gold) !important;
	color: var(--pds-white) !important;
	box-shadow: 0 12px 36px rgba(195, 154, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Essential Addons "Button" widget (.tmpcoder-button) — used on the
   custom post page — restyled with the same gold-glass look as
   .pds-btn-glass. Elementor's own Style controls can't produce the
   blur/gradient/inset-shadow combo, so this overrides them directly. */
.tmpcoder-button.tmpcoder-button-effect {
	border-radius: 999px !important;
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.55) 0%, rgba(169, 128, 62, 0.35) 100%) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(224, 194, 137, 0.7) !important;
	box-shadow: 0 8px 28px rgba(195, 154, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.tmpcoder-button.tmpcoder-button-effect .tmpcoder-button-text {
	color: var(--pds-white) !important;
	font-weight: 600;
}
.tmpcoder-button.tmpcoder-button-effect .tmpcoder-button-icon {
	color: var(--pds-white) !important;
}
.tmpcoder-button.tmpcoder-button-effect:hover {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.75) 0%, rgba(169, 128, 62, 0.55) 100%) !important;
	border-color: var(--pds-gold) !important;
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(195, 154, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Essential Addons "Post Grid" widget's built-in pagination
   (.tmpcoder-grid-pagination, "default"/older-newer type) — pill buttons
   matching the .pds-news-pagination treatment used elsewhere. */
.tmpcoder-grid-pagination.tmpcoder-grid-pagination-default {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}
/* .tmpcoder-grid-pagination .tmpcoder-prev-post-link,
.tmpcoder-grid-pagination .tmpcoder-next-post-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	border: 1px solid var(--pds-border);
	color: var(--pds-ink) !important;
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
} */
.tmpcoder-grid-pagination a.tmpcoder-prev-post-link:hover,
.tmpcoder-grid-pagination a.tmpcoder-next-post-link:hover {
	background: var(--pds-gold);
	border-color: var(--pds-gold);
	color: var(--pds-white) !important;
	transform: translateY(-2px);
}
.tmpcoder-grid-pagination .tmpcoder-disabled-arrow {
	opacity: 0.4;
	cursor: not-allowed;
}

.pds-elegant-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid var(--pds-navy);
	color: var(--pds-navy);
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.pds-elegant-btn:hover {
	background: var(--pds-navy);
	color: var(--pds-white);
}
/* Button widget → its actual link is nested one level deeper
   (.elementor-button inside the widget wrapper carrying our class),
   and Elementor's own button skin needs overriding to match. Reset the
   wrapper to a plain pass-through box, or the two nest into a visible
   "button inside a button" double box. */
.pds-elegant-btn:has(.elementor-button) {
	display: block;
	padding: 0;
	border-radius: 0;
	border: none;
	background: none;
}
.pds-elegant-btn .elementor-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 11px 22px !important;
	border-radius: 999px !important;
	background: transparent !important;
	border: 1px solid var(--pds-navy) !important;
	color: var(--pds-navy) !important;
	font-family: var(--pds-font-body) !important;
	font-weight: 600;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.pds-elegant-btn .elementor-button:hover {
	background: var(--pds-navy) !important;
	color: var(--pds-white) !important;
}

/* --------------------------------------------------------------------------
   Mobile menu toggle — the theme draws the hamburger icon and "Close" label
   with `--theme-global-color-1`, which this site's palette sets to white
   (#fff). That leaves the icon invisible against the white header bar with
   no way to open the mobile menu. Force it to a visible ink color.
   -------------------------------------------------------------------------- */
body .tmpcoder-site-header .wp-mobile-toggle:before,
body .tmpcoder-site-header .wp-mobile-toggle:after,
body .tmpcoder-site-header .wp-mobile-toggle .wp-mobile-toggle-line:first-child {
	background: var(--pds-navy) !important;
}
body .tmpcoder-site-header .wp-mobile-toggle-wrap .toggle-text-close {
	color: var(--pds-navy) !important;
}
body .tmpcoder-site-header .wp-mobile-toggle-open .wp-mobile-toggle .wp-mobile-toggle-line:first-child {
	background: transparent !important;
}

/* ==========================================================================
   HOME
   ========================================================================== */

/* Hero slider — the Elementor "Advanced Slider/Carousel" widget (Essential
   Addons), targeted by the widget's own Advanced-tab CSS ID (#pds-hero-slider)
   rather than a bespoke class, since this is a real Elementor widget and not
   custom markup. */
#pds-hero-slider .tmpcoder-advanced-slider,
#pds-hero-slider .tmpcoder-slider-item {
	height: 92vh;
}
#pds-hero-slider .tmpcoder-advanced-slider-wrap {
	background: var(--pds-navy);
}
#pds-hero-slider .tmpcoder-slider-item {
	background: var(--pds-navy);
}
#pds-hero-slider .tmpcoder-slider-item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(13, 31, 45, 0.92) 0%, rgba(13, 31, 45, 0.75) 45%, rgba(13, 31, 45, 0.4) 100%);
}
#pds-hero-slider .tmpcoder-slider-content {
	max-width: 1180px;
	text-align: left;
	margin: 0;
}
#pds-hero-slider .tmpcoder-cv-inner {
	display: flex;
	align-items: center;
	height: 100%;
}
#pds-hero-slider .tmpcoder-slider-title {
	position: relative;
	padding-left: 22px;
}
#pds-hero-slider .tmpcoder-slider-title * {
	color: var(--pds-gold) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 14px;
	font-weight: 600;
}
#pds-hero-slider .tmpcoder-slider-title:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--pds-gold);
	transform: translateY(-50%);
}
#pds-hero-slider .tmpcoder-slider-sub-title * {
	color: var(--pds-white) !important;
	font-size: 54px !important;
	line-height: 1.15;
	font-weight: 600;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

#pds-hero-slider .tmpcoder-slider-description p {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 18px !important;
	max-width: 520px;
}
#pds-hero-slider .tmpcoder-slider-btns {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 32px !important;
}

/* Premium rounded buttons — primary gets a gold glassmorphism treatment,
   secondary a lighter glass so it reads as the less prominent action. */
#pds-hero-slider .tmpcoder-slider-primary-btn,
#pds-hero-slider .tmpcoder-slider-secondary-btn {
	border-radius: 999px !important;
	padding: 14px 32px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
#pds-hero-slider .tmpcoder-slider-primary-btn {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.55) 0%, rgba(169, 128, 62, 0.35) 100%) !important;
	border: 1px solid rgba(224, 194, 137, 0.7) !important;
	box-shadow: 0 8px 28px rgba(195, 154, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#pds-hero-slider .tmpcoder-slider-primary-btn:hover {
	background: linear-gradient(135deg, rgba(195, 154, 82, 0.75) 0%, rgba(169, 128, 62, 0.55) 100%) !important;
	border-color: var(--pds-gold) !important;
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(195, 154, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#pds-hero-slider .tmpcoder-slider-secondary-btn {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#pds-hero-slider .tmpcoder-slider-secondary-btn:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: var(--pds-white) !important;
	transform: translateY(-3px);
}

/* Hero copy fades/slides up on load — plain and left-aligned, no
   character-by-character typing and nothing animating from the center. */
#pds-hero-slider .tmpcoder-slider-title,
#pds-hero-slider .tmpcoder-slider-sub-title,
#pds-hero-slider .tmpcoder-slider-description,
#pds-hero-slider .tmpcoder-slider-btns {
	animation: pds-hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#pds-hero-slider .tmpcoder-slider-sub-title { animation-delay: 0.1s; }
#pds-hero-slider .tmpcoder-slider-description { animation-delay: 0.2s; }
#pds-hero-slider .tmpcoder-slider-btns { animation-delay: 0.3s; }
@keyframes pds-hero-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	#pds-hero-slider .tmpcoder-slider-title,
	#pds-hero-slider .tmpcoder-slider-sub-title,
	#pds-hero-slider .tmpcoder-slider-description,
	#pds-hero-slider .tmpcoder-slider-btns {
		animation: none;
	}
}

/* Every slide shares the same copy (only the background photo changes), but
   the widget still fades the content out/in on every transition — freeze it
   so the text reads as static instead of flickering every 6s. */
#pds-hero-slider .tmpcoder-slider-content {
	opacity: 1 !important;
	display: block !important;
}

#pds-hero-slider .tmpcoder-slider-dots {
	bottom: 36px;
	top: auto !important;
}
/* The plugin never resets Slick's actual <button> element (only its own
   .tmpcoder-slider-dot span inside it) and doesn't load slick-theme.css
   either, so without this the dots show the browser's native button chrome. */
#pds-hero-slider .slick-dots li button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
	cursor: pointer;
}
#pds-hero-slider .tmpcoder-slider-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background-color: transparent;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
#pds-hero-slider .slick-active .tmpcoder-slider-dot {
	background-color: var(--pds-gold);
	border-color: var(--pds-gold);
	transform: scale(1.2);
}

/* About / stats */
.pds-about-grid,
.pds-about-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1.1fr 0.9fr !important;
	gap: 64px;
	align-items: center !important;
}
.pds-about-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-stats-grid,
.pds-stats-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px;
	margin-top: 10px;
}
.pds-stats-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-stat-box {
	position: relative;
	padding: 24px 10px;
	border: 1px solid rgba(195, 154, 82, 0.22);
	border-radius: var(--pds-radius-sm);
	text-align: center;
	background: linear-gradient(150deg, #ffffff 0%, #fbf7ee 100%);
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.pds-stat-box:before {
	content: '';
	position: absolute;
	top: -40%;
	right: -30%;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(195, 154, 82, 0.22), transparent 70%);
	pointer-events: none;
}
.pds-stat-box:hover {
	border-color: rgba(195, 154, 82, 0.55);
	box-shadow: 0 20px 40px -22px rgba(195, 154, 82, 0.5);
}
.pds-stat-box,
.pds-stat-box > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
}
.pds-stat-box:has(> .e-con-inner) {
	display: block !important;
}
.pds-stat-box .pds-stat-number .elementor-heading-title,
.pds-stat-box strong {
	position: relative;
	display: block;
	font-family: var(--pds-font-heading);
	font-size: 38px !important;
	font-weight: 700;
	line-height: 1.15;
	background: linear-gradient(135deg, var(--pds-navy) 35%, var(--pds-gold-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pds-stat-box .pds-stat-label .elementor-heading-title,
.pds-stat-box span {
	position: relative;
	display: block;
	margin-top: 6px;
	font-size: 10.5px !important;
	white-space: nowrap;
	letter-spacing: -0.01em;
	color: var(--pds-muted);
}
.pds-about-media {
	position: relative;
	min-height: 420px;
	border-radius: var(--pds-radius);
	overflow: hidden;
	box-shadow: var(--pds-shadow-lg);
}
.pds-about-media img {
	border-radius: var(--pds-radius);
	box-shadow: var(--pds-shadow-lg);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pds-about-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.pds-about-slide.is-active {
	opacity: 1;
}
@media (max-width: 900px) {
	.pds-about-media { min-height: 320px; }
}

/* Elegant grid — services (icon+list), certs (badge), vision/mission (mixed) */
.pds-elegant-grid,
.pds-elegant-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 28px;
	margin-top: 40px;
}
.pds-elegant-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-elegant-grid.pds-elegant-grid-3,
.pds-elegant-grid.pds-elegant-grid-3 > .e-con-inner {
	grid-template-columns: repeat(3, 1fr) !important;
}
.pds-elegant-card {
	background: var(--pds-white);
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius);
	padding: 36px 28px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pds-elegant-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--pds-shadow-lg);
	border-color: transparent;
}
.icon-wrap {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pds-surface);
	color: var(--pds-navy);
	margin-bottom: 22px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.pds-elegant-card:hover .icon-wrap {
	background: var(--pds-gold);
	color: var(--pds-white);
}
.icon-wrap svg {
	width: 28px;
	height: 28px;
}
.pds-elegant-card h3 {
	font-size: 20px !important;
	margin-bottom: 8px;
}
.pds-elegant-sub {
	color: var(--pds-muted);
	font-size: 15px !important;
	margin-bottom: 0;
}
.pds-elegant-divider {
	height: 1px;
	background: var(--pds-border);
	margin: 20px 0;
}
.pds-elegant-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pds-elegant-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px !important;
	color: var(--pds-body);
	margin-bottom: 10px;
}
.pds-elegant-list li:last-child { margin-bottom: 0; }
.pds-elegant-check {
	flex: none;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pds-surface);
	color: var(--pds-gold);
	font-size: 11px !important;
	font-weight: 700;
	margin-top: 1px;
}
.pds-elegant-cert-badge {
	width: 84px !important;
	height: 84px !important;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 20px;
}
.pds-elegant-cert-badge,
.pds-elegant-cert-badge > .e-con-inner,
.pds-elegant-cert-badge .elementor-widget-image,
.pds-elegant-cert-badge .elementor-widget-container {
	height: 84px !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.pds-elegant-cert-badge img { max-height: 84px !important; height: 84px !important; width: auto !important; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Home "Our Expertise" section — soft dark-blue photo backdrop behind the
   already-dark cards, instead of the plain white section background.
   -------------------------------------------------------------------------- */
.pds-services {
	position: relative;
	background-image:
		linear-gradient(160deg, rgba(13, 31, 45, 0.9), rgba(20, 61, 92, 0.85)),
		url('/wp-content/uploads/2026/09/projects/pds-project-rumah-jacket-1.jpg');
	background-size: cover !important;
	background-position: center !important;
	background-attachment: fixed;
}
.pds-projects {
	position: relative;
	background: var(--pds-white) !important;
}
@media (max-width: 900px) {
	.pds-services {
		background-attachment: scroll;
	}
}
.pds-services .pds-section-kicker,
.pds-projects .pds-section-kicker {
	color: var(--pds-gold);
	margin-bottom: 6px;
}
.pds-projects .pds-showcase-carousel {
	margin-top: 24px;
}
.pds-services .pds-section-title,
.pds-services .pds-section-title .elementor-heading-title,
.pds-services h2 {
	color: var(--pds-white) !important;
}
.pds-projects .pds-section-title,
.pds-projects .pds-section-title .elementor-heading-title,
.pds-projects h2 {
	color: var(--pds-navy) !important;
}

/* --------------------------------------------------------------------------
   Home "Our Expertise" cards — dark navy cards (matching the section's own
   dark-blue backdrop), four in a row. Only the icon + title show by
   default; the description and "Read More" button live in a panel that
   slides up from the bottom on hover (always visible on touch devices,
   where there's no hover to trigger it).
   -------------------------------------------------------------------------- */
.pds-services .pds-elegant-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.pds-services .pds-elegant-card {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 300px;
	padding: 40px 24px;
	background: linear-gradient(155deg, #1a3850 0%, #102638 55%, #0a1620 100%);
	border-color: rgba(195, 154, 82, 0.2);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
}
.pds-services .pds-elegant-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 30px 55px -20px rgba(6, 14, 22, 0.55), 0 0 0 1px rgba(195, 154, 82, 0.3);
}
.pds-services .pds-elegant-card:before,
.pds-services .pds-elegant-card:after {
	content: none;
}
.pds-services .pds-elegant-body {
	position: static !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	text-align: center;
}
.pds-services .pds-elegant-content {
	position: static !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pds-services .pds-elegant-card h3 {
	color: var(--pds-white);
	margin: 0;
	text-align: center;
	white-space: nowrap;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pds-services .pds-elegant-card:hover h3 {
	transform: translateY(-6px);
}

.pds-services .icon-wrap {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	color: var(--pds-white);
	overflow: visible;
	margin: 0 auto 18px;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease;
	animation: pds-icon-float 3.6s ease-in-out infinite;
}
.pds-services .pds-elegant-card:nth-child(2) .icon-wrap { animation-delay: 0.3s; }
.pds-services .pds-elegant-card:nth-child(3) .icon-wrap { animation-delay: 0.6s; }
.pds-services .pds-elegant-card:nth-child(4) .icon-wrap { animation-delay: 0.9s; }
@keyframes pds-icon-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
/* Directional glow — slides/scales in from the lower-left corner rather
   than blooming symmetrically outward from the icon's center. */
.pds-services .icon-wrap:before {
	content: '';
	position: absolute;
	left: -8px;
	bottom: -8px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 70%, rgba(195, 154, 82, 0.55), transparent 70%);
	filter: blur(8px);
	opacity: 0;
	transform: translate(-8px, 8px) scale(0.7);
	transition: opacity 0.4s ease, transform 0.4s ease;
	z-index: -1;
}
.pds-services .icon-wrap svg {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pds-services .pds-elegant-card:hover .icon-wrap {
	background: rgba(195, 154, 82, 0.2);
	animation-play-state: paused;
	transform: translateY(-2px) rotate(-3deg);
}
.pds-services .pds-elegant-card:hover .icon-wrap:before {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
.pds-services .pds-elegant-card:hover .icon-wrap svg {
	transform: scale(1.14) rotate(4deg);
	color: var(--pds-gold-dark);
}

.pds-services .pds-elegant-card.pds-reveal {
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pds-services .pds-elegant-card.pds-reveal:not(.pds-in-view) {
	transform: translateY(28px) scale(0.94);
}
.pds-services .pds-elegant-card.pds-reveal.pds-in-view {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.pds-services .icon-wrap { animation: none; }
}

/* Description + button — hidden below the card, slides up over it. A
   flat navy fill (vs. the card's own gradient) plus a thin gold seam
   keeps the panel visually distinct once it's fully revealed. */
.pds-services .pds-elegant-reveal {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--pds-navy);
	border-top: 1px solid rgba(195, 154, 82, 0.35);
	padding: 20px 24px 24px;
	transform: translateY(100%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pds-services .pds-elegant-card:hover .pds-elegant-reveal {
	transform: translateY(0);
}
.pds-services .pds-elegant-sub {
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	margin: 0 0 16px;
	font-size: 13.5px !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pds-services .pds-elegant-card-btn,
.pds-services .pds-elegant-card-btn .elementor-button {
	width: 100%;
	justify-content: center;
}

/* Touch devices have no hover — keep the panel open and in normal flow. */
@media (hover: none) {
	.pds-services .pds-elegant-card { min-height: 0; }
	.pds-services .pds-elegant-reveal {
		position: static;
		transform: none;
		background: transparent;
		border-top: none;
		padding: 18px 0 0;
	}
}

@media (max-width: 1080px) {
	.pds-services .pds-elegant-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.pds-services .pds-elegant-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Company Profile "Our Direction" (Vision / Mission / Motto) — same dark
   navy card treatment as "Our Expertise", but content stays visible at all
   times (no hover-reveal panel). The section itself gets the same soft
   light-blue transparent photo backdrop as Our Facilities / Organization.
   -------------------------------------------------------------------------- */
#vision-mission {
	position: relative;
	background-image:
		linear-gradient(165deg, rgba(210, 230, 248, 0.8), rgba(228, 240, 252, 0.75)),
		url('/wp-content/uploads/2026/09/facilities/pds-facility-meeting-room.png');
	background-size: cover !important;
	background-position: center !important;
	background-attachment: fixed;
}
@media (max-width: 900px) {
	#vision-mission { background-attachment: scroll; }
}
#vision-mission .pds-elegant-card {
	background: linear-gradient(155deg, #1a3850 0%, #102638 55%, #0a1620 100%);
	border-color: rgba(195, 154, 82, 0.2);
}
#vision-mission .pds-elegant-card:before {
	content: none;
}
#vision-mission .pds-elegant-card:hover {
	box-shadow: 0 28px 50px -20px rgba(6, 14, 22, 0.5), 0 0 45px rgba(195, 154, 82, 0.35) !important;
}
#vision-mission .icon-wrap {
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--pds-gold) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
#vision-mission .pds-elegant-card:hover .icon-wrap {
	background: rgba(195, 154, 82, 0.2);
	color: var(--pds-gold) !important;
}
#vision-mission .pds-elegant-card h3 {
	color: var(--pds-white) !important;
}
#vision-mission .pds-elegant-sub {
	color: rgba(255, 255, 255, 0.72) !important;
}
#vision-mission .pds-elegant-divider {
	background: rgba(255, 255, 255, 0.15);
}
#vision-mission .pds-elegant-list li {
	color: rgba(255, 255, 255, 0.78) !important;
}
#vision-mission .pds-elegant-check {
	background: rgba(195, 154, 82, 0.18);
	color: var(--pds-gold) !important;
}
/* Row 1 of each Vision/Mission/Motto card — icon beside the heading
   instead of icon-on-top — with the description (or checklist) as its
   own full-width row underneath. */
.pds-direction-head,
.pds-direction-head > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px;
}
.pds-direction-head:has(> .e-con-inner) { display: block !important; }
.pds-direction-head .icon-wrap { margin-bottom: 0; flex: 0 0 auto; }
.pds-direction-head h3 { margin: 0; }

/* Projects & experience showcase carousel */
.pds-showcase-carousel {
	position: relative;
	margin-top: 40px;
}
.pds-showcase-scroller,
.pds-showcase-scroller > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
}
.pds-showcase-scroller:has(> .e-con-inner) {
	display: block !important;
	overflow-x: auto;
}
.pds-showcase-scroller::-webkit-scrollbar { display: none; }
.pds-showcase-card {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 360px !important;
	flex: 0 0 360px !important;
	scroll-snap-align: start;
	border-radius: 6px;
	background: linear-gradient(165deg, #16324a 0%, #0d1f2d 60%, #0a1620 100%);
	border: none;
	box-shadow: 0 25px 50px -25px rgba(6, 14, 22, 0.6);
	overflow: hidden;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.pds-showcase-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 35px 60px -25px rgba(6, 14, 22, 0.7);
}
.pds-showcase-img {
	order: 0;
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 0;
	filter: grayscale(0.8) contrast(1.05);
	transition: filter 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pds-showcase-card:hover .pds-showcase-img {
	filter: grayscale(0.1) contrast(1);
	transform: scale(1.06);
}
/* Minimal, editorial-style category label — a thin gold rule instead of
   a filled ribbon/badge shape. Sits over the photo, so it keeps a subtle
   text-shadow for legibility regardless of card background. */
.pds-showcase-badge {
	order: -1;
	position: absolute;
	top: 22px;
	left: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	background: none;
	color: var(--pds-white);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	font-weight: 600;
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	padding: 0;
	border-radius: 0;
	clip-path: none;
	margin: 0;
}
.pds-showcase-badge:before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 1px;
	margin-right: 8px;
	background: var(--pds-gold);
}
.pds-showcase-content {
	order: 1;
	position: relative;
	padding: 16px 26px 22px;
}
.pds-showcase-meta {
	position: static;
	display: block;
	background: none;
	color: var(--pds-gold);
	font-size: 11px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0;
	border-radius: 0;
	margin: 0 0 6px;
}
.pds-showcase-content h3 {
	padding-right: 0;
	color: var(--pds-white) !important;
	font-size: 20px !important;
	font-weight: 600;
	line-height: 1.35 !important;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pds-showcase-content p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px !important;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pds-showcase-link,
.pds-showcase-link .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none !important;
	color: var(--pds-gold) !important;
	border: none !important;
	border-radius: 0;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none !important;
	transition: color 0.25s ease;
}
.pds-showcase-link:after {
	content: '\2192';
	transition: transform 0.3s ease;
}
.pds-showcase-link:hover,
.pds-showcase-link .elementor-button:hover {
	color: var(--pds-white) !important;
}
.pds-showcase-link:hover:after {
	transform: translateX(5px);
}
.pds-showcase-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	border-radius: 50%;
	border: 1px solid var(--pds-border);
	background: var(--pds-white);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	box-shadow: var(--pds-shadow);
	z-index: 2;
}
.pds-showcase-nav svg { width: 18px; height: 18px; color: var(--pds-navy); }
.pds-showcase-nav .elementor-icon i { font-size: 18px !important; width: 18px; color: var(--pds-navy); }
.pds-showcase-prev { left: -23px; }
.pds-showcase-next { right: -23px; }

/* Trusted-by section — subtle background photo instead of flat white,
   with a strong light wash so the client logo cards stay easy to read. */
.pds-clients {
	position: relative;
	background-image:
		linear-gradient(160deg, rgba(13, 31, 45, 0.9), rgba(20, 61, 92, 0.85)),
		url('/wp-content/uploads/2026/09/projects/pds-project-perancah-1.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.pds-clients .pds-section-title,
.pds-clients .pds-section-title .elementor-heading-title,
.pds-clients h2 {
	color: var(--pds-white) !important;
}
@media (max-width: 900px) {
	.pds-clients { background-attachment: scroll; }
}

/* Clients grid + marquee (JS wraps children into .pds-client-track) */
.pds-client-grid {
	overflow: hidden;
}
.pds-client-grid:not(:has(.pds-client-track)),
.pds-client-grid:not(:has(.pds-client-track)) > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px;
}
.pds-client-grid:not(:has(.pds-client-track)):has(> .e-con-inner) {
	display: block !important;
}
.pds-client-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: pds-marquee 34s linear infinite;
}
.pds-client-grid:hover .pds-client-track {
	animation-play-state: paused;
}
@keyframes pds-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.pds-client-card {
	flex: none;
	width: 170px;
	padding: 22px 16px;
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius-sm);
	background: var(--pds-white);
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.pds-client-card,
.pds-client-card > .e-con-inner {
	width: 170px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px;
}
.pds-client-card:has(> .e-con-inner) {
	display: block !important;
}
.pds-client-card:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-4px);
}
.pds-client-card img { max-height: 46px; width: auto; margin: 0 auto; }
.pds-client-name {
	font-size: 12.5px !important;
	color: var(--pds-muted);
	text-align: center;
}

/* Projects page "Clients & Partners" — same dark-blue photo backdrop as
   the Home "Trusted by Industry Leaders" section. */
#clients-partners {
	position: relative;
	background-image:
		linear-gradient(160deg, rgba(13, 31, 45, 0.9), rgba(20, 61, 92, 0.85)),
		url('/wp-content/uploads/2026/09/projects/pds-project-perancah-1.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
@media (max-width: 900px) {
	#clients-partners { background-attachment: scroll; }
}
#clients-partners .pds-kicker { color: var(--pds-gold); }
#clients-partners h2 { color: var(--pds-white) !important; }

/* Certifications */
.pds-cert-grid,
.pds-cert-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 28px;
	margin-top: 10px;
}
.pds-cert-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-cert-card {
	text-align: center;
	padding: 12px 14px;
	border-color: rgba(163, 130, 63, 0.18);
	border-radius: var(--pds-radius);
	background: linear-gradient(160deg, #fdf9f0 0%, #f3e6c8 100%);
}
.pds-cert-badge {
	height: 90px !important;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 18px;
}
.pds-cert-badge,
.pds-cert-badge > .e-con-inner,
.pds-cert-badge .elementor-widget-image,
.pds-cert-badge .elementor-widget-container {
	height: 90px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.pds-cert-badge > .e-con-inner,
.pds-cert-badge .elementor-widget-image,
.pds-cert-badge .elementor-widget-container {
	width: auto !important;
}
.pds-cert-badge img { max-height: 90px !important; height: 90px !important; width: auto !important; margin: 0 auto; }
.pds-cert-card p { margin: 0; font-weight: 600; color: var(--pds-ink); }

/* CTA band — dark blue photo backdrop instead of a flat gradient. */
.pds-cta {
	position: relative;
	background-color: var(--pds-navy);
	background-image:
		linear-gradient(120deg, rgba(13, 31, 45, 0.92) 0%, rgba(20, 61, 92, 0.88) 100%),
		url('/wp-content/uploads/2026/09/projects/pds-project-perancah-1.jpg');
	background-size: cover;
	background-position: center;
	padding: 20px 24px;
}
.pds-cta-wrap {
	max-width: var(--pds-shell);
	margin: 0 auto;
}
.pds-cta-wrap,
.pds-cta-wrap > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 40px;
	flex-wrap: wrap !important;
}
.pds-cta-wrap:has(> .e-con-inner) {
	display: block !important;
}
.pds-cta-copy h2 { color: var(--pds-white) !important; font-size: 32px !important; max-width: 560px; }
.pds-cta-copy p { color: rgba(255, 255, 255, 0.75); max-width: 520px; }
.pds-cta-actions { width: auto !important; flex: none !important; }

/* ==========================================================================
   INNER PAGES — shared hero
   ========================================================================== */

.pds-page-hero {
	position: relative;
	background-color: var(--pds-navy);
	background-size: cover !important;
	background-position: center !important;
	padding: 110px 24px;
	text-align: left;
	overflow: hidden;
	min-height: 440px;
	display: flex !important;
	align-items: center;
}
/* Dark tint over the banner photo so the heading/lead text stays
   legible regardless of which photo is set as the background. */
.pds-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(13, 31, 45, 0.88) 0%, rgba(20, 61, 92, 0.82) 100%);
	z-index: 1;
}
.pds-page-hero.pds-hero-company::before {
	background: linear-gradient(120deg, rgba(13, 31, 45, 0.88) 0%, rgba(139, 107, 58, 0.78) 140%);
}
.pds-page-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tmpcoder-container-width, 1200px);
	margin: 0 auto;
}
.pds-page-hero h1 { color: var(--pds-white) !important; font-size: 44px !important; }
.pds-page-hero p { color: rgba(255, 255, 255, 0.8); font-size: 17px !important; max-width: 560px; }
.pds-page-hero .pds-page-kicker { color: var(--pds-gold); }

.pds-page-grid,
.pds-page-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 60px;
}
.pds-page-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-page-panel h2 { font-size: 30px !important; }
/* "Our Strength" panel — a soft card treatment (matching the stat-box
   gold-tinted gradient elsewhere on the site) so the two-column intro
   reads as one designed section instead of two bare stacked blocks. */
/* Outer panel card removed — the section's own background carries this
   now, only the individual metric cards below keep card styling. */
.pds-strength-panel .pds-page-metrics {
	margin-top: 32px;
}
/* Same premium cream card + soft gold corner blob used by the Home
   ".pds-stat-box" stat cards, for a consistent look across the site. */
.pds-strength-panel .pds-page-metric {
	position: relative;
	background: linear-gradient(150deg, #ffffff 0%, #fbf7ee 100%);
	border-color: rgba(195, 154, 82, 0.22);
	overflow: hidden;
}
.pds-strength-panel .pds-page-metric:before {
	content: '';
	position: absolute;
	top: -40%;
	right: -30%;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(195, 154, 82, 0.22), transparent 70%);
	pointer-events: none;
}
.pds-strength-panel .pds-page-metric:hover {
	border-color: rgba(195, 154, 82, 0.55);
	box-shadow: 0 20px 40px -22px rgba(195, 154, 82, 0.5);
}
/* "25+ Years" hero metric — a Heading widget (h6) instead of the Counter
   widget the other three metrics use, so the headline stat carries real
   semantic weight, while pds-custom.js still animates it as a count-up
   (see the .pds-count-h6 handler). */
.pds-metric-hero,
.pds-metric-hero > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
}
.pds-metric-hero:has(> .e-con-inner) { display: block !important; }
.pds-metric-hero-number .elementor-heading-title {
	font-family: var(--pds-font-heading);
	font-size: 30px !important;
	line-height: 1;
	margin: 0 !important;
	background: linear-gradient(135deg, var(--pds-navy) 35%, var(--pds-gold-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pds-metric-hero-label .elementor-heading-title {
	display: block;
	font-size: 13px !important;
	font-weight: 400;
	color: var(--pds-muted);
	margin: 4px 0 0 !important;
}
.pds-page-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.pds-page-list li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 12px;
	color: var(--pds-body);
	font-size: 15px !important;
}
.pds-page-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pds-gold);
}
.pds-page-metrics,
.pds-page-metrics > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px;
	margin-top: 28px;
}
.pds-page-metrics:has(> .e-con-inner) {
	display: block !important;
}
.pds-page-metric {
	padding: 20px;
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius-sm);
	text-align: center;
}
.pds-page-metric strong {
	display: block;
	font-family: var(--pds-font-heading);
	font-size: 30px !important;
	color: var(--pds-navy);
}
.pds-page-metric span { display: block; font-size: 13px !important; color: var(--pds-muted); margin-top: 4px; }

/* Elegant dark card with a photo backdrop — used for the closing
   "Need More Information?" contact-invitation callout on Quality & HSE
   and Legal & Certification. */
.pds-page-callout {
	position: relative;
	margin-top: 40px;
	padding: 44px 48px;
	border: 1px solid rgba(195, 154, 82, 0.25);
	border-radius: var(--pds-radius);
	overflow: hidden;
	background-image:
		linear-gradient(120deg, rgba(13, 31, 45, 0.93) 0%, rgba(20, 61, 92, 0.88) 100%),
		url('/wp-content/uploads/2026/09/facilities/pds-facility-office-interior.png');
	background-size: cover;
	background-position: center;
	box-shadow: var(--pds-shadow-lg);
}
.pds-page-callout h3 { font-size: 22px !important; color: var(--pds-white) !important; }
.pds-page-callout p { margin: 0; color: rgba(255, 255, 255, 0.78); }
.pds-page-callout-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
}
.pds-page-callout-cta,
.pds-page-callout-cta > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px 32px;
}
.pds-page-callout-cta:has(> .e-con-inner) { display: block !important; }
.pds-page-callout-cta > *:first-child { flex: 1 1 420px; }
.pds-page-callout-btn {
	flex: 0 0 auto !important;
	width: auto !important;
}
.pds-lead-in {
	font-weight: 600;
	color: var(--pds-navy);
	margin: -6px 0 4px;
}

/* ==========================================================================
   SERVICES — interactive portfolio + lightbox
   ========================================================================== */

.pds-portfolio {
	margin-top: 40px;
	border-radius: var(--pds-radius);
	overflow: hidden;
	box-shadow: var(--pds-shadow);
}
.pds-portfolio,
.pds-portfolio > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1.4fr 1fr !important;
	gap: 0;
}
.pds-portfolio:has(> .e-con-inner) {
	display: block !important;
}
.pds-portfolio-visual {
	position: relative;
	min-height: 380px;
	background: var(--pds-navy);
}
.pds-portfolio-slide {
	position: absolute !important;
	inset: 0 !important;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.pds-portfolio-slide.is-active { opacity: 1; }
.pds-portfolio-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(13, 31, 45, 0.9) 0%, rgba(13, 31, 45, 0.1) 55%);
	z-index: 1;
}
.pds-portfolio-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 36px;
	color: var(--pds-white);
	height: auto !important;
}
/* Force the Elementor container's own inner wrapper into a tight column so
   the eyebrow/title/description always stack flush together at the bottom,
   regardless of the container's default flex alignment. */
.pds-portfolio-overlay > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	height: auto !important;
	gap: 8px !important;
}
.pds-portfolio-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--pds-gold);
	margin: 0 0 4px !important;
}
.pds-portfolio-overlay h3 { color: var(--pds-white) !important; font-size: 24px !important; margin: 0 !important; }
.pds-portfolio-overlay p { color: rgba(255, 255, 255, 0.8); margin: 0; }
.pds-portfolio-list,
.pds-portfolio-list > .e-con-inner {
	background: var(--pds-white);
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
}
.pds-portfolio-list:has(> .e-con-inner) {
	display: block !important;
}
.pds-portfolio-item {
	padding: 14px 24px;
	border: none;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.pds-portfolio-item,
.pds-portfolio-item > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px;
}
.pds-portfolio-item:has(> .e-con-inner) {
	display: block !important;
}
.pds-portfolio-item:hover { background: var(--pds-surface-2); }
.pds-portfolio-item.is-active {
	background: var(--pds-surface);
	box-shadow: inset 4px 0 0 var(--pds-gold);
}
.pds-portfolio-item-num {
	flex: 0 0 auto !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	border: 1px solid var(--pds-border);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: var(--pds-font-heading);
	font-size: 13px !important;
	color: var(--pds-muted);
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.pds-portfolio-item-num .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pds-portfolio-item-num .elementor-heading-title { line-height: 1 !important; }
.pds-portfolio-item:hover .pds-portfolio-item-num { border-color: var(--pds-gold); color: var(--pds-gold); }
.pds-portfolio-item.is-active .pds-portfolio-item-num {
	background: var(--pds-gold);
	border-color: var(--pds-gold);
	color: var(--pds-white);
}
.pds-portfolio-item-body,
.pds-portfolio-item-body > .e-con-inner {
	flex: 1 1 auto !important;
	min-width: 0;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px;
}
.pds-portfolio-item-body:has(> .e-con-inner) { display: block !important; }
.pds-portfolio-item-name {
	font-weight: 600;
	font-size: 16.5px !important;
	color: var(--pds-ink);
	transition: color 0.3s ease;
}
.pds-portfolio-item.is-active .pds-portfolio-item-name,
.pds-portfolio-item:hover .pds-portfolio-item-name { color: var(--pds-navy); }
.pds-portfolio-item-desc {
	font-size: 13.5px !important;
	line-height: 1.55;
	color: var(--pds-muted);
	margin: 0 !important;
}
.pds-portfolio-item-arrow {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	color: var(--pds-border);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.pds-portfolio-item-arrow .elementor-icon { display: flex; align-items: center; justify-content: center; }
.pds-portfolio-item-arrow i { font-size: 16px !important; }
.pds-portfolio-item:hover .pds-portfolio-item-arrow,
.pds-portfolio-item.is-active .pds-portfolio-item-arrow {
	opacity: 1;
	transform: none;
	color: var(--pds-gold);
}
.pds-portfolio-gallery {
	grid-column: 1 / -1;
	padding: 28px;
	background: var(--pds-surface-2);
}
.pds-portfolio-gallery-set,
.pds-portfolio-gallery-set > .e-con-inner {
	width: 100% !important;
	display: none !important;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
	gap: 14px;
}
.pds-portfolio-gallery-set.is-active,
.pds-portfolio-gallery-set.is-active > .e-con-inner {
	display: grid !important;
}
.pds-portfolio-gallery-set:has(> .e-con-inner) {
	display: block !important;
}
.pds-portfolio-gallery-set img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: var(--pds-radius-sm);
	cursor: pointer;
	transition: transform 0.25s ease;
}
.pds-portfolio-gallery-set img:hover { transform: scale(1.04); }

.pds-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 31, 45, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	padding: 40px;
}
.pds-lightbox.is-open { opacity: 1; visibility: visible; }
.pds-lightbox img {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: var(--pds-radius-sm);
	box-shadow: var(--pds-shadow-lg);
}
.pds-lightbox-close {
	position: absolute;
	top: 24px;
	right: 32px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: var(--pds-white);
	font-size: 22px !important;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.pds-contact-grid,
.pds-contact-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px;
}
.pds-contact-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-contact-card {
	padding: 32px 28px;
	border: 1px solid rgba(195, 154, 82, 0.2);
	border-radius: var(--pds-radius);
	background: linear-gradient(155deg, #1a3850 0%, #102638 55%, #0a1620 100%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Lift + soft glow only — no border-color transition/sweep. */
.pds-contact-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -20px rgba(6, 14, 22, 0.5), 0 0 45px rgba(195, 154, 82, 0.35);
}
.pds-contact-card .icon-wrap {
	background: rgba(255, 255, 255, 0.08);
	color: var(--pds-gold) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
.pds-contact-card .pds-elegant-divider {
	background: rgba(255, 255, 255, 0.15);
}
.pds-contact-card h3 { font-size: 18px !important; color: var(--pds-white) !important; }
.pds-contact-card p { margin: 0; font-size: 14.5px !important; color: rgba(255, 255, 255, 0.72); }
.pds-contact-card a { color: var(--pds-gold) !important; text-decoration: none !important; }
.pds-contact-card a:hover { color: var(--pds-white) !important; }

/* Location & Form — stacked (map on top, form below) instead of a tall
   50/50 split, so the form gets the section's full width to pair fields
   2-up and stay compact rather than one tall column of stacked inputs. */
.pds-contact-mapform {
	margin-top: 40px;
}
/* Section-level dark-blue photo backdrop (not a card wrap on the
   map/form pair itself) — same recipe used elsewhere on the site. */
#location-form {
	position: relative;
	background-image:
		linear-gradient(120deg, rgba(13, 31, 45, 0.92) 0%, rgba(20, 61, 92, 0.88) 100%),
		url('/wp-content/uploads/2026/09/facilities/pds-facility-office-entrance.png');
	background-size: cover;
	background-position: center;
}
#location-form .pds-kicker { color: var(--pds-gold); }
#location-form h2 { color: var(--pds-white) !important; }
.pds-contact-mapform,
.pds-contact-mapform > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 32px;
	align-items: stretch !important;
}
.pds-contact-mapform:has(> .e-con-inner) {
	display: block !important;
}
.pds-contact-map {
	border-radius: var(--pds-radius);
	overflow: hidden;
	box-shadow: var(--pds-shadow);
}
.pds-contact-map,
.pds-contact-map > .e-con-inner,
.pds-contact-map .elementor-widget-html,
.pds-contact-map .elementor-widget-container {
	height: 100% !important;
	min-height: 320px;
}
.pds-contact-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.pds-contact-form-wrap {
	padding: 28px 32px;
	border-radius: var(--pds-radius);
	background: var(--pds-white);
	box-shadow: var(--pds-shadow);
}
.pds-contact-form-wrap h3 { font-size: 22px !important; }

/* The form's own two-field rows (Name+Email, Phone+Subject) — plain
   CF7-generated <div class="pds-form-row"> markup, not an Elementor
   container, so no .e-con-inner involved. */
.pds-contact-form-wrap .pds-form-row {
	display: flex;
	gap: 18px;
}
.pds-contact-form-wrap .pds-form-row > label {
	flex: 1 1 0;
	min-width: 0;
}
.pds-contact-form-wrap label {
	display: block;
	font-size: 13.5px !important;
	font-weight: 600;
	color: var(--pds-ink);
	margin-bottom: 6px;
}
.pds-contact-form-wrap .wpcf7-form-control-wrap { display: block; margin-bottom: 14px; }
.pds-contact-form-wrap input.wpcf7-form-control,
.pds-contact-form-wrap textarea.wpcf7-form-control {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius-sm);
	font-family: var(--pds-font-body);
	font-size: 14px !important;
	background: var(--pds-surface-2);
	transition: border-color 0.25s ease;
}
.pds-contact-form-wrap input.wpcf7-form-control:focus,
.pds-contact-form-wrap textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--pds-gold);
	background: var(--pds-white);
}
.pds-contact-form-wrap textarea.wpcf7-form-control { min-height: 90px; resize: vertical; }
.pds-contact-form-wrap input[type="submit"].wpcf7-submit {
	display: inline-flex;
	align-items: center;
	padding: 12px 30px;
	border: none;
	border-radius: 999px;
	background: var(--pds-gold);
	color: var(--pds-white);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.pds-contact-form-wrap input[type="submit"].wpcf7-submit:hover { background: var(--pds-navy); }
.pds-contact-form-wrap .wpcf7-not-valid-tip { color: #c0392b; font-size: 13px !important; margin-top: 4px; }
.pds-contact-form-wrap .wpcf7-response-output { border-radius: var(--pds-radius-sm); margin-top: 16px; }

/* ==========================================================================
   PROJECTS — filter + photo grid
   ========================================================================== */

.pds-project-filter {
	margin-bottom: 32px;
}
.pds-project-filter,
.pds-project-filter > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 12px;
	flex-wrap: wrap !important;
}
.pds-project-filter:has(> .e-con-inner) {
	display: block !important;
}
.pds-filter-btn {
	width: auto !important;
	flex: 0 0 auto !important;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid var(--pds-border);
	background: var(--pds-white);
	color: var(--pds-ink);
	font-family: var(--pds-font-body);
	font-size: 14px !important;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pds-filter-btn:hover { border-color: var(--pds-gold); }
.pds-filter-btn.is-active {
	background: var(--pds-navy);
	border-color: var(--pds-navy);
	color: var(--pds-white);
}
.pds-photo-grid,
.pds-photo-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px;
}
.pds-photo-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-photo-card {
	position: relative;
	border-radius: var(--pds-radius);
	overflow: hidden;
	background: var(--pds-white);
	box-shadow: var(--pds-shadow);
}
.pds-photo-card.pds-hidden { display: none; }
.pds-photo-thumb {
	height: 220px;
	background-size: cover;
	background-position: center;
}
.pds-photo-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--pds-gold);
	color: var(--pds-white);
	font-size: 11px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 12px;
	border-radius: 999px;
}
.pds-photo-card h3 {
	font-size: 16px !important;
	padding: 18px 20px;
	margin: 0;
}

/* ==========================================================================
   ORGANIZATION — org chart
   ========================================================================== */

/* Soft light-blue transparent photo backdrop behind the org-chart section
   — the photo stays visible through the tint (unlike the dark navy
   backdrops elsewhere), so body copy keeps its normal dark ink color. */
#organization {
	position: relative;
	background-image:
		linear-gradient(165deg, rgba(210, 230, 248, 0.8), rgba(228, 240, 252, 0.75)),
		url('/wp-content/uploads/2026/09/facilities/pds-facility-office-exterior.png');
	background-size: cover !important;
	background-position: center !important;
	background-attachment: fixed;
}
@media (max-width: 900px) {
	#organization { background-attachment: scroll; }
}

.pds-orgchart {
	margin-top: 40px;
	text-align: center;
}
.pds-orgchart-tier,
.pds-orgchart-tier > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 12px;
	margin: 0 auto;
}
/* Tree-branch clearance above every non-root tier: the trunk line
   (.pds-orgchart-connector) drops into this space, then spreads into a
   horizontal bar with a vertical drop to each card (drawn per-card
   below), like a decision-tree / expert-system hierarchy diagram. */
.pds-orgchart-tier:not(.pds-orgchart-tier-1) {
	padding-top: 28px;
}
.pds-orgchart-connector {
	width: 2px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	background: var(--pds-border);
	margin: 0 auto;
}
.pds-orgchart-tier-label {
	font-size: 13px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pds-muted);
	margin: 10px 0;
}
/* Clean, bright profile card — a person's photo/initials + name + title
   reads better on plain white than the gold-blob "stat card" treatment
   (that recipe is reserved for number/metric cards elsewhere). */
.pds-orgchart-card {
	position: relative;
	flex: 0 0 auto !important;
	width: 165px;
	padding: 18px 10px;
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius);
	background: var(--pds-white);
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Tree-branch lines: each card in a non-root tier draws its own T-shaped
   connector — a horizontal segment reaching toward its neighbors (which
   line up edge-to-edge across the row into one continuous bar) plus a
   vertical drop from that bar down to the card. First/last card in a row
   only draws the segment pointing toward its sibling, not out past the
   row's edge. Width includes half the row gap so adjacent cards' lines
   meet exactly at the gap's midpoint. */
.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:before,
.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:after {
	content: '' !important;
	position: absolute !important;
	top: -28px !important;
	width: calc(50% + 6px) !important;
	height: 28px !important;
	border-top: 2px solid var(--pds-border) !important;
	pointer-events: none;
}
.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:before {
	right: 50% !important;
	border-right: 2px solid var(--pds-border) !important;
}
.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:after {
	left: 50% !important;
	border-left: 2px solid var(--pds-border) !important;
}
.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:first-child:before {
	border: none !important;
}
.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:last-child:after {
	border: none !important;
}
.pds-orgchart-card,
.pds-orgchart-card > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 3px !important;
}
/* Only the INNER wrapper fills the card — the card itself keeps its
   fixed width (set above) so siblings sit side by side instead of each
   stretching to the full row width and stacking. */
.pds-orgchart-card > .e-con-inner {
	width: 100% !important;
}
.pds-orgchart-card:has(> .e-con-inner) { display: block !important; }
.pds-orgchart-avatar {
	width: 56px;
	height: 56px;
	margin: 0 auto 8px;
	border-radius: 50%;
	background: var(--pds-navy);
	color: var(--pds-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pds-font-heading);
	font-weight: 700;
	font-size: 16px !important;
}
.pds-orgchart-avatar .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.pds-orgchart-avatar .elementor-heading-title {
	line-height: 1 !important;
}
.pds-orgchart-card h3 { font-size: 14px !important; line-height: 1.3; margin: 0 !important; text-align: center; }
.pds-orgchart-card span { font-size: 12.5px !important; color: var(--pds-muted); margin: 0 !important; text-align: center; }

/* ==========================================================================
   COMPANY — gallery, timeline
   ========================================================================== */

.pds-company-gallery,
.pds-company-gallery > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px;
	margin-top: 32px;
}
.pds-company-gallery:has(> .e-con-inner) {
	display: block !important;
}
.pds-company-gallery figure {
	margin: 0;
	position: relative;
	border-radius: var(--pds-radius);
	overflow: hidden;
}
.pds-company-gallery img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s ease; }
.pds-company-gallery figure:hover img { transform: scale(1.06); }
.pds-company-gallery figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 16px;
	background: linear-gradient(0deg, rgba(13, 31, 45, 0.85), transparent);
	color: var(--pds-white);
	font-size: 13px !important;
}

/* Our Facilities — soft light-blue transparent photo backdrop behind the
   section (same recipe as #organization), so the two facility cards sit
   on a premium showcase rather than a flat white section. */
#our-facilities {
	position: relative;
	background-image:
		linear-gradient(165deg, rgba(210, 230, 248, 0.8), rgba(228, 240, 252, 0.75)),
		url('/wp-content/uploads/2026/09/facilities/pds-facility-workspace.png');
	background-size: cover !important;
	background-position: center !important;
	background-attachment: fixed;
}
@media (max-width: 900px) {
	#our-facilities { background-attachment: scroll; }
}

/* Our Facilities — two location cards (photo + name + full address)
   instead of a plain photo grid. */
.pds-facility-grid,
.pds-facility-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 28px;
	margin-top: 32px;
}
.pds-facility-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-facility-card {
	border-radius: var(--pds-radius);
	overflow: hidden;
	background: var(--pds-white);
	border: 1px solid var(--pds-border);
	box-shadow: 0 2px 10px rgba(13, 31, 45, 0.04);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pds-facility-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -20px rgba(13, 31, 45, 0.18);
}
.pds-facility-photo {
	padding: 16px 16px 0;
}
.pds-facility-photo img {
	width: 100%;
	height: 244px;
	object-fit: cover;
	display: block;
	border-radius: var(--pds-radius-sm);
	transition: transform 0.5s ease;
}
.pds-facility-card:hover .pds-facility-photo img {
	transform: scale(1.05);
}
.pds-facility-body {
	padding: 28px 26px;
}
.pds-facility-body h3 {
	font-size: 20px !important;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.pds-facility-body h3:before {
	content: '';
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--pds-gold);
}
.pds-facility-body p {
	color: var(--pds-muted);
	font-size: 14.5px !important;
	line-height: 1.7;
	margin: 0;
}
@media (max-width: 767px) {
	.pds-facility-grid,
	.pds-facility-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
}

.pds-timeline {
	position: relative;
	margin-top: 40px;
	padding-left: 60px;
}
.pds-timeline::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--pds-border);
}
/* Soft gold light that continuously travels down the line, giving the
   section motion even before/after the scroll-reveal has played. */
.pds-timeline::after {
	content: '';
	position: absolute;
	left: 19px;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pds-gold);
	box-shadow: 0 0 14px 4px rgba(195, 154, 82, 0.55);
	animation: pds-timeline-travel 5s ease-in-out infinite;
}
@keyframes pds-timeline-travel {
	0% { top: 6px; opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { top: calc(100% - 14px); opacity: 0; }
}
.pds-timeline-item {
	position: relative;
	padding-bottom: 40px;
}
.pds-timeline-item:last-child { padding-bottom: 0; }

/* Stronger, alternating entrance — overrides the generic .pds-reveal
   straight fade-up (added by pds-custom.js) with a slight left/right
   diagonal so items don't all move the same way. */
.pds-timeline-item.pds-reveal {
	transform: translateY(24px) translateX(-16px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pds-timeline-item.pds-reveal:nth-child(even) {
	transform: translateY(24px) translateX(16px);
}
.pds-timeline-item.pds-reveal.pds-in-view {
	transform: none;
}

.pds-timeline-marker {
	position: absolute;
	left: -60px;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pds-navy);
	color: var(--pds-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pds-font-heading);
	font-weight: 700;
	font-size: 13px !important;
	transform: scale(0.35);
	opacity: 0;
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.4s ease 0.15s, box-shadow 0.3s ease;
}
.pds-timeline-marker .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.pds-timeline-marker .elementor-heading-title {
	line-height: 1 !important;
}
.pds-timeline-item.pds-in-view .pds-timeline-marker {
	transform: scale(1);
	opacity: 1;
}
/* One-shot pulse ring that expands out of the marker once it's revealed */
.pds-timeline-item.pds-in-view .pds-timeline-marker::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--pds-gold);
	animation: pds-marker-pulse 1s ease-out 0.5s;
}
.pds-timeline-marker:hover {
	box-shadow: 0 0 0 6px rgba(195, 154, 82, 0.18);
}
@keyframes pds-marker-pulse {
	0% { transform: scale(1); opacity: 0.9; }
	100% { transform: scale(1.9); opacity: 0; }
}
/* Wrap the year/description in its own card instead of bare floating
   text, matching the card language used elsewhere on the site. */
.pds-timeline-content {
	background: var(--pds-white);
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius);
	box-shadow: 0 2px 10px rgba(13, 31, 45, 0.04);
	padding: 22px 26px;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
}
.pds-timeline-content:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 50px -20px rgba(13, 31, 45, 0.18);
	border-color: transparent;
}
.pds-timeline-content h3 { font-size: 18px !important; margin-bottom: 6px; }
.pds-timeline-content p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.pds-timeline::after { animation: none; display: none; }
	.pds-timeline-marker { transition: none; transform: none; opacity: 1; }
	.pds-timeline-item.pds-in-view .pds-timeline-marker::before { animation: none; content: none; }
}

/* ==========================================================================
   PUBLICATIONS — document cards
   ========================================================================== */

.pds-doc-grid,
.pds-doc-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px;
	margin-top: 40px;
}
.pds-doc-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-doc-card {
	padding: 30px 26px;
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius);
	background: var(--pds-white);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pds-doc-icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pds-surface);
	color: var(--pds-navy);
	margin-bottom: 14px;
}
.pds-doc-icon svg { width: 24px; height: 24px; }
.pds-doc-icon { padding: 0 !important; }
.pds-doc-icon .elementor-icon i { font-size: 24px !important; width: 24px; color: var(--pds-navy); }
.pds-doc-meta {
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pds-gold);
}
.pds-doc-card h3 { font-size: 18px !important; margin: 6px 0 6px; }
.pds-doc-card p { font-size: 14.5px !important; margin-bottom: 16px; }
.pds-doc-card .pds-elegant-btn { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   LEGAL & CERTIFICATION — tabbed layout
   ========================================================================== */

.pds-legal-layout { margin-top: 40px; }
.pds-legal-tabs {
	margin-bottom: 30px;
}
.pds-legal-tabs,
.pds-legal-tabs > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 12px;
	flex-wrap: wrap !important;
}
.pds-legal-tabs:has(> .e-con-inner) {
	display: block !important;
}
.pds-legal-tab {
	width: auto !important;
	flex: 0 0 auto !important;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid var(--pds-border);
	background: var(--pds-white);
	cursor: pointer;
	font-family: var(--pds-font-body);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pds-legal-tab,
.pds-legal-tab > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
}
.pds-legal-tab:has(> .e-con-inner) {
	display: block !important;
}
.pds-legal-tab-icon { display: flex; color: var(--pds-navy); }
.pds-legal-tab-icon svg { width: 18px; height: 18px; }
.pds-legal-tab-icon .elementor-icon i { font-size: 18px !important; width: 18px; }
.pds-legal-tab-name { font-weight: 600; color: var(--pds-ink); }
.pds-legal-tab-count {
	background: var(--pds-surface);
	color: var(--pds-muted);
	font-size: 12px !important;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
}
.pds-legal-tab.is-active {
	background: var(--pds-navy);
	border-color: var(--pds-navy);
}
.pds-legal-tab.is-active .pds-legal-tab-icon,
.pds-legal-tab.is-active .pds-legal-tab-name { color: var(--pds-white); }
.pds-legal-tab.is-active .pds-legal-tab-count { background: rgba(255, 255, 255, 0.15); color: var(--pds-white); }

.pds-legal-content-head {
	margin-bottom: 24px;
}
.pds-legal-content-head,
.pds-legal-content-head > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.pds-legal-content-head:has(> .e-con-inner) {
	display: block !important;
}
.pds-legal-content-head h2 { font-size: 24px !important; margin: 0; }
.pds-legal-view-toggle { width: auto !important; flex: 0 0 auto !important; border: 1px solid var(--pds-border); border-radius: 999px; padding: 4px; }
.pds-legal-view-toggle,
.pds-legal-view-toggle > .e-con-inner { display: flex !important; flex-direction: row !important; gap: 6px; }
.pds-legal-view-toggle:has(> .e-con-inner) { display: block !important; }
.pds-legal-view-btn {
	width: 36px !important;
	height: 36px !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	border-radius: 50%;
	border: none;
	background: transparent;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	color: var(--pds-muted);
}
.pds-legal-view-btn svg { width: 16px; height: 16px; }
.pds-legal-view-btn .elementor-icon i { font-size: 16px !important; width: 16px; }
.pds-legal-view-btn.is-active { background: var(--pds-navy); color: var(--pds-white); }

.pds-legal-panel { display: none; }
.pds-legal-panel.is-active { display: block; }
.pds-legal-cards,
.pds-legal-cards > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px;
}
.pds-legal-cards:has(> .e-con-inner) {
	display: block !important;
}
.pds-legal-card {
	padding: 26px 24px;
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius);
	background: var(--pds-white);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pds-legal-card-icon {
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50%;
	background: var(--pds-surface);
	margin-bottom: 14px;
}
.pds-legal-card-icon svg { width: 24px; height: 24px; color: var(--pds-navy); }
.pds-legal-card-icon .elementor-icon i { font-size: 24px !important; width: 24px; color: var(--pds-navy); }
.pds-legal-card-icon,
.pds-legal-card-icon > .e-con-inner,
.pds-legal-card-icon .elementor-widget-image,
.pds-legal-card-icon .elementor-widget-container {
	overflow: hidden;
}
.pds-legal-card-icon .elementor-widget-image,
.pds-legal-card-icon .elementor-widget-container {
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.pds-legal-card-icon img { max-width: 36px !important; max-height: 36px !important; width: auto !important; height: auto !important; object-fit: contain; }
.pds-legal-card-meta {
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pds-gold);
}
.pds-legal-card h3 { font-size: 17px !important; margin: 6px 0 6px; }
.pds-legal-card p { font-size: 14px !important; margin-bottom: 16px; }
.pds-legal-card-btn { align-self: flex-start; margin-top: auto; }

.pds-legal-cards.is-list,
.pds-legal-cards.is-list > .e-con-inner {
	grid-template-columns: 1fr !important;
}
.pds-legal-cards.is-list .pds-legal-card,
.pds-legal-cards.is-list .pds-legal-card > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 20px;
}
.pds-legal-cards.is-list .pds-legal-card-icon { margin-bottom: 0; flex: none; }
.pds-legal-cards.is-list .pds-legal-card-body { flex: 1; }
.pds-legal-cards.is-list .pds-legal-card h3 { margin-top: 0; }
.pds-legal-cards.is-list .pds-legal-card-btn { margin-top: 0; flex: none; }

/* ==========================================================================
   NEWS / category archive
   ========================================================================== */

/* Publications/Publikasi page — first section (featured grid) gets a dark
   navy backdrop instead of the default white/light section background. */
.pds-news-hero {
	background: var(--pds-navy);
}
.pds-news-hero h2 {
	color: var(--pds-white) !important;
}

/* Publications/Publikasi page — first section's 3-column layout: plain
   heading + excerpt text divided by vertical rules, no card/image, per
   the wireframe. */
.pds-news-columns,
.pds-news-columns > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 0;
}
.pds-news-columns:has(> .e-con-inner) {
	display: block !important;
}
.pds-news-column {
	padding: 0 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.pds-news-column:first-child { padding-left: 0; }
.pds-news-column:last-child { border-right: none; padding-right: 0; }
.pds-news-column-thumb {
	display: block !important;
	height: 160px !important;
	border-radius: var(--pds-radius-sm);
	background-size: cover;
	background-position: center;
	margin-bottom: 16px;
}
.pds-news-column h3 { margin: 0 0 12px; font-size: 17px !important; }
.pds-news-column h3 a { color: var(--pds-white) !important; text-decoration: none !important; }
.pds-news-column h3 a:hover { color: var(--pds-gold) !important; }
.pds-news-column p { color: rgba(255, 255, 255, 0.75) !important; margin: 0; font-size: 14px !important; }
@media (max-width: 767px) {
	.pds-news-columns,
	.pds-news-columns > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: 28px;
	}
	.pds-news-column {
		padding: 0 0 24px !important;
		border-right: none !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.pds-news-column:last-child { border-bottom: none; padding-bottom: 0 !important; }
}

/* .pds-news-grid is a plain <div> in category.php but an Elementor
   container on the News listing page — a container's real children sit
   inside its own .e-con-inner, so the grid must apply there too, with
   the outer element demoted back to block to avoid a double grid. */
.pds-news-grid,
.pds-news-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 26px;
}
.pds-news-grid:has(> .e-con-inner) {
	display: block !important;
}
.pds-news-card {
	border-radius: var(--pds-radius);
	overflow: hidden;
	background: var(--pds-white);
	box-shadow: var(--pds-shadow);
}
.pds-news-card-thumb {
	display: block !important;
	height: 200px !important;
	background-size: cover;
	background-position: center;
}
.pds-news-card-body { padding: 22px; }
.pds-news-card-date {
	display: block;
	font-size: 12px !important;
	color: var(--pds-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}
.pds-news-card-body h3 { font-size: 18px !important; margin-bottom: 8px; }
.pds-news-card-body h3 a { color: var(--pds-ink); text-decoration: none !important; }
.pds-news-card-body h3 a:hover { color: var(--pds-gold); }
.pds-news-card-link {
	font-size: 14px !important;
	font-weight: 700;
	color: var(--pds-navy);
	text-decoration: none !important;
	border-bottom: 2px solid var(--pds-gold);
	padding-bottom: 2px;
}
.pds-news-pagination { margin-top: 40px; text-align: center; }
/* Pagination links as pill buttons, matching the .pds-btn family — the
   frosted-glass gold look reads best over a photo/dark backdrop, so on
   this light section the current page uses a solid gold pill instead and
   other pages get a plain gold-outline pill. */
.pds-news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0 4px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--pds-border);
	color: var(--pds-ink);
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.pds-news-pagination .page-numbers:hover {
	border-color: var(--pds-gold);
	color: var(--pds-gold-dark);
	transform: translateY(-2px);
}
.pds-news-pagination .page-numbers.current {
	background: var(--pds-gold);
	border-color: var(--pds-gold);
	color: var(--pds-white);
}
.pds-news-pagination .page-numbers.dots {
	border: none;
	color: var(--pds-muted);
}
.pds-news-pagination .page-numbers.next,
.pds-news-pagination .page-numbers.prev {
	padding: 0 22px;
}
.pds-news-empty { text-align: center; padding: 60px 20px; }

/* NEWS — single article (single.php). No hero banner here — the theme's
   own default post title block is hidden below and replaced with this
   plain in-page header instead. */
body.single-post .site-main > .page-header {
	display: none;
}
.pds-article-shell { max-width: 820px; }
.pds-article-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--pds-gold-dark);
	text-decoration: none;
	margin-bottom: 32px;
}
.pds-article-back:hover { color: var(--pds-gold); }
.pds-article-kicker { display: block; margin-bottom: 12px; }
.pds-article-title {
	font-size: 38px !important;
	line-height: 1.25;
	margin-bottom: 14px !important;
}
.pds-article-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	color: var(--pds-muted);
	font-family: var(--pds-font-body);
	font-size: 14px;
}
.pds-article-cover-wrap { margin-bottom: 32px; }
.pds-article-cover {
	width: 100%;
	border-radius: var(--pds-radius);
	box-shadow: var(--pds-shadow);
}
.pds-article-content {
	font-family: var(--pds-font-body);
	color: var(--pds-body);
	font-size: 17px;
	line-height: 1.8;
}
.pds-article-content > *:first-child { margin-top: 0; }
.pds-article-content h1,
.pds-article-content h2,
.pds-article-content h3,
.pds-article-content h4 {
	font-family: var(--pds-font-heading);
	color: var(--pds-ink);
	line-height: 1.3;
	margin: 40px 0 16px;
}
.pds-article-content h1 { font-size: 32px !important; }
.pds-article-content h2 { font-size: 28px !important; }
.pds-article-content h3 { font-size: 22px !important; }
.pds-article-content p { margin: 0 0 22px; }
.pds-article-content ul,
.pds-article-content ol { margin: 0 0 22px; padding-left: 22px; }
.pds-article-content li { margin-bottom: 8px; }
.pds-article-content a { color: var(--pds-gold-dark); text-decoration: underline; }
.pds-article-content a:hover { color: var(--pds-gold); }
.pds-article-content img {
	border-radius: var(--pds-radius);
	box-shadow: var(--pds-shadow);
	margin: 8px 0 28px;
}
.pds-article-content blockquote {
	margin: 32px 0;
	padding: 20px 26px;
	border-left: 3px solid var(--pds-gold);
	background: var(--pds-surface-2);
	border-radius: 0 var(--pds-radius-sm) var(--pds-radius-sm) 0;
	font-style: italic;
	color: var(--pds-ink);
}
.pds-article-content figcaption {
	font-size: 13px !important;
	color: var(--pds-muted);
	margin-top: -20px;
	margin-bottom: 28px;
}

/* NEWS — related-posts slider (single.php) and the "Top News" slider on
   the News listing page. A plain scroll-snap track (no JS library)
   advanced by two arrow buttons. .pds-related-track/.pds-related-nav are
   plain <div>s in single.php but Elementor containers on the News page —
   a container's real children sit inside its own .e-con-inner, so the
   flex rules must apply there too, with the outer element demoted back
   to block to avoid double-wrapping. */
.pds-related-title { margin-bottom: 24px; }
.pds-related-slider { position: relative; }
.pds-related-track,
.pds-related-track > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	/* Elementor containers default to flex-direction:column — without this
	   the cards stack full-width instead of sitting in a horizontal row. */
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	margin: 0 -4px;
	/* Hide the scrollbar — navigation is via the arrow buttons below. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pds-related-track:has(> .e-con-inner) {
	display: block !important;
}
.pds-related-track::-webkit-scrollbar { display: none; }
.pds-related-card {
	flex: 0 0 300px !important;
	scroll-snap-align: start;
}
.pds-related-nav,
.pds-related-nav > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
}
.pds-related-nav:has(> .e-con-inner) {
	display: block !important;
}
/* These are real Elementor Button widgets (not plain <button> tags), so
   reset the widget's own default padding/size and restyle its inner
   .elementor-button anchor as a small round icon button. */
.pds-related-prev .elementor-button,
.pds-related-next .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--pds-border);
	background: var(--pds-white);
	color: var(--pds-ink);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pds-related-prev .elementor-button:hover,
.pds-related-next .elementor-button:hover {
	background: var(--pds-navy);
	border-color: var(--pds-navy);
	color: var(--pds-white);
}
@media (max-width: 767px) {
	.pds-related-card { flex-basis: 260px; }
}

/* NEWS listing page (Publications/Publikasi) reuses the existing
   .pds-news-card (category.php) and .pds-related-slider (single.php)
   components directly — see those definitions above. The Essential
   Addons "Magazine Grid" widget was tried here first but its own
   height/width handling proved unreliable across a few rounds of fixes,
   so the page now builds its cards from plain Elementor containers +
   heading widgets instead, styled with the same proven CSS. */

/* ==========================================================================
   Language switcher (built by pds-custom.js from the Polylang menu markup)
   ========================================================================== */

.pds-lang-switch { position: relative; list-style: none; }
.pds-lang-switch-trigger {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--pds-border);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	font-family: var(--pds-font-body);
	font-size: 13px !important;
	color: var(--pds-ink);
}
.pds-lang-switch-trigger img { width: 18px; height: auto; }
.pds-lang-code {
	font-weight: 700;
	letter-spacing: 0.04em;
}
.pds-lang-switch-list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 140px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--pds-white);
	border: 1px solid var(--pds-border);
	border-radius: var(--pds-radius-sm);
	box-shadow: var(--pds-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 200;
}
.pds-lang-switch.is-open .pds-lang-switch-list {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.pds-lang-switch-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--pds-radius-sm);
	color: var(--pds-ink);
	text-decoration: none;
	font-size: 13.5px !important;
}
.pds-lang-switch-list a:hover { background: var(--pds-surface); }

/* ==========================================================================
   Floating contact widget (optional — hidden unless present in markup)
   ========================================================================== */

.pds-float-contact {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 60;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.pds-float-contact.is-hidden {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.pds-elegant-grid,
	.pds-elegant-grid > .e-con-inner,
	.pds-elegant-grid.pds-elegant-grid-3,
	.pds-elegant-grid.pds-elegant-grid-3 > .e-con-inner,
	.pds-cert-grid,
	.pds-cert-grid > .e-con-inner,
	.pds-contact-grid,
	.pds-contact-grid > .e-con-inner,
	.pds-photo-grid,
	.pds-photo-grid > .e-con-inner,
	.pds-doc-grid,
	.pds-legal-cards,
	.pds-legal-cards > .e-con-inner,
	.pds-company-gallery,
	.pds-company-gallery > .e-con-inner,
	.pds-news-grid,
	.pds-page-metrics,
	.pds-page-metrics > .e-con-inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.pds-client-grid:not(:has(.pds-client-track)),
	.pds-client-grid:not(:has(.pds-client-track)) > .e-con-inner {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.pds-portfolio { grid-template-columns: 1fr; }
	.pds-portfolio-visual { min-height: 360px; }
	/* Below this width the org-chart tiers can wrap to multiple rows,
	   which would make the tree-branch lines cross incorrectly. */
	.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:before,
	.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:after {
		display: none;
	}
}

@media (max-width: 900px) {
	.pds-about-grid,
	.pds-about-grid > .e-con-inner,
	.pds-page-grid,
	.pds-page-grid > .e-con-inner,
	.pds-contact-mapform,
	.pds-contact-mapform > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
	.pds-about-media { order: -1; }
	#pds-hero-slider .tmpcoder-slider-sub-title * { font-size: 42px !important; }
	.pds-section-title, .pds-page-section h2 { font-size: 30px !important; }
}

@media (max-width: 767px) {
	.pds-section, .pds-page-section { padding: 60px 20px; }
	#pds-hero-slider .tmpcoder-advanced-slider,
	#pds-hero-slider .tmpcoder-slider-item { height: 640px; }
	.pds-contact-form-wrap .pds-form-row { flex-direction: column; gap: 0; }
	.pds-stats-grid,
	.pds-stats-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; }
	.pds-elegant-grid,
	.pds-elegant-grid > .e-con-inner,
	.pds-elegant-grid.pds-elegant-grid-3,
	.pds-elegant-grid.pds-elegant-grid-3 > .e-con-inner,
	.pds-cert-grid,
	.pds-cert-grid > .e-con-inner,
	.pds-contact-grid,
	.pds-contact-grid > .e-con-inner,
	.pds-photo-grid,
	.pds-photo-grid > .e-con-inner,
	.pds-doc-grid,
	.pds-legal-cards,
	.pds-legal-cards > .e-con-inner,
	.pds-company-gallery,
	.pds-company-gallery > .e-con-inner,
	.pds-news-grid,
	.pds-page-metrics,
	.pds-page-metrics > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
	.pds-client-grid:not(:has(.pds-client-track)),
	.pds-client-grid:not(:has(.pds-client-track)) > .e-con-inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.pds-showcase-card { flex: 0 0 260px; }
	.pds-showcase-nav { display: none; }
	.pds-orgchart-card { width: 150px; }
	/* Cards wrap to multiple rows at this width, which would make the
	   tree-branch lines cross incorrectly — fall back to a plain stack. */
	.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:before,
	.pds-orgchart-tier:not(.pds-orgchart-tier-1) .pds-orgchart-card:after {
		display: none;
	}
	.pds-legal-tabs { flex-direction: column; }
	.pds-legal-content-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.pds-cta-wrap { flex-direction: column; text-align: center; }
	.pds-cta-copy h2 { font-size: 26px !important; }
	.pds-page-hero { padding: 130px 20px 60px; }
	.pds-page-hero h1 { font-size: 32px !important; }
	.pds-timeline { padding-left: 46px; }
	.pds-timeline-marker { left: -46px; width: 36px; height: 36px; font-size: 12px !important; }
}

@media (max-width: 480px) {
	#pds-hero-slider .tmpcoder-slider-sub-title * { font-size: 32px !important; }
	#pds-hero-slider .tmpcoder-slider-btns { flex-direction: column; align-items: stretch; }
	.pds-btn { justify-content: center; }
	.pds-legal-cards.is-list .pds-legal-card { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   TOPBAR — social links + language switcher, sits above the main header
   ========================================================================== */

.pds-topbar {
	background: var(--pds-navy);
	color: rgba(255, 255, 255, 0.85);
}
.pds-topbar-inner {
	max-width: var(--tmpcoder-container-width, 1200px);
	margin: 0 auto;
	padding: 5px 12.5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.pds-topbar-social {
	display: flex;
	align-items: center;
	gap: 12px;
}
.pds-topbar-social a {
	display: flex;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s ease;
}
.pds-topbar-social a:hover { color: var(--pds-gold); }
.pds-topbar-social svg { width: 12px; height: 12px; }

.pds-topbar .pds-lang-switch-trigger {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	padding: 3px 10px;
	font-size: 11px !important;
}
.pds-topbar .pds-lang-switch-trigger img { width: 14px; }
.pds-topbar .pds-lang-switch-trigger:hover { border-color: var(--pds-gold); }
.pds-topbar .pds-lang-code { color: #fff; }

/* ==========================================================================
   FLOATING CONTACT WIDGET — phone / WhatsApp / email shortcuts
   ========================================================================== */

.pds-float-contact {
	position: fixed;
	right: 22px;
	bottom: 100px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.pds-float-contact.is-hidden {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}
.pds-float-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 10px 25px rgba(13, 31, 45, 0.3);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pds-float-btn:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 16px 32px rgba(13, 31, 45, 0.35);
}
.pds-float-btn svg { width: 22px; height: 22px; }
.pds-float-phone { background: var(--pds-navy); }
.pds-float-whatsapp { background: #25d366; }
.pds-float-email { background: var(--pds-gold); }

@media (max-width: 767px) {
	/* The header/footer's side padding is zeroed out globally (see the
	   full-bleed rule near the top of this file) so PDS's edge-to-edge
	   sections align with them on desktop — but on mobile that leaves the
	   topbar icons, logo, and menu toggle flush against the screen edge
	   with no breathing room. Restore a comfortable margin here only. */
	.pds-topbar-inner,
	.tmpcoder-site-header .site-header .header-inner,
	.tmpcoder-site-header .site-footer .footer-inner,
	.site-footer:not(.dynamic-footer) .footer-inner {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.pds-topbar-inner { padding-top: 4px; padding-bottom: 4px; }
	.pds-float-contact { right: 14px; bottom: 84px; }
	.pds-float-btn { width: 42px; height: 42px; }
	.pds-float-btn svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   SITE HEADER & NAVIGATION — refined look on top of the theme's default
   ========================================================================== */

body .tmpcoder-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--pds-white);
	box-shadow: 0 1px 0 rgba(13, 31, 45, 0.06), 0 12px 30px -18px rgba(13, 31, 45, 0.18);
}

/* The logo image has no intrinsic size cap in the current markup (the
   theme's own "logo width" customizer snippet targets a class this header
   no longer uses), so it was rendering at its full 258x258 natural size. */
body .tmpcoder-site-header .site-branding img {
	max-height: 52px;
	width: auto;
	max-width: 100%;
}

body .tmpcoder-site-header nav.site-navigation > ul.menu > li > a,
body .tmpcoder-site-header nav.site-navigation > div.menu > ul > li > a {
	font-family: var(--pds-font-body);
	font-weight: 600;
	font-size: 14px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pds-ink);
	transition: color 0.25s ease;
}
body .tmpcoder-site-header nav.site-navigation > ul.menu > li:hover > a,
body .tmpcoder-site-header nav.site-navigation > div.menu > ul > li:hover > a,
body .tmpcoder-site-header nav.site-navigation > ul.menu > li.current-menu-item > a,
body .tmpcoder-site-header nav.site-navigation > ul.menu > li.current_page_item > a {
	color: var(--pds-gold) !important;
}
/* Hover feedback lives entirely on the text — color shift + a subtle
   letter-spacing widen — no underline/bar element. */
body .tmpcoder-site-header nav.site-navigation > ul.menu > li > a > span,
body .tmpcoder-site-header nav.site-navigation > div.menu > ul > li > a > span {
	display: inline-block;
	transition: letter-spacing 0.25s ease;
}
body .tmpcoder-site-header nav.site-navigation > ul.menu > li:hover > a > span,
body .tmpcoder-site-header nav.site-navigation > ul.menu > li.current-menu-item > a > span,
body .tmpcoder-site-header nav.site-navigation > ul.menu > li.current_page_item > a > span {
	letter-spacing: 0.08em;
}

/* Dropdown submenus */
body .tmpcoder-site-header nav.site-navigation > ul.menu ul,
body .tmpcoder-site-header nav.site-navigation > div.menu > ul ul {
	border-top: none !important;
	border-radius: var(--pds-radius-sm);
	overflow: hidden;
	box-shadow: var(--pds-shadow-lg);
	padding: 6px;
	margin-top: 0;
}
body .tmpcoder-site-header nav.site-navigation > ul.menu ul li a,
body .tmpcoder-site-header nav.site-navigation > div.menu > ul ul li a {
	font-family: var(--pds-font-body);
	font-size: 13px !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
body .tmpcoder-site-header nav.site-navigation > ul.menu ul li:hover > a,
body .tmpcoder-site-header nav.site-navigation > div.menu > ul ul li:hover > a {
	background: var(--pds-surface-2);
	color: var(--pds-gold-dark) !important;
	padding-left: 20px;
}

/* Mobile menu panel */
body .tmpcoder-site-header .wp-mobile-toggle-wrap {
	border-radius: 999px;
	transition: background-color 0.2s ease;
}
body .tmpcoder-site-header nav.site-navigation ul.menu li a {
	font-family: var(--pds-font-body);
}

/* ==========================================================================
   UNIVERSAL CARD POLISH — consistent premium treatment across every card
   component site-wide (hover lift, softer shadow, gold accent on hover)
   ========================================================================== */

.pds-elegant-card,
.pds-cert-card,
.pds-orgchart-card,
.pds-doc-card,
.pds-legal-card,
.pds-client-card,
.pds-photo-card,
.pds-stat-box,
.pds-page-metric,
.pds-news-card {
	position: relative;
	border-radius: 16px;
	border-color: rgba(13, 31, 45, 0.08);
	box-shadow: 0 2px 10px rgba(13, 31, 45, 0.04);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
	overflow: hidden;
}
.pds-elegant-card:hover,
.pds-cert-card:hover,
.pds-orgchart-card:hover,
.pds-doc-card:hover,
.pds-legal-card:hover,
.pds-photo-card:hover,
.pds-news-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 28px 50px -20px rgba(13, 31, 45, 0.22);
	border-color: transparent;
}

/* Gold accent bar that sweeps in on hover for icon/content cards */
.pds-elegant-card:before,
.pds-doc-card:before,
.pds-legal-card:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--pds-gold), var(--pds-gold-dark));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}
.pds-elegant-card:hover:before,
.pds-doc-card:hover:before,
.pds-legal-card:hover:before {
	transform: scaleX(1);
}

/* Certification cards get a soft gold glow on hover instead of the
   top-bar sweep the other cards use. */
.pds-cert-card {
	overflow: visible;
}
.pds-cert-card:hover {
	box-shadow: 0 28px 50px -20px rgba(13, 31, 45, 0.22), 0 0 45px rgba(195, 154, 82, 0.4) !important;
}

.icon-wrap,
.pds-doc-icon,
.pds-legal-card-icon,
.pds-legal-tab-icon {
	box-shadow: inset 0 0 0 1px rgba(13, 31, 45, 0.06);
}

.pds-page-metric {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pds-page-metric:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px -16px rgba(13, 31, 45, 0.2);
}
.pds-stat-box:hover {
	transform: translateY(-4px);
}

.pds-photo-card {
	border: 1px solid rgba(13, 31, 45, 0.06);
}

/* Section titles get a small gold accent rule under the kicker */
.pds-section-kicker,
.pds-page-kicker,
.pds-kicker {
	position: relative;
	padding-left: 22px;
}
.pds-section-kicker:before,
.pds-page-kicker:before,
.pds-kicker:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--pds-gold);
	transform: translateY(-50%);
}
@media (max-width: 767px) {
	body .tmpcoder-site-header {
		position: relative;
	}
}

/* ==========================================================================
   FOOTER — our own bilingual PHP footer (see functions.php), replacing the
   Sastra add-on's Elementor footer template, which only ever rendered in
   English regardless of the active Polylang language.
   ========================================================================== */

.pds-site-footer {
	font-family: var(--pds-font-body);
}
.pds-footer-main {
	background: var(--pds-white);
	border-top: 1px solid rgba(13, 31, 45, 0.08);
	padding: 60px 0 50px;
}
.pds-footer-inner {
	max-width: var(--tmpcoder-container-width, 1200px);
	margin: 0 auto;
	padding: 0 15px;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
	gap: 40px;
}
.pds-footer-brand .custom-logo {
	max-height: 52px;
	width: auto;
	margin-bottom: 18px;
}
.pds-footer-brand p {
	color: var(--pds-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.pds-footer-social {
	display: flex;
	gap: 10px;
}
.pds-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pds-navy);
	color: var(--pds-white);
	transition: background-color 0.25s ease;
}
.pds-footer-social a:hover {
	background: var(--pds-gold);
}
.pds-footer-social svg {
	width: 15px;
	height: 15px;
}
.pds-footer-col h4,
.pds-footer-contact h4 {
	color: var(--pds-navy);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 14px;
	margin: 0 0 18px;
}
.pds-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pds-footer-col li {
	margin-bottom: 12px;
}
.pds-footer-col a {
	color: var(--pds-gold-dark);
	font-size: 14.5px;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.pds-footer-col a:hover {
	color: var(--pds-navy);
}
.pds-footer-contact p {
	color: var(--pds-body);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0 0 18px;
}
.pds-footer-contact p strong {
	color: var(--pds-navy);
	display: inline-block;
	margin-bottom: 4px;
}

.pds-footer-bottom {
	background: var(--pds-navy);
	padding: 5px 0;
}
.pds-footer-bottom-inner {
	max-width: var(--tmpcoder-container-width, 1200px);
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.pds-footer-bottom-contact,
.pds-footer-bottom-links {
	display: flex;
	align-items: center;
	gap: 22px;
}
.pds-footer-bottom a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.pds-footer-bottom a:hover {
	color: var(--pds-gold);
}
.pds-footer-bottom svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 900px) {
	.pds-footer-inner {
		grid-template-columns: 1fr 1fr;
		row-gap: 36px;
	}
}
@media (max-width: 600px) {
	.pds-footer-inner {
		grid-template-columns: 1fr;
	}
	.pds-footer-bottom-inner {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   ELEMENTOR WIDGET MARKUP — as pages are rebuilt with real Elementor widgets
   (Icon Box, Icon List, Counter, Image, Heading) instead of raw HTML blocks,
   those widgets render their own fixed class names (.elementor-icon-box-*,
   .elementor-icon-list-*, .elementor-counter-*). These rules give that
   markup the exact same look as the classic hand-written markup it
   replaces — same selectors' worth of styling, just also matching
   Elementor's own class names so both versions render identically while
   the site is converted page by page.
   ========================================================================== */

/* Icon Box → replaces .pds-elegant-card > .icon-wrap + h3 + p.pds-elegant-sub */
/* Icon Box defaults to centered content — the original design is left-aligned */
.pds-elegant-card .elementor-icon-box-wrapper {
	text-align: left !important;
	align-items: flex-start !important;
}
.pds-elegant-card .elementor-icon-box-icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pds-surface);
	color: var(--pds-navy);
	margin-bottom: 22px;
	transition: background-color 0.3s ease, color 0.3s ease;
	box-shadow: inset 0 0 0 1px rgba(13, 31, 45, 0.06);
}
.pds-elegant-card .elementor-icon-box-icon i {
	font-size: 28px;
}
.pds-elegant-card:hover .elementor-icon-box-icon {
	background: var(--pds-gold);
	color: var(--pds-white);
}
.pds-elegant-card .elementor-icon-box-title {
	font-size: 20px !important;
	margin-bottom: 8px;
}
.pds-elegant-card .elementor-icon-box-description {
	color: var(--pds-muted);
	font-size: 15px !important;
	margin-bottom: 0;
}
/* Dark "Our Direction" cards (#vision-mission) — extend the existing
   dark-navy overrides to Icon Box's own markup too. */
#vision-mission .elementor-icon-box-icon {
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--pds-gold) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
#vision-mission .pds-elegant-card:hover .elementor-icon-box-icon {
	background: rgba(195, 154, 82, 0.2);
	color: var(--pds-gold) !important;
}
#vision-mission .elementor-icon-box-title {
	color: var(--pds-white) !important;
}
#vision-mission .elementor-icon-box-description {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Icon List → replaces plain <ul class="pds-page-list"> bullet lists */
.pds-page-list .elementor-icon-list-items {
	margin-top: 18px;
}
.pds-page-list .elementor-icon-list-item {
	align-items: flex-start !important;
	color: var(--pds-body);
	font-size: 15px !important;
	margin-bottom: 12px !important;
}
/* A font-glyph circle doesn't render as a clean solid dot at tiny sizes,
   so draw the bullet as a plain CSS circle on the icon wrapper instead
   and hide the actual glyph. */
.pds-page-list .elementor-icon-list-icon {
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--pds-gold);
	overflow: hidden;
}
.pds-page-list .elementor-icon-list-icon i {
	font-size: 0;
}

/* Icon List → replaces the Mission checklist (.pds-elegant-list) */
.pds-elegant-list .elementor-icon-list-item {
	align-items: flex-start;
	font-size: 14.5px !important;
	color: var(--pds-body);
	margin-bottom: 10px !important;
}
.pds-elegant-list .elementor-icon-list-icon {
	flex: none;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pds-surface);
	margin-top: 1px;
}
.pds-elegant-list .elementor-icon-list-icon i {
	color: var(--pds-gold);
	font-size: 11px !important;
}
#vision-mission .elementor-icon-list-icon {
	background: rgba(195, 154, 82, 0.18) !important;
}
#vision-mission .elementor-icon-list-icon i {
	color: var(--pds-gold) !important;
}

/* Icon widget standing in for the plain .icon-wrap div (Mission card,
   "Our Expertise" cards, Contact cards). The widget's own container
   renders at a fixed height taller than the 60px circle, which breaks
   vertical centering — force it to shrink to content and re-center the
   whole chain down to the actual icon. */
.icon-wrap .elementor-widget-container,
.icon-wrap .elementor-icon-wrapper {
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.icon-wrap .elementor-icon {
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon-wrap .elementor-icon i,
.icon-wrap .elementor-icon svg {
	font-size: 28px !important;
	width: 28px;
	height: 28px;
}

/* Counter → replaces <strong>25+</strong><span>Years</span> stat boxes */
.pds-page-metric .elementor-counter {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	text-align: center;
}
.pds-page-metric .elementor-counter-number-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: baseline;
	justify-content: center;
	font-family: var(--pds-font-heading);
	font-size: 30px !important;
}
.pds-page-metric .elementor-counter-number-wrapper * {
	background: linear-gradient(135deg, var(--pds-navy) 35%, var(--pds-gold-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pds-page-metric .elementor-counter-title {
	display: block;
	font-size: 13px !important;
	color: var(--pds-muted);
	margin-top: 4px;
}

/* Org-chart card hover — clean lift with a subtle gold-accent border,
   scaled for a plain white profile card (overrides the generic
   universal-card-polish shadow above by source order). */
.pds-orgchart-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 36px -20px rgba(13, 31, 45, 0.25);
	border-color: rgba(195, 154, 82, 0.45);
}
/* The universal-card-polish block earlier sets overflow:hidden on every
   card type, incl. .pds-orgchart-card — that clips the tree-branch lines
   which intentionally poke out above the card. Override it back open. */
.pds-orgchart-card {
	overflow: visible;
}