/* Alphabet Brand Tokens
-----------------------------------------------------------------
   Source: Brandbook Alphabet (2026)
   Core palette : #6f5da7  #01033e  #d4d6e2  #95bbea
   Logo ink     : #1a122c
   Loaded before style.css so every stylesheet and inline block
   resolves against a single source of truth.
-----------------------------------------------------------------*/

:root {
	/* --- Brand core (exact brandbook values) --- */
	--brand: #6f5da7;
	--brand-navy: #01033e;
	--brand-mist: #d4d6e2;
	--brand-sky: #95bbea;
	--brand-ink: #1a122c;

	/* --- Derived accents ---
	   The site runs on a dark canvas, where #6f5da7 sits at ~3.5:1.
	   `soft` carries small accent text (6.3:1), `strong` carries
	   pressed / hover states, `deep` carries tinted surfaces. */
	--brand-soft: #9b8ad0;
	--brand-strong: #574789;
	--brand-deep: #2a2148;

	/* --- rgb channels for rgba() composition --- */
	--brand-rgb: 111, 93, 167;
	--brand-soft-rgb: 155, 138, 208;
	--brand-sky-rgb: 149, 187, 234;
	--brand-navy-rgb: 1, 3, 62;
	--brand-mist-rgb: 212, 214, 226;

	/* --- Surfaces (brand-tinted neutrals, tuned to the previous
	       luminance ramp so contrast and depth are preserved) --- */
	--bg-1: #0f0b1e; /* page canvas          (was #0f0f0f) */
	--bg-2: #141026; /* raised section       (was #121212) */
	--bg-3: #08050f; /* deepest well         (was #000000) */
	--bg-4: #1c1638; /* hover / active fill              */

	/* --- Lines & separators --- */
	--line-1: #241d3a;
	--line-2: #2f2745;
	--line-3: #38304f;

	/* --- Text --- */
	--text-1: #ffffff;
	--text-2: #d4d6e2;
	--text-3: #a7a3bd;
	--text-4: #7e7996;

	/* --- Typography --- */
	--font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Arabic keeps its own face; the brand's Aktiv Grotesk has no web
   licence here, so the established Thmanyah stack stays in place. */
html[lang="ar"] {
	--font-sans: "Thmanyah Sans", "Inter", sans-serif;
}

/* --- Brand utility classes ------------------------------------ */
.brand-color { color: var(--brand-soft) !important; }
.brand-bg { background-color: var(--brand) !important; }
.brand-navy-bg { background-color: var(--brand-navy) !important; }

/* Brand logo lockups.
   The new lockup is far less wide than the old one (3.9:1 against
   6.1:1), so it is sized by HEIGHT. Constraining by width would blow
   the logo up by ~55% and shove the navbar out of balance. */
.brand-lockup {
	max-width: none !important;
}

.brand-lockup img {
	display: block;
	width: auto !important;
	height: 30px;
}

.brand-lockup--footer img { height: 40px; }

@media screen and (max-width: 991px) {
	.navbar .logo.brand-lockup {
		max-width: none !important;
	}

	.brand-lockup img { height: 26px; }
	.brand-lockup--footer img { height: 34px; }
}

.brand-mark {
	display: block;
	width: auto;
	height: 32px;
}

/* --- Editorial imagery ----------------------------------------
   The theme's stock collages ship in a hot orange/teal palette that
   fought the old brand less than it fights this one. Pulling most of
   the chroma out and re-tinting toward the brand keeps their depth
   and playfulness while letting them sit inside the purple system. */
[data-background^="/assets/imgs/serv-img/"] {
	filter: grayscale(0.75) contrast(1.05) brightness(0.95) sepia(0.25)
		hue-rotate(200deg) saturate(1.4);
}

/* --- Paginator -------------------------------------------------
   Shared by every list that renders vendor/pagination/projects:
   the work listing, the investment portfolio and the blog. It used
   to be pasted inline into each page, so a new page picked up the
   markup and silently lost the styling. The two live here together
   now. Arrow direction is handled in the markup, not by mirroring
   this, so RTL needs nothing extra. */
.proj-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 50px;
}

.proj-pag-nav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
	transition: color 0.3s ease;
}

.proj-pag-nav:hover:not(.disabled) {
	color: var(--brand-soft);
}

.proj-pag-nav.disabled {
	opacity: 0.2;
	cursor: default;
}

.proj-pag-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.proj-pag-dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.proj-pag-dot.active {
	width: 24px;
	border-radius: 3px;
	background: var(--brand);
	cursor: default;
}

.proj-pag-dot:hover:not(.active) {
	background: rgba(255, 255, 255, 0.5);
}

/* The dot is a 6px target, so it gets a padded tap area. Two things matter
   here: only the ANCHORS are clickable — the current page is a <span> and must
   not grow a hit area — and every dot has to be positioned, or the overlay
   escapes to the nearest positioned ancestor and blankets the whole container,
   swallowing clicks on the filters and the prev/next links. */
.proj-pag-dot {
	position: relative;
}

a.proj-pag-dot::after {
	content: "";
	position: absolute;
	inset: -14px;
}

/* --- Hero headline continuation ---------------------------------
   The software-house and investment heroes split one headline across
   two flex children, and both were marked up as <h1>. Two h1s on a
   page split the topic signal, so the second is now a plain element
   carrying this class — which mirrors the theme's h1 ramp exactly
   (70/50/40 base, 105/80/40 inside .main-header .caption) so nothing
   moves. Values transcribed from the matched rules, not guessed. */
.h1-line {
	font-size: 70px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.main-header .caption .h1-line {
	font-size: 105px;
}

@media screen and (max-width: 992px) {
	.h1-line { font-size: 50px; }
	.main-header .caption .h1-line { font-size: 80px; }
}

@media screen and (max-width: 768px) {
	.h1-line,
	.main-header .caption .h1-line { font-size: 40px; }
}