/*
Theme Name: Aiconomica
Theme URI: https://aiconomica.com
Author: Sami Tayara
Description: Lightweight custom block theme for aiconomica.com — the economics-of-AI sibling of Green Data. Bilingual EN/AR, RTL-ready. No build step.
Version: 0.1.13
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
Text Domain: aiconomica
RTL: yes
Tags: full-site-editing, block-styles, rtl-language-support
License: GPL-2.0-or-later
*/

/* ==========================================================================
   Green Data — Editorial Authority (iteration 2)
   Most design tokens live in theme.json; this file adds the editorial
   details theme.json can't express: rules, accents, card edges, refined
   button + header treatments. Logical properties throughout for RTL.
   ========================================================================== */

:root {
	--ai-hairline: rgba(14, 26, 43, 0.12);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Hero -------------------------------------------------------------- */
/* Brass eyebrow / kicker above the headline. */
.aiconomica-kicker {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	/* Pin the eyebrow size so every kicker is consistent — without this, kickers
	   that omit a fontSize attribute default to body size (1.0625rem). */
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Dramatic serif headline with a short brass rule beneath — the signature. */
h1.has-huge-font-size {
	max-inline-size: 18ch;
	letter-spacing: -0.02em;
}

h1.has-huge-font-size::after {
	content: "";
	display: block;
	inline-size: 4.5rem;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Hero subhead: warm-gray, measured line length for readability. */
p.has-large-font-size {
	color: var(--wp--preset--color--neutral);
	max-inline-size: 46ch;
}

/* --- Buttons ----------------------------------------------------------- */
.wp-block-button__link:hover {
	background-color: #085747; /* a shade deeper than primary, for a pressed feel */
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Section headings: a touch more air above. */
main h2.wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Short section intro line under a section heading. */
.ai-section-intro {
	color: var(--wp--preset--color--neutral);
	max-inline-size: 52ch;
	margin-block-start: 0;
}

/* --- Engagement cards (brass-edge proof tiles) ------------------------- */
/* Stable two-column grid with a fluted stone "spine" painted into the central
   gutter — the same column texture as the portico shafts and aqueduct piers,
   carrying the classical motif into this section. */
.ai-engagements {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--80);
	row-gap: var(--wp--preset--spacing--60);
	position: relative;
}
.ai-engagements::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0;
	/* physical `left` so the centered spine stays centered in RTL too — with
	   logical inset-inline-start it flips to `right` while translateX(-50%) does
	   not, shoving the spine off-center on the Arabic page. */
	left: 50%;
	transform: translateX(-50%);
	inline-size: 30px;
	border-radius: 2px;
	background-color: #fbf8f1;
	/* two bronze flutes (matching the brass card top-edge) on a stone pilaster */
	background-image:
		linear-gradient(90deg,
			transparent 0 9px,
			color-mix(in srgb, var(--wp--preset--color--accent) 88%, transparent) 9px 11px,
			transparent 11px 19px,
			color-mix(in srgb, var(--wp--preset--color--accent) 88%, transparent) 19px 21px,
			transparent 21px 30px),
		linear-gradient(90deg, #cabf9f, #fbf8f1 20%, #fffdf8 50%, #fbf8f1 80%, #cabf9f);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}
.ai-engagement {
	position: relative;
	z-index: 1;
	margin: 0; /* cancel the default-layout sibling top-margin so row 1 aligns */
	border-radius: 2px;
	border-block-start: 3px solid var(--wp--preset--color--accent);
	block-size: 100%;
}

.ai-engagement h3 {
	margin-block: 0 var(--wp--preset--spacing--40);
	/* The anonymized label is a tile heading, not a hero — keep it a notch above the
	   proof text rather than the dominating 1.3rem "large" preset (especially in
	   Arabic, where it wraps to several bold lines). !important beats WP's
	   has-large-font-size preset, which itself ships !important. */
	font-size: 1.15rem !important;
	line-height: 1.3;
}

@media (max-width: 640px) {
	.ai-engagements {
		grid-template-columns: 1fr;
	}
	.ai-engagements::before {
		display: none;
	}
}

/* --- Header ------------------------------------------------------------ */
/* Sticky bar; background on the <header> element so it spans full width while
   the inner content stays constrained. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--ai-hairline);
	box-shadow: 0 2px 10px rgba(19, 20, 15, 0.04);
}

.ai-header__right {
	gap: var(--wp--preset--spacing--50);
	justify-content: flex-end;
}
/* Collapse the nav to its (built-in) hamburger below 850px — WP's default is 600px,
   which leaves a band where the inline nav + the EN/AR switcher overflow and clip.
   Above 850px the full nav + switcher fit inline on one line (ai-header__right is
   nowrap, so the flex-wrap "collapse to widest child" quirk can't push the switcher
   onto its own line). These selectors out-specify WP's min-width:600px rules. */
@media (max-width: 849px) {
	.ai-header-bar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ai-header-bar .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}
}

/* Smooth in-page nav; offset anchors so the sticky header doesn't cover them. */
html {
	scroll-behavior: smooth;
}
:where(#what-i-do, #engagements, #insights, #contact) {
	scroll-margin-block-start: 5.5rem;
}

/* Primary nav links */
.wp-block-navigation {
	--wp--style--block-gap: clamp(0.85rem, 0.5rem + 1vw, 1.5rem);
	font-size: 0.95rem;
}
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	padding-block-end: 2px;
	border-block-end: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	border-block-end-color: var(--wp--preset--color--accent);
}

.wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
}

.wp-block-site-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* --- Language switcher -------------------------------------------------- */
/* Visual-only for now (EN-first; Polylang wires these up later). EN is the
   active locale; the toggle reads as intentional, not two dead links. */
.aiconomica-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.85rem;
}

