/* home.css — Homepage template styles
   Loads after: tokens.css → layout.css → animations.css → components.css
   Scope: front-page.php only (enqueued conditionally via is_front_page())
   ─────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   SHARED UTILITIES (homepage-only additions)
   ══════════════════════════════════════════════════════════ */

.section-overline {
	display: block;
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-semibold);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pb-blue-dark);
	margin-bottom: var(--pb-space-3);
}

.section-header__link {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-semibold);
	font-size: var(--pb-text-sm);
	color: var(--pb-blue-dark);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.section-header__link:hover {
	text-decoration: underline;
}

.section-header__link:focus-visible {
	outline: 2px solid var(--pb-blue-dark);
	outline-offset: 4px;
}

/* ══════════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════════ */

.home-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: flex-end;
	background-color: var(--pb-navy);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(11, 31, 58, 0.92) 0%,
		rgba(11, 31, 58, 0.62) 45%,
		rgba(11, 31, 58, 0.18) 100%
	);
	z-index: 1;
}

.home-hero .container {
	position: relative;
	z-index: 2;
	padding-block-end: var(--pb-space-16);
	padding-block-start: var(--pb-space-24);
	width: 100%;
}

.home-hero__content {
	max-width: 640px;
}

/* 2px blue kicker rule — replaces overline text on hero only */
.hero-kicker {
	width: 48px;
	height: 2px;
	background-color: var(--pb-blue);
	margin-bottom: var(--pb-space-4);
	transform-origin: left center;
}

.hero-headline {
	font-family: var(--pb-font-display);
	font-weight: 900;
	font-size: clamp(2.25rem, 5.5vw, 4.5rem);
	line-height: var(--pb-leading-tight);
	color: var(--pb-white);
	max-width: 14ch;
	margin-bottom: var(--pb-space-4);
}

.hero-sub {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-regular);
	font-size: var(--pb-text-lg);
	color: rgba(255, 255, 255, 0.78);
	max-width: 42ch;
	line-height: var(--pb-leading-normal);
	margin-bottom: var(--pb-space-8);
}

.hero-actions {
	display: flex;
	gap: var(--pb-space-4);
	flex-wrap: wrap;
}

/* Hero entrance motion — override animations.css timings for dramatic entrance */
@keyframes pb-rule-expand {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
	.hero-kicker {
		animation: pb-rule-expand 400ms cubic-bezier(0.22, 1, 0.36, 1) 0ms both;
	}

	.hero-headline {
		animation-duration: 550ms;
		animation-delay: 200ms;
	}

	.hero-sub {
		animation-duration: 450ms;
		animation-delay: 380ms;
	}

	.hero-actions {
		animation-duration: 380ms;
		animation-delay: 520ms;
	}
}

/* ══════════════════════════════════════════════════════════
   2. THREE SECTORS
   ══════════════════════════════════════════════════════════ */

.home-sectors {
	padding-block: var(--pb-space-16);
	background-color: var(--pb-white);
}

.home-sectors__header {
	margin-bottom: var(--pb-space-8);
}

/* Sector card — fills its bento grid cell */
.sectors-bento > * {
	height: 100%;
}

.sector-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--pb-radius-lg);
	display: flex;
	height: 100%;
	min-height: 280px;
	text-decoration: none;
	cursor: pointer;
}

.sectors-bento__main .sector-card {
	min-height: 480px;
}

/* Override animations.css scale hover — we use overlay darkening instead */
@media (prefers-reduced-motion: no-preference) {
	.sector-card {
		transform: none;
		box-shadow: none;
		transition: none;
	}

	.sector-card:hover,
	.sector-card:focus-visible {
		transform: none;
		box-shadow: none;
	}
}

.sector-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sector-card__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(11, 31, 58, 0.55);
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.sector-card .sector-card__overlay {
		transition: background-color 300ms ease-out;
	}
}

/* Sector number — large watermark, not a badge/pill */
.sector-card__number {
	position: absolute;
	top: var(--pb-space-4);
	inset-inline-end: var(--pb-space-4);
	font-family: var(--pb-font-display);
	font-weight: 900;
	font-size: 7rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.08);
	z-index: 2;
	pointer-events: none;
	user-select: none;
}

