/* Pro-Spec renewal: homepage sections. Colours come from the Kadence palette
   (1 orange, 3 dark teal, 4 text grey, 7 light line, 8 light background). */

.ps-section { padding-block: 72px; padding-inline: 20px; }
/* Kadence wraps group content in .wp-block-group__inner-container, so match descendants. */
.ps-section h2 { text-align: center; margin-bottom: .35em; }
.ps-section h2 mark { background: none; color: var(--global-palette1); }
.ps-section h2 + p { text-align: center; max-width: 640px; margin-inline: auto; }

/* Draft marker: shown on the development copy only, removed before publishing. */
.ps-draft-note { text-align: center; font-size: 12px; }
.ps-draft-note mark { background: #ffe58a; color: #3a2a00; padding: 2px 8px; }

/* WhatsApp call-to-action button (core Button block with class ps-wa-cta). */
.ps-wa-cta .wp-block-button__link { display: inline-flex; align-items: center; gap: .6em; background: var(--global-palette1); color: #fff; border-radius: 3px; padding: 14px 26px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.ps-wa-cta .wp-block-button__link:hover, .ps-wa-cta .wp-block-button__link:focus { background: var(--global-palette2); color: #fff; }
.ps-wa-cta .wp-block-button__link::before { content: ""; flex: none; width: 1.35em; height: 1.35em; background: currentColor; -webkit-mask: url(whatsapp.svg) center / contain no-repeat; mask: url(whatsapp.svg) center / contain no-repeat; }

/* Cara Kerja / How It Works: numbered steps joined by a line. */
.ps-steps-section { background: var(--global-palette8); }
.ps-steps { list-style: none; counter-reset: ps-step; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 48px 0 44px; position: relative; }
.ps-steps::before { content: ""; position: absolute; top: 23px; left: 7%; right: 7%; height: 2px; background: var(--global-palette7); }
.ps-steps li { counter-increment: ps-step; position: relative; text-align: center; font-size: 13px; line-height: 1.6; color: var(--global-palette4); }
.ps-steps li::before { content: counter(ps-step); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: var(--global-palette3); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 0 0 6px var(--global-palette8); }
.ps-steps li br { display: none; }
.ps-steps li strong { display: block; margin-bottom: 4px; color: var(--global-palette3); font-size: 14px; line-height: 1.35; }

@media (max-width: 1024px) {
	.ps-section { padding-block: 56px; }
	.ps-steps { grid-template-columns: 1fr; gap: 26px; max-width: 560px; margin-inline: auto; }
	.ps-steps::before { top: 8px; bottom: 8px; left: 22px; right: auto; width: 2px; height: auto; }
	.ps-steps li { text-align: left; padding-left: 68px; min-height: 46px; }
	.ps-steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Grid helpers: Kadence wraps group content in .wp-block-group__inner-container on the
   front end; in the editor the children sit directly inside the group. */
.ps-hero-products > .wp-block-group__inner-container, .editor-styles-wrapper .ps-hero-products,
.ps-cat-grid > .wp-block-group__inner-container, .editor-styles-wrapper .ps-cat-grid,
.ps-why-grid > .wp-block-group__inner-container, .editor-styles-wrapper .ps-why-grid { display: grid; }

/* Hero: headline left, three product photos right, on the logo's dark teal. */
.ps-hero { background: var(--global-palette3); color: #fff; padding-block: 72px 80px; padding-inline: 20px; }
.ps-hero .ps-draft-note { text-align: left; }
.ps-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--global-palette1); }
.ps-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.12; font-weight: 700; }
.ps-hero h1 mark { background: none; color: var(--global-palette1); }
.ps-hero p:not(.ps-eyebrow):not(.ps-draft-note) { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.7; max-width: 520px; }
.ps-hero .wp-block-buttons { margin-top: 28px; gap: 12px; }
.ps-btn-light .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); border-radius: 3px; padding: 12px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.ps-btn-light .wp-block-button__link:hover, .ps-btn-light .wp-block-button__link:focus { background: #fff; color: var(--global-palette3); border-color: #fff; }
.ps-hero-products > .wp-block-group__inner-container, .editor-styles-wrapper .ps-hero-products { grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; }
.ps-hero-products figure { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.ps-hero-products figure:nth-child(2) { transform: translateY(-26px); }
.ps-hero-products img { display: block; width: 100%; height: auto; }

/* Product categories: eight photo cards. */
.ps-cat-section { background: var(--global-palette8); }
.ps-cat-grid > .wp-block-group__inner-container, .editor-styles-wrapper .ps-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-block: 40px 36px; }
.ps-cat-card { background: #fff; border-radius: 4px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.ps-cat-card:hover { box-shadow: 0 12px 30px rgba(20,61,68,.14); transform: translateY(-3px); }
.ps-cat-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f2f2; }
.ps-cat-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ps-cat-card h3 { margin: 0; padding: 14px 16px 16px; font-size: 14px; line-height: 1.35; text-align: left; }
.ps-cat-card h3 a { color: var(--global-palette3); text-decoration: none; }
.ps-cat-card h3 a::after { content: " ›"; color: var(--global-palette1); }

/* Why choose us: four strengths. */
.ps-why-grid > .wp-block-group__inner-container, .editor-styles-wrapper .ps-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.ps-why-card h3::before { content: ""; display: block; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: #fdeee2 center / 26px 26px no-repeat; }
.ps-icon-award h3::before { background-image: url(icons/award.svg); }
.ps-icon-pencil-ruler h3::before { background-image: url(icons/pencil-ruler.svg); }
.ps-icon-industry h3::before { background-image: url(icons/industry.svg); }
.ps-icon-boxes h3::before { background-image: url(icons/boxes.svg); }
.ps-why-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--global-palette3); text-align: left; }
.ps-why-card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--global-palette4); text-align: left !important; max-width: none !important; }