.aiconomica-lang-switcher__sep {
	inline-size: 1px;
	block-size: 0.9em;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
}

.aiconomica-lang-switcher__opt {
	color: var(--wp--preset--color--neutral);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: color 0.15s ease;
}

.aiconomica-lang-switcher__opt:hover {
	color: var(--wp--preset--color--primary);
}

.aiconomica-lang-switcher__opt.is-active {
	color: var(--wp--preset--color--accent);
	cursor: default;
}

/* ======================================================================
   "What I do" — classical portico
   Regulatory Compliance = pediment + entablature (the roof) resting on two
   stone columns: Data Governance (left) and Data Management (right).
   Green is reserved for the roof; the columns/steps are warm stone with
   brass moldings. Pure CSS + inline SVG; decorative parts are aria-hidden.
   ====================================================================== */
.ai-portico {
	--ai-green: var(--wp--preset--color--primary);
	--ai-brass: var(--wp--preset--color--accent);
	--ai-stone: var(--wp--preset--color--surface);
	--ai-stone-light: #fffdf8;
	--ai-stone-edge: #cabf9f;
	--ai-col-inset: 1.9rem;
	margin-block-start: var(--wp--preset--spacing--70);
	filter: drop-shadow(0 18px 26px rgba(16, 54, 43, 0.10));
}

/* --- Pediment (the gable) — crowned with the brand --- */
.ai-portico__pediment {
	position: relative;
	block-size: 6.8rem;
	margin-block-end: -1px;
}
.ai-portico__pediment svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}
/* "Green Data" — a gilded, engraved SVG inscription set in the gable's lower mass */
.ai-portico__brand {
	position: absolute;
	inset: 44% 0 0.35rem; /* lower, to the triangle's visual centre of gravity */
	display: flex;
	align-items: center;
	justify-content: center;
}
.ai-portico__brand svg {
	inline-size: min(62%, 360px);
	block-size: auto;
}
.ai-pediment-fill {
	fill: var(--ai-green);
}
.ai-pediment-edge {
	fill: none;
	stroke: var(--ai-brass);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.ai-pediment-inner {
	fill: none;
	stroke: color-mix(in srgb, var(--ai-brass) 42%, transparent);
	stroke-width: 1;
}
.ai-pediment-acroterion {
	fill: var(--ai-stone-light);
	stroke: var(--ai-brass);
	stroke-width: 2.5;
}

/* --- Entablature (the roof beam) — a single slim stripe on the columns --- */
.ai-portico__roof {
	position: relative;
	z-index: 2;
	background: var(--ai-green);
	color: var(--wp--preset--color--base);
	text-align: center;
	padding: 0.62rem var(--wp--preset--spacing--70);
	border-block: 1.5px solid color-mix(in srgb, var(--ai-brass) 80%, transparent);
	box-shadow: 0 14px 20px -12px rgba(16, 54, 43, 0.55);
}
.ai-portico__roof-title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
	line-height: 1.25;
}
.ai-roof-sep {
	color: var(--ai-brass);
	font-weight: 400;
	margin-inline: 0.2em;
}

