/*
Theme Name: Backspace Lap Theme
Theme URI:
Author: Backspace Lap
Author URI:
Description: Minimal custom WordPress theme for Backspace Lap
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: backspace-lap-theme
*/


/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
	/* Global palette */
	--color-primary:     #1a1a2e;
	--color-accent:      #e94560;
	--color-accent-dark: #c73652;
	--color-white:       #ffffff;
	--color-light:       #f8f9fa;
	--color-muted:       #6c757d;
	--color-border:      #e0e0e0;
	--color-footer-bg:   #0f0f1a;
	--color-footer-text: #b0b3c1;

	/* Brand palette */
	--brand-green:       #01E381;
	--brand-green-dark:  #00c470;
	--brand-navy:        #122D40;
	--brand-black:       #000000;
	--brand-offwhite:    #FAF9F9;
	--brand-gray:        #F2F4F6;

	/* Typography */
	--font-headline: 'Lilita One', cursive;
	--font-body:     'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-base:     'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-size-sm:  0.875rem;
	--font-size-md:  1rem;
	--font-size-lg:  1.125rem;
	--font-size-xl:  1.375rem;
	--font-size-2xl: 1.75rem;
	--font-size-3xl: 2.25rem;
	--font-size-4xl: 3rem;

	/* Layout */
	--header-height:     72px;
	--header-height-mob: 60px;
	--transition:        0.25s ease;
	--radius:            6px;
	--radius-lg:         12px;
	--shadow-header:     0 2px 16px rgba(0, 0, 0, 0.08);
	--shadow-header-scrolled: 0 4px 24px rgba(0, 0, 0, 0.14);
	--shadow-card:       0 4px 20px rgba(0, 0, 0, 0.07);
	--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.12);

	--container-max: 1200px;
	--container-pad: 1.5rem;
	--section-py:    5rem;
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	color: var(--color-primary);
	background-color: var(--color-white);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headline);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.03em;
}

h1 { letter-spacing: 0.06em; }
h2 { letter-spacing: 0.04em; }
h3 { letter-spacing: 0.025em; }

/* Body copy: justified, comfortable line-height */
main p,
.hp-container p,
.feat-s-body p,
.pg-two-col__text p,
.vm-intro-body,
.vm-pillar-desc,
.vm-step-desc,
.vm-why-card p,
.palmoil-section-overview,
.ef-grid-intro,
.ef-card-desc,
.sm-card-desc {
	text-align: justify;
	line-height: 1.82;
	hyphens: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	list-style: none;
}

address {
	font-style: normal;
}

button {
	font-family: var(--font-body);
	cursor: pointer;
}


/* =============================================================================
   3. UTILITY
   ============================================================================= */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.stars {
	color: #f5a623;
	letter-spacing: 0.05em;
}


/* =============================================================================
   4. GLOBAL BUTTONS
   ============================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.5rem;
	border-radius: var(--radius);
	border: 2px solid transparent;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
	text-decoration: none;
}

.btn-primary {
	background-color: var(--brand-green);
	border-color:     var(--brand-green);
	color:            var(--brand-navy);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--brand-green-dark);
	border-color:     var(--brand-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(1, 227, 129, 0.35);
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: none;
}

.btn-outline {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

.btn-outline:hover,
.btn-outline:focus {
	background-color: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

.btn-lg {
	padding: 0.85rem 2.25rem;
	font-size: var(--font-size-lg);
}

.btn-full {
	width: 100%;
}

.btn-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 700;
	color: var(--brand-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: var(--font-size-md);
}

.btn-text-link:hover {
	color: var(--brand-green-dark);
}


/* =============================================================================
   4b. HEADER — Logo lockup
   ============================================================================= */

.logo-lockup {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.logo-text {
	font-family: 'Lilita One', cursive;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.logo-text-green { color: var(--brand-green); }
.logo-text-white { color: var(--color-white); }

/* =============================================================================
   5. HEADER — Base Layout (always transparent, dark glass on scroll)
   ============================================================================= */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	box-shadow: none;
	transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

/* Push header below WP admin bar when logged in */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

.site-header.scrolled {
	background: rgba(14, 32, 48, 0.93);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	gap: 1rem;
}


/* =============================================================================
   6. HEADER — Logo
   ============================================================================= */

.header-logo {
	flex-shrink: 0;
}

.header-logo a {
	display: flex;
	align-items: center;
}

.header-logo a:hover {
	text-decoration: none;
	opacity: 0.9;
}

.site-logo-img,
.header-logo .custom-logo {
	height: 60px;
	width: auto;
	object-fit: contain;
	mix-blend-mode: screen;
}


/* =============================================================================
   7. HEADER — Primary Navigation
   ============================================================================= */

.header-nav {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	padding-left: 0.75rem;
}

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

.nav-menu > li {
	position: relative;
}

/* Top-level links — Lilita One, white, same visual family as CTA */
.nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.05rem;
	font-family: 'Lilita One', cursive;
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.88);
	border-radius: var(--radius);
	transition: color 0.22s, background-color 0.22s;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus {
	color: var(--brand-green);
	background: rgba(255, 255, 255, 0.09);
	text-decoration: none;
}

/* Active — current page or parent of current */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-page-ancestor > a,
.nav-menu > li.current-menu-parent > a {
	color: var(--brand-green);
}
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current-page-ancestor > a::after,
.nav-menu > li.current-menu-parent > a::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 1.05rem;
	right: 1.05rem;
	height: 2px;
	background: var(--brand-green);
	border-radius: 2px;
}

/* Products parent cursor hint */
.menu-item-has-children > a {
	cursor: default;
}
.menu-item-has-children > a:hover {
	cursor: default;
}

/* Dropdown panel */
.nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 210px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
	border-top: 3px solid var(--brand-green);
	z-index: 200;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Show dropdown */
.menu-item-has-children.dropdown-open > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Sub-menu items */
.nav-menu .sub-menu li { position: relative; }

.nav-menu .sub-menu li > a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 1.25rem;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--brand-navy);
	transition: color 0.18s, background-color 0.18s, padding-left 0.18s;
	text-decoration: none;
	cursor: pointer;
}

.nav-menu .sub-menu li > a::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	min-width: 7px;
	background: var(--brand-green);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.18s;
	flex-shrink: 0;
}

.nav-menu .sub-menu li > a:hover {
	color: var(--brand-green);
	background: rgba(1, 227, 129, 0.07);
	padding-left: 1.5rem;
}
.nav-menu .sub-menu li > a:hover::before { opacity: 1; }

.nav-menu .sub-menu li:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


/* =============================================================================
   8. HEADER — CTA Button
   ============================================================================= */

.header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1.1rem;
	background-color: var(--brand-green);
	color: var(--brand-navy);
	font-family: 'Lilita One', cursive;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	border-radius: var(--radius);
	border: 2px solid var(--brand-green);
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
	white-space: nowrap;
}

.header-cta:hover,
.header-cta:focus {
	background-color: var(--brand-green-dark);
	border-color: var(--brand-green-dark);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(1, 227, 129, 0.4);
}

.header-cta:active {
	transform: translateY(0);
	box-shadow: none;
}


/* =============================================================================
   9. HEADER — Hamburger (Mobile)
   ============================================================================= */

.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: var(--radius);
	transition: background-color var(--transition);
}

.hamburger:hover {
	background-color: var(--color-light);
}

.hamburger-line {
	display: block;
	width: 22px;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =============================================================================
   10. MAIN CONTENT
   ============================================================================= */

.site-main {
	padding-block: 3rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}


/* =============================================================================
   11. FOOTER — Base
   ============================================================================= */

.site-footer {
	background-color: var(--color-footer-bg);
	color: var(--color-footer-text);
	font-size: var(--font-size-sm);
}


/* =============================================================================
   12. FOOTER TOP
   ============================================================================= */

.footer-top {
	padding: 3rem var(--container-pad) 2rem;
	max-width: var(--container-max);
	margin-inline: auto;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.footer-logo-img {
	height: 36px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.footer-tagline {
	font-size: var(--font-size-sm);
	color: var(--color-footer-text);
	max-width: 380px;
	line-height: 1.5;
}


/* =============================================================================
   13. FOOTER MIDDLE
   ============================================================================= */

.footer-middle {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 2.5rem var(--container-pad);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-col-title {
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-white);
	margin-bottom: 1rem;
}

.footer-menu li + li { margin-top: 0.5rem; }

.footer-menu a {
	color: var(--color-footer-text);
	transition: color var(--transition);
}

.footer-menu a:hover {
	color: var(--color-white);
	text-decoration: none;
}


/* =============================================================================
   14. FOOTER — Contact Column
   ============================================================================= */

.footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
}

.contact-icon {
	flex-shrink: 0;
	font-size: 0.9rem;
	margin-top: 0.1rem;
	color: var(--color-accent);
}

.footer-contact-list a {
	color: var(--color-footer-text);
	transition: color var(--transition);
}

.footer-contact-list a:hover {
	color: var(--color-white);
	text-decoration: none;
}


/* =============================================================================
   15. SOCIAL ICONS — Brand-colored circular badges
   ============================================================================= */

/* Base icon badge */
.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.social-icon svg {
	width: 22px;
	height: 22px;
	fill: #ffffff;
	flex-shrink: 0;
}

/* Small variant (hero) */
.social-icon.si-sm {
	width: 34px;
	height: 34px;
}

.social-icon.si-sm svg {
	width: 17px;
	height: 17px;
}

/* Hover: scale + subtle glow */
.social-icon:hover {
	transform: scale(1.14);
	text-decoration: none;
	opacity: 0.9;
}

.social-icon:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }

/* Platform brand backgrounds */
.sl-instagram {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.sl-tiktok {
	background: #010101;
}

.sl-youtube {
	background: #FF0000;
}

.sl-facebook {
	background: #1877F2;
}

.sl-x {
	background: #000000;
}

.sl-threads {
	background: #000000;
}

/* Snapchat: yellow bg, black icon */
.sl-snapchat {
	background: #FFFC00;
}

.sl-snapchat svg {
	fill: #000000;
}

/* Footer social row */
.footer-social {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

/* Hero social strip */
.hero-social {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2rem;
	flex-wrap: wrap;
	justify-content: center;
}

.hero-social-label {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.hero-social-icons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Footer logo lockup overrides (white "LAP" stays white on dark footer) */
.footer-logo-white {
	color: var(--color-white) !important;
}

.footer-logo-lockup .site-logo-img,
.footer-logo-lockup img {
	filter: none !important;
}

/* Keep legacy .social-link for any remaining occurrences */
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--color-footer-text);
	flex-shrink: 0;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.social-link:hover {
	background-color: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--brand-navy);
	text-decoration: none;
}

.social-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}


/* =============================================================================
   16. FOOTER BOTTOM BAR
   ============================================================================= */

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 1.25rem var(--container-pad);
}

.footer-copyright { color: var(--color-footer-text); }

.footer-copyright a {
	color: var(--color-white);
	font-weight: 500;
}

.footer-copyright a:hover {
	color: var(--brand-green);
	text-decoration: none;
}

.footer-bottom-nav {
	display: flex;
	gap: 1.25rem;
}

.footer-bottom-nav a {
	color: var(--color-footer-text);
	transition: color var(--transition);
}

.footer-bottom-nav a:hover {
	color: var(--color-white);
	text-decoration: none;
}


/* =============================================================================
   17. RESPONSIVE — Tablet (≤ 1024px)
   ============================================================================= */

@media (max-width: 1024px) {
	.footer-middle {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* =============================================================================
   18. RESPONSIVE — Mobile (≤ 768px)
   ============================================================================= */

@media (max-width: 959px) {
	.header-inner { height: var(--header-height-mob); }
	.hamburger    { display: flex; }

	.header-nav {
		display: none;
		position: absolute;
		top: var(--header-height-mob);
		left: 0;
		right: 0;
		background: rgba(14, 32, 48, 0.97);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
		padding: 0.5rem var(--container-pad) 1.25rem;
		border-top: 2px solid var(--brand-green);
		z-index: 999;
	}

	.header-nav.nav-open { display: block; }

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.nav-menu > li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}
	.nav-menu > li:last-child { border-bottom: none; }

	.nav-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.9rem 0.25rem;
		border-radius: 0;
		font-size: 1.1rem;
		width: 100%;
		color: rgba(255, 255, 255, 0.88);
	}
	.nav-menu > li > a:hover { background: none; color: var(--brand-green); }
	.nav-menu > li.current-menu-item > a::after,
	.nav-menu > li.current-page-ancestor > a::after { display: none; }

	/* Mobile dropdown */
	.nav-menu .sub-menu {
		position: static;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		box-shadow: none;
		border: none;
		border-top: none;
		border-radius: 0;
		padding: 0.25rem 0 0.75rem 1.25rem;
		background: transparent;
		display: none;
		transition: none;
	}

	.menu-item-has-children.dropdown-open > .sub-menu { display: block; }

	.nav-menu .sub-menu li { border-bottom: none; }

	.nav-menu .sub-menu li > a {
		padding: 0.6rem 0.5rem;
		color: rgba(255, 255, 255, 0.65);
		font-family: var(--font-body);
		font-size: 0.95rem;
		font-weight: 500;
	}
	.nav-menu .sub-menu li > a::before { background: var(--brand-green); }
	.nav-menu .sub-menu li > a:hover {
		color: var(--brand-green);
		padding-left: 0.9rem;
		background: none;
	}

	.cta-text { display: none; }
	.header-cta { padding: 0.5rem 0.75rem; }
}

@media (max-width: 768px) {
	.footer-middle {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-bottom-nav { justify-content: center; }
}


/* =============================================================================
   19. RESPONSIVE — Small Mobile (≤ 480px)
   ============================================================================= */

@media (max-width: 480px) {
	:root { --container-pad: 1rem; }
	.footer-top { padding-block: 2rem 1.5rem; }
}


/* =============================================================================
   20. HOMEPAGE — Shared Helpers
   ============================================================================= */

.homepage {
	overflow-x: hidden;
}

.hp-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Section background variants */
.hp-gray { background-color: var(--brand-gray); }

/* Section header block */
.section-header { margin-bottom: 3.5rem; }

.section-center {
	text-align: center;
}

.section-center h2 {
	font-size: var(--font-size-3xl);
	color: var(--brand-navy);
	max-width: 700px;
	margin-inline: auto;
}

.section-line {
	width: 60px;
	height: 4px;
	background: var(--brand-green);
	border-radius: 2px;
	margin: 1rem auto 1.25rem;
}

.section-sub {
	color: var(--color-muted);
	font-size: var(--font-size-lg);
	max-width: 580px;
	margin-inline: auto;
}

/* Eyebrow label */
.alt-eyebrow {
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand-green-dark);
	background-color: rgba(1, 227, 129, 0.1);
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	margin-bottom: 0.75rem;
}

.feat-eyebrow {
	color: var(--brand-navy);
	background-color: rgba(18, 45, 64, 0.08);
}

/* Alternating rows */
.alt-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	margin-bottom: 4rem;
}

.alt-row:last-of-type { margin-bottom: 0; }

.alt-row-rev { direction: rtl; }
.alt-row-rev > * { direction: ltr; }

.alt-media img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.alt-content h3 {
	font-size: var(--font-size-2xl);
	color: var(--brand-navy);
	margin-bottom: 1rem;
	margin-top: 0.5rem;
}

.alt-content p {
	color: var(--color-muted);
	margin-bottom: 1rem;
	line-height: 1.7;
}

.alt-content .btn {
	margin-top: 0.5rem;
}

