/* BUILD 1.2.2 — 2026-08-19 — hero centered on mobile + no mid-word break (Construction); projects card stacks title/desc, sector label left on mobile */
/* Prospective Art — Advertising & Signage Systems. LTR English.
   Fonts: Archivo (display) + Inter Tight (body). Icons: Font Awesome 6. */

/* =====================================================================
   0. DESIGN TOKENS (verbatim from Lovable src/styles.css)
   ===================================================================== */
:root {
	/* NEC — Near East Contracting. Palette derived from the NEC logo (#605490).
	   Token names kept (cyan/cyan-soft/deep) so every existing rule re-tints. */
	--ppa-paper:      #F8F8FB;
	--ppa-ink:        #0D0A15;
	--ppa-charcoal:   #1A1626;
	--ppa-deep:       #383052;
	--ppa-cyan:       #605490;   /* brand purple (was cyan) */
	--ppa-cyan-soft:  #A99AD4;   /* light purple accent (line/glow) */

	--ppa-bg:         var(--ppa-paper);
	--ppa-fg:         var(--ppa-ink);
	--ppa-card:       #FFFFFF;
	--ppa-secondary:  #EFEEF4;
	--ppa-muted:      #EFEEF4;
	--ppa-muted-fg:   #67637A;
	--ppa-border:     #DEDCE7;

	--ppa-font:         "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--ppa-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;

	--ppa-radius:     0.25rem;
	--ppa-maxw:       1320px;
	--ppa-ease:       cubic-bezier(0.16, 1, 0.3, 1);
	--ppa-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   1. HORIZONTAL-SCROLL DEFENSE (mandatory baseline)
   ===================================================================== */
[class^="ppa-"], [class*=" ppa-"],
[class^="ppa-"] *, [class*=" ppa-"] *,
[class^="ppa-"] *::before, [class*=" ppa-"] *::before,
[class^="ppa-"] *::after,  [class*=" ppa-"] *::after {
	box-sizing: border-box;
}

.ppa-section,
.ppa-hero,
.ppa-inner-hero,
.ppa-header,
.ppa-footer,
.ppa-contact,
.ppa-form {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

[class^="ppa-"][class*="-grid"] > *,
[class^="ppa-"][class*="-row"] > *,
.ppa-form-row > *,
.ppa-contact-grid > *,
.ppa-form-field {
	min-width: 0;
	max-width: 100%;
}

[class^="ppa-"] img,
[class*=" ppa-"] img,
[class^="ppa-"] iframe,
[class*=" ppa-"] iframe,
[class^="ppa-"] video,
[class*=" ppa-"] video,
[class^="ppa-"] svg,
[class*=" ppa-"] svg {
	max-width: 100%;
}
[class^="ppa-"] img,
[class*=" ppa-"] img { height: auto; }

[class^="ppa-"] input,
[class*=" ppa-"] input,
[class^="ppa-"] textarea,
[class*=" ppa-"] textarea,
[class^="ppa-"] select,
[class*=" ppa-"] select {
	max-width: 100%;
}
[class^="ppa-"] input[type="text"],
[class^="ppa-"] input[type="email"],
[class^="ppa-"] input[type="tel"],
[class^="ppa-"] textarea,
[class^="ppa-"] select { width: 100%; }

[class^="ppa-"] p,
[class^="ppa-"] a,
[class^="ppa-"] span,
[class^="ppa-"] li,
[class^="ppa-"] [class*="email"],
[class^="ppa-"] [class*="phone"] {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ppa-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Form-section containment — layer 9 */
.elementor-widget-ppa-contact-form,
.ppa-contact,
.ppa-form-card,
.ppa-contact form {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* =====================================================================
   2. TYPOGRAPHY BASELINE
   ===================================================================== */
[class^="ppa-"], [class*=" ppa-"] {
	font-family: var(--ppa-font);
}
[class^="ppa-"] h1, [class*=" ppa-"] h1,
[class^="ppa-"] h2, [class*=" ppa-"] h2,
[class^="ppa-"] h3, [class*=" ppa-"] h3,
[class^="ppa-"] h4, [class*=" ppa-"] h4,
[class^="ppa-"][class*="-title"],
[class^="ppa-"][class*="-display"],
.ppa-display {
	font-family: var(--ppa-font-display);
}
[class^="ppa-"] p,
[class^="ppa-"] li,
[class^="ppa-"][class*="-desc"] {
	line-height: 1.65;
}

/* Display utility — matches Lovable @utility display */
.ppa-display {
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

/* Eyebrow — matches Lovable @utility eyebrow */
.ppa-eyebrow {
	display: inline-block;
	font-family: var(--ppa-font);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/* Selection */
[class^="ppa-"] ::selection { background: var(--ppa-cyan); color: var(--ppa-ink); }

/* =====================================================================
   3. GRADIENTS & ANIMATIONS (fidelity — copied verbatim from Lovable)
   ===================================================================== */

/* Animated gradient headline — LIGHT text, for dark backgrounds */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.ppa-headline-gradient {
		background-image: linear-gradient(
			100deg,
			#FFFFFF 0%,
			var(--ppa-cyan-soft) 28%,
			var(--ppa-cyan) 52%,
			#FFFFFF 80%,
			var(--ppa-cyan) 100%
		);
		background-size: 240% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: ppa-gradient-pan 12s ease-in-out infinite;
	}
	/* Animated gradient headline — DARK text, for light backgrounds */
	.ppa-headline-gradient-dark {
		background-image: linear-gradient(
			100deg,
			var(--ppa-ink) 0%,
			var(--ppa-deep) 30%,
			var(--ppa-cyan) 52%,
			var(--ppa-deep) 74%,
			var(--ppa-ink) 100%
		);
		background-size: 240% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: ppa-gradient-pan 12s ease-in-out infinite;
	}
}
/* Fallback for browsers without background-clip:text */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.ppa-headline-gradient      { color: #FFFFFF; }
	.ppa-headline-gradient-dark { color: var(--ppa-ink); }
}

@keyframes ppa-gradient-pan {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes ppa-marquee-move {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Reveal-on-scroll */
.ppa-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--ppa-ease), transform 0.9s var(--ppa-ease);
}
.ppa-reveal.ppa-revealed {
	opacity: 1;
	transform: translateY(0);
}
.elementor-editor-active .ppa-reveal,
body.elementor-editor-preview .ppa-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.ppa-reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   4. SECTION HEAD RHYTHM (reset-proof)
   ===================================================================== */
.ppa-section-head.ppa-section-head .ppa-eyebrow       { display: block; margin: 0 0 22px; }
.ppa-section-head.ppa-section-head .ppa-section-title { margin: 0 0 20px; }
.ppa-section-head.ppa-section-head .ppa-section-desc  { margin: 0; }
.ppa-align-center { text-align: center; }
.ppa-align-center .ppa-eyebrow { margin-left: auto; margin-right: auto; }

/* =====================================================================
   5. BUTTONS (kit.tsx PrimaryButton / GhostButton / TextLink)
   ===================================================================== */
.ppa-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	overflow: hidden;
	border-radius: 9999px;
	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: color 0.5s var(--ppa-ease);
	white-space: nowrap;
	font-family: var(--ppa-font);
}
.ppa-btn-dark  { background: var(--ppa-ink);   color: var(--ppa-paper); }
.ppa-btn-light { background: var(--ppa-paper); color: var(--ppa-ink); }
.ppa-btn-cyan  { background: var(--ppa-cyan);  color: var(--ppa-paper); }

/* sliding fill */
.ppa-btn-fill {
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	transition: transform 0.5s var(--ppa-ease);
	z-index: 0;
}
.ppa-btn-dark  .ppa-btn-fill { background: var(--ppa-cyan); }
.ppa-btn-light .ppa-btn-fill { background: var(--ppa-cyan); }
.ppa-btn-cyan  .ppa-btn-fill { background: var(--ppa-ink); }
.ppa-btn:hover .ppa-btn-fill { transform: translateX(0); }
.ppa-btn-dark:hover,
.ppa-btn-light:hover { color: var(--ppa-ink); }
.ppa-btn-cyan  { color: var(--ppa-paper); }
.ppa-btn-cyan:hover  { color: var(--ppa-paper); }

.ppa-btn-label { position: relative; z-index: 1; white-space: nowrap; }
.ppa-btn-arrow {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 9999px;
	transition: transform 0.5s var(--ppa-ease);
}
.ppa-btn-dark .ppa-btn-arrow  { background: rgba(249, 250, 251, 0.15); }
.ppa-btn-cyan .ppa-btn-arrow  { background: rgba(249, 250, 251, 0.22); }
.ppa-btn-light .ppa-btn-arrow { background: rgba(10, 13, 18, 0.10); }
.ppa-btn:hover .ppa-btn-arrow { transform: translateX(4px); }
.ppa-btn-arrow svg { width: 0.875rem; height: 0.875rem; display: block; }

/* Ghost button — outline */
.ppa-ghost {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	border-radius: 9999px;
	padding: 1rem 1.75rem;
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	transition: color 0.4s, border-color 0.4s;
	white-space: nowrap;
}
.ppa-ghost svg { width: 0.875rem; height: 0.875rem; transition: transform 0.4s; }
.ppa-ghost:hover svg { transform: translateX(4px); }
.ppa-ghost-light { border: 1px solid rgba(249, 250, 251, 0.35); color: var(--ppa-paper); }
.ppa-ghost-light:hover { border-color: var(--ppa-cyan); color: var(--ppa-cyan); }
.ppa-ghost-dark { border: 1px solid rgba(10, 13, 18, 0.25); color: var(--ppa-ink); }
.ppa-ghost-dark:hover { border-color: var(--ppa-cyan); color: var(--ppa-deep); }

/* Text link — underline + diagonal arrow */
.ppa-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
}
.ppa-textlink-dark  { color: var(--ppa-deep); }
.ppa-textlink-light { color: rgba(249, 250, 251, 0.8); }
.ppa-textlink:hover { color: var(--ppa-cyan); }
.ppa-textlink-label { position: relative; }
.ppa-textlink-label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	height: 1px;
	width: 100%;
	background: var(--ppa-cyan);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--ppa-ease);
}
.ppa-textlink:hover .ppa-textlink-label::after { transform: scaleX(1); transform-origin: left; }
.ppa-textlink svg { width: 0.875rem; height: 0.875rem; transition: transform 0.4s; }
.ppa-textlink:hover svg { transform: translate(2px, -2px); }

/* =====================================================================
   6. HEADER
   ===================================================================== */
.ppa-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(10, 13, 18, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.ppa-header-inner {
	max-width: var(--ppa-maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.75rem 1.25rem;
}
.ppa-header-logo { display: inline-flex; align-items: center; min-width: 0; }
.ppa-header-logo img {
	height: 2.75rem;
	width: auto;
	filter: brightness(0) invert(1);
	flex-shrink: 0;
}
.ppa-header-nav { display: none; align-items: center; gap: 1.75rem; }
.ppa-header-nav a {
	position: relative;
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.3s;
	padding-bottom: 0.35rem;
}
.ppa-header-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--ppa-cyan);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--ppa-ease);
}
.ppa-header-nav a:hover,
.ppa-header-nav a.ppa-active { color: #fff; }
.ppa-header-nav a:hover::after,
.ppa-header-nav a.ppa-active::after { transform: scaleX(1); transform-origin: left; }

.ppa-header-actions { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; }
.ppa-header-cta { display: none; }
.ppa-header-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.ppa-header-burger svg { width: 1.25rem; height: 1.25rem; }
.ppa-header-burger-close { display: none; }
.ppa-header.is-open .ppa-header-burger-open  { display: none; }
.ppa-header.is-open .ppa-header-burger-close { display: inline-flex; }

.ppa-header-mobile {
	display: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--ppa-ink);
	padding: 1rem 1.25rem 2rem;
}
.ppa-header.is-open .ppa-header-mobile { display: block; }
.ppa-header-mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.ppa-header-mobile-nav a {
	font-family: var(--ppa-font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-size: 7vw;
	color: #fff !important;
	text-decoration: none !important;
	padding: 0.5rem 0;
	transition: color 0.3s;
}
.ppa-header-mobile-nav a:hover,
.ppa-header-mobile-nav a:focus { color: var(--ppa-cyan) !important; }
.ppa-header-mobile-cta { margin-top: 1.5rem; }

@media (min-width: 640px) {
	.ppa-header-cta { display: inline-flex; }
}
@media (min-width: 1024px) {
	.ppa-header-inner { padding: 0.75rem 2.5rem; }
	.ppa-header-logo img { height: 3.5rem; }
	.ppa-header-nav { display: flex; }
	.ppa-header-burger { display: none; }
	.ppa-header.is-open .ppa-header-mobile { display: none; }
}

/* =====================================================================
   7. HOME HERO (lamp)
   ===================================================================== */
.ppa-hero {
	position: relative;
	overflow: hidden;
	background: var(--ppa-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
}
.ppa-hero-mobile-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (min-width: 768px) { .ppa-hero-mobile-bg { display: none; } }

.ppa-lamp {
	position: relative;
	z-index: 0;
	display: flex;
	min-height: 80vh;
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: 4rem;
}
.ppa-lamp-overlay {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: rgba(10, 13, 18, 0.25);
}
.ppa-lamp-radial {
	pointer-events: none;
	position: absolute;
	inset: 0;
	/* mobile-first: cover the FULL height so the bright base of the photo is
	   darkened top-to-bottom (no bare bright strip at the bottom) */
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--ppa-ink) 90%, transparent) 0%,
		color-mix(in srgb, var(--ppa-ink) 72%, transparent) 42%,
		color-mix(in srgb, var(--ppa-ink) 88%, transparent) 100%);
}
.ppa-lamp-glow {
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: -6rem;
	transform: translateX(-50%);
	width: 22rem;
	height: 14rem;
	border-radius: 9999px;
	filter: blur(64px);
	background: color-mix(in srgb, var(--ppa-cyan) 45%, transparent);
	opacity: 0;
	animation: ppa-lamp-in 1s var(--ppa-ease) 0.1s forwards;
}
.ppa-lamp-glow-2 {
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18rem;
	height: 16rem;
	border-radius: 9999px;
	filter: blur(64px);
	background: color-mix(in srgb, var(--ppa-cyan-soft) 45%, transparent);
	opacity: 0;
	animation: ppa-fade-in 1.1s var(--ppa-ease) 0.2s forwards;
}
@keyframes ppa-lamp-in { from { opacity: 0; width: 8rem; } to { opacity: 1; width: 22rem; } }
@keyframes ppa-fade-in { from { opacity: 0; } to { opacity: 0.5; } }