/* --- Colonnade (two columns) --- */
.ai-portico__colonnade {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	margin-inline: var(--ai-col-inset);
}
.ai-portico__column {
	position: relative;
	flex: 0 0 33%; /* narrower columns -> bigger central intercolumniation */
	display: flex;
	flex-direction: column;
	min-block-size: 21rem;
}

/* capital — flared cushion (echinus) the beam rests on, with an abacus slab */
.ai-portico__capital {
	position: relative;
	block-size: 1.1rem;
	margin-inline: -1.1rem;
	background: linear-gradient(180deg, var(--ai-stone-light), var(--ai-stone-edge));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
	clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.ai-portico__capital::before {
	/* abacus — the flat slab the architrave bears on */
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: -0.2rem;
	block-size: 4px;
	background: var(--ai-stone-light);
	box-shadow: inset 0 2px 0 var(--ai-brass);
}

/* shaft — fluted, cylindrical stone; text centered in the shaft */
.ai-portico__shaft {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* top-align so both titles sit at the same level */
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background-color: var(--ai-stone);
	background-image:
		repeating-linear-gradient(90deg, transparent 0 6px, rgba(96, 79, 42, 0.22) 7px, rgba(255, 255, 255, 0.7) 8px, transparent 9px 15px),
		linear-gradient(90deg, var(--ai-stone-edge), var(--ai-stone) 11%, var(--ai-stone-light) 50%, var(--ai-stone) 89%, var(--ai-stone-edge));
}
.ai-portico__shaft h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	/* match the entablature headline size for consistency (may wrap to 2 lines) */
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
	text-align: center;
}
.ai-portico__shaft p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral);
}
/* column copy as an em-dash bullet list — left-aligned for readability inside
   the centered shaft; the dash hangs in the margin (brass, echoing the brand). */