/* Proof rating block (shared) */
.proof-rating-block {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.proof-rating-block .stars { font-size: 1.1rem; }
.proof-rating-block strong { font-size: var(--font-size-lg); }
.proof-rating-block span { color: var(--color-muted); }

/* Proof socials row */
.proof-socials,
.cta-socials {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}


/* =============================================================================
   21. HOMEPAGE — HERO SECTION (Full Viewport)
   ============================================================================= */

.hp-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	color: var(--color-white);
}

/* Slider container */
.hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Each slide */
.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	animation: none;
}

.hero-slide-active {
	opacity: 1;
	animation: kenburns 3s ease-out forwards;
}

@keyframes kenburns {
	from { transform: scale(1);    }
	to   { transform: scale(1.07); }
}

/* Dark overlay */
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		160deg,
		rgba(18, 45, 64, 0.72) 0%,
		rgba(18, 45, 64, 0.45) 55%,
		rgba(18, 45, 64, 0.75) 100%
	);
	z-index: 1;
}

/* Centered content area */
.hero-wrap {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: calc(var(--header-height) + 5rem);
	padding-bottom: 3rem;
}

.hero-body {
	max-width: 820px;
	text-align: center;
	margin: 0 auto;
}

/* Small top line */
.hero-eyeline {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--brand-green);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
	padding: 0.35rem 1rem;
	border: 1px solid rgba(1, 227, 129, 0.4);
	border-radius: 20px;
	background: rgba(1, 227, 129, 0.08);
}

/* Main headline — Lilita One */
.hero-h1 {
	font-family: 'Lilita One', cursive;
	font-weight: 400;
	font-size: clamp(2.4rem, 5vw, 4rem);
	color: var(--color-white);
	line-height: 1.12;
	margin-bottom: 1.25rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* Sub-headline — Nunito */
.hero-sub {
	font-family: var(--font-body);
	font-size: var(--font-size-xl);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.75;
	max-width: 640px;
	margin: 0 auto 2rem;
}

/* Trust badge */
.hero-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.08em;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(6px);
	padding: 0.5rem 1.25rem;
	border-radius: 30px;
	margin-bottom: 2rem;
}

.hero-trust-badge .stars { color: #f5a623; font-size: 0.9rem; }

/* CTA row */
.hero-ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* GET QUOTA NOW — Lilita One, green */
.btn-hero-main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 2.5rem;
	background-color: var(--brand-green);
	color: var(--brand-navy);
	font-family: 'Lilita One', cursive;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.05em;
	border-radius: var(--radius);
	border: 2px solid var(--brand-green);
	text-decoration: none;
	transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
	white-space: nowrap;
}

.btn-hero-main:hover,
.btn-hero-main:focus {
	background-color: var(--brand-green-dark);
	border-color: var(--brand-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(1, 227, 129, 0.45);
	text-decoration: none;
}

/* Ghost secondary button */
.btn-hero-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	border-bottom: 2px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 0.1rem;
	transition: color var(--transition), border-color var(--transition);
	text-decoration: none;
}

.btn-hero-ghost:hover {
	color: var(--brand-green);
	border-color: var(--brand-green);
	text-decoration: none;
}

/* =============================================================================
   21b. HOMEPAGE — PRODUCTS CAROUSEL
   ============================================================================= */

.hp-products {
	padding-block: var(--section-py);
	background: var(--brand-navy);
}

.hp-products .section-center h2 { color: var(--color-white); }
.hp-products .section-sub       { color: rgba(255, 255, 255, 0.65); }

/* Wide outer shell — breaks beyond hp-container's 1200px */
.prod-car-outer {
	width: calc(100% - 3rem);
	max-width: 1560px;
	margin-inline: auto;
	margin-top: 2.5rem;
}

/* Carousel wrapper — arrows on sides */
.prod-car-wrap {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* Overflow mask */
.prod-car-viewport {
	flex: 1;
	overflow: hidden;
	border-radius: 1rem;
}

/* Sliding track */
.prod-car-track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual card */
.prod-car-card {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 4rem;
	padding: 4rem 4.5rem;
	min-height: 520px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
}

/* Image box */
.prod-car-img {
	width: 420px;
	height: 420px;
	flex-shrink: 0;
	border-radius: var(--radius);
	overflow: hidden;
	border: 2px solid rgba(1, 227, 129, 0.25);
}

.prod-car-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Text info */
.prod-car-info {
	flex: 1;
}

.prod-car-tag {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-green);
	background: rgba(1, 227, 129, 0.12);
	border: 1px solid rgba(1, 227, 129, 0.3);
	padding: 0.25rem 0.85rem;
	border-radius: 20px;
	margin-bottom: 1rem;
}

.prod-car-info h3 {
	font-family: 'Lilita One', cursive;
	font-weight: 400;
	font-size: clamp(2rem, 3.5vw, 3rem);
	color: var(--color-white);
	margin-bottom: 1.25rem;
	line-height: 1.15;
}

.prod-car-info p {
	font-family: var(--font-body);
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.8;
	margin-bottom: 2rem;
	max-width: 560px;
}

.prod-car-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--brand-green);
	border-bottom: 2px solid rgba(1, 227, 129, 0.4);
	padding-bottom: 0.15rem;
	text-decoration: none;
	transition: color var(--transition), border-color var(--transition);
}

.prod-car-cta:hover {
	color: var(--color-white);
	border-color: var(--color-white);
	text-decoration: none;
}

/* Arrow buttons */
.prod-arrow {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid rgba(1, 227, 129, 0.45);
	background: rgba(1, 227, 129, 0.07);
	color: var(--brand-green);
	font-size: 1.35rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
	line-height: 1;
}

.prod-arrow:hover {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--brand-navy);
}

/* Dot indicators */
.prod-dots {
	display: flex;
	justify-content: center;
	gap: 0.65rem;
	margin-top: 2rem;
}

.prod-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	transition: background var(--transition), transform var(--transition);
}

.prod-dot-active {
	background: var(--brand-green);
	transform: scale(1.4);
}

/* Tablet: shrink image, keep horizontal */
@media (max-width: 1024px) {
	.prod-car-img {
		width: 320px;
		height: 320px;
	}

	.prod-car-card {
		gap: 2.5rem;
		padding: 3rem 2.5rem;
		min-height: 400px;
	}
}

/* Mobile: stack vertical */
@media (max-width: 768px) {
	.prod-car-card {
		flex-direction: column;
		padding: 2rem 1.5rem;
		gap: 1.75rem;
		min-height: unset;
	}

	.prod-car-img {
		width: 100%;
		height: 260px;
	}

	.prod-car-info p { max-width: 100%; }
}

@media (max-width: 480px) {
	.prod-car-wrap { gap: 0.5rem; }
	.prod-arrow    { width: 40px; height: 40px; font-size: 1.05rem; }
}


/* =============================================================================
   22. HOMEPAGE — TRANSFORMATION / STEPS
   ============================================================================= */

.hp-transform {
	padding-block: var(--section-py);
	background-color: var(--brand-navy);
}

.hp-transform .section-center h2 { color: var(--color-white); }
.hp-transform .section-sub { color: rgba(255, 255, 255, 0.65); }

.steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.step-card {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: 2.25rem 1.75rem;
	position: relative;
	transition: background-color var(--transition), transform var(--transition);
}

.step-card:hover {
	background-color: rgba(1, 227, 129, 0.06);
	transform: translateY(-4px);
}

.step-icon {
	width: 52px;
	height: 52px;
	background-color: rgba(1, 227, 129, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	color: var(--brand-green);
}

.step-icon svg {
	width: 26px;
	height: 26px;
}

.step-num {
	font-family: var(--font-headline);
	font-size: 3.5rem;
	color: rgba(1, 227, 129, 0.15);
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	line-height: 1;
}

.step-card h3 {
	font-size: var(--font-size-xl);
	color: var(--color-white);
	margin-bottom: 0.75rem;
}

.step-card p {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
}


/* =============================================================================
   23. HOMEPAGE — BENEFITS
   ============================================================================= */

.hp-benefits {
	padding-block: var(--section-py);
}


/* =============================================================================
   24. HOMEPAGE — FEATURES + PROOF BAR
   ============================================================================= */

.hp-features {
	padding-block: var(--section-py);
	background: var(--brand-gray);
}

/* Staggered feature cards */
.feat-stagger {
	display: flex;
	flex-direction: column;
	margin-top: 3.5rem;
	padding-bottom: 1rem;
}

/* Each row: horizontal — text one side, image other side, no card box */
.feat-s-card {
	width: 70%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 3.5rem;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.feat-s-left  { align-self: flex-start; }
.feat-s-right { align-self: flex-end; margin-top: 4rem; }

/* Text side — stretches to image height, content centered */
.feat-s-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
}

/* -------------------------------------------------------
   Feature 01 — Overlapping collage
   Back: tall portrait, far right, bleeds above heading
   Front: square, top aligns with heading, bottom aligns
          with last paragraph, overlaps back bottom-left
   ------------------------------------------------------- */
.feat-collage {
	position: relative;
	width: 46%;
	flex-shrink: 0;
	/* height = text column height via parent align-items:stretch */
}

/* Back image: tall portrait pushed to the far right,
   top bleeds ~60px above the card so it's above the heading */
.feat-col-back {
	position: absolute;
	top: -60px;
	right: 0;
	width: 58%;
	bottom: -10px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

/* Front image: square, top flush with card top (= heading level),
   spans full card height, overlaps back image bottom-left */
.feat-col-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 66%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background: transparent;
	border-radius: 10px;
	z-index: 2;
	display: block;
}

/* -------------------------------------------------------
   Feature 02 — Single tall transparent image
   Top aligns with Feature 02 header
   Bottom aligns with last text line
   ------------------------------------------------------- */
.feat-col-single {
	width: 44%;
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	align-items: stretch;
}

.feat-col-single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
	display: block;
}

/* Mobile */
@media (max-width: 700px) {
	.feat-collage,
	.feat-col-single { width: 100%; height: 280px; }
	.feat-col-back   { top: 0; bottom: 0; }
	.feat-col-front  { height: 100%; }
}

/* Front photo — bottom left, overlaps back photo */
.feat-img-front {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 70%;
	height: 58%;
	object-fit: contain;
	background: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 4px 24px rgba(18,45,64,0.15);
	z-index: 2;
}

.feat-tag {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-navy);
	background: rgba(18, 45, 64, 0.07);
	border: 1px solid rgba(18, 45, 64, 0.15);
	padding: 0.25rem 0.85rem;
	border-radius: 20px;
	margin-bottom: 1rem;
	align-self: flex-start;
}

.feat-s-body h3 {
	font-family: var(--font-headline);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	color: var(--brand-navy);
	margin-bottom: 1.1rem;
	line-height: 1.25;
}

.feat-s-body p {
	font-family: var(--font-body);
	font-size: 1.05rem;
	color: var(--color-text-muted);
	line-height: 1.8;
	margin-bottom: 0.85rem;
}

.feat-s-body p:last-of-type { margin-bottom: 1.75rem; }

/* Tablet: widen */
@media (max-width: 1100px) {
	.feat-s-card { width: 85%; }
}

/* Tablet */
@media (max-width: 1100px) {
	.feat-s-card { width: 88%; gap: 2.5rem; }
}

/* Mobile: stack vertical, full width */
@media (max-width: 700px) {
	.feat-s-card       { width: 100%; flex-direction: column; gap: 1.5rem; }
	.feat-s-right      { margin-top: 2rem; }
	.feat-s-img        { width: 100%; }
	.feat-s-right .feat-s-img { order: -1; }
}

.feat-proof-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 4rem;
	padding: 2rem 2.5rem;
	background-color: var(--brand-gray);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}


/* =============================================================================
   25. HOMEPAGE — WHAT'S INCLUDED
   ============================================================================= */

.hp-included {
	padding-block: var(--section-py);
}

.included-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.included-content h2 {
	font-size: var(--font-size-3xl);
	color: var(--brand-navy);
	margin-bottom: 0.75rem;
	margin-top: 0.5rem;
}

.included-lead {
	color: var(--color-muted);
	margin-bottom: 2rem;
	font-size: var(--font-size-lg);
}

.checklist {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 2.25rem;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.chk {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background-color: var(--brand-green);
	color: var(--brand-navy);
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 900;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.checklist div {
	font-size: var(--font-size-md);
	color: var(--color-primary);
	line-height: 1.6;
}

.checklist strong {
	color: var(--brand-navy);
}

.included-media img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}


/* =============================================================================
   26. HOMEPAGE — SOCIAL PROOF / TESTIMONIALS
   ============================================================================= */

.hp-proof {
	padding-block: var(--section-py);
}

/* Shared carousel button */
.car-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--color-border);
	background: var(--color-white);
	color: var(--brand-navy);
	font-size: 1.1rem;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.car-btn:hover {
	background-color: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--brand-navy);
}

/* Text testimonial carousel */
.tcarousel {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 3.5rem;
}

.tcar-wrap {
	flex: 1;
	overflow: hidden;
}

.tcar-track {
	display: flex;
	transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}

.t-card {
	flex: 0 0 100%;
	background-color: var(--brand-offwhite);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 2.25rem 2.5rem;
	box-shadow: var(--shadow-card);
}

.t-stars {
	color: #f5a623;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.t-quote {
	font-size: var(--font-size-lg);
	color: var(--brand-navy);
	font-style: italic;
	line-height: 1.75;
	margin-bottom: 1.5rem;
	border: none;
	padding: 0;
}

.t-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.t-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--brand-navy);
	color: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-headline);
	font-size: 1.2rem;
	flex-shrink: 0;
}

.t-author strong {
	display: block;
	color: var(--brand-navy);
	font-size: var(--font-size-md);
}

.t-author span {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

/* Video carousel */
.vcarousel { margin-bottom: 3.5rem; }

.vcar-title {
	font-size: var(--font-size-xl);
	color: var(--brand-navy);
	margin-bottom: 1.25rem;
}

.vcar-outer {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.vcar-wrap {
	flex: 1;
	overflow: hidden;
}

.vcar-track {
	display: flex;
	gap: 1.25rem;
	transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}

.v-card {
	flex: 0 0 calc(33.333% - 0.9rem);
}

.v-thumb {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.v-thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	transition: opacity var(--transition);
}

.play-btn svg { width: 60px; height: 60px; }

.play-btn:hover { opacity: 0.85; }

.v-name {
	margin-top: 0.6rem;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--brand-navy);
	text-align: center;
}

/* Proof bottom bar */
.proof-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 2rem 2.5rem;
	background-color: var(--brand-gray);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}


/* =============================================================================
   27. HOMEPAGE — COMPARISON TABLE
   ============================================================================= */

.hp-comparison {
	padding-block: var(--section-py);
}

.cmp-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 4rem;
	align-items: start;
}

.cmp-media img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.cmp-table-wrap { overflow-x: auto; }

.cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.cmp-table thead tr {
	background-color: var(--brand-navy);
	color: var(--color-white);
}

.cmp-table th {
	padding: 1rem 1.25rem;
	text-align: center;
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.03em;
}

.cmp-table th:first-child { text-align: left; }

.cmp-table td {
	padding: 0.9rem 1.25rem;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-white);
	color: var(--brand-navy);
}

.cmp-table td:first-child {
	text-align: left;
	font-weight: 500;
}

.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody tr:hover td { background-color: var(--brand-offwhite); }

/* Our column highlight */
.cmp-us {
	background-color: rgba(1, 227, 129, 0.08) !important;
}

.cmp-table thead .cmp-us {
	background-color: var(--brand-green) !important;
	color: var(--brand-navy) !important;
}