/* Desktop lamp — conic beams + bright horizontal line (hidden on mobile).
   Canonical LampContainer geometry: a flex-1 rig fills the hero, the beam
   cluster sits in the rig centre, a SOLID ink mask cuts everything above the
   line, and the text content flows AFTER the rig and is pulled up to sit just
   below the glowing line (source: -translate-y-80). */
.ppa-lamp-desktop { display: none; }
@media (min-width: 768px) {
	/* Desktop hero now MIRRORS mobile: no conic-beam rig and no bright line.
	   The luminous glow starts at the top of the section and a full-height veil
	   darkens the photo top-to-bottom (same treatment as the mobile hero). */
	.ppa-lamp { min-height: 86vh; justify-content: center; padding-top: 0; }
	/* keep the mobile overlay + full-height veil (no desktop override) */
	.ppa-lamp-desktop { display: none; }
	.ppa-lamp-glow, .ppa-lamp-glow-2 { display: block; }
	.ppa-lamp-glow   { width: 42rem; height: 22rem; top: -9rem; }
	.ppa-lamp-glow-2 { width: 34rem; height: 26rem; }
	.ppa-lamp .ppa-hero-content { padding-top: 0; padding-bottom: 0; transform: none; }
}
@keyframes ppa-beam-grow { from { opacity: 0.5; width: 15rem; } to { opacity: 1; width: 30rem; } }
@keyframes ppa-spot-grow { from { width: 8rem; } to { width: 16rem; } }
@keyframes ppa-line-grow { from { width: 15rem; } to { width: 30rem; } }