@media (max-width: 1024px) {
	.ps-hero { padding-block: 56px 64px; }
	.ps-hero-products > .wp-block-group__inner-container { margin-top: 36px; }
	.ps-cat-grid > .wp-block-group__inner-container, .ps-why-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.ps-why-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.ps-cat-grid > .wp-block-group__inner-container { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ps-cat-card { transition: none; }
	.ps-cat-card:hover { transform: none; }
}

/* Orange button that is not a WhatsApp link. */
.ps-plain-cta .wp-block-button__link::before { display: none; }

/* Kadence's full-width rule resets side padding; keep a gutter on every screen size. */
body .wp-block-group.alignfull.ps-section { padding-left: 20px; padding-right: 20px; }


/* About Us */
.ps-about-tagline { padding-block: 64px; text-align: center; }
.ps-about-tagline .ps-eyebrow { text-align: center; }
.ps-about-tagline h2 { max-width: 820px; margin-inline: auto; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; }
.ps-about-story { background: var(--global-palette8); }
.ps-about-story h2, .ps-about-story h2 + p { text-align: left; margin-inline: 0; max-width: none; }
.ps-about-story .wp-block-column p { color: var(--global-palette4); line-height: 1.8; }
.ps-about-story .wp-block-image img { border-radius: 4px; }
.ps-about-story .ps-draft-note { margin-top: 40px; }
.ps-staff-grid > .wp-block-group__inner-container, .editor-styles-wrapper .ps-staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ps-staff-grid figure { margin: 0; }
.ps-staff-grid img { border-radius: 4px; display: block; width: 100%; height: auto; }
.ps-vm-grid > .wp-block-group__inner-container, .editor-styles-wrapper .ps-vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ps-vm-card { border-left: 4px solid var(--global-palette1); padding: 8px 0 8px 24px; }
.ps-vm-card .ps-eyebrow { text-align: left; margin-bottom: 8px; }
.ps-vm-card p:not(.ps-eyebrow) { margin: 0; font-size: 20px; line-height: 1.5; color: var(--global-palette3); font-weight: 600; text-align: left !important; max-width: none !important; }
.ps-cta-band { background: var(--global-palette3); }
.ps-cta-band h2 { color: #fff; }
.ps-cta-band .wp-block-buttons { margin-top: 20px; }
@media (max-width: 1024px) {
	.ps-about-story .wp-block-columns { gap: 28px; }
	.ps-staff-grid > .wp-block-group__inner-container { gap: 12px; }
	.ps-vm-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.ps-staff-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}
/* A page ending in the dark call-to-action band sits flush against the footer. */
.content-area:has(.entry-content > .ps-cta-band:last-child), .content-area:has(.entry-content > .wp-block-group__inner-container > .ps-cta-band:last-child) { margin-bottom: 0; }
.site-main:has(.ps-cta-band:last-child) .entry-content-wrap { padding-bottom: 0; }

/* Client logos: endless marquee in grayscale; colour + zoom on hover/touch.
   marquee.js wraps the images in .ps-marquee-track and appends a hidden copy for a seamless loop. */
.ps-logo-marquee { margin-top: 36px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ps-marquee-track { display: flex; width: max-content; animation: ps-marquee var(--ps-marquee-duration, 60s) linear infinite; }
.ps-logo-marquee:hover .ps-marquee-track, .ps-logo-marquee:focus-within .ps-marquee-track { animation-play-state: paused; }
.ps-logo-marquee figure { flex: none; margin: 0; padding: 12px 22px; }
.ps-logo-marquee img { display: block; height: 64px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: transform .25s ease, filter .25s ease, opacity .25s ease; }
.ps-logo-marquee figure:hover img, .ps-logo-marquee figure:active img { transform: scale(1.1); filter: none; opacity: 1; }
@keyframes ps-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.editor-styles-wrapper .ps-logo-marquee { display: flex; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 600px) {
	.ps-logo-marquee figure { padding: 10px 14px; }
	.ps-logo-marquee img { height: 48px; }
}
/* The marquee keeps moving even with "reduce motion" on (Pro-Spec's choice, 2026-10-17); it still pauses on hover/focus. */

/* Hero alternative B: full-width photo with a teal gradient and a fact strip. */
.ps-hero-b { padding: 0 20px !important; align-items: stretch; }
.ps-hero-b .wp-block-cover__background { background: linear-gradient(90deg, rgba(20,61,68,.96) 0%, rgba(20,61,68,.82) 42%, rgba(20,61,68,.15) 100%) !important; opacity: 1 !important; }
.ps-hero-b .wp-block-cover__inner-container { width: 100%; display: flex; align-items: center; }
.ps-hero-b-content { width: 100%; padding-block: 72px 0; }
.ps-hero-b-content > .wp-block-group__inner-container > *:not(.ps-hero-facts) { max-width: 600px; margin-left: 0 !important; }
.ps-hero-b h1 { color: #fff; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; margin: 0 0 18px; }
.ps-hero-b h1 mark { background: none; color: var(--global-palette1); }
.ps-hero-b p:not(.ps-eyebrow):not(.ps-fact-title) { color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.7; }
.ps-hero-b .ps-draft-note { text-align: left; }
.ps-hero-b .wp-block-buttons { margin-top: 28px; gap: 12px; }
.ps-hero-facts > .wp-block-group__inner-container, .editor-styles-wrapper .ps-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 64px; border-top: 1px solid rgba(255,255,255,.25); }
.ps-fact { padding: 22px 24px 26px 0; }
.ps-fact + .ps-fact { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.25); }
.ps-fact p { margin: 0; font-size: 13px !important; text-align: left; }
.ps-fact .ps-fact-title { color: #fff; font-size: 17px !important; font-weight: 700; margin-bottom: 4px; }

/* Hero alternative C: light, centred, with clickable industry photos. */
.ps-hero-c { background: #fff; padding-block: 80px 72px; text-align: center; }
.ps-hero-c .ps-eyebrow { text-align: center; }
.ps-hero-c h1 { max-width: 860px; margin: 0 auto 18px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.12; color: var(--global-palette3); }
.ps-hero-c h1 mark { background: none; color: var(--global-palette1); }
.ps-hero-c h1 + p { max-width: 620px; font-size: 17px; color: var(--global-palette4); }
.ps-hero-c .wp-block-buttons { margin-top: 28px; gap: 12px; }
.ps-btn-outline .wp-block-button__link { background: transparent; color: var(--global-palette3); border: 2px solid var(--global-palette3); border-radius: 3px; padding: 12px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.ps-btn-outline .wp-block-button__link:hover, .ps-btn-outline .wp-block-button__link:focus { background: var(--global-palette3); color: #fff; }
.ps-industry-label { margin-top: 56px !important; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--global-palette5); }
.ps-industry-strip > .wp-block-group__inner-container, .editor-styles-wrapper .ps-industry-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ps-industry-card { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; }
.ps-industry-card figure { position: absolute; inset: 0; margin: 0 !important; }
.ps-industry-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ps-industry-card:hover img { transform: scale(1.05); }
.ps-industry-card h3 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(20,61,68,.9)); font-size: 14px; text-align: left; }
.ps-industry-card h3 a { color: #fff; text-decoration: none; }
.ps-industry-card h3 a::after { content: " ›"; color: var(--global-palette1); }

@media (max-width: 1024px) {
	.ps-hero-b-content { padding-block: 56px 0; }
	.ps-hero-b .wp-block-cover__background { background: linear-gradient(180deg, rgba(20,61,68,.9), rgba(20,61,68,.8)) !important; }
	.ps-hero-facts > .wp-block-group__inner-container { grid-template-columns: 1fr; margin-top: 40px; }
	.ps-fact, .ps-fact + .ps-fact { padding: 14px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
	.ps-industry-strip > .wp-block-group__inner-container { grid-template-columns: repeat(5, 150px); overflow-x: auto; padding-bottom: 6px; }
}