.cmp-win { color: var(--brand-green-dark); font-weight: 800; font-size: 1.1rem; }
.cmp-lose { color: #e94560; font-weight: 700; }
.cmp-partial { color: var(--color-muted); font-style: italic; }


/* =============================================================================
   28. HOMEPAGE — FAQ
   ============================================================================= */

.hp-faq {
	padding-block: var(--section-py);
}

.faq-grid {
	display: block;
	max-width: 720px;
	margin-inline: auto;
}

.faq-col h2 {
	font-size: var(--font-size-3xl);
	color: var(--brand-navy);
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

.faq-sub {
	color: var(--color-muted);
	margin-bottom: 2rem;
}

.faq-sub a {
	color: var(--brand-green-dark);
	text-decoration: underline;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--color-border);
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	background: none;
	border: none;
	text-align: left;
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--brand-navy);
	cursor: pointer;
	transition: color var(--transition);
}

.faq-q:hover { color: var(--brand-green-dark); }

.faq-open .faq-q { color: var(--brand-green-dark); }

.faq-ico {
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	flex-shrink: 0;
	color: var(--brand-green-dark);
	transition: transform var(--transition);
}

.faq-a {
	padding: 0 0 1.1rem;
}

.faq-a p {
	color: var(--color-muted);
	line-height: 1.7;
	font-size: var(--font-size-md);
}

/* FAQ image grid */
.faq-img-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 0.75rem;
}

.faq-img-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.faq-img-grid img:first-child {
	grid-column: 1 / -1;
}


/* =============================================================================
   29. HOMEPAGE — FINAL CTA BANNER + MULTI-STEP FORM
   ============================================================================= */

.hp-cta-banner {
	padding-block: var(--section-py);
	background-color: var(--brand-navy);
	color: var(--color-white);
}

.cta-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

/* Left copy */
.cta-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1.25rem;
}

.stars-light { color: #f5a623; }

.cta-copy h2 {
	font-size: var(--font-size-3xl);
	color: var(--color-white);
	margin-bottom: 1rem;
	line-height: 1.2;
}

.cta-copy p {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--font-size-lg);
	line-height: 1.7;
	margin-bottom: 2rem;
}

.cta-socials { margin-top: 0.5rem; }

/* Right form box */
.cta-form-box {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Progress indicator */
.msf-progress {
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}

.msf-dot {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-border);
	color: var(--color-muted);
	font-weight: 700;
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color var(--transition), color var(--transition);
}

.msf-dot-active {
	background-color: var(--brand-green);
	color: var(--brand-navy);
}

.msf-dot-done {
	background-color: var(--brand-navy);
	color: var(--color-white);
}

.msf-line {
	flex: 1;
	height: 3px;
	background-color: var(--color-border);
	transition: background-color var(--transition);
}

/* Form panels */
.msf-panel { display: none; }
.msf-panel-active { display: block; }

.msf-heading {
	font-size: var(--font-size-xl);
	color: var(--brand-navy);
	margin-bottom: 0.4rem;
}

.msf-hint {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin-bottom: 1.5rem;
}

/* Role cards */
.msf-cards {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.msf-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition);
}

.msf-card:hover {
	border-color: var(--brand-green);
	background-color: rgba(1, 227, 129, 0.04);
}

.msf-card input[type="radio"] {
	display: none;
}

.msf-card:has(input:checked) {
	border-color: var(--brand-green);
	background-color: rgba(1, 227, 129, 0.08);
}

.msf-card-icon { font-size: 1.5rem; flex-shrink: 0; }

.msf-card strong {
	display: block;
	font-size: var(--font-size-md);
	color: var(--brand-navy);
}

.msf-card span {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

/* Form fields */
.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.form-field label {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--brand-navy);
}

.form-field input,
.form-field select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	color: var(--brand-navy);
	background-color: var(--color-white);
	transition: border-color var(--transition);
	appearance: auto;
}

.form-field input:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--brand-green);
}

/* Nav row (back + next) */
.msf-nav-row {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.msf-nav-row .btn-outline {
	color: var(--brand-navy);
	border-color: var(--color-border);
}

/* Error message */
.msf-error {
	font-size: var(--font-size-sm);
	color: #e94560;
	margin-bottom: 0.75rem;
}

/* Success state */
.msf-success {
	text-align: center;
	padding: 1rem 0;
}

.success-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: var(--brand-green);
	color: var(--brand-navy);
	border-radius: 50%;
	font-size: 1.8rem;
	font-weight: 900;
	margin: 0 auto 1.25rem;
}

.msf-success h3 {
	font-size: var(--font-size-2xl);
	color: var(--brand-navy);
	margin-bottom: 0.75rem;
}

.msf-success p {
	color: var(--color-muted);
	line-height: 1.7;
}

/* .btn-outline on dark bg (CTA form back btn) */
.cta-form-box .btn-outline {
	color: var(--color-muted);
	border-color: var(--color-border);
}

.cta-form-box .btn-outline:hover {
	background-color: var(--color-light);
	color: var(--brand-navy);
}


/* =============================================================================
   30. HOMEPAGE — RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
	:root { --section-py: 4rem; }

	.hero-grid        { grid-template-columns: 1fr; gap: 2.5rem; }
	.hero-h1          { font-size: var(--font-size-2xl); }
	.steps-grid       { grid-template-columns: 1fr; gap: 1.5rem; }
	.included-grid    { grid-template-columns: 1fr; gap: 2.5rem; }
	.cmp-grid         { grid-template-columns: 1fr; }
	.cmp-media        { display: none; }
	.cta-inner        { grid-template-columns: 1fr; gap: 3rem; }

	.faq-grid {
		grid-template-columns: 1fr;
	}
	.faq-img-grid { display: none; }
}

@media (max-width: 768px) {
	:root { --section-py: 3rem; }

	.section-center h2 { font-size: var(--font-size-2xl); }

	.alt-row,
	.alt-row-rev {
		grid-template-columns: 1fr;
		direction: ltr;
		gap: 2rem;
	}

	.hero-thumbs { grid-template-columns: repeat(2, 1fr); }

	.feat-proof-bar,
	.proof-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.steps-grid { grid-template-columns: 1fr; }

	.tcarousel { gap: 0.5rem; }
	.t-card { padding: 1.5rem; }

	.cta-form-box { padding: 1.75rem 1.25rem; }
	.cta-inner { gap: 2.5rem; }
}

@media (max-width: 480px) {
	.hero-thumbs    { grid-template-columns: repeat(2, 1fr); }
	.hero-ctas      { flex-direction: column; align-items: stretch; }
	.hero-ctas .btn { text-align: center; }
	.msf-nav-row    { flex-direction: column; }

	.cmp-table { font-size: 0.8rem; }
	.cmp-table th,
	.cmp-table td { padding: 0.7rem 0.6rem; }
}

/* =============================================================================
   INNER PAGES — Shared components
   ============================================================================= */

/* Page hero — shorter than homepage */
.pg-hero {
	position: relative;
	background-color: var(--brand-navy);
	background-image: linear-gradient(135deg, #0d2233 0%, var(--brand-navy) 60%, #1a4a68 100%);
	color: var(--color-white);
	padding: calc(var(--header-height) + 5rem) 0 5rem;
	text-align: center;
	overflow: hidden;
}

.pg-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(1, 227, 129, 0.08) 0%, transparent 65%);
	pointer-events: none;
}

.pg-hero .hp-container { position: relative; z-index: 1; }

.pg-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.55);
	margin-bottom: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pg-breadcrumb a { color: var(--brand-green); text-decoration: none; }
.pg-breadcrumb a:hover { text-decoration: underline; }
.pg-breadcrumb span { color: rgba(255,255,255,0.35); }

.pg-hero-eyebrow {
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--brand-green);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.3rem 1rem;
	border: 1px solid rgba(1, 227, 129, 0.35);
	border-radius: 20px;
	background: rgba(1, 227, 129, 0.08);
	margin-bottom: 1.25rem;
}

.pg-hero-title {
	font-family: var(--font-headline);
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 1rem;
}

.pg-hero-sub {
	font-size: var(--font-size-xl);
	color: rgba(255,255,255,0.75);
	max-width: 600px;
	margin: 0 auto 2rem;
	line-height: 1.7;
}

/* Page section wrapper */
.pg-section {
	padding: 5.5rem 0;
}

/* First section on pages without a hero — clears fixed navbar */
.pg-section--page-top {
	padding-top: calc(var(--header-height) + 3.5rem);
}

.pg-section.pg-light { background: var(--brand-offwhite); }
.pg-section.pg-gray  { background: var(--brand-gray); }
.pg-section.pg-dark  { background: var(--brand-navy); color: var(--color-white); }

/* Section label above headings */
.pg-label {
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand-green);
	margin-bottom: 0.75rem;
}

.pg-title {
	font-family: var(--font-headline);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 700;
	color: var(--brand-navy);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.pg-section.pg-dark .pg-title { color: var(--color-white); }

.pg-sub {
	font-size: var(--font-size-lg);
	color: var(--color-muted);
	line-height: 1.75;
	max-width: 640px;
}

.pg-section.pg-dark .pg-sub { color: rgba(255,255,255,0.65); }

/* Divider accent */
.pg-divider {
	width: 48px;
	height: 4px;
	background: var(--brand-green);
	border-radius: 2px;
	margin: 1rem 0 2rem;
}

/* 2-col layout */
.pg-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.pg-two-col.pg-flip { }

/* Card grid */
.pg-card-grid {
	display: grid;
	gap: 1.75rem;
}

.pg-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pg-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pg-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Generic pg-card */
.pg-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: var(--shadow-card);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pg-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

.pg-card-icon {
	width: 52px;
	height: 52px;
	background: rgba(1, 227, 129, 0.12);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	font-size: 1.5rem;
}

.pg-card-title {
	font-family: var(--font-headline);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--brand-navy);
	margin-bottom: 0.6rem;
}

.pg-card-body {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.7;
}

/* Stat bar */
.pg-stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	background: var(--brand-navy);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.pg-stat-item {
	padding: 2.5rem 1.5rem;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,0.1);
}

.pg-stat-item:last-child { border-right: none; }

.pg-stat-num {
	font-family: var(--font-headline);
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--brand-green);
	line-height: 1;
	margin-bottom: 0.4rem;
}

.pg-stat-label {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.65);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* =============================================================================
   COMPANY OVERVIEW PAGE
   ============================================================================= */

/* Shared intro paragraph */
.pg-body-lead {
	font-size: var(--font-size-xl);
	font-weight: 600;
	color: var(--brand-navy);
	line-height: 1.5;
	margin-bottom: 1rem;
}

/* Section-level intro (used under h2 before grid) */
.pg-section-intro {
	font-size: var(--font-size-lg);
	color: var(--color-muted);
	max-width: 680px;
	margin: 0 auto 3rem;
	line-height: 1.7;
	text-align: center;
}
.pg-section-intro--light {
	color: rgba(255,255,255,0.75);
}

/* Centered section variant */
.pg-section--centered .pg-section-title,
.pg-section--centered .pg-label {
	text-align: center;
}

/* Wide text column (70/30 split) */
.pg-two-col--wide-text {
	grid-template-columns: 1fr auto;
	align-items: center;
}

/* Visual on left */
.pg-two-col__visual--left {
	order: -1;
}

/* 7+ years badge — premium gold */
.company-who-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 45%, #B38728 100%);
	color: #122D40;
	text-align: center;
	box-shadow: 0 8px 40px rgba(212,175,55,0.42), 0 2px 8px rgba(212,175,55,0.2);
	border: 2px solid rgba(212,175,55,0.6);
}
.company-who-years {
	font-family: var(--font-headline);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
}
.company-who-label {
	font-weight: 700;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 0.25rem;
}
.company-who-sub {
	font-size: 0.75rem;
	opacity: 0.8;
	margin-top: 0.15rem;
}

/* Globe visual */
.company-globe-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

/* Market tags */
.company-markets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.5rem;
}
.company-market-tag {
	background: var(--brand-green);
	color: var(--brand-navy);
	font-size: var(--font-size-sm);
	font-weight: 700;
	padding: 0.4rem 1rem;
	border-radius: 20px;
	letter-spacing: 0.04em;
}

/* Mission / vision boxes */
.company-value-icon {
	display: flex;
	margin-bottom: 0.75rem;
	color: var(--brand-green);
}

.company-mission-box {
	border-radius: var(--radius-lg);
	padding: 2.5rem;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.company-mission-box--green {
	background: linear-gradient(135deg, var(--brand-green) 0%, #00c87a 100%);
	color: var(--brand-navy);
}
.company-mission-box--green .company-mission-icon { color: var(--brand-navy); }
.company-mission-box--green .company-mission-title { color: var(--brand-navy); }
.company-mission-box--green p { color: var(--brand-navy); opacity: 0.85; }

.company-mission-box--navy {
	background: linear-gradient(135deg, var(--brand-navy) 0%, #1a4a68 100%);
	border: 2px solid var(--brand-green);
}
.company-mission-box--navy .company-mission-icon { color: var(--brand-green); }
.company-mission-box--navy .company-mission-title { color: var(--color-white); }
.company-mission-box--navy p { color: rgba(255,255,255,0.82); }

.company-mission-icon { display: flex; }
.company-mission-title {
	font-family: var(--font-headline);
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0;
}

/* Quality policy card variant */
.pg-card--quality {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(1,227,129,0.2);
	color: var(--color-white);
}
.pg-card--quality .pg-card-title { color: var(--brand-green); }
.pg-card--quality .pg-card-text  { color: rgba(255,255,255,0.75); }
.pg-card--quality .company-value-icon { color: var(--brand-green); }
.pg-card--quality:hover { border-color: var(--brand-green); }

/* Code of conduct */
.company-conduct {
	text-align: center;
}
.company-conduct-pillars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2rem;
	margin-top: 2rem;
}
.company-conduct-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--font-size-lg);
	color: var(--brand-navy);
}
.company-conduct-dot {
	width: 10px;
	height: 10px;
	min-width: 10px;
	background: var(--brand-green);
	border-radius: 50%;
	display: inline-block;
}

/* =============================================================================
   PRODUCTS PAGE
   ============================================================================= */

.prod-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.prod-cat-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.prod-cat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0,0,0,0.14);
}

.prod-cat-img {
	height: 220px;
	overflow: hidden;
	background: var(--brand-gray);
	display: flex;
	align-items: center;
	justify-content: center;
}

.prod-cat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.prod-cat-card:hover .prod-cat-img img {
	transform: scale(1.05);
}

.prod-cat-img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--brand-navy) 0%, #1a4a68 100%);
	font-size: 4rem;
}

.prod-cat-body {
	padding: 1.75rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.prod-cat-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--brand-green);
	background: rgba(1,227,129,0.1);
	padding: 0.2rem 0.7rem;
	border-radius: 12px;
	margin-bottom: 0.75rem;
}

.prod-cat-title {
	font-family: var(--font-headline);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--brand-navy);
	margin-bottom: 0.75rem;
	line-height: 1.2;
}

.prod-cat-desc {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.7;
	flex: 1;
	margin-bottom: 1.25rem;
}

.prod-cat-features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.5rem;
}

.prod-cat-feature {
	font-size: 0.78rem;
	color: var(--brand-navy);
	background: var(--brand-gray);
	padding: 0.2rem 0.65rem;
	border-radius: 10px;
	font-weight: 600;
}

.prod-cat-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--brand-navy);
	font-weight: 700;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: color var(--transition), gap var(--transition);
}

.prod-cat-link:hover { color: var(--brand-green); gap: 0.7rem; }

.prod-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	counter-reset: process-step;
}