.ppa-hero-content {
	position: relative;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 4rem 1.25rem;
	text-align: center;
	max-width: 46rem;
	margin: 0 auto;
}
.ppa-hero-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	color: var(--ppa-cyan);
}
.ppa-hero-eyebrow .ppa-rule { height: 1px; width: 2rem; background: var(--ppa-cyan); display: inline-block; }
.ppa-hero-title {
	margin: 1.5rem 0 0;
	font-size: 13vw;
	line-height: 1.06;
	text-align: center;
}
/* keep whole words together — the global break-word must not split "Construction" */
.ppa-hero-title, .ppa-hero-title span { overflow-wrap: normal; word-break: keep-all; }
.ppa-hero-desc {
	margin: 1.75rem auto 0;
	max-width: 36rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
}
.ppa-hero-actions {
	margin-top: 2.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
@media (min-width: 640px) { .ppa-hero-title { font-size: 9vw; } }
@media (min-width: 768px) {
	.ppa-hero-desc { font-size: 1rem; }
}
@media (min-width: 1024px) { .ppa-hero-title { font-size: 5.4vw; } }
@media (max-width: 767px) {
	.ppa-hero { background-attachment: scroll !important; min-height: 100svh; }
	.ppa-lamp { min-height: 100svh; }
}

/* =====================================================================
   8. INNER PAGE HERO (page-hero.tsx)
   ===================================================================== */
.ppa-inner-hero {
	position: relative;
	overflow: hidden;
	background: var(--ppa-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding: 6rem 0 3.25rem;
}
.ppa-inner-hero-veil { position: absolute; inset: 0; background: rgba(10, 13, 18, 0.75); pointer-events: none; }
.ppa-inner-hero-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(90% 70% at 85% 10%,
		color-mix(in srgb, var(--ppa-deep) 60%, transparent), transparent 65%);
}
.ppa-inner-hero-inner {
	position: relative;
	max-width: var(--ppa-maxw);
	margin: 0 auto;
	padding: 0 1.25rem;
}
.ppa-inner-hero-eyebrow { display: flex; align-items: center; gap: 0.75rem; color: var(--ppa-cyan); }
.ppa-inner-hero-eyebrow .ppa-rule { height: 1px; width: 2.5rem; background: var(--ppa-cyan); display: inline-block; }
.ppa-inner-hero-title {
	margin: 1.5rem 0 0;
	font-size: 10vw;
	line-height: 1.02;
}
.ppa-inner-hero-title span { display: block; }
.ppa-inner-hero-desc {
	margin: 2rem 0 0;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 640px) { .ppa-inner-hero-title { font-size: 7.5vw; } }
@media (min-width: 768px) {
	.ppa-inner-hero { padding: 12rem 0 6rem; }
	.ppa-inner-hero-desc { font-size: 1.125rem; }
}
@media (min-width: 1024px) { .ppa-inner-hero-title { font-size: 5vw; } }

/* =====================================================================
   9. HOME ABOUT (About.tsx — 3-col grid)
   ===================================================================== */
.ppa-about { position: relative; background: var(--ppa-bg); padding: 6rem 0; }
.ppa-about-inner {
	max-width: var(--ppa-maxw);
	margin: 0 auto;
	padding: 0 1.25rem;
	display: grid;
	gap: 2.5rem;
	align-items: start;
}
.ppa-about-title { font-size: 9vw; line-height: 1.05; }
.ppa-about-title span { display: block; }
.ppa-about-media {
	position: relative;
	height: 26rem;
	overflow: hidden;
}
.ppa-about-media img { position: absolute; inset: 0; height: 130%; width: 100%; object-fit: cover; }
.ppa-about-lead { font-size: 1.125rem; line-height: 1.7; color: rgba(10, 13, 18, 0.8); }
.ppa-about-desc { margin-top: 1.5rem; font-size: 1rem; line-height: 1.7; color: var(--ppa-muted-fg); }
.ppa-about-link { margin-top: 2.5rem; }
@media (min-width: 640px) { .ppa-about-title { font-size: 6.4vw; } }
@media (min-width: 1024px) {
	.ppa-about { padding: 9rem 0; }
	.ppa-about-inner { grid-template-columns: 1.1fr 0.8fr 1fr; gap: 4rem; }
	.ppa-about-title { font-size: 3.8vw; }
	.ppa-about-media { height: 38rem; margin-top: -4rem; }
	.ppa-about-copy { padding-top: 6rem; }
}

/* =====================================================================
   10. HOME SERVICES (Services.tsx — dark hover list)
   ===================================================================== */
.ppa-services { position: relative; overflow: hidden; background: var(--ppa-ink); color: #fff; padding: 6rem 0; }
.ppa-services-inner { max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem; }
.ppa-services-eyebrow { color: rgba(255, 255, 255, 0.4); }
.ppa-services-title { margin-top: 1.5rem; font-size: 8.5vw; line-height: 1.05; }
.ppa-services-title span { display: block; }
.ppa-services-list { margin-top: 4rem; }
.ppa-service-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	column-gap: 1.5rem;
	row-gap: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.75rem 0;
	transition: color 0.5s;
}
.ppa-services-list .ppa-service-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ppa-service-no {
	font-family: var(--ppa-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.25);
	transition: color 0.5s;
}
.ppa-service-name {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 1rem;
	font-family: var(--ppa-font-display);
	font-size: 5.2vw;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.5s;
}
.ppa-service-name i { flex-shrink: 0; font-size: 1rem; color: var(--ppa-cyan); }
.ppa-service-sub { grid-column: span 2; font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); }
.ppa-service-row:hover .ppa-service-no   { color: var(--ppa-cyan); }
.ppa-service-row:hover .ppa-service-name { color: #fff; transform: translateX(0.5rem); }
.ppa-services-link { margin-top: 3.5rem; }
@media (min-width: 640px) { .ppa-services-title { font-size: 6vw; } .ppa-service-name { font-size: 3.4vw; } }
@media (min-width: 768px) {
	.ppa-service-row { grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; padding: 2.25rem 0; }
	.ppa-service-no { font-size: 3rem; }
	.ppa-service-name i { font-size: 1.25rem; }
	.ppa-service-sub { grid-column: auto; max-width: 16rem; text-align: right; }
	.ppa-service-row:hover .ppa-service-name { transform: translateX(1rem); }
}
@media (min-width: 1024px) {
	.ppa-services { padding: 9rem 0; }
	.ppa-services-title { font-size: 3.6vw; }
	.ppa-service-name { font-size: 2vw; }
}

/* =====================================================================
   11. HOME PROJECTS (Projects.tsx — sticky scroll on desktop, stack mobile)
   ===================================================================== */
.ppa-projects { background: var(--ppa-bg); padding-top: 6rem; }
.ppa-projects-inner { max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem; }
.ppa-projects-eyebrow { color: var(--ppa-muted-fg); }
.ppa-projects-title { margin-top: 1.5rem; font-size: 9vw; line-height: 1.05; }
.ppa-projects-title span { display: block; }

/* Mobile stacked list (default) */
.ppa-projects-stack { margin-top: 3.5rem; }
.ppa-project-card { margin-bottom: 3rem; }
.ppa-project-card-media { position: relative; aspect-ratio: 4/5; width: 100%; overflow: hidden; }
.ppa-project-card-media img { height: 100%; width: 100%; object-fit: cover; }
.ppa-project-card-no {
	position: absolute; left: 1rem; top: 1rem;
	font-family: var(--ppa-font-display); font-size: 0.875rem;
	font-variant-numeric: tabular-nums; color: #fff;
}
.ppa-project-card-body { padding: 1.25rem 1.25rem 0; }
.ppa-project-card-sector { color: var(--ppa-cyan); }
.ppa-project-card-title { margin-top: 0.75rem; font-size: 6vw; line-height: 1.1; }
.ppa-project-card-desc { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--ppa-muted-fg); }
.ppa-projects-all { padding: 0 1.25rem; margin-top: 0.5rem; }