.ai-portico__list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral);
}
.ai-portico__list li {
	position: relative;
	padding-inline-start: 1.5em;
	margin-block-end: 0.7em;
}
.ai-portico__list li:last-child {
	margin-block-end: 0;
}
.ai-portico__list li::before {
	content: "—";
	position: absolute;
	inset-inline-start: 0;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* base — flared plinth (torus + plinth) the column stands on */
.ai-portico__base {
	position: relative;
	block-size: 1.5rem;
	margin-inline: -1.1rem;
	margin-block-start: auto;
	background: linear-gradient(180deg, var(--ai-stone), var(--ai-stone-light));
	box-shadow: inset 0 -4px 0 var(--ai-brass);
	clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.ai-portico__base::before {
	/* torus — the rounded ring above the plinth */
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline: 14%;
	block-size: 0.5rem;
	border-radius: 0.5rem;
	background: linear-gradient(180deg, var(--ai-stone-light), var(--ai-stone-edge));
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

/* --- Stylobate (stepped platform) --- */
.ai-portico__stylobate {
	position: relative;
	z-index: 1;
}
.ai-portico__stylobate span {
	display: block;
	background: linear-gradient(180deg, var(--ai-stone-light), var(--ai-stone-edge));
}
.ai-portico__stylobate span:first-child {
	block-size: 0.7rem;
	margin-inline: calc(var(--ai-col-inset) - 0.5rem);
	box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ai-brass) 55%, transparent);
}
.ai-portico__stylobate span:last-child {
	block-size: 1rem;
	box-shadow: inset 0 2px 0 var(--ai-brass);
}

/* Keep the structure but stack the columns on very small screens. */
@media (max-width: 560px) {
	.ai-portico__colonnade {
		flex-direction: column;
		gap: 1.25rem;
	}
	.ai-portico__column {
		min-block-size: 0;
	}
}

/* ======================================================================
   Cross-brand CTA — the aqueduct bridge (Green Data -> Aiconomica)
   Governed data flows across the arches from one bank to the other.
   ====================================================================== */
.ai-bridge-cta {
	--ai-green: var(--wp--preset--color--primary);
	--ai-brass: var(--wp--preset--color--accent);
	border-block: 1px solid var(--ai-hairline);
	margin-block-start: var(--wp--preset--spacing--80);
	text-align: center;
}
.ai-bridge-cta__title {
	margin-block-end: var(--wp--preset--spacing--60);
}

.ai-bridge {
	max-inline-size: 940px;
	margin-inline: auto;
}
.ai-bridge__banks {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-inline: 0.25rem;
	margin-block-end: 0.35rem;
}
.ai-bridge__bank {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.15rem;
}
.ai-bridge__bank--from {
	color: var(--ai-green);
}
.ai-bridge__bank--to {
	color: var(--ai-brass); /* the destination, lit in gold */
}
.ai-bridge__bank--to::after {
	content: " \2192";
}

.ai-aqueduct {
	display: block;
	inline-size: 100%;
	block-size: auto;
	color: var(--ai-green); /* the flow's arrowhead marker resolves currentColor here */
}
.ai-aq-deck {
	fill: color-mix(in srgb, var(--ai-green) 8%, transparent);
	stroke: var(--ai-brass);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
.ai-aq-arch {
	fill: none;
	stroke: var(--ai-brass);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
/* piers inherit the portico columns: cylindrical stone + fluting */
.ai-aq-pier {
	fill: url(#ai-pier-grad);
	stroke: color-mix(in srgb, var(--ai-brass) 75%, transparent);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}
.ai-aq-flute {
	stroke: color-mix(in srgb, var(--ai-brass) 35%, transparent);
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
}
/* stepped stylobate, echoing the portico base */
.ai-aq-step {
	fill: url(#ai-step-grad);
}
.ai-aq-step-edge {
	stroke: var(--ai-brass);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
/* binary 0/1 data flowing across the deck channel toward Aiconomica */
.ai-aq-bit {
	font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
	font-size: 14px; /* SVG user units */
	font-weight: 700;
	fill: var(--ai-green);
	text-anchor: middle;
	animation: ai-aq-bits 30s linear infinite; /* slow crawl; matches $bit_dur in the pattern */
}
@keyframes ai-aq-bits {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(1140px); /* (x1 - x0) + 80 travel, in SVG user units */
	}
}
@media (prefers-reduced-motion: reduce) {
	/* freeze the stream (still distributed across the span via per-digit delays) */
	.ai-aq-bit {
		animation-play-state: paused;
	}
}

.ai-bridge-cta__body {
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: auto;
	max-inline-size: 54ch;
	color: var(--wp--preset--color--neutral);
}
.ai-bridge-cta__btn .wp-block-button__link::after {
	content: " \2192";
}

/* ======================================================================
   From the blog — featured (sticky) post + Recent Posts list
   ====================================================================== */
.ai-blog__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--wp--preset--spacing--80);
	margin-block-start: var(--wp--preset--spacing--60);
	align-items: start;
}

/* Featured (left) */
.ai-blog__media {
	display: block;
	margin-block-end: var(--wp--preset--spacing--50);
}
.ai-blog__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: 2px;
	border-block-start: 3px solid var(--wp--preset--color--accent);
}
.ai-blog__kicker {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.ai-blog__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.15;
}
.ai-blog__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.ai-blog__title a:hover {
	text-decoration: underline;
}
.ai-blog__excerpt {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-inline-size: 54ch;
	color: var(--wp--preset--color--neutral);
}
.ai-blog__meta {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.85rem;
	color: var(--wp--preset--color--neutral);
}
.ai-blog__more {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.ai-blog__more:hover {
	text-decoration: underline;
}

/* Recent Posts (right) */
.ai-blog__recent {
	border-inline-start: 1px solid var(--ai-hairline);
	padding-inline-start: var(--wp--preset--spacing--70);
}
.ai-blog__recent-title {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	font-size: 1.2rem;
	color: var(--wp--preset--color--primary);
	border-block-end: 2px solid var(--wp--preset--color--accent);
}
.ai-blog__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ai-blog__item {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--ai-hairline);
}
.ai-blog__item:first-child {
	padding-block-start: 0;
}
.ai-blog__item-title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.ai-blog__item-title:hover {
	color: var(--wp--preset--color--primary);
}
.ai-blog__item-date {
	display: block;
	margin-block-start: 0.2rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--neutral);
}
.ai-blog__viewall {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--50);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ai-blog__viewall:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.ai-blog__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--70);
	}
	.ai-blog__recent {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-block-start: 1px solid var(--ai-hairline);
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

/* --- Credentials band -------------------------------------------------- */
.ai-creds__row {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}
.ai-creds__item {
	position: relative;
	text-align: center;
	padding-inline: var(--wp--preset--spacing--60);
}
/* brass hairline divider between marks (not before the first) */
.ai-creds__item + .ai-creds__item::before {
	content: "";
	position: absolute;
	inset-block: 0.15em 0.15em;
	inset-inline-start: 0;
	inline-size: 1px;
	background: color-mix(in srgb, var(--ai-brass) 55%, transparent);
}
.ai-creds__mark {
	/* reserve two lines and bottom-align, so single- and two-line marks share
	   one baseline and every caption begins on the same row */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 2.1em;
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
}
.ai-creds__caption {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 26ch;
	margin-inline: auto;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral);
}