.prod-process-step {
	text-align: center;
	position: relative;
}

.prod-process-step::before {
	counter-increment: process-step;
	content: counter(process-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--brand-green);
	color: var(--brand-navy);
	font-family: var(--font-headline);
	font-size: 1.3rem;
	font-weight: 700;
	border-radius: 50%;
	margin: 0 auto 1rem;
}

.prod-process-step h4 {
	font-family: var(--font-headline);
	font-size: 1.05rem;
	color: var(--brand-navy);
	margin-bottom: 0.4rem;
}

.prod-process-step p {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.6;
}

/* =============================================================================
   VISIT MALAYSIA PAGE
   ============================================================================= */

.malaysia-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(18,45,64,0.82) 0%, rgba(18,45,64,0.55) 60%, rgba(18,45,64,0.78) 100%);
}

.malaysia-highlight-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.malaysia-highlight-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-lg);
	padding: 2rem;
	text-align: center;
	transition: background 0.25s, border-color 0.25s;
}

.malaysia-highlight-card:hover {
	background: rgba(1,227,129,0.08);
	border-color: rgba(1,227,129,0.3);
}

.malaysia-highlight-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }

.malaysia-highlight-title {
	font-family: var(--font-headline);
	font-size: 1.1rem;
	color: var(--color-white);
	margin-bottom: 0.5rem;
}

.malaysia-highlight-body {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.6);
	line-height: 1.6;
}

.malaysia-experience-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.malaysia-experience-item {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.malaysia-exp-num {
	font-family: var(--font-headline);
	font-size: 3rem;
	font-weight: 700;
	color: var(--brand-green);
	line-height: 1;
	min-width: 60px;
	opacity: 0.9;
}

.malaysia-exp-body h4 {
	font-family: var(--font-headline);
	font-size: 1.1rem;
	color: var(--brand-navy);
	margin-bottom: 0.4rem;
}

.malaysia-exp-body p {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.6;
}

.malaysia-visit-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	counter-reset: visit-step;
}

.malaysia-visit-step {
	text-align: center;
	position: relative;
}

.malaysia-visit-step-num {
	counter-increment: visit-step;
	width: 60px;
	height: 60px;
	background: var(--brand-green);
	color: var(--brand-navy);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-headline);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 auto 1.25rem;
}

.malaysia-visit-step h4 {
	font-family: var(--font-headline);
	font-size: 1.1rem;
	color: var(--color-white);
	margin-bottom: 0.5rem;
}

.malaysia-visit-step p {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.6);
	line-height: 1.6;
}

/* Connector line between steps */
.malaysia-visit-step + .malaysia-visit-step::before {
	display: none;
}

/* =============================================================================
   PRODUCTS PAGE — SPLIT LAYOUT
   ============================================================================= */

/* Hero */
.prod-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: 5rem;
	min-height: 540px;
	display: flex;
	align-items: center;
}

.prod-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://picsum.photos/seed/mypalmhero/1600/900');
	background-size: cover;
	background-position: center;
}

.prod-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(18,45,64,0.93) 0%, rgba(18,45,64,0.72) 55%, rgba(18,45,64,0.88) 100%);
}

.prod-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.prod-hero-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	color: var(--color-white);
	margin-bottom: 1rem;
}

.prod-hero-lead {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.82);
	line-height: 1.75;
	margin-bottom: 2rem;
}

.prod-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.prod-hero-badges span {
	background: rgba(1,227,129,0.12);
	border: 1px solid rgba(1,227,129,0.35);
	color: var(--brand-green);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.85rem;
	border-radius: 2rem;
}

/* Brands marquee */
.prod-brands-bar {
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
	padding: 1.1rem 0;
}

.prod-brands-track {
	display: flex;
	align-items: center;
	gap: 3rem;
	width: max-content;
	animation: brands-scroll 40s linear infinite;
}

.prod-brands-bar:hover .prod-brands-track {
	animation-play-state: paused;
}

@keyframes brands-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.prod-brand-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.prod-brand-item img {
	height: 70px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	filter: none;
	transition: opacity 0.25s;
	opacity: 0.9;
}

.prod-brand-item img:hover {
	opacity: 1;
}

/* Product images marquee */
.prod-img-marquee {
	overflow: hidden;
	background: var(--brand-navy);
	padding: 0;
	line-height: 0;
}

.prod-img-track {
	display: flex;
	width: max-content;
	animation: brands-scroll 35s linear infinite;
}

.prod-img-marquee:hover .prod-img-track {
	animation-play-state: paused;
}

.prod-img-slide {
	flex-shrink: 0;
	width: 320px;
	height: 220px;
	overflow: hidden;
}

.prod-img-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.prod-img-slide:hover img {
	transform: scale(1.05);
}

/* Split sections */
.prod-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 580px;
}

.prod-split--rev {
	direction: rtl;
}

.prod-split--rev > * {
	direction: ltr;
}

.prod-split-visual {
	background-size: cover;
	background-position: center;
}

.prod-split-visual--bulk {
	background-image: url('img/products/123.png');
	background-position: center center;
}

.prod-split-visual--packed {
	background-image: url('img/products/nnn.png');
	background-position: center center;
}

.prod-split-body {
	padding: 4rem 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--color-white);
}

.prod-split-body--alt {
	background: var(--brand-gray);
}

.prod-split-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	color: var(--brand-navy);
	margin: 0.6rem 0 0.75rem;
}

.prod-split-desc {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.7;
	margin-bottom: 1.75rem;
}

/* Product name list */
.prod-name-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.prod-name-list li {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--brand-navy);
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(18,45,64,0.07);
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.prod-name-list li::before {
	content: '›';
	color: var(--brand-green);
	font-weight: 900;
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
}

.prod-abbr {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--color-muted);
}

.prod-split-cta {
	display: inline-flex;
	align-items: center;
	background: var(--brand-navy);
	color: var(--color-white);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.7rem 1.5rem;
	border-radius: var(--radius-md);
	text-decoration: none;
	width: fit-content;
	transition: background 0.2s, color 0.2s;
}

.prod-split-cta:hover {
	background: var(--brand-green);
	color: var(--brand-navy);
}

/* =============================================================================
   PRODUCTS PORTAL — 3 CATEGORY CARDS
   ============================================================================= */

.portal-intro {
	padding-bottom: 3.5rem;
}

.portal-intro-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--brand-navy);
	margin-bottom: 1rem;
}

.portal-intro-lead {
	font-size: var(--font-size-lg);
	color: var(--color-muted);
	max-width: 700px;
	line-height: 1.75;
	margin-bottom: 1.5rem;
}

.portal-intro-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.portal-intro-attrs span {
	background: rgba(18,45,64,0.07);
	border: 1px solid rgba(18,45,64,0.15);
	color: var(--brand-navy);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.85rem;
	border-radius: 2rem;
}

.portal-cards-section { padding: 4rem 0 5rem; }

.portal-card-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

.portal-card {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
	            box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),
	            border-color 0.25s;
	background: var(--color-white);
}

.portal-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(18,45,64,0.12);
	border-color: var(--brand-green);
}

.portal-card-visual {
	height: 220px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.portal-card-visual--palmoil {
	background-image: url('img/products/palm-oil-price-malaysia-global-market.jpg');
}

.portal-card-visual--edible {
	background-image: url('img/products/palm-oil-specialty-fats-price-global-food-industry.jpg');
	filter: grayscale(0.4);
}

.portal-card-visual--solid {
	background-image: url('img/products/1.png');
	filter: grayscale(0.4);
}

.portal-card--coming .portal-card-visual {
	opacity: 0.7;
}

.portal-card-body {
	padding: 1.75rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex-grow: 1;
}

.portal-card-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.22rem 0.7rem;
	border-radius: 2rem;
	width: fit-content;
}

.portal-card-badge--active {
	background: rgba(1,227,129,0.15);
	color: #007a44;
	border: 1px solid rgba(1,227,129,0.4);
}

.portal-card-badge--soon {
	background: rgba(251,191,36,0.12);
	color: #92600a;
	border: 1px solid rgba(251,191,36,0.4);
}

.portal-card-title {
	font-family: 'Lilita One', cursive;
	font-size: 1.45rem;
	color: var(--brand-navy);
	margin: 0;
}

.portal-card-desc {
	font-size: 0.875rem;
	color: var(--color-muted);
	line-height: 1.65;
	margin: 0;
	flex-grow: 1;
}

.portal-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.portal-card-tags span {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--brand-navy);
	background: rgba(18,45,64,0.06);
	padding: 0.2rem 0.6rem;
	border-radius: 1rem;
}

.portal-card-cta {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--brand-navy);
	letter-spacing: 0.02em;
	margin-top: 0.25rem;
	transition: color 0.2s;
}

.portal-card:hover .portal-card-cta { color: var(--brand-green); }

/* =============================================================================
   PALM OIL SUB-PAGE
   ============================================================================= */

.palmoil-intro-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	color: var(--brand-navy);
	margin-bottom: 1rem;
}

.palmoil-intro-lead {
	font-size: var(--font-size-lg);
	color: var(--color-muted);
	max-width: 720px;
	line-height: 1.75;
	margin-bottom: 1.5rem;
}

.palmoil-mp-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	font-size: 0.82rem;
	color: var(--color-muted);
}

.palmoil-mp-legend strong {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--brand-navy);
}

/* Melting point badges (restored) */
.mp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.22rem 0.62rem;
	border-radius: 2rem;
	white-space: nowrap;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.mp-liquid {
	background: rgba(37,99,235,0.08);
	border: 1px solid rgba(37,99,235,0.3);
	color: #1d4ed8;
}

.mp-semi {
	background: rgba(217,119,6,0.09);
	border: 1px solid rgba(217,119,6,0.3);
	color: #b45309;
}

.mp-solid {
	background: rgba(185,28,28,0.08);
	border: 1px solid rgba(185,28,28,0.25);
	color: #b91c1c;
}

.mp-na {
	background: rgba(0,0,0,0.05);
	border: 1px solid rgba(0,0,0,0.12);
	color: #6b7280;
}

/* Dark-section badge overrides */
.palmoil-section--bulk .mp-liquid { background: rgba(59,130,246,0.1); color: #3b82f6; border-color: rgba(59,130,246,0.35); }
.palmoil-section--bulk .mp-semi   { background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.35); }

/* Section header */
.palmoil-section { padding: 4.5rem 0; }

.palmoil-section-hdr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: 3rem;
}

.palmoil-section-hdr--rev {
	direction: rtl;
}

.palmoil-section-hdr--rev > * { direction: ltr; }

.palmoil-section-hdr h2 {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--brand-navy);
	margin: 0.5rem 0 0.75rem;
}

.palmoil-section-overview {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.75;
	margin: 0;
}

.palmoil-section-img {
	border-radius: 12px;
	height: 280px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.palmoil-section-img--packed {
	background-image: url('img/products/3.png');
}

.palmoil-section-img--bulk {
	background-image: url('img/products/123.png');
}

/* Product card grid */
.palmoil-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.palmoil-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.palmoil-card:hover {
	border-color: var(--brand-green);
	box-shadow: 0 4px 18px rgba(1,227,129,0.1);
	transform: translateY(-2px);
}

.palmoil-section--bulk .palmoil-card {
	background: var(--color-white);
}

.palmoil-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.palmoil-card-name {
	font-family: 'Lilita One', cursive;
	font-size: 1rem;
	color: var(--brand-navy);
	margin: 0;
	line-height: 1.3;
	flex: 1;
}

.palmoil-card-abbr {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--color-muted);
	display: block;
}

.palmoil-card-use {
	font-size: 0.8rem;
	color: var(--color-muted);
	line-height: 1.55;
	margin: 0;
}

/* Byproducts block */
.palmoil-byproducts {
	margin-top: 3.5rem;
	border-top: 2px solid rgba(18,45,64,0.1);
	padding-top: 2.5rem;
}

.palmoil-byproducts-hdr {
	margin-bottom: 1.5rem;
}

.palmoil-byproducts-hdr h3 {
	font-family: 'Lilita One', cursive;
	font-size: 1.3rem;
	color: var(--brand-navy);
	margin-bottom: 0.4rem;
}

.palmoil-byproducts-hdr p {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

.palmoil-byproduct-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.palmoil-byproduct-item {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.palmoil-byproduct-item strong {
	font-size: 0.9rem;
	color: var(--brand-navy);
	display: block;
}

.palmoil-byproduct-item p {
	font-size: 0.78rem;
	color: var(--color-muted);
	line-height: 1.55;
	margin: 0;
}

/* =============================================================================
   COMING SOON PAGES
   ============================================================================= */

.coming-soon-section {
	min-height: calc(100vh - var(--header-height) - 160px);
	display: flex;
	align-items: center;
}

.coming-soon-inner {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	padding: 4rem 0;
}

.coming-soon-icon {
	margin-bottom: 1.5rem;
	opacity: 0.7;
}

.coming-soon-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	color: var(--brand-navy);
	margin-bottom: 1rem;
}

.coming-soon-lead {
	font-size: var(--font-size-lg);
	color: var(--color-muted);
	line-height: 1.75;
}

/* =============================================================================
   PALM OIL HERO
   ============================================================================= */

.palmoil-hero {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: center;
	padding-bottom: 4rem;
}

.palmoil-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('img/products/packed%20oil.png');
	background-size: cover;
	background-position: center;
}

.palmoil-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(18,45,64,0.91) 0%, rgba(18,45,64,0.68) 55%, rgba(18,45,64,0.85) 100%);
}

.palmoil-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.palmoil-hero-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--color-white);
	line-height: 1.15;
	margin-bottom: 1rem;
}

.palmoil-hero-lead {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.8);
	line-height: 1.75;
	margin-bottom: 1.75rem;
	max-width: 640px;
}

.palmoil-hero .pg-label,
.palmoil-hero .pg-label a {
	color: var(--brand-green);
	opacity: 1;
}

.palmoil-hero .palmoil-mp-legend {
	color: rgba(255,255,255,0.65);
}

.palmoil-hero .palmoil-mp-legend strong {
	color: rgba(255,255,255,0.8);
}

/* Dark bg overrides for badges inside hero */
.palmoil-hero .mp-liquid { background: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.4); }
.palmoil-hero .mp-semi   { background: rgba(251,191,36,0.13);  color: #fcd34d; border-color: rgba(251,191,36,0.4); }
.palmoil-hero .mp-solid  { background: rgba(239,68,68,0.13);   color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.palmoil-hero .mp-na     { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.2); }

/* =============================================================================
   ALL PAGES — DARK FIRST SECTION (matches homepage)
   ============================================================================= */

.pg-section--page-top,
.pg-section--page-top.pg-section--light,
.pg-section--page-top.pg-section--white {
	background: var(--brand-navy) !important;
}

.pg-section--page-top .pg-label,
.pg-section--page-top .pg-label a {
	color: var(--brand-green);
	opacity: 1;
}

.pg-section--page-top h1,
.pg-section--page-top h2,
.pg-section--page-top .pg-section-title,
.pg-section--page-top .portal-intro-title,
.pg-section--page-top .coming-soon-title {
	color: var(--color-white);
}

.pg-section--page-top p,
.pg-section--page-top .portal-intro-lead,
.pg-section--page-top .coming-soon-lead,
.pg-section--page-top .pg-section-intro,
.pg-section--page-top .pg-body-lead {
	color: rgba(255,255,255,0.72);
}

.pg-section--page-top .portal-intro-attrs span {
	background: rgba(1,227,129,0.12);
	border-color: rgba(1,227,129,0.35);
	color: var(--brand-green);
}

/* Company page — gold badge on dark bg keeps gold look */
.pg-section--page-top .company-who-badge {
	border-color: rgba(212,175,55,0.55);
}

.pg-section--page-top .company-who-years {
	color: #122D40;
}

/* Malaysia highlight cards on dark bg */
.pg-section--page-top .malaysia-highlight-card {
	background: rgba(255,255,255,0.05);
	border-color: rgba(255,255,255,0.1);
}

.pg-section--page-top .malaysia-highlight-title {
	color: var(--color-white);
}

.pg-section--page-top .malaysia-highlight-card p {
	color: rgba(255,255,255,0.6);
}

/* Nav dropdown gap bridge */
.menu-item-has-children {
	position: relative;
}

.menu-item-has-children::after {
	content: '';
	position: absolute;
	bottom: -12px;
	left: 0;
	right: 0;
	height: 12px;
	background: transparent;
}

/* Segment tag (reused from old design) */
.prod-seg-tag {
	display: inline-block;
	background: var(--brand-green);
	color: var(--brand-navy);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 2rem;
	margin-bottom: 0.5rem;
}

/* Placeholder comment for old catalog CSS removed — replaced by split layout */
.prod-intro { display: none; }

.prod-intro-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 5vw, 3rem);
	color: var(--color-white);
	margin-bottom: 1rem;
}