/* Desktop sticky scroller */
.ppa-projects-scroller { display: none; }
@media (min-width: 1024px) {
	.ppa-projects { padding-top: 9rem; }
	.ppa-projects-title { font-size: 4vw; }
	.ppa-projects-stack { display: none; }
	.ppa-projects-scroller { display: block; position: relative; margin-top: 4rem; }
	.ppa-projects-sticky {
		position: sticky; top: 0; height: 100vh; display: flex; align-items: stretch;
	}
	.ppa-projects-visual { position: relative; height: 100%; width: 62%; overflow: hidden; }
	.ppa-projects-visual .ppa-proj-slide {
		position: absolute; inset: 0; opacity: 0; transform: translateY(100%);
		transition: opacity 0.9s var(--ppa-ease), transform 0.9s var(--ppa-ease);
	}
	.ppa-projects-visual .ppa-proj-slide img { height: 100%; width: 100%; object-fit: cover; }
	.ppa-projects-visual .ppa-proj-slide.is-active { opacity: 1; transform: translateY(0); }
	.ppa-projects-visual .ppa-proj-slide.is-past { opacity: 0; transform: translateY(-18%) scale(0.92); }
	.ppa-projects-panel {
		width: 38%; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
		background: var(--ppa-ink); color: #fff; padding: 0 3rem;
	}
	.ppa-projects-count { font-family: var(--ppa-font-display); font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--ppa-cyan); }
	.ppa-projects-count-current { color: #fff; }
	/* Info blocks are stacked: only the active one occupies space, so the
	   flex column stays vertically centred beside the image (source parity). */
	.ppa-projects-stage { position: relative; }
	.ppa-projects-panel .ppa-proj-info {
		position: absolute; inset: 0; opacity: 0; pointer-events: none;
		transition: opacity 0.6s;
	}
	.ppa-projects-panel .ppa-proj-info.is-active {
		position: relative; opacity: 1; pointer-events: auto;
	}
	.ppa-proj-info-sector { color: rgba(255, 255, 255, 0.45); }
	.ppa-proj-info-title { margin-top: 1rem; font-size: 2.3vw; line-height: 1.1; }
	.ppa-proj-info-desc { margin-top: 1.5rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.6); }
	.ppa-projects-panel .ppa-textlink { margin-top: 1.5rem; }
	/* On desktop the per-project link lives in the panel; hide the mobile all-link
	   (removes the empty white strip after the section). */
	.ppa-projects-all { display: none; }
}

/* =====================================================================
   12. PARTNERS MARQUEE (v8 four-group)
   ===================================================================== */
.ppa-partners { position: relative; overflow: hidden; background: var(--ppa-ink); color: #fff; padding: 4rem 0 3rem; }
.ppa-partners-glow {
	pointer-events: none; position: absolute; inset: 0;
	background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--ppa-deep) 55%, transparent), transparent 70%);
}
.ppa-partners-inner { position: relative; max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem; }
.ppa-partners-eyebrow { color: var(--ppa-cyan); }
.ppa-partners-title { margin-top: 1.25rem; font-size: 8vw; line-height: 1.05; }
.ppa-marquee { position: relative; margin-top: 2.25rem; }
.ppa-marquee, .ppa-marquee-track, .ppa-marquee-group, .ppa-marquee-item { direction: ltr; }
.ppa-marquee-viewport { overflow: hidden; width: 100%; display: flex; }
.ppa-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: ppa-marquee-move 34s linear infinite;
	will-change: transform;
}
.ppa-marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.ppa-marquee-item { flex: 0 0 auto; display: flex; align-items: center; margin-inline: 1.25rem; }
.ppa-marquee-item img {
	height: 3.75rem; width: auto;
	opacity: 0.7;
	filter: grayscale(1) brightness(1.7) contrast(1.05);
	transition: all 0.5s;
}
.ppa-marquee-item:hover img {
	opacity: 1;
	transform: scale(1.05);
	filter: grayscale(1) brightness(0.9) sepia(1) hue-rotate(160deg) saturate(6);
}
.ppa-marquee-fade-l, .ppa-marquee-fade-r {
	pointer-events: none; position: absolute; inset-block: 0; width: 4rem; z-index: 2;
}
.ppa-marquee-fade-l { left: 0;  background: linear-gradient(to right, var(--ppa-ink), transparent); }
.ppa-marquee-fade-r { right: 0; background: linear-gradient(to left, var(--ppa-ink), transparent); }
@media (min-width: 768px) {
	.ppa-partners { padding: 8rem 0 6rem; }
	.ppa-partners-title { font-size: 5vw; }
	.ppa-marquee-item { margin-inline: 2.25rem; }
	.ppa-marquee-item img { height: 7rem; }
	.ppa-marquee-fade-l, .ppa-marquee-fade-r { width: 8rem; }
}
@media (min-width: 1024px) { .ppa-partners-title { font-size: 3rem; } }