@media (max-width: 781px) {
	.ai-creds__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
	.ai-creds__item {
		padding-block: var(--wp--preset--spacing--50);
		padding-inline: 0;
	}
	/* swap the vertical divider for a horizontal one when stacked */
	.ai-creds__item + .ai-creds__item::before {
		inset-block-start: 0;
		inset-block-end: auto;
		inset-inline: 20% auto;
		inline-size: 60%;
		block-size: 1px;
	}
}

/* --- Footer ------------------------------------------------------------ */
.ai-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--70);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}
.ai-footer__wordmark {
	display: block;
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-size: 1.6rem;
	color: var(--wp--preset--color--base);
}
.ai-footer__wordmark::after {
	content: "";
	display: block;
	inline-size: 2.5rem;
	block-size: 2px;
	margin-block-start: var(--wp--preset--spacing--30);
	background: var(--ai-brass, var(--wp--preset--color--accent));
}
.ai-footer__tagline {
	margin-block-start: var(--wp--preset--spacing--40);
	max-inline-size: 34ch;
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	font-size: 0.95rem;
	line-height: 1.5;
}
.ai-footer__col-title {
	display: block;
	margin-block-end: var(--wp--preset--spacing--40);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	color: var(--ai-brass, var(--wp--preset--color--accent));
}
.ai-footer__link {
	display: inline-block;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.ai-footer__link:hover {
	text-decoration: underline;
}
.ai-footer__link--brass {
	color: var(--ai-brass, var(--wp--preset--color--accent));
}
.ai-footer__note {
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 30ch;
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
	font-size: 0.85rem;
	line-height: 1.45;
}
.ai-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--60);
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

@media (max-width: 781px) {
	.ai-footer__top {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/* --- About page ------------------------------------------------------- */
/* About lead photo — plain landscape image on top, at its natural size, centred like
   the rest of the page; the bio text sits below it at the normal content width. */
.ai-about__photo {
	margin-block: 0 var(--wp--preset--spacing--60);
	margin-inline: auto;
	max-inline-size: 720px; /* match the page content width so photo + text align */
}
.ai-about__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Bio (rendered by the aiconomica/bio-card block) */
.ai-biocard__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}
.ai-biocard__name::after {
	content: "";
	display: block;
	inline-size: 3.5rem;
	block-size: 3px;
	margin-block-start: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
}
.ai-biocard__headline {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.ai-biocard__intro {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--wp--preset--color--neutral);
	max-inline-size: 60ch;
}
.ai-biocard__facts {
	margin: var(--wp--preset--spacing--60) 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* When the facts render as their own full-width block (About page: lead sits
   beside the portrait, facts break to the shared left spine below), the dl is
   already at the top of its wrapper — drop the extra top margin and let the
   block gap handle the separation. */
.ai-biocard--facts .ai-biocard__facts {
	margin-block-start: 0;
}
.ai-biocard__fact {
	margin: 0;
}
.ai-biocard__fact--full {
	grid-column: 1 / -1;
}
.ai-biocard__label {
	margin: 0 0 0.4em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.ai-biocard__value {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.55;
}
.ai-biocard__certs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--60);
}
.ai-biocard__certs li {
	position: relative;
	padding-block: 0.4rem;
	padding-inline-start: 1.1rem;
	border-block-end: 1px solid var(--ai-hairline);
}
.ai-biocard__certs li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.95em;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Profile pillars (CV profile, adapted) — editorial label | text rows */
.ai-profile {
	margin-block-start: var(--wp--preset--spacing--50);
}
.ai-profile__row {
	display: grid;
	grid-template-columns: 1fr 3.2fr;
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--ai-hairline);
}
.ai-profile__row:last-child {
	border-block-end: 1px solid var(--ai-hairline);
}
.ai-profile__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}
.ai-profile__text {
	margin: 0;
	max-inline-size: 64ch;
	line-height: 1.7;
	color: var(--wp--preset--color--neutral);
}
@media (max-width: 781px) {
	.ai-profile__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* Vision band (the founder's-vision callout) */
.ai-vision__inner {
	max-inline-size: 62ch;
	margin-inline: auto;
	text-align: center;
}
.ai-vision__kicker {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.ai-vision__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	/* Genuine Fraunces italic (the loaded 400-italic face) reads as a reflective
	   pull-quote rather than a headline — calmer than the heavy 600 roman. */
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.55rem);
	line-height: 1.55;
	color: var(--wp--preset--color--primary);
}
.ai-vision__cite {
	margin: var(--wp--preset--spacing--60) 0 0;
}
.ai-vision__cite a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ai-vision__cite a:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.ai-biocard__facts,
	.ai-biocard__certs {
		grid-template-columns: 1fr;
	}
}