.prod-intro-lead {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.75);
	max-width: 720px;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.prod-intro-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.prod-intro-attr {
	background: rgba(1,227,129,0.12);
	border: 1px solid rgba(1,227,129,0.35);
	color: var(--brand-green);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.35rem 0.85rem;
	border-radius: 2rem;
	white-space: nowrap;
}

/* Melting point legend strip */
.prod-mp-legend {
	background: rgba(0,0,0,0.25);
	border-top: 1px solid rgba(255,255,255,0.08);
	margin-top: 2.5rem;
	padding: 0.9rem 0;
}

.prod-mp-legend-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	font-size: 0.82rem;
}

.prod-mp-legend strong {
	color: rgba(255,255,255,0.55);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-right: 0.25rem;
}

/* Melting point badges */
.mp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.65rem;
	border-radius: 2rem;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.mp-liquid {
	background: rgba(59,130,246,0.15);
	border: 1px solid rgba(59,130,246,0.4);
	color: #7dc9ff;
}

.mp-semi {
	background: rgba(251,191,36,0.13);
	border: 1px solid rgba(251,191,36,0.4);
	color: #fbbf24;
}

.mp-solid {
	background: rgba(239,68,68,0.12);
	border: 1px solid rgba(239,68,68,0.35);
	color: #f87171;
}

.mp-na {
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.18);
	color: rgba(255,255,255,0.5);
}

/* Light-section badge overrides (on white/light bg sections) */
.pg-section--light .mp-liquid,
.pg-section--white .mp-liquid { background: rgba(37,99,235,0.08); color: #1d4ed8; border-color: rgba(37,99,235,0.3); }
.pg-section--light .mp-semi,
.pg-section--white .mp-semi   { background: rgba(217,119,6,0.1);  color: #b45309; border-color: rgba(217,119,6,0.3); }
.pg-section--light .mp-solid,
.pg-section--white .mp-solid  { background: rgba(185,28,28,0.08); color: #b91c1c; border-color: rgba(185,28,28,0.25); }
.pg-section--light .mp-na,
.pg-section--white .mp-na     { background: rgba(0,0,0,0.06);     color: #6b7280; border-color: rgba(0,0,0,0.15); }

/* Segment sections */
.prod-segment {
	padding: 5rem 0;
}

.prod-segment-hdr {
	margin-bottom: 3rem;
	max-width: 640px;
}

.prod-seg-tag {
	display: inline-block;
	background: var(--brand-green);
	color: var(--brand-navy);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 2rem;
	margin-bottom: 0.75rem;
}

.prod-segment-hdr h2 {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	color: var(--brand-navy);
	margin-bottom: 0.75rem;
}

.prod-segment-hdr p {
	color: var(--color-muted);
	font-size: var(--font-size-md);
	line-height: 1.7;
}

/* Dark segment overrides */
.prod-segment--dark {
	background: var(--brand-navy);
}

.prod-segment--dark .prod-segment-hdr h2 {
	color: var(--color-white);
}

.prod-segment--dark .prod-segment-hdr p {
	color: rgba(255,255,255,0.6);
}

.prod-segment--dark .prod-seg-tag {
	background: rgba(1,227,129,0.15);
	color: var(--brand-green);
	border: 1px solid rgba(1,227,129,0.35);
}

/* Sub-block (B1, B2 groupings) */
.prod-subblock {
	margin-bottom: 3rem;
}

.prod-subblock:last-child { margin-bottom: 0; }

.prod-subblock-hdr {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid rgba(18,45,64,0.1);
}

.prod-subblock-hdr h3 {
	font-family: 'Lilita One', cursive;
	font-size: 1.15rem;
	color: var(--brand-navy);
	margin: 0;
}

.prod-subblock-icon {
	color: var(--brand-green);
	background: rgba(1,227,129,0.1);
	border: 1px solid rgba(1,227,129,0.25);
	border-radius: 8px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Product catalog grid */
.prod-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

.prod-catalog-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Product item card */
.prod-item-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.prod-item-card:hover {
	border-color: var(--brand-green);
	box-shadow: 0 4px 20px rgba(1,227,129,0.12);
	transform: translateY(-2px);
}

.prod-segment--dark .prod-item-card {
	background: rgba(255,255,255,0.05);
	border-color: rgba(255,255,255,0.1);
}

.prod-segment--dark .prod-item-card:hover {
	background: rgba(255,255,255,0.09);
	border-color: var(--brand-green);
}

.prod-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.prod-item-type {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--brand-navy);
	background: rgba(18,45,64,0.07);
	padding: 0.2rem 0.6rem;
	border-radius: 1rem;
}

.prod-item-type--light {
	color: rgba(255,255,255,0.7);
	background: rgba(255,255,255,0.1);
}

.prod-item-name {
	font-family: 'Lilita One', cursive;
	font-size: 1.1rem;
	color: var(--brand-navy);
	margin: 0;
	line-height: 1.3;
}

.prod-segment--dark .prod-item-name {
	color: var(--color-white);
}

.prod-item-abbr {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--color-muted);
	display: block;
	margin-top: 0.15rem;
}

.prod-segment--dark .prod-item-abbr {
	color: rgba(255,255,255,0.45);
}

.prod-item-use {
	font-size: 0.83rem;
	color: var(--color-muted);
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}

.prod-segment--dark .prod-item-use {
	color: rgba(255,255,255,0.55);
}

.prod-item-feat {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--brand-navy);
	margin: 0;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(18,45,64,0.08);
}

.prod-segment--dark .prod-item-feat {
	color: var(--brand-green);
	border-top-color: rgba(255,255,255,0.08);
}

.prod-item-cta {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--brand-navy);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.2s;
}

.prod-item-cta:hover { color: var(--brand-green); }

.prod-segment--dark .prod-item-cta {
	color: var(--brand-green);
}

.prod-segment--dark .prod-item-cta:hover {
	color: #fff;
}

/* =============================================================================
   INNER PAGE — Responsive
   ============================================================================= */

@media (max-width: 900px) {
	.pg-two-col       { grid-template-columns: 1fr; gap: 2.5rem; }
	.pg-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
	.pg-card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
	.pg-stats-row     { grid-template-columns: repeat(2, 1fr); }
	.pg-stat-item:nth-child(2) { border-right: none; }
	.prod-cat-grid    { grid-template-columns: 1fr; }
	.prod-process     { grid-template-columns: repeat(2, 1fr); }
	.malaysia-highlight-grid  { grid-template-columns: 1fr; }
	.malaysia-visit-steps     { grid-template-columns: 1fr; }
	.malaysia-experience-grid { grid-template-columns: 1fr; }

	/* Products split layout */
	.prod-split        { grid-template-columns: 1fr; direction: ltr; }
	.prod-split-visual { height: 300px; order: -1; }
	.prod-split-body   { padding: 2.5rem 1.5rem; }
	.prod-name-list    { grid-template-columns: 1fr; }

	/* Portal cards */
	.portal-card-grid  { grid-template-columns: 1fr; }

	/* Palm oil page */
	.palmoil-section-hdr,
	.palmoil-section-hdr--rev { grid-template-columns: 1fr; direction: ltr; gap: 1.5rem; }
	.palmoil-byproduct-row    { grid-template-columns: 1fr; }
	.palmoil-product-grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.pg-hero { padding: calc(var(--header-height-mob) + 3rem) 0 3.5rem; }
	.pg-section { padding: 3.5rem 0; }
	.pg-card-grid.cols-2,
	.pg-card-grid.cols-3,
	.pg-card-grid.cols-4 { grid-template-columns: 1fr; }
	.pg-stats-row { grid-template-columns: 1fr 1fr; }
	.prod-process { grid-template-columns: 1fr; }
	.prod-hero-badges { gap: 0.4rem; }
	.prod-brands-track { gap: 2rem; }
	.prod-brand-item img { height: 52px; }
	.palmoil-product-grid { grid-template-columns: 1fr; }
	.portal-card-visual   { height: 160px; }
}

/* =============================================================================
   PRODUCTS PAGE — MOTION & FLOW
   ============================================================================= */

html {
	scroll-behavior: smooth;
}

/* GPU hints for animated elements */
.prod-split-visual,
.prod-split-body,
.prod-brands-bar,
.prod-img-marquee,
.prod-name-list li,
.prod-seg-tag {
	will-change: transform, opacity;
}

/* Section connectors — subtle gradient bleed to kill hard edges */
.prod-split {
	position: relative;
}

.prod-split::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(1,227,129,0.18) 30%,
		rgba(1,227,129,0.18) 70%,
		transparent 100%
	);
	pointer-events: none;
}

/* Enhanced hover transitions on CTA buttons */
.prod-split-cta {
	transition: background 0.25s cubic-bezier(0.4,0,0.2,1),
	            color      0.25s cubic-bezier(0.4,0,0.2,1),
	            transform  0.2s  cubic-bezier(0.4,0,0.2,1),
	            box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}

.prod-split-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(1,227,129,0.22);
}

/* Product list item hover micro-interaction */
.prod-name-list li {
	transition: color 0.18s ease, padding-left 0.18s ease;
	cursor: default;
}

.prod-name-list li:hover {
	color: var(--brand-green);
	padding-left: 6px;
}

/* Image slides hover — already have scale, add transition smoothness */
.prod-img-slide img {
	transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Brand logo hover */
.prod-brand-item img {
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1);
}

.prod-brand-item img:hover {
	transform: scale(1.08);
}

/* Section bg subtle transitions */
.prod-split-visual {
	transition: box-shadow 0.3s ease;
}

/* Reduced motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.prod-split-cta,
	.prod-name-list li,
	.prod-img-slide img,
	.prod-brand-item img,
	.prod-split-visual { transition: none; }
}

/* =============================================================================
   EDIBLE FOODS PAGE
   ============================================================================= */

/* ── HERO ──────────────────────────────────────────────────────── */
.ef-hero {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: center;
	padding-bottom: 4rem;
}

.ef-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('img/edible/condensed-milk.png');
	background-size: cover;
	background-position: center 30%;
	filter: blur(2px) brightness(0.55);
	transform: scale(1.05);
}

.ef-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(18,45,64,0.93) 0%,
		rgba(18,45,64,0.72) 55%,
		rgba(18,45,64,0.88) 100%);
}

.ef-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 740px;
}

.ef-hero-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--color-white);
	line-height: 1.15;
	margin-bottom: 1rem;
}

.ef-hero-sub {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.78);
	line-height: 1.75;
	margin-bottom: 1.75rem;
	max-width: 600px;
}

.ef-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ef-hero-badges span {
	background: rgba(1,227,129,0.13);
	border: 1px solid rgba(1,227,129,0.38);
	color: var(--brand-green);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.35rem 0.9rem;
	border-radius: 2rem;
	white-space: nowrap;
}

/* ── PRODUCT GRID SECTION ──────────────────────────────────────── */
.ef-grid-section {
	padding: var(--section-py) 0;
}

.ef-grid-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 3rem;
}

.ef-grid-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--brand-navy);
	margin-bottom: 0.75rem;
}

.ef-grid-intro {
	color: var(--color-muted);
	font-size: var(--font-size-md);
	line-height: 1.75;
}

/* ── PRODUCT CARD ──────────────────────────────────────────────── */
.ef-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

.ef-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
	            box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),
	            border-color 0.28s ease;
	will-change: transform;
}

.ef-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 36px rgba(18,45,64,0.14);
	border-color: var(--brand-green);
}

.ef-card-img {
	position: relative;
	height: 180px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.ef-card-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(18,45,64,0.35) 100%);
}

.ef-card-body {
	padding: 1.25rem 1.4rem 1rem;
	flex: 1;
}

.ef-card-title {
	font-family: 'Lilita One', cursive;
	font-size: 1.1rem;
	color: var(--brand-navy);
	margin-bottom: 0.5rem;
	line-height: 1.25;
}

.ef-card-desc {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.65;
}

/* Hover CTA — slides up from bottom */
.ef-card-hover-cta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.85rem 1.4rem;
	background: linear-gradient(0deg, rgba(18,45,64,0.96) 70%, transparent 100%);
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
	pointer-events: none;
}

.ef-card:hover .ef-card-hover-cta {
	transform: translateY(0);
	pointer-events: auto;
}

.ef-card-spec-btn {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--brand-green);
	text-decoration: none;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.ef-card-spec-btn:hover {
	color: #fff;
}

/* GSAP initial state — set by JS */
.ef-card.ef-card--hidden {
	opacity: 0;
	transform: translateY(28px);
}

/* ── WORLD SECTION ─────────────────────────────────────────────── */
.ef-world-section {
	background: var(--brand-navy);
	padding: var(--section-py) 0;
}

.ef-world-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.ef-world-text .pg-label {
	color: var(--brand-green);
	opacity: 1;
}

.ef-world-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.ef-world-desc {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.7);
	line-height: 1.78;
	margin-bottom: 1.75rem;
	max-width: 460px;
}

.ef-world-destinations {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.ef-world-destinations span {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.65);
	letter-spacing: 0.02em;
}

.ef-world-destinations span:before {
	color: var(--brand-green);
	margin-right: 0.25rem;
}

.ef-world-cta {
	display: inline-block;
	background: var(--brand-green);
	color: var(--brand-navy);
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.85rem 1.8rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}