/* =====================================================================
   13. HOME PROCESS (Process.tsx — sticky timeline desktop, stack mobile)
   ===================================================================== */
.ppa-process { background: var(--ppa-bg); }
.ppa-process-head { max-width: var(--ppa-maxw); margin: 0 auto; padding: 6rem 1.25rem 0; }
.ppa-process-eyebrow { color: var(--ppa-muted-fg); }
.ppa-process-title { margin-top: 1.5rem; font-size: 8.5vw; line-height: 1.05; }
.ppa-process-title span { display: block; }

.ppa-process-stack { padding: 3.5rem 1.25rem 2rem; }
.ppa-process-item { margin-bottom: 3.5rem; }
.ppa-process-item-head { display: flex; align-items: flex-end; gap: 1rem; }
.ppa-process-item-no { font-family: var(--ppa-font-display); font-size: 3.75rem; font-weight: 800; line-height: 1; color: rgba(10, 13, 18, 0.15); }
.ppa-process-item-title { display: flex; align-items: center; gap: 0.75rem; font-size: 6.5vw; line-height: 1.1; }
.ppa-process-item-title i { font-size: 1.25rem; color: var(--ppa-cyan); }
.ppa-process-item-media { margin-top: 1.25rem; aspect-ratio: 16/11; overflow: hidden; }
.ppa-process-item-media img { height: 100%; width: 100%; object-fit: cover; }
.ppa-process-item-desc { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--ppa-muted-fg); }

.ppa-process-scroller { display: none; }
@media (min-width: 1024px) {
	.ppa-process-head { padding: 9rem 2.5rem 0; }
	.ppa-process-title { font-size: 3.4vw; }
	.ppa-process-stack { display: none; }
	.ppa-process-scroller { display: block; position: relative; }
	.ppa-process-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
	.ppa-process-grid {
		margin: 0 auto; width: 100%; max-width: var(--ppa-maxw);
		display: grid; grid-template-columns: 3rem 1fr 1fr; align-items: center; gap: 3rem; padding: 0 2.5rem;
	}
	.ppa-process-rail { position: relative; height: 60vh; width: 1px; justify-self: center; background: rgba(10, 13, 18, 0.15); }
	.ppa-process-rail-fill { position: absolute; left: 0; top: 0; width: 1px; background: var(--ppa-cyan); transition: height 0.6s var(--ppa-ease); }
	.ppa-process-dot { position: absolute; left: -3px; height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: rgba(10, 13, 18, 0.25); transition: background 0.5s; }
	.ppa-process-dot.is-active { background: var(--ppa-cyan); }
	.ppa-process-num { font-family: var(--ppa-font-display); font-size: 10vw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(10, 13, 18, 0.1); }
	.ppa-process-text { position: relative; }
	.ppa-process-stage { position: absolute; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
	.ppa-process-stage.is-active { position: relative; opacity: 1; pointer-events: auto; }
	.ppa-process-stage-title { display: flex; align-items: center; gap: 1rem; margin-top: -1rem; font-size: 3.2vw; line-height: 1.1; }
	.ppa-process-stage-title i { font-size: 1.5rem; color: var(--ppa-cyan); }
	.ppa-process-stage-desc { margin-top: 1.5rem; max-width: 28rem; font-size: 1rem; line-height: 1.7; color: var(--ppa-muted-fg); }
	.ppa-process-visual { position: relative; aspect-ratio: 4/5; overflow: hidden; }
	.ppa-process-visual img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.9s var(--ppa-ease), transform 0.9s var(--ppa-ease); }
	.ppa-process-visual img.is-active { opacity: 1; transform: scale(1); }
}

/* =====================================================================
   14. CONTACT CTA (ContactCTA.tsx)
   ===================================================================== */
.ppa-cta { position: relative; overflow: hidden; background: var(--ppa-ink); color: #fff; padding: 5rem 0 7rem; }
.ppa-cta-glow {
	pointer-events: none; position: absolute; right: -10rem; top: 25%;
	width: 36rem; height: 36rem; border-radius: 9999px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ppa-cyan) 25%, transparent), transparent);
}
.ppa-cta-inner {
	position: relative; max-width: var(--ppa-maxw); margin: 0 auto;
	display: flex; flex-direction: column; align-items: center; padding: 0 1.25rem; text-align: center;
}
.ppa-cta-title { font-size: 10vw; line-height: 1.06; text-align: center; }
.ppa-cta-title span { display: block; white-space: nowrap; }
.ppa-cta-btn { margin-top: 3.5rem; }
@media (min-width: 640px) { .ppa-cta-title { font-size: 7.5vw; } }
@media (min-width: 768px) { .ppa-cta { padding: 7rem 0 10rem; } }
@media (min-width: 1024px) {
	.ppa-cta-title { font-size: 5.4vw; }
	.ppa-cta-title span:last-child { font-size: 7vw; }
}

/* =====================================================================
   15. OUR STORY (OurStory.tsx — About page)
   ===================================================================== */
.ppa-story { background: var(--ppa-bg); padding: 5rem 0 6rem; }
.ppa-story-top {
	max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem;
	display: grid; gap: 3rem;
}
.ppa-story-title { font-size: 8vw; line-height: 1.05; }
.ppa-story-title span { display: block; }
.ppa-story-lead { margin-top: 2.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: rgba(10, 13, 18, 0.8); }
.ppa-story-desc { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--ppa-muted-fg); }
.ppa-story-media { position: relative; height: 24rem; overflow: hidden; }
.ppa-story-media img { height: 100%; width: 100%; object-fit: cover; }

.ppa-story-values {
	max-width: var(--ppa-maxw); margin: 5rem auto 0; padding: 0 1.25rem;
	display: grid; gap: 0; border-top: 1px solid rgba(10, 13, 18, 0.1);
}
.ppa-value { border-bottom: 1px solid rgba(10, 13, 18, 0.1); padding: 2.5rem 0; }
.ppa-value-no { font-family: var(--ppa-font-display); font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--ppa-cyan); }
.ppa-value-title { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 6vw; line-height: 1.1; }
.ppa-value-title i { font-size: 1.125rem; color: var(--ppa-cyan); }
.ppa-value-desc { margin-top: 1.25rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.7; color: var(--ppa-muted-fg); }
@media (min-width: 640px) { .ppa-story-title { font-size: 5.4vw; } .ppa-value-title { font-size: 3.8vw; } }
@media (min-width: 1024px) {
	.ppa-story { padding: 7rem 0 8rem; }
	.ppa-story-top { grid-template-columns: 1fr 0.85fr; gap: 5rem; }
	.ppa-story-title { font-size: 3.2vw; }
	.ppa-story-media { height: 34rem; }
	.ppa-story-values { margin-top: 7rem; grid-template-columns: repeat(3, 1fr); }
	.ppa-value { border-bottom: 0; padding-right: 2.5rem; }
	.ppa-value-title { font-size: 1.9vw; }
}