/* --- Blog: Insights list ---------------------------------------------- */
.ai-postlist .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ai-postlist .wp-block-post-template > li {
	padding-block: var(--wp--preset--spacing--70);
	border-block-start: 1px solid var(--ai-hairline);
}
.ai-postlist .wp-block-post-template > li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}
.ai-post-kicker {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
}
.ai-post-kicker a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ai-post-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
	line-height: 1.15;
}
.ai-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.ai-post-title a:hover {
	text-decoration: underline;
}
.ai-post-date {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.85rem;
	color: var(--wp--preset--color--neutral);
}
.ai-post-excerpt {
	margin: 0;
	max-inline-size: 68ch;
	color: var(--wp--preset--color--neutral);
	line-height: 1.7;
}
.ai-post-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.ai-post-excerpt .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}
.ai-pagination {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--ai-hairline);
}

/* --- Blog: single article --------------------------------------------- */
.ai-article-head {
	max-inline-size: 46rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--60);
	text-align: center;
}
.ai-article-head .ai-post-kicker a {
	color: var(--wp--preset--color--accent);
}
.ai-article-head .ai-post-date {
	margin-block: var(--wp--preset--spacing--30) 0;
}
/* centre the signature brass rule under the centered article title */
.ai-article-head h1.has-huge-font-size::after {
	margin-inline: auto;
}
.ai-article-image img {
	border-radius: 3px;
	border-block-start: 3px solid var(--wp--preset--color--accent);
}
.ai-article-foot {
	border-block-start: 1px solid var(--ai-hairline);
	padding-block-start: var(--wp--preset--spacing--50);
}
.ai-back-link a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ai-back-link a:hover {
	text-decoration: underline;
}

/* --- Contact band ------------------------------------------------------ */
.ai-contact__inner {
	max-inline-size: 56ch;
	margin-inline: auto;
	text-align: center;
}
.ai-contact__kicker {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.ai-contact__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}
.ai-contact__text {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-inline-size: 46ch;
	line-height: 1.65;
	color: var(--wp--preset--color--neutral);
}
.ai-contact__actions {
	margin-block-start: var(--wp--preset--spacing--60);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
}
.ai-contact__btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ai-contact__btn--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--primary);
}
.ai-contact__btn--primary:hover {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}
.ai-contact__btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--accent);
}
.ai-contact__btn--ghost:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}

/* footer contact links stack on their own lines */
.ai-footer__link--block {
	display: block;
	margin-block-end: 0.45rem;
}

/* --- Brand / logo ------------------------------------------------------ */
.ai-brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.ai-brand__logo {
	display: block;
	height: 54px;
	width: auto;
}
.ai-footer__logo {
	display: block;
	line-height: 0;
}
.ai-footer__logo svg {
	display: block;
	height: 40px;
	width: auto;
}
@media (max-width: 600px) {
	.ai-brand__logo {
		height: 44px;
	}
}

