/* =============================================================================
   Make It Digital — Main Stylesheet
   ============================================================================= */

/* ── Design Tokens ──────────────────────────────────────────────────────────── */

:root {
	--color-dark-blue:    #11224E;
	--color-dark-blue-2:  #0a1628;
	--color-mid-blue:     #1a3a7c;
	--color-gold:         #EDA122;
	--color-gold-hover:   #d4911e;
	--color-warm-overlay: rgba(99, 42, 6, 0.59); /* #632A06 @ 59% — from Figma */
	--color-light-gray:   #F5F5F5; /* services card bg */
	--color-white:        #ffffff;
	--color-text-muted:   #7a8fb5;
	--color-text-dark:    #1a2540;
	--color-card-border:  rgba(255,255,255,0.08);

	--font-primary: 'Rubik', 'Arial Hebrew', sans-serif;

	--font-size-xs:   0.75rem;
	--font-size-sm:   0.875rem;
	--font-size-base: 1rem;
	--font-size-lg:   1.125rem;
	--font-size-xl:   1.375rem;
	--font-size-2xl:  1.75rem;
	--font-size-3xl:  2.25rem;
	--font-size-4xl:  3rem;
	--font-size-5xl:  3.75rem;

	--line-height-base:  1.65;
	--line-height-tight: 1.25;

	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	--radius-sm:   6px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-full: 9999px;

	--shadow-card:       0 4px 24px rgba(0,0,0,0.10);
	--shadow-card-hover: 0 8px 32px rgba(0,0,0,0.16);

	--max-width:      1200px;
	--max-width-text: 780px;
	--header-height:  clamp(7.0625rem, calc(1.3021vw + 6.4375rem), 8rem); /* 113px@768 → 128px@1920 */

	--transition:      0.3s ease;
	--transition-slow: 0.5s ease;
}

/* ── Fluid helpers: slope-intercept form → no length/length division (Safari-safe) ── */
/* Formula: calc(slope_vw * 1vw + intercept_rem)
   slope  = (max_px - min_px) / (1920 - 768) * 100
   intercept = min_px - slope/100 * 768                                       */
:root {
	--pad-section: clamp(3.5rem,   calc(5.5556vw + 0.8333rem), 7.5rem);   /* 56px@768 → 120px@1920 */
	--fs-h2:       clamp(2rem,     calc(2.7778vw + 0.6667rem), 4rem);     /* 32px@768 → 64px@1920  */
	--fs-body-lg:  clamp(1.125rem, calc(0.5208vw + 0.875rem),  1.5rem);   /* 18px@768 → 24px@1920  */
	--fs-body-xl:  clamp(1.25rem,  calc(1.0417vw + 0.75rem),   2rem);     /* 20px@768 → 32px@1920  */
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-white);
	background-color: var(--color-dark-blue);
	direction: rtl;
	-webkit-font-smoothing: antialiased;
}

img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Process step color transitions are low-impact — allow them even with reduced motion */
	.process-step__circle,
	.process-step__number,
	.process-step__heading,
	.process-step__body {
		transition-duration: 0.4s !important;
	}
}

/* ── Utilities ──────────────────────────────────────────────────────────────── */


.container {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: 1.25rem; /* 20px */
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-8);
	border-radius: 8px;
	min-height: clamp(3rem, calc(0.6944vw + 2.6667rem), 3.5rem);
	font-size: 1.5rem;    /* 24px */
	font-weight: 400;
	line-height: 1.5;     /* 36px */
	white-space: nowrap;
	transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
	cursor: pointer;
}

.btn--gold {
	background-color: var(--color-gold);
	color: var(--color-dark-blue);
}
.btn--gold:hover {
	background-color: var(--color-gold-hover);
	transform: translateY(-2px);
}

/* Full-width on mobile in block contexts */
.hero__content .btn {
	width: 100%;
}

.process__cta {
	margin-block-start: clamp(2.5rem, calc(2.0833vw + 1.5rem), 4rem);
	margin-block-end: clamp(5rem, calc(4.1667vw + 3rem), 8rem);
}

.process__cta .btn {
	width: clamp(20rem, calc(3.6458vw + 18.25rem), 22.625rem);
	height: clamp(3rem, calc(0.6944vw + 2.6667rem), 3.5rem);
}

.section {
	scroll-margin-top: var(--header-height);
}

.section__title {
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.125;
	margin-block-end: clamp(2.5rem, calc(2.0833vw + 1.5rem), 3.5rem);
}