/* =====================================================================
   16. SECTORS (expanding-cards.tsx — About page)
   ===================================================================== */
.ppa-sectors { position: relative; overflow: hidden; background: var(--ppa-bg); padding: 5rem 0; }
.ppa-sectors-inner { position: relative; max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem; }
.ppa-sectors-eyebrow { color: var(--ppa-cyan); }
.ppa-sectors-title { margin-top: 1.25rem; max-width: 48rem; font-size: 8vw; line-height: 1.05; }
.ppa-sectors-desc { margin-top: 1rem; max-width: 36rem; font-size: 0.875rem; line-height: 1.7; color: rgba(10, 13, 18, 0.6); }
.ppa-cards {
	margin-top: 3rem;
	display: grid;
	gap: 0.5rem;
	grid-template-rows: repeat(6, 1fr);
	height: 34rem;
	transition: grid-template-rows 0.7s var(--ppa-ease), grid-template-columns 0.7s var(--ppa-ease);
}
.ppa-card {
	position: relative; min-height: 0; min-width: 0; cursor: pointer;
	overflow: hidden; border-radius: 1rem; outline: none;
}
.ppa-card img {
	position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;
	transform: scale(1.1); opacity: 0.55; filter: grayscale(1);
	transition: all 0.7s var(--ppa-ease);
}
.ppa-card.is-active img { transform: scale(1); opacity: 1; filter: none; }
.ppa-card-veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--ppa-ink) 88%, transparent), color-mix(in srgb, var(--ppa-ink) 20%, transparent) 60%, transparent);
}
.ppa-card-vlabel {
	position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%) rotate(180deg);
	writing-mode: vertical-rl; white-space: nowrap;
	font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.25em;
	color: rgba(255, 255, 255, 0.85); transition: opacity 0.5s;
	display: none;
}
.ppa-card.is-active .ppa-card-vlabel { opacity: 0; }
.ppa-card-body { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
.ppa-card-icon {
	display: grid; place-items: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0;
	border-radius: 9999px; border: 1px solid transparent; color: var(--ppa-cyan);
	opacity: 0; transition: all 0.5s;
}
.ppa-card-icon i { font-size: 0.875rem; }
.ppa-card.is-active .ppa-card-icon { border-color: var(--ppa-cyan); background: color-mix(in srgb, var(--ppa-cyan) 15%, transparent); opacity: 1; }
.ppa-card-title { font-family: var(--ppa-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: #fff; opacity: 0; transition: all 0.5s; }
.ppa-card.is-active .ppa-card-title { opacity: 1; }
.ppa-card-desc { max-width: 28rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); display: none; }
.ppa-card.is-active .ppa-card-desc { display: block; }
/* Mobile: collapsed cards shouldn't reserve icon/title space (that's what
   created the big gap above the description on the active card). Icon is
   removed from flow until active; the body gap is tighter so the title sits
   right above the description. */
@media (max-width: 767px) {
	.ppa-card-body { gap: 0.5rem; padding: 1.1rem; }
	.ppa-card-icon { display: none; }
	.ppa-card.is-active .ppa-card-icon { display: grid; margin-bottom: 0.25rem; }
	.ppa-card-title { display: none; }
	.ppa-card.is-active .ppa-card-title { display: block; }
}
@media (min-width: 640px) { .ppa-sectors-title { font-size: 5vw; } }
@media (min-width: 768px) {
	.ppa-sectors { padding: 7rem 0; }
	.ppa-cards { grid-template-rows: none; grid-template-columns: repeat(6, 1fr); height: 30rem; }
	.ppa-card-vlabel { display: block; }
	.ppa-card-body { padding: 1.75rem; }
	.ppa-card-title { font-size: 1.5rem; }
}
@media (min-width: 1024px) { .ppa-sectors-title { font-size: 3rem; } }

/* =====================================================================
   17. SERVICES GRID / HOW IT WORKS (Services page)
   ===================================================================== */
.ppa-svcgrid { background: var(--ppa-bg); padding: 5rem 0; }
.ppa-svcgrid-head { max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem; }
.ppa-svcgrid-eyebrow { color: var(--ppa-muted-fg); }
.ppa-svcgrid-title { margin-top: 1.25rem; max-width: 42rem; font-family: var(--ppa-font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--ppa-ink); }
.ppa-hiw { position: relative; width: 100%; margin-top: 3.5rem; }
.ppa-hiw-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.ppa-hiw-cards { position: relative; display: flex; flex-direction: column; gap: 2rem; }
.ppa-hiw-card { position: relative; width: 100%; }
.ppa-hiw-card-inner {
	position: relative; border-radius: 1rem; border: 1px solid rgba(10, 13, 18, 0.1);
	background: var(--ppa-card); padding: 2.5rem 1.75rem 1.75rem;
	box-shadow: 0 18px 50px -30px color-mix(in srgb, var(--ppa-ink) 60%, transparent);
	transition: transform 0.5s;
}
.ppa-hiw-card-inner:hover { transform: translateY(-4px) rotate(0) !important; }
.ppa-hiw-pin { position: absolute; left: 50%; top: 0.75rem; transform: translateX(-50%); }
.ppa-hiw-pin span { display: block; height: 0.75rem; width: 0.75rem; border-radius: 9999px; background: var(--ppa-cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ppa-cyan) 25%, transparent); }
.ppa-hiw-no { font-family: var(--ppa-font-display); font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ppa-cyan); }
.ppa-hiw-title { margin-top: 0.75rem; font-family: var(--ppa-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--ppa-ink); }
.ppa-hiw-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--ppa-muted-fg); }
.ppa-hiw-path { display: none; }
@media (min-width: 768px) {
	.ppa-svcgrid { padding: 7rem 0; }
	.ppa-svcgrid-title { font-size: 2.25rem; }
	.ppa-hiw-cards { display: block; min-height: 1130px; }
	.ppa-hiw-card { position: absolute; width: 22rem; }
	.ppa-hiw-card:nth-child(1) { top: 0;     left: 10%; }
	.ppa-hiw-card:nth-child(2) { top: 130px; right: 10%; }
	.ppa-hiw-card:nth-child(3) { top: 440px; left: 10%; }
	.ppa-hiw-card:nth-child(4) { top: 570px; right: 8%; }
	.ppa-hiw-card:nth-child(5) { top: 860px; left: 10%; }
	.ppa-hiw-card:nth-child(odd)  .ppa-hiw-card-inner { transform: rotate(6deg); }
	.ppa-hiw-card:nth-child(even) .ppa-hiw-card-inner { transform: rotate(-6deg); }
	.ppa-hiw-path { display: block; position: absolute; inset: 0; height: 100%; width: 100%; pointer-events: none; z-index: 0; }
	.ppa-hiw-card { z-index: 1; }
	/* Dashed connector fades in, then the dashes gently flow along the path. */
	.ppa-hiw-path-line {
		opacity: 0;
		animation: ppa-hiw-fade 1.2s var(--ppa-ease) 0.3s forwards, ppa-hiw-flow 3s linear 1.5s infinite;
	}
	@keyframes ppa-hiw-fade { to { opacity: 1; } }
	@keyframes ppa-hiw-flow { to { stroke-dashoffset: -160; } }
}