/* --- RTL: mirror the hero rule origin ---------------------------------- */
/* (logical properties handle most of this automatically) */

/* ======================================================================
   Arabic / RTL — interim About page (pre-Polylang)
   The <html> gets lang="ar" dir="rtl" (inc/i18n.php) so the whole layout
   mirrors via the logical properties already used throughout. Here we only
   need to (a) switch the Arabic content to the self-hosted Noto Sans Arabic
   webfont — Fraunces/IBM Plex carry no Arabic glyphs — and (b) undo Latin
   typographic touches (uppercasing, letter-spacing) that break Arabic shaping.
   The body carries `ai-rtl` (added in inc/i18n.php) and <html> is dir="rtl"
   lang="ar". We scope the Arabic webfont to the page MAIN (`.ai-rtl main`) so the
   Latin brand logo + English nav in the shared header/footer keep their typefaces.
   ====================================================================== */
.ai-rtl main,
.ai-rtl main :is(p, a, li, dt, dd, span, blockquote, figcaption, strong, em),
.ai-rtl main :is(h1, h2, h3, h4, h5, h6) {
	font-family: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Arabic reads better with a touch more leading and no Latin letter-spacing. */
.ai-rtl main {
	line-height: 1.9;
	letter-spacing: normal;
}
.ai-rtl main :is(h1, h2, h3, h4) {
	line-height: 1.4;
	letter-spacing: normal;
}

/* Kickers/labels: drop uppercase + tracking (meaningless and harmful in Arabic). */
.ai-rtl main :is(.aiconomica-kicker, .ai-vision__kicker, .ai-contact__kicker, .ai-biocard__label) {
	text-transform: none;
	letter-spacing: normal;
}

/* Arabic glyphs read smaller at a given px than Latin, and these labels/kickers
   carry no uppercase/tracking to give them presence — so size the Arabic section
   labels and band kickers up noticeably (vs ~0.8rem in English) for comfortable
   legibility, keeping them all consistent. */
.ai-rtl main :is(.ai-biocard__label, .aiconomica-kicker, .ai-vision__kicker, .ai-contact__kicker) {
	font-size: 1.05rem;
}

/* The bio-card facts grid + lists inherit dir=rtl from the page; just relax leading. */
.ai-rtl main .ai-biocard__intro,
.ai-rtl main .ai-profile__text,
.ai-rtl main .ai-vision__quote,
.ai-rtl main .ai-contact__text {
	line-height: 1.95;
}

/* Arabic numerals/Latin tokens (CDMP, LinkedIn, 2017) sit fine in Noto Sans
   Arabic; keep them upright and unspaced within otherwise-Arabic runs. */
.ai-rtl main .ai-biocard__certs li {
	letter-spacing: normal;
}

/* Engagement proof text reads small at 0.875rem in Arabic — nudge it up for
   comfortable legibility (and a tighter ratio to the heading). */
.ai-rtl main .ai-engagement p {
	font-size: 0.95rem !important;
}

/* Arabic legibility: small detail/caption text that reads too small in Arabic. */
.ai-rtl main :is(.ai-creds__caption, .ai-blog__kicker) {
	font-size: 0.95rem;
}
.ai-rtl main :is(.ai-portico__shaft p, .ai-portico__list) {
	font-size: 0.98rem;
}
/* Footer lives outside <main>, so scope it to the body's ai-rtl class. */
.ai-rtl .ai-footer__col-title {
	font-size: 0.85rem;
}
.ai-rtl :is(.ai-footer__note, .ai-footer__bottom) {
	font-size: 0.9rem;
}

/* The Latin brand wordmarks live in inline SVG <text>, which inherits the page's
   dir=rtl on Arabic pages — flowing "Green Data" right-to-left so it collides with
   the shield. Force the brand SVGs back to LTR so the wordmark renders correctly. */
.ai-rtl .ai-brand__logo,
.ai-rtl .ai-footer__logo svg,
.ai-rtl .ai-portico__brand svg {
	direction: ltr;
}

/* Brand lockup */
.ai-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.ai-brand__mark { display: block; flex: none; }
.ai-brand__wordmark { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.012em; line-height: 1; }
.ai-brand__ai { color: var(--wp--preset--color--primary); }
.ai-brand__rest { color: var(--wp--preset--color--contrast); }
/* Dark surfaces (footer) flip the wordmark */
.ai-footer .ai-brand__ai { color: var(--wp--preset--color--secondary); }
.ai-footer .ai-brand__rest { color: var(--wp--preset--color--base); }

/* --- Inert lang-switcher (D1) ------------------------------------------ */
.ai-langswitch--inert { font-weight: 600; color: var(--wp--preset--color--neutral); opacity: 0.6; cursor: default; user-select: none; font-size: 0.85rem; }
.ai-langswitch__sep { margin: 0 0.35rem; }

/* --- Service pillars (D3) ---------------------------------------------- */
.ai-pillars__grid { gap: 1rem; margin-top: 2rem; }
.ai-pillar { background: var(--wp--preset--color--tertiary); border-radius: 10px; padding: 1.1rem 1rem; border-top: 3px solid var(--wp--preset--color--primary); height: 100%; }
.ai-pillars__grid .wp-block-column:nth-child(2) .ai-pillar { border-top-color: var(--wp--preset--color--secondary); }
.ai-pillars__grid .wp-block-column:nth-child(3) .ai-pillar { border-top-color: var(--wp--preset--color--accent); }
.ai-pillars__grid .wp-block-column:nth-child(4) .ai-pillar { border-top-color: var(--wp--preset--color--contrast); }
.ai-pillar__n { font-family: var(--wp--preset--font-family--display); margin: 0 0 0.35rem; }
.ai-pillar__h { font-size: 1.15rem; margin: 0 0 0.4rem; line-height: 1.15; }

/* --- Industries sector cards ------------------------------------------ */
.ai-inds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: var(--wp--preset--spacing--50); }
.ai-inds__card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--wp--preset--color--tertiary); border-radius: 14px; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); border-top: 4px solid var(--wp--preset--color--primary); }
.ai-inds__card--telecom { border-top-color: var(--wp--preset--color--secondary); }
.ai-inds__card--smart { border-top-color: var(--wp--preset--color--accent); }
.ai-inds__icon { width: 96px; height: 96px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); box-shadow: 0 6px 18px rgba(14, 26, 43, 0.10); }
.ai-inds__icon img { width: 72px; height: 72px; display: block; }
.ai-inds__label { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); line-height: 1.2; color: var(--wp--preset--color--contrast); }
.ai-inds__text { margin: 0; line-height: 1.7; color: var(--wp--preset--color--neutral); }
@media (max-width: 781px) { .ai-inds__grid { grid-template-columns: 1fr; } }