.sector-card__content {
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	padding: var(--pb-space-6);
	z-index: 3;
}

.sector-card__name {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: var(--pb-text-xl);
	color: var(--pb-white);
	margin: 0 0 var(--pb-space-2);
	line-height: var(--pb-leading-snug);
}

.sector-card__link {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-medium);
	font-size: var(--pb-text-sm);
	color: var(--pb-blue-lt);
	display: inline-flex;
	align-items: center;
	gap: var(--pb-space-2);
	opacity: 0;
	transform: translateY(8px);
}

.sector-card__link::after {
	content: '\2192'; /* → */
}

@media (prefers-reduced-motion: no-preference) {
	.sector-card__link {
		transition: opacity 250ms ease-out, transform 250ms ease-out;
	}
}

/* Hover/focus: overlay darkens + link reveals */
@media (hover: hover) {
	.sector-card:hover .sector-card__overlay {
		background-color: rgba(11, 31, 58, 0.72);
	}

	.sector-card:hover .sector-card__link {
		opacity: 1;
		transform: translateY(0);
	}
}

.sector-card:focus-visible {
	outline: 2px solid var(--pb-blue-lt);
	outline-offset: 4px;
}

.sector-card:focus-visible .sector-card__overlay {
	background-color: rgba(11, 31, 58, 0.72);
}

.sector-card:focus-visible .sector-card__link {
	opacity: 1;
	transform: translateY(0);
}

/* Fallback: no image uploaded */
.sector-card--no-image {
	background-color: var(--pb-navy-2);
}

/* ══════════════════════════════════════════════════════════
   3. FEATURED SERVICES
   ══════════════════════════════════════════════════════════ */

.home-services {
	padding-block: var(--pb-space-16);
	background-color: var(--pb-gray-50);
}

.home-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pb-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-card {
	background-color: var(--pb-white);
	border-radius: var(--pb-radius-md);
	padding: var(--pb-space-6);
	border: 1px solid var(--pb-gray-200);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	cursor: pointer;
	height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.service-card {
		transition: transform 220ms ease-out,
		            box-shadow 220ms ease-out,
		            border-color 220ms ease-out;
	}

	.service-card__icon {
		transition: color 220ms ease-out;
	}
}

.service-card__icon {
	width: 32px;
	height: 32px;
	color: var(--pb-blue-dark);
	margin-bottom: var(--pb-space-4);
	flex-shrink: 0;
}

.service-card__icon svg {
	width: 100%;
	height: 100%;
}

.service-card__category {
	display: block;
	font-family: var(--pb-font-body);
	font-size: 0.6875rem;
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pb-blue-dark);
	margin-bottom: var(--pb-space-1);
}

.service-card__name {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: var(--pb-text-base);
	color: var(--pb-gray-900);
	margin: 0 0 var(--pb-space-2);
	line-height: var(--pb-leading-snug);
}

.service-card__desc {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-regular);
	font-size: var(--pb-text-sm);
	color: var(--pb-gray-700);
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (hover: hover) {
	.service-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--pb-shadow-md);
		border-color: var(--pb-blue-dark);
	}

	.service-card:hover .service-card__icon {
		color: var(--pb-blue);
	}
}

.service-card:focus-visible {
	outline: 2px solid var(--pb-blue-dark);
	outline-offset: 4px;
}

.home-services__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--pb-space-10);
}

/* ══════════════════════════════════════════════════════════
   4. FEATURED PROJECTS
   ══════════════════════════════════════════════════════════ */

.home-projects {
	padding-block: var(--pb-space-16);
	background-color: var(--pb-white);
}

.home-projects .section-header {
	align-items: baseline;
}

.home-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pb-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.project-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--pb-radius-md);
	background-color: var(--pb-navy);
	cursor: pointer;
}

.project-card:first-child {
	grid-column: span 2;
}

.project-card__inner {
	display: block;
	text-decoration: none;
	height: 100%;
}