/* =====================================================================
   18. PROJECTS GRID (ProjectsGrid.tsx — filters + masonry-ish)
   ===================================================================== */
.ppa-pgrid { background: var(--ppa-bg); padding: 5rem 0; }
.ppa-pgrid-inner { max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem; }
.ppa-pgrid-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid rgba(10, 13, 18, 0.1); padding-bottom: 2rem; }
.ppa-pgrid-filter {
	border-radius: 9999px; border: 1px solid rgba(10, 13, 18, 0.2);
	padding: 0.625rem 1.25rem; font-size: 0.72rem; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.18em; color: rgba(10, 13, 18, 0.6);
	background: transparent; cursor: pointer; transition: all 0.4s;
}
.ppa-pgrid-filter:hover { border-color: var(--ppa-cyan); color: var(--ppa-deep); }
.ppa-pgrid-filter.is-active { border-color: var(--ppa-ink); background: var(--ppa-ink); color: var(--ppa-bg); }
.ppa-pgrid-grid { margin-top: 3rem; display: grid; gap: 4rem 2rem; }
.ppa-pgrid-item { transition: opacity 0.5s, transform 0.5s; }
.ppa-pgrid-item.is-hidden { display: none; }
.ppa-pgrid-item-media { position: relative; width: 100%; overflow: hidden; }
.ppa-pgrid-item-media.shape-portrait  { aspect-ratio: 3/4; }
.ppa-pgrid-item-media.shape-wide      { aspect-ratio: 21/9; }
.ppa-pgrid-item-media.shape-landscape { aspect-ratio: 4/3; }
.ppa-pgrid-item-media img { height: 100%; width: 100%; object-fit: cover; transition: transform 1.4s var(--ppa-ease); }
.ppa-pgrid-item:hover .ppa-pgrid-item-media img { transform: scale(1.06); }
.ppa-pgrid-item-body { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.ppa-pgrid-item-title { font-size: 6.4vw; line-height: 1.15; overflow-wrap: normal; word-break: keep-all; }
.ppa-pgrid-item-desc { margin-top: 0.5rem; max-width: 32rem; font-size: 0.9rem; line-height: 1.7; color: var(--ppa-muted-fg); }
.ppa-pgrid-item-sector { order: -1; flex-shrink: 0; color: var(--ppa-cyan); text-align: left; }
@media (min-width: 768px) {
	.ppa-pgrid { padding: 7rem 0; }
	.ppa-pgrid-grid { grid-template-columns: repeat(2, 1fr); }
	.ppa-pgrid-item.shape-wide { grid-column: span 2; }
	.ppa-pgrid-item-title { font-size: 3vw; }
	.ppa-pgrid-item-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; }
	.ppa-pgrid-item-desc { margin-top: 1rem; }
	.ppa-pgrid-item-sector { order: 0; }
}
@media (min-width: 1024px) { .ppa-pgrid-item-title { font-size: 1.8vw; } }

/* =====================================================================
   19. CONTACT FORM (ContactForm.tsx)
   ===================================================================== */
.ppa-contact { background: var(--ppa-bg); padding: 5rem 0; }
.ppa-contact-grid {
	max-width: var(--ppa-maxw); margin: 0 auto; padding: 0 1.25rem;
	display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr);
}
.ppa-contact-title { font-size: 7.5vw; line-height: 1.08; }
.ppa-contact-title span { display: block; }
.ppa-contact-col-info,
.ppa-contact-col-form { min-width: 0; }
.ppa-contact-info { margin-top: 3rem; display: flex; flex-direction: column; gap: 2rem; border-top: 1px solid rgba(10, 13, 18, 0.1); padding-top: 2.5rem; }
.ppa-contact-info-label { color: var(--ppa-muted-fg); }
.ppa-contact-info-value { margin-top: 0.5rem; font-size: 1.25rem; color: var(--ppa-ink); }
.ppa-contact-info a.ppa-contact-info-value { display: block; transition: color 0.3s; text-decoration: none; }
.ppa-contact-info a.ppa-contact-info-value:hover { color: var(--ppa-deep); }
.ppa-contact-info-sub { font-size: 0.875rem; color: var(--ppa-muted-fg); }

.ppa-form { display: grid; gap: 2rem; }
.ppa-form > .ppa-btn { justify-self: start; }
.ppa-form-row { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.ppa-form-field label { display: block; }
.ppa-form-field .ppa-eyebrow { color: var(--ppa-muted-fg); }
.ppa-form-field input,
.ppa-form-field select,
.ppa-form-field textarea {
	margin-top: 0.75rem; width: 100%;
	border: 0; border-bottom: 1px solid rgba(10, 13, 18, 0.2);
	background: transparent; padding: 0 0 0.75rem;
	font-size: 1.125rem; color: var(--ppa-ink); font-family: inherit;
	outline: none; transition: border-color 0.3s; border-radius: 0;
}
.ppa-form-field textarea { resize: none; }
.ppa-form-field input:focus,
.ppa-form-field select:focus,
.ppa-form-field textarea:focus { border-color: var(--ppa-cyan); }
.ppa-form-alert {
	display: flex; align-items: center; gap: 0.75rem;
	margin-bottom: 0.5rem; padding: 1rem 1.25rem; border-radius: 0.5rem;
	font-size: 0.875rem; font-weight: 600; line-height: 1.5;
}
.ppa-form-alert svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.ppa-form-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.ppa-form-alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
@media (min-width: 640px) { .ppa-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 768px) { .ppa-contact { padding: 7rem 0; } .ppa-contact-title { font-size: 4.8vw; } }
@media (min-width: 1024px) {
	.ppa-contact-grid { grid-template-columns: 0.8fr 1fr; gap: 6rem; }
	.ppa-contact-title { font-size: 2.5vw; }
}

/* =====================================================================
   20. FOOTER
   ===================================================================== */
.ppa-footer { position: relative; overflow: hidden; background: var(--ppa-ink); color: rgba(255, 255, 255, 0.7); padding-top: 4rem; }
.ppa-footer-glow {
	pointer-events: none; position: absolute; left: 50%; top: 0;
	height: 16rem; width: 80%; transform: translateX(-50%); filter: blur(64px);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ppa-cyan) 22%, transparent), transparent);
}
.ppa-footer-headline { position: relative; }
.ppa-footer-headline h2 {
	font-size: 11vw; line-height: 1.18; white-space: nowrap; padding: 0 1.25rem;
	margin: 0;
}
.ppa-footer-rule { margin-top: 1rem; display: block; height: 1px; background: color-mix(in srgb, var(--ppa-cyan) 55%, transparent); transform: scaleX(0); transform-origin: left; animation: ppa-rule-in 1.4s var(--ppa-ease) 0.4s forwards; }
@keyframes ppa-rule-in { to { transform: scaleX(1); } }