/* --- Demo teaser (D5) -------------------------------------------------- */
.ai-demo__box { border: 1.5px dashed var(--wp--preset--color--secondary); border-radius: 12px; padding: 2rem 1.5rem; background: color-mix(in srgb, var(--wp--preset--color--secondary) 6%, transparent); }
.ai-demo__lab { margin-bottom: 0.5rem; }

/* --- Services + service pages ----------------------------------------- */
.ai-service__lead { max-width: 46ch; }
.ai-service-sec > * { max-width: 720px; }
.ai-service__list { line-height: 1.7; }
.ai-service__list li { margin-bottom: 0.35rem; }
.ai-service__who { margin-top: 1.5rem; }
/* Hub cards: linked headings + "Learn more" */
.ai-pillar__h a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.ai-pillar__h a:hover { color: var(--wp--preset--color--primary); }
.ai-pillar__more { margin-top: 0.6rem; font-weight: 600; }
/* Whole pillar card is a link to its service page (home "Four ways…" band). */
a.ai-pillar { display: block; color: inherit; text-decoration: none; }
a.ai-pillar:hover { box-shadow: 0 4px 16px rgba(14, 26, 43, 0.10); }
a.ai-pillar:hover .ai-pillar__h { color: var(--wp--preset--color--primary); }
.gd-rtl .ai-service__lead, .ai-rtl .ai-service__lead { max-width: 52ch; }

/* --- About: certifications with the DAMA CDMP badge ------------------- */
/* Two columns inside "Recent Certifications" that share the facts grid spine. */
.ai-biocard__cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); align-items: start; }
.ai-biocard__cert-badge img { display: block; width: 120px; height: 120px; border: 1px solid var(--ai-hairline); border-radius: 8px; background: #fff; margin-block-end: 0.6rem; }
.ai-biocard__certs--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) { .ai-biocard__cert-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); } }