.project-card__photo-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.project-card:first-child .project-card__photo-wrap {
	aspect-ratio: 16 / 9;
}

.project-card:not(:first-child) .project-card__photo-wrap {
	aspect-ratio: 4 / 3;
}

.project-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Broken image fallback */
.project-card__photo-wrap.img--broken {
	background-color: var(--pb-navy-2);
}

.project-card__photo-wrap.img--broken .project-card__photo {
	display: none;
}

/* Overlay — override animations.css slide-up with opacity fade */
.project-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--pb-space-6);
	background-color: rgba(11, 31, 58, 0.60);
	text-decoration: none;
}

/* Touch devices: overlay always semi-visible */
@media (hover: none) {
	.project-card__overlay {
		opacity: 1;
	}
}

/* Desktop: hidden until hover — override animations.css transform */
@media (hover: hover) {
	.project-card__overlay {
		opacity: 0;
		background-color: rgba(11, 31, 58, 0.85);
	}

	.project-card:hover .project-card__overlay,
	.project-card:focus-within .project-card__overlay {
		opacity: 1;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* Override animations.css translateY slide — use opacity instead */
	.project-card__overlay {
		transform: none;
		transition: opacity 300ms ease-out;
	}

	.project-card:hover .project-card__overlay,
	.project-card:focus-within .project-card__overlay {
		transform: none;
	}

	.project-card__overlay-content {
		transform: translateY(10px);
		transition: transform 280ms ease-out 40ms;
	}

	.project-card:hover .project-card__overlay-content,
	.project-card:focus-within .project-card__overlay-content {
		transform: translateY(0);
	}
}

.project-card__sector-badge {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-medium);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pb-blue-lt);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 3px 10px;
	border-radius: var(--pb-radius-sm);
	display: inline-block;
	margin-bottom: var(--pb-space-3);
	align-self: flex-start;
}

.project-card__title {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: var(--pb-white);
	margin: 0 0 var(--pb-space-2);
	line-height: var(--pb-leading-snug);
}

.project-card__meta {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-medium);
	font-size: var(--pb-text-sm);
	color: var(--pb-gray-300);
	margin: 0 0 var(--pb-space-4);
	line-height: var(--pb-leading-snug);
}

.project-card__cta {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-semibold);
	font-size: var(--pb-text-sm);
	color: var(--pb-blue-lt);
	display: inline-flex;
	align-items: center;
	gap: var(--pb-space-2);
}

.project-card:focus-visible {
	outline: 2px solid var(--pb-blue-lt);
	outline-offset: 4px;
}

/* ══════════════════════════════════════════════════════════
   5. WHY US / STATS
   ══════════════════════════════════════════════════════════ */

.home-why-us {
	padding-block: var(--pb-space-16);
	background-color: var(--pb-navy);
}

.home-why-us__header {
	text-align: center;
	margin-bottom: var(--pb-space-12);
}

.home-why-us__header .section-overline {
	color: var(--pb-blue-lt);
}

.home-why-us__header .section-title {
	color: var(--pb-white);
}

.home-why-us__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.stat-item {
	padding: var(--pb-space-8) var(--pb-space-6);
	text-align: center;
	display: flex;
	flex-direction: column-reverse; /* dt precedes dd in DOM for screen readers; number displays above label visually */
	gap: var(--pb-space-2);
}

.stat-item__number {
	display: block;
	font-family: var(--pb-font-display);
	font-weight: 900;
	font-size: clamp(3rem, 6vw, 5rem);
	color: var(--pb-white);
	line-height: 1;
	margin-bottom: var(--pb-space-3);
}

.stat-item__label {
	display: block;
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-medium);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pb-gray-300);
	line-height: var(--pb-leading-snug);
}

/* ══════════════════════════════════════════════════════════
   6. CLIENT LOGOS
   ══════════════════════════════════════════════════════════ */

.home-clients {
	padding-block: var(--pb-space-12);
	background-color: var(--pb-white);
	border-top: 1px solid var(--pb-gray-200);
	border-bottom: 1px solid var(--pb-gray-200);
}

.pb-marquee {
	overflow: hidden;
	position: relative;
	display: flex;
	gap: var(--pb-space-12);
}