@media (min-width: 768px) {
	.section__title {
		font-size: 4rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	padding: clamp(calc(20/402*100vw), calc(1.3889vw + 0.5833rem), 2.25rem) 0;
	background-color: transparent;
	transition: background-color var(--transition) padding var(--transition);
}

.site-header.is-scrolled {
	background-color: rgba(10, 22, 40, 0.8);
	box-shadow: 0 2px 20px rgba(0,0,0,0.3);
	padding: clamp(calc(10/402*100vw), calc(0.8681vw + 0.2083rem), 1.25rem) 0;
}

.site-header.is-inner {
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
}

/* Admin bar offset — mobile 46px, desktop 32px */
.admin-bar .site-header {
	inset-block-start: calc( 46 / 402 * 100vw );
}

@media screen and (min-width: 783px) {
	.admin-bar .site-header {
		inset-block-start: calc( 32 / 1920 * 100vw );
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding-inline: var(--space-5);
	max-width: var(--max-width);
	margin-inline: auto;
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__logo .custom-logo-link {
	display: flex;
	align-items: center;
}

.site-header__logo .custom-logo-link img,
.site-header__logo-img {
	/* mobile 202×41px → desktop 277×56px */
	width:  clamp(12.625rem, calc(6.5104vw + 9.5rem), 17.3125rem);
	height: clamp(2.5625rem, calc(1.3021vw + 1.9375rem), 3.5rem);
}

.site-header__nav {
	display: none;
	align-items: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav li {
	list-style: none;
}

.site-header__nav a {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-white);
	position: relative;
}

.site-header__nav a::after {
	content: '';
	position: absolute;
	inset-block-end: calc( -4 / 402 * 100vw );
	inset-inline: 0;
	height: calc( 2 / 402 * 100vw );
	background-color: var(--color-gold);
	transform: scaleX(0);
	transition: transform var(--transition);
	transform-origin: inline-end center;
}

.site-header__nav a:hover,
.site-header__nav a.is-active { opacity: 1; color: var(--color-gold); }

.site-header__nav a:hover::after,
.site-header__nav a.is-active::after { transform: scaleX(1); }

.site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(7.375rem, calc(7.1181vw + 3.9583rem), 12.5rem);
	height: clamp(2.625rem, calc(1.2153vw + 2.0417rem), 3.5rem);
	min-height: unset; /* override .btn min-height — CTA has its own explicit height */
	background-color: #EDA122;
	border-radius: 8px;
	color: var(--color-dark-blue);
	font-size: 1.125rem;
	font-weight: 400;
	white-space: nowrap;
}

.site-header__cta:hover {
	background-color: var(--color-gold-hover);
	transform: translateY(-2px);
}

@media (min-width: 768px) {
	.site-header { height: var(--header-height); padding: 0; }
	.site-header.is-scrolled { padding: 0; }

	.site-header__inner {
		max-width: none;
		margin-inline: 0;
		padding-inline: calc( 80 / 1920 * 100vw );
		justify-content: flex-start;
	}

	.site-header__nav {
		display: flex;
		margin-inline-start: calc( 120 / 1920 * 100vw ); /* gap from logo */
		margin-inline-end: auto;    /* push CTA to far left */
	}


	.site-header__nav a::after {
		inset-block-end: calc( -4 / 1920 * 100vw );
		height: calc( 2 / 1920 * 100vw );
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero — mobile: image is full background, text overlaid ── */

.hero {
	position: relative;
	background-color: var(--color-dark-blue);
	overflow: hidden;
	min-height: calc( 720 / 402 * 100vw );
	display: flex;
	flex-direction: column;
}

/* ── Shared layer styles ── */
.hero__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Bridge gif — <picture> handles src switching natively */
.hero__gif {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Layer z-indexes */
.hero__layer--fon      { z-index: 0; }
.hero__layer--setka    { z-index: 1; }
.hero__layer--bridge   { z-index: 2; }
.hero__layer--gradient { z-index: 3; }

/* Mobile overflow cover: gradient fade from 540px to bottom */
.hero::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc( 540 / 402 * 100vw );
	inset-block-end: 0;
	background: linear-gradient(
		to bottom,
		rgba(17, 34, 78, 0.8) 0%,
		rgba(17, 34, 78, 1)   100%
	);
	z-index: 3;
}

@media (min-width: 768px) {
	.hero::after { display: none; }
}

/* Content above all layers */
.hero__content {
	position: relative;
	z-index: 4;
	padding-inline: calc( 26 / 402 * 100vw );
	padding-block-start: calc( 122 / 402 * 100vw );
	padding-block-end: calc( 61 / 402 * 100vw );
	display: flex;
	flex-direction: column;
}

.hero__heading {
	font-size: 2rem; /* 32px mobile */
	font-weight: 300;
	line-height: 1;
	color: var(--color-white);
	margin-block-end: 0;
}

.hero__heading-line { display: block; }

.hero__heading-line--accent { color: var(--color-gold); }

.hero__subtext {
	margin-block-start: calc( ( 506 - 122 ) / 402 * 100vw ); /* 384px gap: subtext top from content top minus heading top */
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px fixed — not vw-relative */
	text-align: center;
}

.hero__subtext p {
	font-size: 1.25rem; /* 20px mobile */
	font-weight: 300;
	color: var(--color-white);
	line-height: 1.4;
	margin: 0; /* remove browser default paragraph margin */
}

/* ── Hero — desktop ── */
@media (min-width: 768px) {
	.hero {
		/* Proportional height: 875px at 1920px screen */
		height: calc( 875 / 1920 * 100vw );
		min-height: calc( var(--header-height) + 20rem ); /* prevent hero from being too short */
		flex-direction: row;
		align-items: flex-start;
		overflow: visible; /* allow heading to bleed into bridge image area */
	}

	/* White heading line must stay on one line — allow overflow into bridge image */
	.hero__heading-line:not(.hero__heading-line--accent) {
		white-space: nowrap;
	}

	/* All layers cover the full section */
	.hero__layer img {
		object-fit: cover;
		object-position: left center;
	}

	/* Text column: right side, proportional width */
	/* outer = 667px text + 80px padding each side = 827px at 1920px */
	.hero__content {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		margin-inline-end: auto; /* RTL: pushes to right edge */
		width: calc( 827 / 1920 * 100vw );
		/* top: header height + ~120px breathing room (proportional to 1920px design) */
		padding-block-start: calc( var(--header-height) + calc( 70 / 1920 * 100vw ) );
		padding-inline: calc( 80 / 1920 * 100vw );
	}

	.hero__heading {
		font-size: calc( 72 / 1920 * 100vw );
		margin-block-end: calc( 56 / 1920 * 100vw );
	}

	.hero__subtext {
		margin-block-start: 0;
		text-align: start;
		gap: calc( 32 / 1920 * 100vw );
	}

	.hero__subtext p {
		font-size: calc( 24 / 1920 * 100vw );
		margin-block-end: calc( 32 / 1920 * 100vw );
	}

	.hero__subtext p:last-child {
		margin-block-end: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════════════════════ */

.services {
	background-color: var(--color-white);
	padding-block: var(--pad-section);
}

.services .container { text-align: center; }

.services__title { color: var(--color-dark-blue); }

.services__cards {
	display: flex;
	flex-direction: column;
	padding-inline: calc( 20 / 402 * 100vw );
	justify-content: center;
}

/* Mobile: cards are all direct children of services__cards.
   Card 1 sticks first; cards 2-4 slide over it one by one.
   margin-block-start: 100vh gives scroll distance between each card.
   Card 1 stays sticky until the whole section ends — no gap ever. */
.services-card {
	background-color: var(--color-light-gray);
	border-radius: 16px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.20);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: right;
	padding: calc( 40 / 402 * 100vw );
	width: calc( 362 / 402 * 100vw );
	min-height: calc( 467 / 402 * 100vw );
	position: sticky;
	top: var(--header-height);
	z-index: calc( var(--card-index) + 1 );
	will-change: transform;
	transform: translateZ(0);
}

/* Gap between cards on mobile — also serves as scroll distance before overlap */
.services-card + .services-card {
	margin-block-start: calc( 40 / 402 * 100vw );
}

.services-card__icon {
	width: calc( 100 / 402 * 100vw );
	height: calc( 100 / 402 * 100vw );
	margin-block-end: var(--space-6);
}

.services-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.services-card__heading {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.524;
	color: var(--color-dark-blue);
	margin-block-end: calc( 16 / 1920 * 100vw ); /* 16px @ 1920, fluid */
}

.services-card__body {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.333;
	color: var(--color-dark-blue);
}

.services-card__body p { margin-block-end: 0.5rem; } /* paragraph spacing 8px */
.services-card__body p:last-child { margin-block-end: 0; }

@media (min-width: 768px) {
	.services__cards {
		flex-direction: row;
		gap: calc( 40 / 1920 * 100vw ); /* 40px at 1920px */
		padding-inline: var(--space-6);
		max-width: var(--max-width);
		margin-inline: auto;
	}

	.services-card + .services-card {
		margin-block-start: 0;
	}

	.services-card {
		position: static;
		will-change: auto;
		transform: none;
		flex: 0 0 calc( 410 / 1920 * 100vw ); /* 410px at 1920px */
		width: auto;
		height: calc( 592 / 1920 * 100vw );   /* 592px at 1920px */
		min-height: unset;
		border-radius: 16px;
		box-shadow: 0 3px 3px rgba(0,0,0,0.20);
		padding: calc( 40 / 1920 * 100vw ); /* 40px all sides, fluid */
		transition: box-shadow var(--transition), transform var(--transition);
		align-items: flex-start; /* RTL: flex-start = right side */
		text-align: right;
	}

	.services-card:hover {
		box-shadow: var(--shadow-card-hover);
		transform: translateY( calc( -4 / 1920 * 100vw ) );
	}

	.services-card__icon {
		align-self: flex-start; /* RTL: flex-start = right side */
		width: calc( 100 / 1920 * 100vw );
		height: calc( 100 / 1920 * 100vw );
	}

	.services-card__heading { font-size: 2rem; }
	.services-card__body    { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════════════════════════ */

.process {
	background-color: var(--color-dark-blue);
	padding-block-start: var(--pad-section);
	padding-block-end: 0;
}

.process .container {
	max-width: calc( 760 / 402 * 100vw );
}

.process__title { text-align: center; color: var(--color-white); font-weight: 500; }

.process__intro {
	text-align: right;
	color: var(--color-white);
	font-size: var(--font-size-lg);
	font-weight: 300;
	margin-block-end: var(--space-4); /* 16px gap to note */
	line-height: 1.556; /* 28px */
}

.process__intro-note {
	text-align: right;
	color: var(--color-white);
	font-size: var(--font-size-lg);
	font-weight: 400;
	margin-block-end: clamp(2.5rem, calc(1.3889vw + 1.8333rem), 3.5rem);
	line-height: 1.556; /* 28px */
}

.process__steps {
	display: flex;
	flex-direction: column;
	margin-block-end: var(--space-12);
}

.process-step {
	display: flex;
	flex-direction: row;
	gap: var(--space-5);
}

.process-step__timeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: clamp(2.5rem, calc(0.6944vw + 2.1667rem), 3rem);
}

.process-step__circle {
	width: clamp(3rem, calc(0.6944vw + 2.6667rem), 3.5rem);
	height: clamp(3rem, calc(0.6944vw + 2.6667rem), 3.5rem);
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color var(--transition-slow);
	background-color: rgba(28,169,235,0.15);
	z-index: 1;
}

.process-step__number {
	font-size: 2rem;       /* 32px */
	font-weight: 300;
	line-height: 2rem;     /* 32px */
	color: var(--color-white);
	transition: color var(--transition-slow);
}

.process-step--last .process-step__line { display: none; }

.process-step__line {
	flex: 1;
	width: 2px;
	background-color: rgba(122,143,181,0.25);
	position: relative;
	margin-block: var(--space-1);
	overflow: visible;
}

.process-step__line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #1CA9EB;
	opacity: 0.7;
}

.process-step__dot {
	width: clamp(0.5rem, calc(0.3472vw + 0.3333rem), 0.75rem);
	height: clamp(0.5rem, calc(0.3472vw + 0.3333rem), 0.75rem);
	border-radius: 50%;
	background-color: #1CA9EB;
	border: 2px solid var(--color-dark-blue);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	opacity: 0;
	z-index: 2;
}

.process-step__content {
	padding-block: var(--space-1) 2.5rem; /* 40px gap between steps */
	flex: 1;
	text-align: right;
}

.process-step__heading {
	font-size: 1.25rem; /* 20px mobile */
	font-weight: 600;
	color: var(--color-text-muted);
	margin-block-end: var(--space-2);
	transition: color var(--transition-slow);
}

.process-step__body {
	font-size: var(--font-size-lg); /* 18px mobile */
	font-weight: 300;
	color: var(--color-text-muted);
	line-height: var(--line-height-base);
	opacity: 0.7;
	transition: color var(--transition-slow), opacity var(--transition-slow);
}

/* Active state */
.process-step.is-active .process-step__circle {
	background-color: #1CA9EB;
}
.process-step.is-active .process-step__number { color: var(--color-white); }
.process-step.is-active .process-step__dot { opacity: 1; }
.process-step.is-active .process-step__heading { color: var(--color-white); }
.process-step.is-active .process-step__body { color: rgba(255,255,255,0.75); opacity: 1; }

/* Past steps: keep active colours */
.process-step.is-past .process-step__circle {
	background-color: #1CA9EB;
}
.process-step.is-past .process-step__line-fill { height: 100%; }
.process-step.is-past .process-step__number  { color: var(--color-white); }
.process-step.is-past .process-step__heading { color: var(--color-white); }
.process-step.is-past .process-step__body    { color: rgba(255,255,255,0.75); opacity: 1; }

.process__cta { text-align: center; }

@media (min-width: 768px) {
	.process .container {
		padding-inline: var(--space-6); /* restore 24px on desktop */
	}
	.process__title { font-weight: 400; }

	.process__intro {
		text-align: center;
		margin-block-end: var(--space-4);
		font-size: 1.5rem;
	}

	.process__intro-note {
		text-align: center;
		font-size: 1.5rem;
	}

	.process .container {
		max-width: calc( 1160 / 1920 * 100vw );
	}

	.process-step__heading {
		font-weight: 500;
		font-size: 2rem;
	}
	.process-step__body {
		font-size: 1.5rem;
		font-weight: 300;
	}

	.process-step__content {
		padding-block-end: 2.5rem; /* 40px gap between steps */
	}

	.process__cta .btn {
		font-size: 1.5rem;     /* 24px */
		font-weight: 400;
		line-height: 2.25rem;  /* 36px */
		color: var(--color-dark-blue);
	}

}

/* ═══════════════════════════════════════════════════════════════════════════════
   TARGET
   ═══════════════════════════════════════════════════════════════════════════════ */

.target {
	position: relative;
	padding-block: var(--pad-section);
	background-color: #7a4a1e;
	background-size: cover;
	background-position: center;
}

.target__overlay {
	position: absolute;
	inset: 0;
}

.target__content {
	position: relative;
	z-index: 1;
	max-width: var(--max-width-text);
}

.target__title,
.values__title {
	color: var(--color-white);
	text-align: center;
}

.target__paragraph {
	color: rgba(255,255,255,0.9);
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.556;
	margin-block-end: var(--space-4);
	text-align: center;
}

.target__subheading {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-white);
	margin-block-start: clamp(2.5rem, calc(0.6944vw + 2.1667rem), 3rem);
	margin-block-end: var(--space-2); /* 8px */
}

.target__bullets {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);             /* 8px */
	width: 100%;
}

.target__bullet {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	color: rgba(255,255,255,0.9);
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.556;
	text-align: right;
}

.target__bullet::before {
	content: '';
	display: inline-block;
	width: clamp(0.625rem, calc(0.3472vw + 0.4583rem), 0.875rem);
	height: clamp(1.75rem, calc(0.1736vw + 1.6667rem), 1.875rem);
	background: url('../images/angle.png') no-repeat center / contain;
	flex-shrink: 0;
	align-self: flex-start;
}

@media (min-width: 768px) {
	.target__content {
		text-align: center;
		margin-inline: auto;
		padding-inline: var(--space-6); /* restore desktop padding */
	}

	.target__paragraph {
		font-size: calc( 24 / 1920 * 100vw );
		text-align: center;
		margin-block-end: calc( 16 / 1920 * 100vw );
	}

	.target__bullet {
		font-size: calc( 24 / 1920 * 100vw );
	}

	.target__subheading {
		font-size: calc( 32 / 1920 * 100vw );
		font-weight: 500;
		line-height: 2.5rem;
		text-align: right;
		margin-block-end: calc( 8 / 1920 * 100vw );
	}

	.target__bullets {
		margin: 0 auto;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.about {
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient( to bottom, #1985d4 0%, #11224e 100% );
}


.about__photo-col {
	position: relative;
	background-color: #11224e;
	width: 100%;
	max-width: 100vw; /* svw can differ from layout width on iOS, causing RTL overflow */
	order: -1; /* mobile: photo-col is 2nd in DOM but must render first (above text) */
}

@media (min-width: 768px) {
	.about__photo {
		-webkit-mask-image: linear-gradient( to bottom, black 75%, transparent 100% );
		mask-image: linear-gradient( to bottom, black 75%, transparent 100% );
	}
}

.about__photo {
	width: 100%;
	aspect-ratio: 285 / 379;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.about__text-col {
	position: relative;
	z-index: 2;
	background: linear-gradient( to bottom, rgba(17, 34, 78, 0) 0px, #11224E 200px );
	padding-block-start: var(--space-12);
	padding-block-end: 3.5rem; /* 56px mobile bottom */
	padding-inline: 1.3125rem; /* 41px mobile sides */
	margin-block-start: calc( -200 / 402 * 100vw );
}

/* Text paint layers */
.about__name-wrap,
.about__heading-wrap,
.about__para-wrap {
	position: relative;
}

.about__heading-wrap { margin-block-end: clamp(1.5rem, calc(5vw - 2.5rem), 3.5rem); } /* 24px @ ≤1280 → 56px @ 1920 */

.about__line--base {
	color: var(--color-text-muted);
	display: block;
}

.about__line--top {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--color-white);
}

/* When JS paint is active: hide base layer (JS controls the top layer color) */
.about--js-paint .about__line--base {
	visibility: hidden;
}

/* Word + character spans created by GSAP SplitText */
.about__paint-word {
	display: inline-block; /* prevents mid-word line breaks */
	white-space: nowrap;
}

.about__paint-char {
	display: inline !important; /* override SplitText's inline-block — prevents mid-word breaks in RTL */
}

@media (min-width: 768px) {
	/* Desktop: top layer is white from the start, no animation */
	.about__line--top { color: var(--color-white); }
}

.about__name {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.125;
}
.about__heading {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.125;
}
.about__para {
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.556;              /* 28px */
	text-align: right;
}
.about__para-wrap {
	margin-block-end: var(--space-4); /* 16px paragraph spacing */
}

@media (min-width: 768px) {
	/* 1st DOM child (text-col) → RIGHT, 2nd DOM child (photo-col) → LEFT.
	   796 photo-col + 34 gap + 1090 text-col (230 padding + 860 content) = 1920 ✓ */
	.about {
		background: var(--color-dark-blue);
		background-image: none; /* kill any cached inline background-image */
		display: flex;
		flex-direction: row;
		align-items: stretch;
		padding-block-start: 0;
		padding-block-end: calc( 120 / 1920 * 100vw );
		min-height: calc(860 / 1920 * 100vw);
	}

	/* Photo column — left side (2nd DOM child in row-reverse = leftmost).
	   Photo positioned at x=220px, y=92px (Figma @ 1920px).
	   inline-end = left in RTL, so padding-inline-end = left gap before photo. */
	.about__photo-col {
		display: block;
		width: calc(865 / 1920 * 100vw);
		order: 0; /* reset mobile order */
		padding-block-start: calc( 20 / 1920 * 100vw );
		background-color: transparent;
	}

	.about__photo-col picture {
		display: block;
		width: calc( 953 / 1920 * 100vw ); /* 576px @ 1920 */
	}

	.about__photo {
		display: block;
		width: 100%;
		height: calc( 860 / 1920 * 100vw ); /* 767px @ 1920 */
		aspect-ratio: 950 / 860;
		object-fit: cover;
		object-position: center top;
	}

	/* Full-width bottom gradient overlay */
	.about::after {
		content: '';
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		height: 100%;
		background: url('../images/about-gradient.png') no-repeat center bottom / 100% auto;
		pointer-events: none;
		z-index: 1;
	}

	.about__text-col { position: relative; z-index: 2; margin-inline-start: calc( -50 / 1920 * 100vw ); /* overlap photo by ~35px */ }

	/* Text column — right side.
	   Total width 1090px @ 1920 (= 230px right padding + 860px content).
	   796 photo-col + 34 gap + 1090 text-col = 1920 ✓ */
	.about__text-col {
		width: calc( 1090 / 1920 * 100vw );
		flex-shrink: 0;
		margin-block-start: 0;
		background-color: transparent;
		padding-block-start: 7.5rem;
		padding-block-end: 0;
		padding-inline-start: calc( 230 / 1920 * 100vw ); /* right padding in RTL */
		padding-inline-end: 0;
		display: flex;
		align-items: flex-start;
	}

	.about__text-col .container {
		width: calc( 860 / 1920 * 100vw ); /* 860px content width @ 1920 */
		padding-inline: 0;
	}

	/* On desktop text is always white, no animation */
	.about__line--base { color: var(--color-white); }
	.about--js-paint .about__line--base { visibility: visible; }

	.about__para    { text-align: right; }
	.about__para-wrap    { margin-block-end: calc( 32 / 1920 * 100vw ); }

	.about__name    { font-size: 4rem; }
	.about__heading { font-size: 4rem; }
	.about__para    { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VALUES
   ═══════════════════════════════════════════════════════════════════════════════ */

.values {
	position: relative;
	padding-block: var(--pad-section);
	background-color: #7a4a1e;
	background-size: cover;
	background-position: center;
}

.values__overlay { display: none; } /* overlay baked into the background image */

.values .container { position: relative; z-index: 1; }

.values__grid {
	display: flex;
	flex-direction: column;
	gap: calc( 60 / 402 * 100vw ); /* 60px between items mobile */
}

.values-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Animate in only when JS is ready to control it */
.values--js-ready .values-item {
	opacity: 0;
	transform: translateY( calc( 32 / 402 * 100vw ) );
}

.values-item.is-visible { opacity: 1; transform: translateY(0); }

.values-item__icon { width: calc( 100 / 402 * 100vw ); height: calc( 100 / 402 * 100vw ); margin-block-end: 1.875rem; /* 30px icon→heading */ }
.values-item__icon img { width: 100%; height: 100%; object-fit: contain; }

.values-item__heading { font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--color-white); margin-block-end: 1.25rem; }

.values-item__body {
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.333; /* 32/24 */
	color: rgba(255,255,255,0.85);
}

@media (min-width: 768px) {
	.values { min-height: calc( 580 / 1920 * 100vw ); }
	.values .container { padding-inline: calc(95 / 1920 * 100vw); max-width: none; }
	.values__grid { flex-direction: row; justify-content: center; gap: 4.375rem; } /* 70px between items */
	.values-item { flex: 0 0 calc( 380 / 1920 * 100vw ); max-width: calc( 380 / 1920 * 100vw ); align-items: center; text-align: center; }
	.values-item__icon { width: calc( 100 / 1920 * 100vw ); height: calc( 100 / 1920 * 100vw ); }
	.values-item__heading { font-size: calc( 32 / 1920 * 100vw ); }
	.values-item__body { font-size: calc( 24 / 1920 * 100vw ); }

	.values--js-ready .values-item {
		transform: translateY( calc( 32 / 1920 * 100vw ) );
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════════ */

.testimonials {
	background-color: var(--color-white);
	padding-block: var(--pad-section);
}

.testimonials__title { color: var(--color-dark-blue); text-align: center; font-weight: 400;}

.testimonials__track {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-inline-start: var(--space-6);
	padding-inline-end: 0; /* handled by ::after pseudo-element below */
	padding-block-end: var(--space-4);
	scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }

/* Trailing padding in horizontal scroll — browsers ignore padding-inline-end on scroll containers */
.testimonials__track::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: var(--space-6);
}

.testimonial-card {
	flex-shrink: 0;
	width: calc( 286 / 402 * 100vw );
	min-height: calc( 420 / 402 * 100vw );
	scroll-snap-align: start;
	background-color: var(--color-light-gray);
	border-radius: var(--radius-md);
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.20);
	padding: var(--space-10) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.testimonial-card__logo { height: calc( 60 / 402 * 100vw ); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-8) }
.testimonial-card__logo img { max-height: 100%; width: auto; object-fit: contain; }

.testimonial-card__quote-mark {
	display: block;
	line-height: 1;
}
.testimonial-card__quote-mark img { display: block; }

.testimonial-card__quote p {
	font-size: var(--font-size-lg);
	color: #3a4a6b;
	line-height: var(--line-height-base);
}

.testimonial-card__author {
	margin-block-start: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-block-start: var(--space-3);
}

.testimonial-card__author-name { font-size: var(--font-size-lg); font-weight: 400; color: var(--color-dark-blue); line-height: 1;}
.testimonial-card__author-title { font-size: var(--font-size-lg); color: var(--color-dark-blue); font-weight: 300; line-height: 1; }

/* Expand button — desktop only */
.testimonials__expand-row {
	display: none;
}

@media (min-width: 768px) {
	.testimonials__track {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: calc( 40 / 1920 * 100vw ); /* 40px at 1920px */
		overflow-x: visible;
		padding-inline: 0;
		margin-inline: auto;
	}

	.testimonial-card {
		flex: 0 0 calc( 410 / 1920 * 100vw ); /* 410px at 1920px */
		min-height: calc( 517 / 1920 * 100vw );
		scroll-snap-align: none;
	}

	.testimonial-card__logo { height: calc( 60 / 1920 * 100vw ); }

	.testimonials__expand-row {
		display: flex;
		justify-content: center;
		margin-block-start: var(--space-8);
	}

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

	.testimonials__expand-btn:hover { opacity: 0.7; }
	.testimonials__expand-btn[hidden] { display: none; }

	.testimonial-card__quote p { font-size: calc( 24 / 1920 * 100vw ); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════════════════ */

.faq {
	background-color: var(--color-dark-blue);
	padding-block: var(--pad-section);
}

.faq__title { color: var(--color-white); text-align: center; font-weight: 400;}

.faq__list {
	max-width: calc( 720 / 402 * 100vw );
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.faq-item { border-block-end: 1px solid rgba(255,255,255,0.1); }
.faq-item:first-child { border-block-start: 1px solid rgba(255,255,255,0.1); }

.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-5);
	text-align: right;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-white);
	gap: var(--space-4);
	transition: color var(--transition);
}

.faq-item.is-open .faq-item__question { color: var(--color-white); font-weight: 600; }

.faq-item__chevron {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	transition: transform var(--transition);
}

.faq-item__chevron img { display: block; }

.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.faq-item__answer-inner {
	padding-block-end: var(--space-5);
	font-size: var(--font-size-lg);
	color: rgba(255,255,255);
	line-height: var(--line-height-base);
}

.faq-item__answer-inner p { margin-block-end: var(--space-3); }
.faq-item__answer-inner p:last-child { margin-block-end: 0; }

@media (min-width: 768px) {
	.faq__list {
		max-width: calc(1160 / 1920 * 100vw); /* 1160px at 1920px = 380px side margins */
	}

	.faq-item__question {
		font-size: calc( 32 / 1920 * 100vw );
		font-weight: 600;
		line-height: calc( 40 / 1920 * 100vw );
		padding-block: var(--space-6);
		padding-inline: 0;
	}

	.faq-item.is-open .faq-item__question {
		font-weight: 600;
	}

	.faq-item__answer-inner {
		font-size: calc( 24 / 1920 * 100vw );
		font-weight: 300;
		line-height: calc( 32 / 1920 * 100vw );
		padding-inline: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════════════════════ */

.contact {
	position: relative;
	padding-block-start: var(--pad-section);
	padding-block-end: var(--space-16);
	background-color: #7a4a1e;
	background-size: cover;
	background-position: center;
}

.contact__overlay {
	position: absolute;
	inset: 0;
}

.contact__inner { position: relative; z-index: 1; }

.contact__title {
	color: var(--color-white);
	text-align: center;
	margin-block-end: 2.5rem; /* 40px mobile */
}

.contact__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	margin-block-end: var(--space-10);
}

/* WhatsApp + Phone in one row (mobile) */
.contact__links-row {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: var(--space-10);
}

.contact-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-lg); /* 18px */
	font-weight: 300;
	line-height: 1.556;
	color: var(--color-white);
	text-align: center;
	transition: opacity var(--transition);
}

.contact-link:hover { opacity: 0.8; }

/* Phone underlined */
a[href^="tel"] .contact-link__label { text-decoration: underline; }

.contact-link__icon { display: flex; align-items: center; justify-content: center; }
.contact-link__icon img { display: block; }

/* Form title */
.form-title {
	display: block;
	font-size: 1.5rem;   /* 24px */
	font-weight: 300;
	line-height: 1.75rem; /* 28px */
	color: var(--color-white);
	text-align: center;
	margin-block-end: var(--space-4);
}

@media (min-width: 768px) {
	.contact__title { margin-block-end: 3.5rem; } /* 56px desktop */

	/* Desktop: all 3 links in one row, same width as form */
	.contact__links {
		flex-direction: row-reverse;
		justify-content: space-between;
		max-width: calc(795 / 1920 * 100vw); /* 795px at 1920px */
		width: 100%;
		margin-inline: auto;
		margin-block-end: calc( 64 / 1920 * 100vw );
	}
	.contact__links-row {
		display: contents; /* unwrap — children join parent flex directly */
	}
	.contact-link {
		font-size: clamp(1rem, calc(7.8125vw - 6rem), 1.5rem); /* 16px @ ≤1280 → 24px @ 1920 */
		line-height: 1.667;
	}

	/* Form title — larger on desktop */
	.form-title { font-size: 2rem; }
}

/* CF7 form wrapper — same width as contact links row on desktop */
.contact__form-wrap {
	max-width: calc( 760 / 402 * 100vw ); /* mobile: full width within container */
	width: 100%;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.contact__form-wrap {
		max-width: calc(795 / 1920 * 100vw); /* 795px at 1920px */
	}

}

/* ── Contact Form 7 overrides ── */
.wpcf7 { direction: rtl; }

.wpcf7 .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: calc( 20 / 402 * 100vw );
}

/* CF7 wraps everything in <p> — reset its spacing */
.wpcf7 .wpcf7-form p {
	margin: 0;
	padding: 0;
	display: contents; /* let children participate in the parent flex/grid directly */
}
.wpcf7 .wpcf7-form p.tos-text {
	display: block;
}
.wpcf7 .wpcf7-form p.tos-text a {
	text-decoration: underline;
}

/* CF7 inserts <br> between label and span — hide them */
.wpcf7 .wpcf7-form br { display: none; }

/* Hide CF7 label text — design uses placeholders only */
.wpcf7 label {
	display: block;
	font-size: 0;
	width: 100%;
}

/* Acceptance checkbox */
.wpcf7-acceptance label {
	font-size: var(--font-size-sm); /* override font-size: 0 */
	display: flex;
	flex-direction: row; /* RTL: checkbox on left, label on right */
	align-items: flex-start;
	gap: var(--space-3);
	cursor: pointer;
	color: rgba(255,255,255,0.85);
	font-weight: 300;
	line-height: 1.5;
	width: 100%;
}

.wpcf7-acceptance input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: calc( 20 / 402 * 100vw );
	height: calc( 20 / 402 * 100vw );
	margin-block-start: 0.15em; /* optical alignment with text */
	background-color: rgba(255,255,255,0.88);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	transition: background-color var(--transition);
}

.wpcf7-acceptance input[type="checkbox"]:checked {
	background-color: var(--color-gold);
}

/* Checkmark via clip-path */
.wpcf7-acceptance input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	inset-inline-start: 22%;
	inset-block-start: 10%;
	width: 50%;
	height: 75%;
	border-inline-end: 2px solid var(--color-dark-blue);
	border-block-end: 2px solid var(--color-dark-blue);
	transform: rotate(45deg);
}

@media (min-width: 768px) {
	.wpcf7-acceptance input[type="checkbox"] {
		width: calc( 20 / 1920 * 100vw );
		height: calc( 20 / 1920 * 100vw );
	}
}

/* Two-field rows (e.g. name + company, phone + email) */
.wpcf7-form-row {
	display: flex;
	flex-direction: column;
	gap: calc( 20 / 402 * 100vw );
}

@media (min-width: 768px) {
	.wpcf7-form-row {
		flex-direction: row;
		gap: calc( 20 / 1920 * 100vw );
	}
	.wpcf7-form-row > label { flex: 1; }
}

/* Fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	height: 3rem; /* 48px */
	background-color: rgba(255, 255, 255, 0.88);
	border: none;
	border-radius: 8px;
	padding-inline: var(--space-4);
	font-family: var(--font-primary);
	font-size: var(--font-size-lg); /* 18px */
	font-weight: 300;
	line-height: 1;
	color: var(--color-dark-blue);
	direction: rtl;
	text-align: right;
	transition: background-color var(--transition), box-shadow var(--transition);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--color-dark-blue);
	font-weight: 300;
	font-size: var(--font-size-lg);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 0 0 2px var(--color-gold);
}

.wpcf7 textarea {
	height: 6rem; /* 96px */
	resize: none;
	padding-block: var(--space-3);
	line-height: var(--line-height-base);
}

/* Submit button */
.wpcf7 input[type="submit"] {
	display: block;
	width: 100%;
	height: clamp(3rem, calc(0.6944vw + 2.6667rem), 3.5rem);
	margin-inline: auto;
	border: none;
	border-radius: 8px;
	font-family: var(--font-primary);
	font-size: 1.5rem;  /* 24px */
	font-weight: 400;
	line-height: 1;
	background-color: var(--color-gold);
	color: var(--color-dark-blue);
	cursor: pointer;
	transition: background-color var(--transition);
	margin-block-start: var(--space-2);
}

@media (min-width: 768px) {
	.wpcf7 .wpcf7-form { gap: calc( 20 / 1920 * 100vw ); }

	.wpcf7 input[type="submit"] {
		width: calc( 362 / 1920 * 100vw );
	}
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--color-gold-hover);
}

/* Validation */
.wpcf7 .wpcf7-not-valid-tip {
	color: #ffffff;
	font-size: var(--font-size-lg);
	margin-block-start: var(--space-1);
}

.wpcf7 .wpcf7-response-output {
	margin-block-start: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: 8px;
	font-size: var(--font-size-lg);
	text-align: center;
	color: var(--color-white);
	margin-top: 0 !important;
}

.wpcf7-form p:last-of-type {
	position: relative;
}
.wpcf7-spinner {
	display: none !important;
}

.wpcf7 .wpcf7-mail-sent-ok {
	background-color: rgba(255,255,255,0.2);
}

.wpcf7 .wpcf7-validation-errors {
	background-color: rgba(255,100,100,0.25);
}

/* Social links */
.contact__social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-8);
}