.ef-world-cta:hover {
	background: var(--brand-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(1,227,129,0.28);
}

/* SVG map container */
.ef-world-map {
	width: 100%;
	max-width: 540px;
}

.ef-map-svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ── MAP ANIMATIONS ────────────────────────────────────────────── */
@keyframes ef-pulse-ring {
	0%   { r: 5;  opacity: 0.4; }
	70%  { r: 14; opacity: 0; }
	100% { r: 14; opacity: 0; }
}

@keyframes ef-pulse-ring-dest {
	0%   { r: 3.5; opacity: 0.3; }
	70%  { r: 10;  opacity: 0; }
	100% { r: 10;  opacity: 0; }
}

@keyframes ef-dash-march {
	to { stroke-dashoffset: -200; }
}

.ef-pulse {
	animation: ef-pulse-ring 2s ease-out infinite;
}

.ef-pulse--2 {
	animation-delay: 1s;
}

.ef-pulse-dest {
	animation: ef-pulse-ring-dest 2.4s ease-out infinite;
}

.ef-pulse-dest--2 {
	animation-delay: 0.8s;
}

.ef-pulse-dest--3 {
	animation-delay: 1.6s;
}

.ef-route {
	animation: ef-dash-march 4s linear infinite;
}

.ef-route--2 {
	animation-delay: -1.3s;
}

.ef-route--3 {
	animation-delay: -2.6s;
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ef-world-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.ef-world-map {
		max-width: 420px;
		margin: 0 auto;
	}
}

@media (max-width: 600px) {
	.ef-product-grid {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}

	.ef-card-img {
		height: 140px;
	}

	.ef-card-body {
		padding: 1rem;
	}
}

@media (max-width: 420px) {
	.ef-product-grid {
		grid-template-columns: 1fr;
	}
}

/* Reduced motion for EF page */
@media (prefers-reduced-motion: reduce) {
	.ef-pulse,
	.ef-pulse--2,
	.ef-pulse-dest,
	.ef-pulse-dest--2,
	.ef-pulse-dest--3,
	.ef-route { animation: none; }
	.ef-card { transition: none; }
	.ef-card-hover-cta { transition: none; }
}

/* =============================================================================
   SOLID MANUFACTURING PAGE
   ============================================================================= */

/* Accent palette — industrial */
:root {
	--sm-orange:     #FF6B35;
	--sm-blue:       #1B5FA8;
	--sm-slate:      #2B3A4A;
	--sm-slate-mid:  #3E5060;
	--sm-steel:      #8FA3B1;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.sm-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	padding-bottom: 4rem;
}

.sm-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('img/solid/hero-industrial.png');
	background-size: cover;
	background-position: center;
	animation: sm-kenburns 22s ease-in-out infinite alternate;
	transform-origin: center center;
}

@keyframes sm-kenburns {
	0%   { transform: scale(1)    translate(0, 0); }
	100% { transform: scale(1.07) translate(-1%, 1%); }
}

.sm-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		rgba(27,39,50,0.94) 0%,
		rgba(18,45,64,0.78) 50%,
		rgba(27,39,50,0.90) 100%);
}

.sm-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.sm-hero-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2.1rem, 5vw, 3.3rem);
	color: var(--color-white);
	line-height: 1.15;
	margin-bottom: 1rem;
}

.sm-hero-sub {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.75);
	line-height: 1.75;
	margin-bottom: 1.75rem;
	max-width: 580px;
}

.sm-hero-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sm-hero-attrs span {
	background: rgba(255,107,53,0.14);
	border: 1px solid rgba(255,107,53,0.42);
	color: #ffad8a;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.35rem 0.9rem;
	border-radius: 2rem;
	white-space: nowrap;
}

/* ── METALLIC DIVIDER ──────────────────────────────────────────── */
.sm-divider-wrap {
	background: var(--brand-navy);
	padding: 0;
	line-height: 0;
}

.sm-divider {
	border: none;
	height: 3px;
	margin: 0;
	background: linear-gradient(90deg,
		transparent   0%,
		#8FA3B1       15%,
		#c8d6de       35%,
		#e8eff3       50%,
		#c8d6de       65%,
		#8FA3B1       85%,
		transparent   100%);
}

/* ── GRID SECTION ──────────────────────────────────────────────── */
.sm-grid-section {
	background: var(--brand-gray);
	padding: var(--section-py) 0;
}

.sm-grid-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 3rem;
}

.sm-label {
	color: var(--sm-blue) !important;
}

.sm-grid-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--sm-slate);
	margin-bottom: 0.75rem;
}

.sm-grid-intro {
	color: var(--color-muted);
	font-size: var(--font-size-md);
	line-height: 1.75;
}

/* ── PRODUCT CARD ──────────────────────────────────────────────── */
.sm-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.75rem;
}

.sm-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid #d4dde4;
	box-shadow: 0 2px 12px rgba(27,39,50,0.07);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
	            box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),
	            border-color 0.3s ease;
	will-change: transform;
}

.sm-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 40px rgba(27,39,50,0.14);
	border-color: var(--sm-blue);
}

.sm-card-img {
	position: relative;
	height: 200px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.sm-card-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(27,39,50,0.45) 100%);
	transition: opacity 0.3s ease;
}

.sm-card:hover .sm-card-img-overlay {
	opacity: 0.7;
}

.sm-card-body {
	padding: 1.35rem 1.5rem 1rem;
	flex: 1;
}

.sm-card-title {
	font-family: 'Lilita One', cursive;
	font-size: 1.18rem;
	color: var(--sm-slate);
	margin-bottom: 0.55rem;
	line-height: 1.25;
	transition: color 0.22s ease;
}

.sm-card:hover .sm-card-title {
	color: var(--sm-orange);
}

.sm-card-desc {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.68;
	margin-bottom: 1rem;
}

/* Tag pills */
.sm-card-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 0;
}

.sm-card-tags li {
	background: rgba(27,95,168,0.08);
	border: 1px solid rgba(27,95,168,0.22);
	color: var(--sm-blue);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.22rem 0.65rem;
	border-radius: 2rem;
	white-space: nowrap;
}

/* Bottom CTA link */
.sm-card-cta {
	display: block;
	background: var(--sm-slate);
	color: rgba(255,255,255,0.82);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	padding: 0.7rem 1rem;
	transition: background 0.22s ease, color 0.22s ease;
}

.sm-card-cta:hover {
	background: var(--sm-orange);
	color: var(--color-white);
}

/* GSAP initial state — set by JS */
.sm-card.sm-card--hidden {
	opacity: 0;
	transform: translateX(-32px);
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.sm-product-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 1.25rem;
	}

	.sm-card-img {
		height: 170px;
	}
}

@media (max-width: 520px) {
	.sm-product-grid {
		grid-template-columns: 1fr;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sm-hero-bg { animation: none; }
	.sm-card,
	.sm-card-cta,
	.sm-card-title,
	.sm-card-img-overlay { transition: none; }
}

/* =============================================================================
   ARABIC / RTL LANGUAGE SUPPORT
   ============================================================================= */

:lang(ar),
[dir="rtl"] {
	--font-body:     'Tajawal', sans-serif;
	--font-headline: 'Tajawal', sans-serif;
	direction: rtl;
	font-family: 'Tajawal', sans-serif;
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4,
:lang(ar) h5,
:lang(ar) h6,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
	font-family: 'Tajawal', sans-serif;
	font-weight: 800;
	letter-spacing: 0;
}

:lang(ar) .header-nav,
[dir="rtl"] .header-nav {
	direction: rtl;
}

:lang(ar) .hp-container,
[dir="rtl"] .hp-container {
	text-align: right;
}

/* =============================================================================
   SOCIAL ICONS — MONOCHROME DEFAULT, BRAND COLOR ON HOVER
   ============================================================================= */

/* In proof bars: monochrome default */
.proof-socials .social-link,
.media-section .social-link {
	background: rgba(255,255,255,0.1);
	border: 1.5px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.75);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.proof-socials .social-link svg,
.media-section .social-link svg {
	fill: rgba(255,255,255,0.8);
}

/* Brand-color hovers for .social-link by aria-label */
.proof-socials .social-link[aria-label="Facebook"]:hover,
.media-section .social-link[aria-label="Facebook"]:hover {
	background: #1877F2; border-color: #1877F2; color: #fff;
}
.proof-socials .social-link[aria-label="Instagram"]:hover,
.media-section .social-link[aria-label="Instagram"]:hover {
	background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
	border-color: #dc2743; color: #fff;
}
.proof-socials .social-link[aria-label="YouTube"]:hover,
.media-section .social-link[aria-label="YouTube"]:hover {
	background: #FF0000; border-color: #FF0000; color: #fff;
}
.proof-socials .social-link[aria-label="TikTok"]:hover,
.media-section .social-link[aria-label="TikTok"]:hover {
	background: #010101; border-color: #69C9D0; color: #fff;
}
.proof-socials .social-link[aria-label="X (Twitter)"]:hover,
.media-section .social-link[aria-label="X (Twitter)"]:hover {
	background: #000; border-color: #fff; color: #fff;
}
.proof-socials .social-link[aria-label="Threads"]:hover,
.media-section .social-link[aria-label="Threads"]:hover {
	background: #1a1a1a; border-color: #888; color: #fff;
}
.proof-socials .social-link[aria-label="Snapchat"]:hover,
.media-section .social-link[aria-label="Snapchat"]:hover {
	background: #FFFC00; border-color: #FFFC00; color: #000;
}
.proof-socials .social-link[aria-label="Google"]:hover,
.media-section .social-link[aria-label="Google"]:hover {
	background: #fff; border-color: #4285F4; color: #4285F4;
}

.proof-socials .social-link:hover svg,
.media-section .social-link:hover svg {
	fill: currentColor;
}

/* =============================================================================
   MEDIA SECTION (template-part) — GLOBAL SOCIAL + RATING BAR
   ============================================================================= */

.media-section {
	background: var(--brand-navy);
	padding: 2rem 0;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.media-section-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.media-section-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: rgba(255,255,255,0.85);
	font-size: var(--font-size-sm);
}

.media-section-rating .stars {
	color: #fbbf24;
	font-size: 1rem;
}

.media-section-rating strong {
	color: var(--color-white);
	font-size: 1.05rem;
}

.media-section-cta {
	background: var(--brand-green);
	color: var(--brand-navy);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.65rem 1.5rem;
	border-radius: var(--radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.22s ease, transform 0.18s ease;
}

.media-section-cta:hover {
	background: var(--brand-green-dark);
	transform: translateY(-1px);
}

.media-section-icons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

@media (max-width: 680px) {
	.media-section-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =============================================================================
   FOOTER REDESIGN — 3-COLUMN LAYOUT + TRUST BAR
   ============================================================================= */

.site-footer {
	background: var(--brand-navy);
	color: rgba(255,255,255,0.7);
	font-size: var(--font-size-sm);
}

.footer-brand-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 3rem var(--container-pad) 2rem;
	max-width: var(--container-max);
	margin: 0 auto;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-brand-col {
	max-width: 320px;
}

.footer-tagline {
	color: rgba(255,255,255,0.5);
	font-size: var(--font-size-sm);
	line-height: 1.65;
	margin-top: 0.75rem;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	padding: 2.5rem var(--container-pad);
	max-width: var(--container-max);
	margin: 0 auto;
}

.footer-col-title {
	font-family: var(--font-headline);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: 1.1rem;
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-menu li a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	font-size: var(--font-size-sm);
	transition: color 0.2s ease;
}

.footer-menu li a:hover {
	color: var(--brand-green);
}

.footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: rgba(255,255,255,0.65);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.footer-contact-icon {
	flex-shrink: 0;
	color: var(--brand-green);
	margin-top: 1px;
}

.footer-contact-item a {
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-contact-item a:hover {
	color: var(--brand-green);
}

/* Trust signals bar */
.footer-trust-bar {
	background: rgba(255,255,255,0.035);
	border-top: 1px solid rgba(255,255,255,0.06);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	padding: 1rem var(--container-pad);
}

.footer-trust-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.footer-trust-item {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255,255,255,0.45);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.footer-trust-item svg {
	opacity: 0.55;
}

.footer-bottom-bar {
	padding: 1.25rem var(--container-pad);
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.footer-copyright {
	color: rgba(255,255,255,0.35);
	font-size: 0.78rem;
}

.footer-copyright a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

.footer-bottom-links {
	display: flex;
	gap: 1.25rem;
}

.footer-bottom-links a {
	color: rgba(255,255,255,0.35);
	font-size: 0.78rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
	color: var(--brand-green);
}

@media (max-width: 720px) {
	.footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.footer-cols { grid-template-columns: 1fr; }
	.footer-bottom-bar { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   CONTACT US PAGE (page-contact.php)
   ============================================================================= */

.contact-hero {
	position: relative;
	background: var(--brand-navy);
	padding: calc(var(--header-height) + 5rem) 0 5rem;
	overflow: hidden;
}

.contact-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 60%, rgba(1,227,129,0.07) 0%, transparent 65%);
	pointer-events: none;
}

.contact-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 700px;
}

.contact-hero-title {
	font-family: var(--font-headline);
	font-size: clamp(2rem, 5vw, 3.2rem);
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.contact-hero-sub {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.72);
	line-height: 1.78;
	max-width: 580px;
}

/* Contact form section */
.contact-form-section {
	background: var(--color-white);
	padding: var(--section-py) 0;
}

.contact-form-wrap {
	max-width: 680px;
	margin: 0 auto;
}

.contact-form-title {
	font-family: var(--font-headline);
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	color: var(--brand-navy);
	margin-bottom: 0.5rem;
}

.contact-form-sub {
	color: var(--color-muted);
	margin-bottom: 2rem;
	line-height: 1.7;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.cf-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cf-field label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--brand-navy);
	letter-spacing: 0.02em;
}

.cf-field input,
.cf-field textarea,
.cf-field select {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--brand-navy);
	background: #f8f9fa;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	width: 100%;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf-field input:focus,
.cf-field textarea:focus,
.cf-field select:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(1,227,129,0.12);
}

.cf-field textarea { resize: vertical; min-height: 130px; }

.cf-submit {
	background: var(--brand-navy);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: none;
	border-radius: var(--radius);
	padding: 1rem 2rem;
	cursor: pointer;
	transition: background 0.22s ease, transform 0.18s ease;
	align-self: flex-start;
}

.cf-submit:hover {
	background: var(--brand-green);
	color: var(--brand-navy);
	transform: translateY(-2px);
}

.cf-success {
	background: rgba(1,227,129,0.08);
	border: 1px solid rgba(1,227,129,0.4);
	color: #15803d;
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
	font-weight: 600;
}

/* Partner marquee (infinite scroll) */
.contact-marquee-section {
	background: var(--brand-gray);
	padding: 3rem 0;
	overflow: hidden;
}

.contact-marquee-title {
	text-align: center;
	font-family: var(--font-headline);
	font-size: 1rem;
	color: var(--color-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.75rem;
}

.contact-marquee-track-wrap {
	overflow: hidden;
}

.contact-marquee-track {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	animation: contact-marquee-scroll 30s linear infinite;
	width: max-content;
}

.contact-marquee-track:hover {
	animation-play-state: paused;
}

@keyframes contact-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.contact-partner-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 60px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	padding: 0.5rem 0.75rem;
}

.contact-partner-item:hover { opacity: 1; }

.contact-partner-item span {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--brand-navy);
	letter-spacing: 0.05em;
	text-align: center;
	line-height: 1.3;
}

/* =============================================================================
   CONTACT PAGE — HERO CTAS
   ============================================================================= */

.contact-hero-ctas {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2.25rem;
}

.contact-hero-cta-btn,
.contact-hero-outline-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 1rem 2.25rem;
	font-family: var(--font-headline);
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease;
	white-space: nowrap;
}

.contact-hero-cta-btn {
	background: var(--brand-green);
	color: var(--brand-navy);
	border: 2px solid var(--brand-green);
}

.contact-hero-cta-btn:hover {
	background: var(--brand-green-dark);
	border-color: var(--brand-green-dark);
	text-decoration: none;
	transform: translateY(-2px);
}

.contact-hero-outline-btn {
	background: transparent;
	color: rgba(255,255,255,0.88);
	border: 2px solid rgba(255,255,255,0.3);
}

.contact-hero-outline-btn:hover {
	border-color: var(--brand-green);
	color: var(--brand-green);
	text-decoration: none;
	transform: translateY(-2px);
}


/* =============================================================================
   CONTACT PAGE — SECTION 1: LOCATION + INFO
   ============================================================================= */

.contact-loc-section {
	background: var(--brand-gray);
	padding: var(--section-py) 0;
}