/* Fade masks — edge treatment */
.pb-marquee::before,
.pb-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}

.pb-marquee::before {
	inset-inline-start: 0;
	background: linear-gradient(to right, var(--pb-white), transparent);
}

.pb-marquee::after {
	inset-inline-end: 0;
	background: linear-gradient(to left, var(--pb-white), transparent);
}

/* Override animations.css marquee speed */
@media (prefers-reduced-motion: no-preference) {
	.home-clients .pb-marquee-track {
		animation-duration: 35s;
	}
}

.client-logo {
	height: 56px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	filter: none;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.client-logo {
		transition: filter 250ms ease-out;
	}
}

@media (hover: hover) {
	.client-logo:hover {
		filter: grayscale(0%) opacity(100%);
	}
}

/* Reduced motion: disable marquee, show logos as static flex-wrap */
@media (prefers-reduced-motion: reduce) {
	.pb-marquee {
		overflow: visible;
	}

	.home-clients .pb-marquee-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--pb-space-8);
		width: auto;
	}

	.home-clients .pb-marquee-track:nth-child(2) {
		display: none;
	}
}

/* ══════════════════════════════════════════════════════════
   7. LATEST ARTICLES
   ══════════════════════════════════════════════════════════ */

.home-articles {
	padding-block: var(--pb-space-16);
	background-color: var(--pb-gray-50);
}

.home-articles .section-header {
	align-items: baseline;
}

.home-articles__grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--pb-space-6);
	align-items: start;
}

/* Featured article spans both rows of the left column */
.article-card:first-child {
	grid-row: span 2;
}

.article-card {
	background-color: var(--pb-white);
	border-radius: var(--pb-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-bottom: 3px solid transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.article-card {
		transition: border-color 220ms ease-out, box-shadow 220ms ease-out;
	}
}

.article-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	height: 100%;
}

@media (hover: hover) {
	.article-card:hover {
		border-color: var(--pb-blue);
		box-shadow: var(--pb-shadow-md);
	}
}

/* Focus ring on the article wrapper when inner link receives focus */
.article-card:focus-within {
	outline: 2px solid var(--pb-blue-dark);
	outline-offset: 4px;
	border-radius: var(--pb-radius-md);
}

/* Suppress browser's default outline on the inner anchor — article provides it */
.article-card__link:focus-visible {
	outline: none;
}

.article-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
}

.article-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.article-card__img {
		transition: transform 400ms ease-out;
	}

	.article-card:hover .article-card__img {
		transform: scale(1.04);
	}
}

.article-card__body {
	padding: var(--pb-space-6);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.article-card__category {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-medium);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pb-blue-dark);
	margin-bottom: var(--pb-space-2);
	display: block;
}

.article-card__title {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	color: var(--pb-gray-900);
	line-height: var(--pb-leading-snug);
	margin: 0 0 var(--pb-space-3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__excerpt {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-regular);
	font-size: var(--pb-text-sm);
	color: var(--pb-gray-700);
	line-height: var(--pb-leading-normal);
	margin: 0 0 var(--pb-space-4);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Excerpt visible on featured card only */
.article-card:not(:first-child) .article-card__excerpt {
	display: none;
}

.article-card__read {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-semibold);
	font-size: var(--pb-text-sm);
	color: var(--pb-blue-dark);
	text-decoration: none;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--pb-space-2);
	padding-top: var(--pb-space-4);
}

.article-card__read:hover {
	text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   8. CTA BANNER
   ══════════════════════════════════════════════════════════ */

.home-cta {
	padding-block: var(--pb-space-16);
	background-color: var(--pb-navy-2);
}

.home-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--pb-space-8);
	align-items: center;
}

.home-cta__overline {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-semibold);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pb-blue-lt);
	margin-bottom: var(--pb-space-3);
	display: block;
}

.home-cta__headline {
	color: var(--pb-white);
	margin-bottom: var(--pb-space-3);
}

.home-cta__subline {
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-regular);
	font-size: var(--pb-text-base);
	color: rgba(255, 255, 255, 0.72);
	line-height: var(--pb-leading-normal);
	margin: 0;
}