.ppa-footer-main {
	max-width: var(--ppa-maxw); width: 100%; margin: 2.5rem auto 0;
	display: grid; gap: 2.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 2.5rem 1.25rem;
}
.ppa-footer-brand img { width: auto; height: 4rem; filter: brightness(0) invert(1); display: block; }
.ppa-footer-brand-name { margin-top: 1rem; font-size: 1rem; color: #fff; }
.ppa-footer-brand-tag { margin-top: 0.25rem; color: var(--ppa-cyan); }
.ppa-footer-socials { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.ppa-footer-socials a { color: rgba(255, 255, 255, 0.6); transition: color 0.3s; text-decoration: none; }
.ppa-footer-socials a:hover { color: var(--ppa-cyan); }
.ppa-footer-socials a i { font-size: 1.125rem; }
.ppa-footer-col-title { color: rgba(255, 255, 255, 0.4); margin-bottom: 0.75rem; }
.ppa-footer-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.ppa-footer-nav a { width: fit-content; font-size: 1rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s; }
.ppa-footer-nav a:hover { color: var(--ppa-cyan); }
.ppa-footer-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.ppa-footer-contact a { width: fit-content; font-size: 1rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s; }
.ppa-footer-contact a.is-strong { color: #fff; }
.ppa-footer-contact a:hover { color: var(--ppa-cyan); }
.ppa-footer-bar {
	max-width: var(--ppa-maxw); width: 100%; margin-inline: auto;
	display: flex; flex-direction: column; gap: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 1.25rem;
	font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.25);
}
.ppa-footer-bar a { color: inherit; text-decoration: underline; }
.ppa-footer-bar a:hover { color: var(--ppa-cyan); }
@media (min-width: 768px) {
	.ppa-footer { padding-top: 5rem; }
	.ppa-footer-headline h2 { padding: 0 2.5rem; }
	.ppa-footer-main { grid-template-columns: 1.2fr 1fr 1fr; padding: 2.5rem; }
	.ppa-footer-brand img { height: 5rem; }
	.ppa-footer-bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem 2.5rem; }
}

/* =====================================================================
   GROUP COMPANY SPOTLIGHT (Prospective Art — a company of Near East)
   ===================================================================== */
.ppa-gc {
	position: relative;
	overflow: hidden;
	padding: 5rem 1.25rem;
	background:
		radial-gradient(120% 90% at 82% 0%, color-mix(in srgb, var(--ppa-cyan) 24%, transparent), transparent 60%),
		linear-gradient(160deg, #16121F 0%, #1E1832 55%, #241C3D 100%);
	color: #fff;
}
.ppa-gc-bg {
	position: absolute; inset: 0;
	color: rgba(255, 255, 255, 0.06);   /* blueprint line colour (currentColor) */
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.ppa-gc-bg svg { width: 100%; height: 100%; display: block; }

.ppa-gc-card {
	position: relative;
	width: min(90%, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding: 2.25rem 1.5rem;
	border-radius: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: color-mix(in srgb, #ffffff 4%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ppa-gc-label {
	display: flex; align-items: center; gap: 0.7rem;
	font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.28em;
	color: var(--ppa-cyan-soft);
	margin: 0 0 1.5rem;
}
.ppa-gc-label-rule { height: 1px; width: 2rem; background: var(--ppa-cyan-soft); display: inline-block; flex-shrink: 0; }
.ppa-gc-logo { margin-bottom: 1rem; }
.ppa-gc-logo img { height: 3rem; width: auto; filter: brightness(0) invert(1); display: block; }
.ppa-gc-tag { font-size: 0.8rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.55); margin: 0 0 2rem; }
.ppa-gc-heading { margin: 0; line-height: 1.08; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; }
.ppa-gc-hline { display: block; }
.ppa-gc-hline-accent {
	background: linear-gradient(90deg, var(--ppa-cyan-soft), #fff);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ppa-gc-desc { max-width: 34rem; margin: 1.5rem 0 0; font-size: 0.95rem; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.ppa-gc-sub  { max-width: 32rem; margin: 1rem 0 0;   font-size: 0.85rem; line-height: 1.6; color: rgba(255, 255, 255, 0.45); }

.ppa-gc-right { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
.ppa-gc-mockup { position: relative; width: 15rem; max-width: 70%; aspect-ratio: 3 / 4; perspective: 1200px; margin: 0.5rem 0 0; }
.ppa-gc-mockup-float { position: absolute; inset: 0; transform-style: preserve-3d; animation: ppa-gc-float 6s ease-in-out infinite; }
.ppa-gc-cover, .ppa-gc-page { position: absolute; inset: 0; border-radius: 0.5rem; transform-origin: left center; }
.ppa-gc-cover {
	background-color: #2A2140; background-size: cover; background-position: center;
	border: 1px solid rgba(255, 255, 255, 0.12);
	transform: rotateY(-16deg) rotateX(3deg);
	box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}
.ppa-gc-page { background: #EFEEF4; border: 1px solid rgba(255, 255, 255, 0.08); }
.ppa-gc-page-1 { transform: rotateY(-16deg) rotateX(3deg) translate(12px, 7px); opacity: 0.5; }
.ppa-gc-page-2 { transform: rotateY(-16deg) rotateX(3deg) translate(24px, 14px); opacity: 0.28; }
.ppa-gc-cover-spine { position: absolute; top: 0; bottom: 0; left: 0; width: 9px; background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent); }
.ppa-gc-cover-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; padding: 1.4rem; background: linear-gradient(160deg, #322650, #211A36); }
.ppa-gc-cover-ph-eyebrow { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--ppa-cyan-soft); }
.ppa-gc-cover-ph-title { font-family: var(--ppa-font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; color: #fff; }
.ppa-gc-cover-ph-rule { height: 2px; width: 2.5rem; background: var(--ppa-cyan-soft); }
@keyframes ppa-gc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ppa-gc-dl { display: flex; flex-direction: column; gap: 0.55rem; }
.ppa-gc-btn {
	display: inline-flex; align-items: center; gap: 0.9rem; width: fit-content;
	padding: 0.85rem 1.5rem; border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: color-mix(in srgb, #ffffff 6%, transparent);
	color: #fff; text-decoration: none;
	font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
	transition: border-color 0.4s var(--ppa-ease), background 0.4s var(--ppa-ease);
}
.ppa-gc-btn:hover { border-color: var(--ppa-cyan-soft); background: color-mix(in srgb, var(--ppa-cyan) 24%, transparent); }
.ppa-gc-btn-icon { display: grid; place-items: center; transition: transform 0.4s var(--ppa-ease); }
.ppa-gc-btn:hover .ppa-gc-btn-icon { transform: translateY(3px); }
.ppa-gc-btn-sub { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.4); }

@media (min-width: 900px) {
	.ppa-gc { padding: 7rem 2.5rem; }
	.ppa-gc-card { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; padding: 3.5rem 3.25rem; align-items: center; }
	.ppa-gc-right { align-items: center; }
	.ppa-gc-mockup { width: 17rem; max-width: 100%; }
}