.contact-loc-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: flex;
	align-items: stretch;
	min-height: 500px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 8px 48px rgba(0,0,0,0.11);
}

.contact-map-col {
	flex: 0 0 55%;
	position: relative;
}

.contact-map-frame {
	width: 100%;
	height: 100%;
	display: block;
}

.contact-map-frame iframe {
	width: 100%;
	height: 100%;
	min-height: 500px;
	display: block;
	border: 0;
}

.contact-info-col {
	flex: 1 1 45%;
	background: var(--color-white);
	display: flex;
	align-items: stretch;
}

.contact-info-card {
	width: 100%;
	padding: 2.75rem 2.5rem 2.25rem;
	display: flex;
	flex-direction: column;
}

.contact-info-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.contact-info-logo {
	width: 52px;
	height: 52px;
	object-fit: contain;
	flex-shrink: 0;
}

.contact-info-brand-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.contact-info-name {
	font-family: var(--font-headline);
	font-size: 1.25rem;
	color: var(--brand-navy);
	letter-spacing: 0.04em;
}

.contact-name-green {
	color: var(--brand-green);
}

.contact-info-tagline {
	font-size: 0.78rem;
	color: var(--color-muted);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.contact-info-divider {
	height: 1px;
	background: var(--color-border);
	margin-bottom: 1.75rem;
}

.contact-info-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	flex: 1;
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.contact-info-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	background: rgba(1,227,129,0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brand-green-dark);
	margin-top: 0.05rem;
}

.contact-info-detail {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.contact-info-label {
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.contact-info-value {
	font-size: 0.88rem;
	color: var(--brand-navy);
	font-weight: 500;
	line-height: 1.5;
}

.contact-info-link {
	text-decoration: none;
	color: var(--brand-navy);
	transition: color 0.2s;
}

.contact-info-link:hover {
	color: var(--brand-green-dark);
}

.contact-info-hours {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.contact-info-hours-note {
	font-size: 0.8rem;
	color: var(--color-muted);
}

.contact-directions-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.25rem;
	background: var(--brand-navy);
	color: var(--color-white);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: var(--radius);
	text-decoration: none;
	align-self: flex-start;
	transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease;
}

.contact-directions-btn:hover {
	background: var(--brand-green);
	color: var(--brand-navy);
	transform: translateY(-1px);
	text-decoration: none;
}


/* =============================================================================
   CONTACT PAGE — SECTION 2: PRODUCT SOURCING FORM
   ============================================================================= */

.contact-sourcing-section {
	background: var(--brand-navy);
	padding: calc(var(--section-py) * 1.25) 0;
	position: relative;
	overflow: hidden;
}

.contact-sourcing-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 20%, rgba(1,227,129,0.07) 0%, transparent 55%);
	pointer-events: none;
}

.contact-sourcing-header {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 3.5rem;
	position: relative;
	z-index: 1;
}

.contact-sourcing-title {
	font-family: var(--font-headline);
	font-size: clamp(1.65rem, 4vw, 2.75rem);
	color: var(--color-white);
	line-height: 1.28;
	margin-bottom: 1.25rem;
}

.contact-sourcing-intro {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.65);
	line-height: 1.82;
	text-align: justify;
}

.contact-sourcing-form-wrap {
	max-width: 820px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 2.75rem 2.75rem 2.25rem;
	position: relative;
	z-index: 1;
	box-shadow: 0 12px 60px rgba(0,0,0,0.25);
}

.contact-sourcing-form {
	display: flex;
	flex-direction: column;
}

.cs-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.15rem;
	margin-bottom: 1.15rem;
}

.cs-field--full {
	grid-column: 1 / -1;
}

.cf-optional {
	font-weight: 400;
	color: var(--color-muted);
	font-size: 0.78rem;
	margin-left: 0.2rem;
}

.cs-submit {
	background: var(--brand-green) !important;
	color: var(--brand-navy) !important;
	margin-top: 0.25rem;
}

.cs-submit:hover {
	background: var(--brand-green-dark) !important;
}


/* =============================================================================
   CONTACT PAGE — SECTION 3: FACTORY VISIT
   ============================================================================= */

.contact-factory-section {
	background: var(--brand-offwhite);
	padding: calc(var(--section-py) * 1.2) 0;
}

.contact-factory-header {
	max-width: 840px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 0;
}

.contact-factory-title {
	font-family: var(--font-headline);
	font-size: clamp(1.65rem, 3.8vw, 2.65rem);
	color: var(--brand-navy);
	line-height: 1.3;
	margin-bottom: 1.25rem;
}

.contact-factory-intro {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.82;
	margin-bottom: 2rem;
	text-align: justify;
}

.contact-factory-features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: center;
	margin-bottom: 0;
}

.contact-factory-feat {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 1rem;
	background: rgba(245,166,35,0.1);
	border: 1px solid rgba(245,166,35,0.3);
	border-radius: 100px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--brand-navy);
}

.contact-factory-feat svg {
	color: var(--vm-gold);
	flex-shrink: 0;
}

.contact-factory-section .vm-form-section {
	background: var(--brand-navy);
	margin-top: calc(var(--section-py) * 0.8);
}

/* =============================================================================
   CONTACT PAGE — SPLIT LAYOUT (sections 2 + 3)
   ============================================================================= */

.contact-split-layout {
	display: flex;
	gap: 4rem;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.contact-split-text {
	flex: 0 0 42%;
	max-width: 42%;
}

.contact-split-form {
	flex: 1;
	min-width: 0;
}

/* sourcing form card fills the split form column */
.contact-split-form .contact-sourcing-form-wrap {
	max-width: none;
	margin: 0;
}

/* vm-form-wrap in bare mode */
.contact-split-form .vm-form-wrap {
	max-width: none;
	margin: 0;
}

/* align text left in split context */
.contact-split-text .contact-sourcing-title,
.contact-split-text .contact-sourcing-intro,
.contact-split-text .contact-factory-title,
.contact-split-text .contact-factory-intro {
	text-align: left;
}

.contact-split-text .contact-factory-features {
	justify-content: flex-start;
}


/* =============================================================================
   CONTACT PAGE — RESPONSIVE
   ============================================================================= */

@media (max-width: 960px) {
	.contact-loc-inner {
		flex-direction: column;
		min-height: auto;
	}

	.contact-map-col {
		flex: none;
		height: 320px;
	}

	.contact-map-frame,
	.contact-map-frame iframe {
		min-height: 320px;
		height: 320px;
	}

	.contact-info-col {
		flex: none;
	}

	.contact-info-card {
		padding: 2rem 1.75rem 1.75rem;
	}

	.cs-form-grid {
		grid-template-columns: 1fr;
	}

	.contact-sourcing-form-wrap {
		padding: 2rem 1.75rem 1.75rem;
	}

	.contact-hero-ctas {
		flex-direction: column;
		align-items: flex-start;
	}

	.contact-split-layout {
		flex-direction: column;
		gap: 2.5rem;
	}

	.contact-split-text,
	.contact-split-form {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.contact-sourcing-form-wrap {
		padding: 1.5rem 1.25rem;
	}

	.contact-info-card {
		padding: 1.5rem 1.25rem;
	}

	.contact-factory-features {
		gap: 0.5rem;
	}

	.contact-factory-feat {
		font-size: 0.75rem;
		padding: 0.35rem 0.8rem;
	}
}


/* =============================================================================
   LEGAL PAGE
   ============================================================================= */

/* =============================================================================
   LEGAL HUB PAGE
   ============================================================================= */

/* Hero */
.legal-hero {
	background: var(--brand-navy);
	padding: calc(var(--header-height) + 4rem) 0 3.5rem;
	position: relative;
	overflow: hidden;
}

.legal-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 15% 60%, rgba(1,227,129,0.08) 0%, transparent 55%);
	pointer-events: none;
}

.legal-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
}

.legal-hero-badge {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	background: rgba(1,227,129,0.12);
	border: 1px solid rgba(1,227,129,0.3);
	border-radius: 100px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--brand-green);
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.legal-hero-title {
	font-family: var(--font-headline);
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 0.85rem;
}

.legal-hero-sub {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.6);
	margin-bottom: 1.5rem;
}

.legal-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.38);
}

/* Layout */
.legal-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 3.5rem;
	align-items: start;
	padding-top: 3.5rem;
	padding-bottom: 6rem;
}

/* Sidebar */
.legal-sidebar {
	position: sticky;
	top: 2.5rem;
}

.legal-sidebar-inner {
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: 0 4px 20px rgba(18,45,64,0.06);
}

.legal-sidebar-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 0.85rem;
}

.legal-nav {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-bottom: 1.25rem;
}

.legal-nav-link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.65rem;
	border-radius: var(--radius);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--brand-navy);
	text-decoration: none;
	line-height: 1.35;
	transition: background 0.18s ease, color 0.18s ease;
}

.legal-nav-link:hover,
.legal-nav-link--active {
	background: rgba(1,227,129,0.1);
	color: var(--brand-navy);
	text-decoration: none;
}

.legal-nav-link--active .legal-nav-num {
	color: var(--brand-green-dark);
}

.legal-nav-num {
	font-size: 0.66rem;
	font-weight: 800;
	color: var(--brand-green);
	min-width: 18px;
	flex-shrink: 0;
}

.legal-sidebar-contact {
	display: block;
	text-align: center;
	padding: 0.55rem 1rem;
	background: var(--brand-green);
	color: var(--brand-navy) !important;
	border-radius: var(--radius);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.18s ease;
}

.legal-sidebar-contact:hover {
	background: var(--brand-green-dark);
	text-decoration: none;
}

/* Legal document sections */
.legal-doc {
	margin-bottom: 4rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid var(--color-border);
	scroll-margin-top: 2.5rem;
}

.legal-doc-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--color-border);
}

.legal-doc-num {
	font-family: var(--font-headline);
	font-size: 2.25rem;
	color: var(--brand-green);
	line-height: 1;
	flex-shrink: 0;
	opacity: 0.85;
}

.legal-doc-title {
	font-family: var(--font-headline);
	font-size: clamp(1.45rem, 3vw, 1.9rem);
	color: var(--brand-navy);
	line-height: 1.25;
	margin: 0;
}

.legal-doc-body {
	font-size: var(--font-size-md);
	color: #3a3a3a;
	line-height: 1.8;
}

.legal-lead {
	font-size: 1rem;
	color: var(--brand-navy);
	line-height: 1.75;
	margin-bottom: 2rem;
	padding-left: 1.1rem;
	border-left: 3px solid var(--brand-green);
}

.legal-doc-body h3 {
	font-family: var(--font-headline);
	font-size: 1rem;
	color: var(--brand-navy);
	margin-top: 2rem;
	margin-bottom: 0.7rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid rgba(18,45,64,0.08);
}

.legal-doc-body ul {
	padding-left: 1.25rem;
	margin-bottom: 1.25rem;
}

.legal-doc-body li {
	margin-bottom: 0.45rem;
	line-height: 1.7;
}

.legal-doc-body p {
	margin-bottom: 1.1rem;
}

.legal-doc-body a {
	color: var(--brand-navy);
	text-decoration: underline;
}

.legal-doc-body a:hover {
	color: var(--brand-green-dark);
}

/* Highlight box */
.legal-highlight-box {
	background: rgba(1,227,129,0.07);
	border: 1px solid rgba(1,227,129,0.22);
	border-left: 4px solid var(--brand-green);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 1.1rem 1.35rem;
	font-size: 0.92rem;
	color: var(--brand-navy);
	line-height: 1.72;
	margin: 1.5rem 0;
}

/* Tables */
.legal-table-wrap {
	overflow-x: auto;
	margin: 1.5rem 0;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	box-shadow: 0 2px 12px rgba(18,45,64,0.04);
}

.legal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
}

.legal-table th {
	background: var(--brand-navy);
	color: var(--color-white);
	font-weight: 700;
	padding: 0.75rem 1rem;
	text-align: left;
	white-space: nowrap;
}

.legal-table td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
	line-height: 1.6;
}

.legal-table tr:last-child td {
	border-bottom: none;
}

.legal-table tr:nth-child(even) td {
	background: rgba(18,45,64,0.02);
}

/* Certification cards */
.legal-cert-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.15rem;
	margin: 1.5rem 0;
}

.legal-cert-card {
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem 1.1rem;
	box-shadow: 0 2px 10px rgba(18,45,64,0.04);
}

.legal-cert-name {
	display: block;
	font-family: var(--font-headline);
	font-size: 1.1rem;
	color: var(--brand-navy);
	margin-bottom: 0.5rem;
}

.legal-cert-card p {
	font-size: 0.82rem;
	color: var(--color-muted);
	line-height: 1.62;
	margin: 0;
}

/* Contact block */
#legal-contact {
	scroll-margin-top: 2.5rem;
}

.legal-contact-block {
	background: var(--brand-navy);
	border-radius: var(--radius-lg);
	padding: 2.75rem;
	margin-top: 0.5rem;
	position: relative;
	overflow: hidden;
}

.legal-contact-block::before {
	content: '';
	position: absolute;
	bottom: -60px;
	right: -60px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(1,227,129,0.07) 0%, transparent 70%);
	pointer-events: none;
}

.legal-contact-title {
	font-family: var(--font-headline);
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	color: var(--color-white);
	margin-bottom: 0.75rem;
	position: relative;
}

.legal-contact-intro {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.6);
	line-height: 1.72;
	margin-bottom: 2rem;
	position: relative;
}

.legal-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 2rem;
	position: relative;
}

.legal-contact-item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.legal-contact-label {
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--brand-green);
}

.legal-contact-item span,
.legal-contact-item em {
	font-size: 0.88rem;
	color: rgba(255,255,255,0.78);
}

.legal-contact-item a {
	font-size: 0.88rem;
	color: rgba(255,255,255,0.78);
	text-decoration: none;
	transition: color 0.18s;
}

.legal-contact-item a:hover {
	color: var(--brand-green);
}

.legal-contact-sign {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.28);
	line-height: 1.65;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.07);
	margin: 0;
	position: relative;
}

/* =============================================================================
   LEGAL HUB — RESPONSIVE
   ============================================================================= */

@media (max-width: 960px) {
	.legal-layout {
		grid-template-columns: 1fr;
		padding-top: 2rem;
		gap: 0;
	}

	.legal-sidebar {
		position: static;
		margin-bottom: 2.5rem;
	}

	.legal-sidebar-inner {
		padding: 1.1rem;
	}

	.legal-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.legal-nav-link {
		font-size: 0.75rem;
		padding: 0.35rem 0.6rem;
	}

	.legal-cert-grid {
		grid-template-columns: 1fr;
	}

	.legal-contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.legal-contact-block {
		padding: 1.5rem 1.25rem;
	}

	.legal-doc-header {
		gap: 0.6rem;
	}

	.legal-doc-num {
		font-size: 1.65rem;
	}

	.legal-doc-title {
		font-size: 1.25rem;
	}
}

/* =============================================================================
   VISIT MALAYSIA PAGE
   ============================================================================= */

:root {
	--vm-gold:       #F5A623;
	--vm-gold-dark:  #D4881A;
	--vm-green:      #1B6E3A;
	--vm-green-mid:  #24923E;
}