.home-cta__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-3);
	align-items: stretch;
	flex-shrink: 0;
	min-width: 180px;
}

/* Outline white button — used in CTA banner only */
.btn--outline-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pb-font-body);
	font-weight: var(--pb-weight-semibold);
	font-size: var(--pb-text-sm);
	letter-spacing: 0.04em;
	color: var(--pb-white);
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.40);
	border-radius: var(--pb-radius-sm);
	padding: var(--pb-space-3) var(--pb-space-6);
	min-height: 48px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.btn--outline-white {
		transition: border-color 200ms ease-out;
	}
}

.btn--outline-white:hover {
	border-color: var(--pb-white);
}

.btn--outline-white:focus-visible {
	outline: 2px solid var(--pb-blue-lt);
	outline-offset: 4px;
}

/* ══════════════════════════════════════════════════════════
   9. RESPONSIVE — TABLET (max-width: 1024px)
   ══════════════════════════════════════════════════════════ */

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

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

	/* Featured project still spans 2 on tablet */
	.project-card:first-child {
		grid-column: span 2;
	}

	.home-why-us__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stat-item:nth-child(3),
	.stat-item:nth-child(4) {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.home-cta__inner {
		gap: var(--pb-space-6);
	}
}

/* ══════════════════════════════════════════════════════════
   10. RESPONSIVE — TABLET SMALL (max-width: 768px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	/* Sectors: layout.css already collapses to 1-col at 768px */

	/* Articles: keep 2-col (3fr/2fr) until smaller breakpoint */
	.home-articles__grid {
		grid-template-columns: 1fr;
	}

	.article-card:first-child {
		grid-row: auto;
	}

	/* Show excerpt on all cards when stacked */
	.article-card:not(:first-child) .article-card__excerpt {
		display: -webkit-box;
	}

	/* CTA: stack vertically */
	.home-cta__inner {
		grid-template-columns: 1fr;
	}

	.home-cta__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
	}
}

/* ══════════════════════════════════════════════════════════
   11. RESPONSIVE — MOBILE (max-width: 640px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.home-projects__grid {
		grid-template-columns: 1fr;
	}

	.project-card:first-child {
		grid-column: span 1;
	}

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

	.home-why-us__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-articles__grid {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════
   12. RESPONSIVE — MOBILE SMALL (max-width: 480px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.home-hero__content {
		max-width: 100%;
	}

	.hero-sub {
		font-size: var(--pb-text-base);
		max-width: 100%;
	}

	.hero-actions {
		flex-direction: column;
	}

	.hero-actions .btn {
		width: 100%;
		justify-content: center;
	}

	.home-cta__buttons {
		flex-direction: column;
		width: 100%;
	}

	.home-cta__buttons .btn,
	.home-cta__buttons .btn--outline-white {
		width: 100%;
		min-width: 0;
	}

	.home-services__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--pb-space-3);
	}

	.service-card {
		padding: var(--pb-space-4);
	}

	.home-why-us__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ══════════════════════════════════════════════════════════
   13. RTL READINESS (Arabic Phase 2 — logical properties)
   ══════════════════════════════════════════════════════════ */

/* Hero overlay gradient flips for RTL */
[dir="rtl"] .home-hero__overlay {
	background: linear-gradient(
		-100deg,
		rgba(11, 31, 58, 0.92) 0%,
		rgba(11, 31, 58, 0.62) 45%,
		rgba(11, 31, 58, 0.18) 100%
	);
}

/* Kicker rule origin flips for RTL */
[dir="rtl"] .hero-kicker {
	transform-origin: right center;
}

/* Marquee runs opposite direction in RTL */
[dir="rtl"] .pb-marquee-track {
	animation-direction: reverse;
}

/* Marquee fade masks flip in RTL */
[dir="rtl"] .pb-marquee::before {
	background: linear-gradient(to left, var(--pb-white), transparent);
}

[dir="rtl"] .pb-marquee::after {
	background: linear-gradient(to right, var(--pb-white), transparent);
}