.contact__social-icons {
	display: flex;
	flex-direction: row;
	gap: var(--space-4);
}

.contact__social-label {
	font-size: 1.5rem;   /* 24px */
	font-weight: 300;
	line-height: 2.5rem; /* 40px */
	color: var(--color-white);
}

.social-link {
	width: 3rem; /* 48px — same at mobile and desktop */
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--transition);
}

.social-link img { display: block; width: 3rem; height: 3rem; }

.social-link:hover { opacity: 0.8; }

/* ── Injected junk cleanup ── */
#simple-translate-system-theme,
.simple-translate-system-theme,
[id*="simple-translate"],
[class*="simple-translate"] {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */

.site-footer {
	background-color: var(--color-dark-blue-2);
	padding-block: var(--space-6);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INNER PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-content {
	background-color: var(--color-dark-blue);
	min-height: 100vh;
	padding-block-start: var(--header-height);
}

.page-content__inner {
	max-width: var(--max-width-text);
	margin-inline: auto;
	padding-block: var(--space-8);
	padding-inline: var(--space-4);
	color: var(--color-white);
}

.page-content__title {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	margin-block-end: var(--space-6);
	color: var(--color-white);
}

.page-content__body {
	font-size: var(--font-size-base);
	line-height: 1.8;
	color: var(--color-white);
}

.page-content__body h2,
.page-content__body h3,
.page-content__body h4 {
	color: var(--color-white);
	margin-block: var(--space-5) var(--space-3);
}

.page-content__body p,
.page-content__body li {
	color: var(--color-white);
	margin-block-end: var(--space-3);
}

.page-content__body a {
	color: var(--color-gold);
}

/* ── Site Credit ─────────────────────────────────────────────────────────────── */

.site-credit {
	text-align: center;
	padding-block: var(--space-4);
	background-color: var(--color-dark-blue);
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.site-credit a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-credit a:hover {
	color: var(--color-gold);
}