/* ── HERO CAROUSEL ─────────────────────────────────────────────── */
.vm-hero {
	position: relative;
	height: 100vh;
	min-height: 580px;
	max-height: 820px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

/* Slides stack */
.vm-slides {
	position: absolute;
	inset: 0;
}

.vm-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.vm-slide--active {
	opacity: 1;
}

/* Ken Burns on active slide bg */
.vm-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.vm-slide--active .vm-slide-bg {
	animation: vm-kenburns 8s ease-in-out forwards;
}

@keyframes vm-kenburns {
	0%   { transform: scale(1)    translate(0, 0); }
	100% { transform: scale(1.08) translate(-1.5%, 1%); }
}

.vm-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(8,18,30,0.88) 0%,
		rgba(8,18,30,0.45) 45%,
		rgba(8,18,30,0.22) 100%
	);
}

/* ── SLIDE BACKGROUND GRADIENTS (replace with real images) ──────
   To use a photo:  background-image: url('img/malaysia/kl.jpg');
   ────────────────────────────────────────────────────────────── */
.vm-bg--kl {
	/* Petronas Towers / KL skyline */
	background-image: url('img/products/7.png');
	background-position: center 30%;
}

.vm-bg--factory {
	/* Manufacturing / plantation */
	background-image: url('img/products/3.png');
	background-position: center;
}

.vm-bg--port {
	/* Port / logistics */
	background-image: url('img/products/123.png');
	background-position: center 40%;
}

.vm-bg--spice {
	/* Spice market — warm gold overlay */
	background-image: url('img/solid/coal.png');
	background-position: center;
}

.vm-bg--business {
	/* Business partnership */
	background-image: url('img/products/nnn.png');
	background-position: center 35%;
}

/* ── CAPTIONS ───────────────────────────────────────────────────── */
.vm-caption-track {
	position: relative;
	z-index: 4;
	width: 100%;
	padding-bottom: 5rem;
}

.vm-caption-inner {
	position: relative;
	min-height: 160px;
}

.vm-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 680px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
	pointer-events: none;
}

.vm-caption--active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.vm-caption-label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vm-gold);
	margin-bottom: 0.6rem;
}

.vm-caption-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 5vw, 3.4rem);
	color: var(--color-white);
	line-height: 1.15;
	margin-bottom: 0.75rem;
}

.vm-caption-sub {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.72);
	line-height: 1.6;
}

/* ── DOTS ───────────────────────────────────────────────────────── */
.vm-dots {
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 0.5rem;
}

.vm-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.55);
	background: transparent;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
	padding: 0;
}

.vm-dot--active,
.vm-dot:hover {
	background: var(--vm-gold);
	border-color: var(--vm-gold);
	transform: scale(1.25);
}

/* ── ARROWS ─────────────────────────────────────────────────────── */
.vm-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.28);
	color: var(--color-white);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.22s ease, border-color 0.22s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}

.vm-arrow:hover {
	background: var(--vm-gold);
	border-color: var(--vm-gold);
}

.vm-arrow--prev { left: 1.5rem; }
.vm-arrow--next { right: 1.5rem; }

/* ── PROGRESS BAR ────────────────────────────────────────────────── */
.vm-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255,255,255,0.12);
	z-index: 5;
}

.vm-progress-bar {
	height: 100%;
	width: 0;
	background: var(--vm-gold);
}

/* ── INTRO SECTION ──────────────────────────────────────────────── */
.vm-intro-section {
	background: var(--color-white);
	padding: var(--section-py) 0;
}

.vm-intro-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 4.5rem;
	align-items: center;
}

.vm-intro-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--brand-navy);
	line-height: 1.2;
	margin-bottom: 1.25rem;
}

.vm-intro-lead {
	font-size: var(--font-size-lg);
	color: var(--brand-navy);
	line-height: 1.75;
	margin-bottom: 1rem;
	font-weight: 600;
}

.vm-intro-body {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.78;
	margin-bottom: 0.85rem;
}

/* Stats grid */
.vm-intro-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.vm-stat {
	background: var(--brand-navy);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.vm-stat-num {
	font-family: 'Lilita One', cursive;
	font-size: 2rem;
	color: var(--vm-gold);
	line-height: 1;
	margin-bottom: 0.4rem;
}

.vm-stat-label {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.65);
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

/* ── SERVICE PILLARS ────────────────────────────────────────────── */
.vm-pillars-section {
	background: var(--brand-gray);
	padding: var(--section-py) 0;
}

.vm-pillars-header {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 3rem;
}

.vm-pillars-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--brand-navy);
	line-height: 1.25;
	margin-bottom: 0.5rem;
}

.vm-pillars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.vm-pillar {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.75rem 1.5rem 1.5rem;
	transition: transform 0.26s cubic-bezier(0.4,0,0.2,1),
	            box-shadow 0.26s cubic-bezier(0.4,0,0.2,1),
	            border-color 0.26s ease;
	will-change: transform;
}

.vm-pillar:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 32px rgba(18,45,64,0.10);
	border-color: var(--vm-gold);
}

.vm-pillar-icon {
	color: var(--vm-gold);
	background: rgba(245,166,35,0.1);
	border: 1px solid rgba(245,166,35,0.28);
	border-radius: 10px;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.1rem;
}

.vm-pillar-title {
	font-family: 'Lilita One', cursive;
	font-size: 1.15rem;
	color: var(--brand-navy);
	margin-bottom: 0.6rem;
}

.vm-pillar-desc {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.7;
}

/* ── SPICE SECTION ──────────────────────────────────────────────── */
.vm-spice-section {
	background: var(--brand-navy);
	padding: var(--section-py) 0;
	overflow: hidden;
}

.vm-spice-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 4rem;
	align-items: center;
}

.vm-badge {
	display: inline-block;
	background: rgba(245,166,35,0.15);
	border: 1px solid rgba(245,166,35,0.45);
	color: var(--vm-gold);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3rem 0.9rem;
	border-radius: 2rem;
	margin-bottom: 1.1rem;
}

.vm-spice-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.vm-spice-desc {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.72);
	line-height: 1.78;
	margin-bottom: 1.5rem;
}

.vm-spice-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.vm-spice-list li {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.7);
	padding-left: 1.4rem;
	position: relative;
	line-height: 1.55;
}

.vm-spice-list li::before {
	content: '▸';
	position: absolute;
	left: 0;
	color: var(--vm-gold);
}

.vm-spice-cta {
	display: inline-block;
	background: var(--vm-gold);
	color: var(--brand-navy);
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.85rem 1.8rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}

.vm-spice-cta:hover {
	background: var(--vm-gold-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(245,166,35,0.32);
}

/* Spice image stack */
.vm-spice-img-stack {
	position: relative;
	height: 340px;
}

.vm-spice-img {
	position: absolute;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
}

.vm-spice-img--1 {
	width: 75%;
	height: 75%;
	top: 0;
	right: 0;
	background-image: url('img/solid/packaging-materials.png');
	box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.vm-spice-img--2 {
	width: 58%;
	height: 58%;
	bottom: 0;
	left: 0;
	background-image: url('img/edible/processed-spices.png');
	box-shadow: 0 8px 28px rgba(0,0,0,0.3);
	border: 3px solid rgba(245,166,35,0.3);
}

.vm-spice-badge-float {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--vm-gold);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1rem;
	text-align: center;
	box-shadow: 0 4px 18px rgba(245,166,35,0.4);
	z-index: 2;
	min-width: 100px;
}

.vm-float-num {
	display: block;
	font-family: 'Lilita One', cursive;
	font-size: 1.5rem;
	color: var(--brand-navy);
	line-height: 1;
}

.vm-float-text {
	display: block;
	font-size: 0.65rem;
	font-weight: 800;
	color: var(--brand-navy);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
	margin-top: 0.2rem;
}

/* ── HOW IT WORKS ───────────────────────────────────────────────── */
.vm-steps-section {
	background: var(--color-white);
	padding: var(--section-py) 0;
}

.vm-steps-header {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 3rem;
}

.vm-steps-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--brand-navy);
	margin-bottom: 0.6rem;
}

.vm-steps-intro {
	color: var(--color-muted);
	font-size: var(--font-size-md);
	line-height: 1.7;
}

.vm-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}

.vm-step {
	position: relative;
	padding: 0 1.5rem;
	text-align: center;
}

.vm-step-num {
	font-family: 'Lilita One', cursive;
	font-size: 2.8rem;
	color: var(--vm-gold);
	line-height: 1;
	margin-bottom: 0.75rem;
}

.vm-step-title {
	font-family: 'Lilita One', cursive;
	font-size: 1.25rem;
	color: var(--brand-navy);
	margin-bottom: 0.6rem;
}

.vm-step-desc {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.7;
}

.vm-step-connector {
	position: absolute;
	top: 1.4rem;
	right: -1px;
	width: 2px;
	height: 2rem;
	background: linear-gradient(180deg, var(--vm-gold) 0%, rgba(245,166,35,0.2) 100%);
}

/* ── WHY SECTION ────────────────────────────────────────────────── */
.vm-why-section {
	background: var(--brand-gray);
	padding: var(--section-py) 0;
	text-align: center;
}

.vm-why-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--brand-navy);
	line-height: 1.25;
	margin-bottom: 2.5rem;
}

.vm-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	text-align: left;
}

.vm-why-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.75rem 1.5rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.vm-why-card:hover {
	border-color: var(--vm-gold);
	box-shadow: 0 6px 24px rgba(245,166,35,0.1);
}

.vm-why-icon {
	font-size: 1.2rem;
	color: var(--vm-gold);
	margin-bottom: 0.75rem;
}

.vm-why-card h3 {
	font-family: 'Lilita One', cursive;
	font-size: 1.1rem;
	color: var(--brand-navy);
	margin-bottom: 0.6rem;
}

.vm-why-card p {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	line-height: 1.7;
}

/* ── CTA OVERRIDE ───────────────────────────────────────────────── */
.vm-cta-btn {
	background: var(--vm-gold) !important;
	color: var(--brand-navy) !important;
}

.vm-cta-btn:hover {
	background: var(--vm-gold-dark) !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.vm-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
	.vm-step-connector { display: none; }
}

@media (max-width: 860px) {
	.vm-intro-inner,
	.vm-spice-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.vm-spice-img-stack {
		height: 260px;
		max-width: 420px;
		margin: 0 auto;
	}

	.vm-why-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.vm-hero {
		min-height: 500px;
	}

	.vm-steps {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.vm-pillars-grid {
		grid-template-columns: 1fr;
	}

	.vm-arrow { display: none; }

	.vm-caption-track {
		padding-bottom: 3.5rem;
	}
}

/* Hero caption CTA button */
.vm-caption-cta {
	display: inline-block;
	margin-top: 1.2rem;
	background: var(--vm-gold);
	color: var(--brand-navy);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.65rem 1.4rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background 0.22s ease, transform 0.2s ease;
}

.vm-caption-cta:hover {
	background: var(--vm-gold-dark);
	transform: translateY(-2px);
}

/* Inline text CTAs */
.vm-inline-cta {
	display: inline-block;
	margin-top: 1.25rem;
	color: var(--vm-gold);
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(245,166,35,0.4);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.vm-inline-cta:hover {
	color: var(--vm-gold-dark);
	border-color: var(--vm-gold-dark);
}

.vm-why-cta-link {
	text-align: center;
	margin-top: 2.5rem;
}

/* ── YOUR INDUSTRY, YOUR ITINERARY ─────────────────────────────── */
.vm-itinerary-section {
	background: var(--brand-navy);
	padding: var(--section-py) 0;
	overflow: hidden;
}

.vm-itinerary-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 4rem;
	align-items: center;
}

.vm-itinerary-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.vm-itinerary-desc {
	font-size: var(--font-size-md);
	color: rgba(255,255,255,0.72);
	line-height: 1.78;
	margin-bottom: 0.85rem;
}

.vm-itinerary-desc strong {
	color: rgba(255,255,255,0.92);
}

.vm-itinerary-highlight {
	font-family: 'Lilita One', cursive;
	font-size: 1.25rem;
	color: var(--vm-gold);
	margin: 1.25rem 0 1.5rem;
	letter-spacing: 0.01em;
}

.vm-itinerary-sectors {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-bottom: 1.75rem;
}

.vm-itinerary-sectors span {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.65);
	letter-spacing: 0.02em;
}

.vm-itinerary-sectors span::first-letter {
	color: var(--vm-gold);
}

.vm-itinerary-cta {
	display: inline-block;
	background: var(--vm-gold);
	color: var(--brand-navy);
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.85rem 1.8rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}

.vm-itinerary-cta:hover {
	background: var(--vm-gold-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(245,166,35,0.32);
}

/* Itinerary visual */
.vm-itinerary-visual {
	position: relative;
}

.vm-itinerary-photo {
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 48px rgba(0,0,0,0.4);
	display: block;
}

.vm-itinerary-badge {
	position: absolute;
	bottom: -1.25rem;
	left: -1.25rem;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(245,166,35,0.5);
	box-shadow: 0 4px 18px rgba(0,0,0,0.3);
	background: #fff;
}

.vm-itinerary-badge-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── INQUIRY FORM ───────────────────────────────────────────────── */
.vm-form-section {
	background: var(--brand-gray);
	padding: 4rem 0;
}

.vm-form-wrap {
	max-width: 780px;
	margin: 0 auto;
	background: var(--color-white);
	border: 1.5px solid var(--vm-gold);
	border-radius: var(--radius-lg);
	padding: 2.5rem 3rem;
	box-shadow: 0 6px 32px rgba(18,45,64,0.08);
}

.vm-form-header {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.vm-form-title {
	font-family: 'Lilita One', cursive;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--brand-navy);
	margin-bottom: 0.5rem;
}

.vm-form-sub {
	font-size: var(--font-size-md);
	color: var(--color-muted);
	line-height: 1.6;
}

.vm-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.vm-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.vm-field--full {
	grid-column: 1 / -1;
}

.vm-field label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--brand-navy);
	letter-spacing: 0.02em;
}

.vm-field label span {
	color: var(--vm-gold);
}

.vm-field input,
.vm-field select,
.vm-field textarea {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--brand-navy);
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.7rem 1rem;
	width: 100%;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}

.vm-field input::placeholder,
.vm-field textarea::placeholder {
	color: #aab0b8;
}

.vm-field input:focus,
.vm-field select:focus,
.vm-field textarea:focus {
	border-color: var(--vm-gold);
	box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
}

.vm-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23122D40' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.2rem;
}

.vm-field textarea {
	resize: vertical;
	min-height: 120px;
}

.vm-form-submit {
	display: block;
	width: 100%;
	background: var(--brand-navy);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: none;
	border-radius: var(--radius);
	padding: 1rem;
	cursor: pointer;
	transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
}

.vm-form-submit:hover {
	background: var(--vm-gold);
	color: var(--brand-navy);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(245,166,35,0.25);
}

.vm-form-success,
.vm-form-error {
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: var(--font-size-sm);
}

.vm-form-success {
	background: rgba(1,227,129,0.08);
	border: 1px solid rgba(1,227,129,0.4);
	color: var(--vm-green);
}

.vm-form-error {
	background: rgba(239,68,68,0.07);
	border: 1px solid rgba(239,68,68,0.35);
	color: #dc2626;
}

/* ── RESPONSIVE UPDATES ────────────────────────────────────────── */
@media (max-width: 860px) {
	.vm-itinerary-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.vm-itinerary-visual {
		max-width: 480px;
		margin: 0 auto;
	}

	.vm-form-wrap {
		padding: 2rem 1.5rem;
	}

	.vm-form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.vm-form-wrap {
		padding: 1.5rem 1.1rem;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.vm-slide-bg { animation: none; }
	.vm-slide,
	.vm-caption,
	.vm-caption-cta,
	.vm-dot,
	.vm-arrow,
	.vm-itinerary-cta,
	.vm-pillar,
	.vm-why-card,
	.vm-form-submit { transition: none; }
}