/* =======================================================================
   A.N.I: About / אודות Page Styles
   Sections: hero shot · intro (who we are + facts) · capability tiles ·
             value cards · vision · clients · CTA
   RTL-safe: logical CSS only (inline-start/end, block-start/end).
   No hardcoded hex: all via tokens.css custom properties.
   No letter-spacing on Hebrew text.
   ======================================================================= */

/* ── 0. Page wrapper ──────────────────────────────────────────────────── */

.ani-about-page {
	overflow-x: hidden;
}


/* ── 1. Hero shot ─────────────────────────────────────────────────────── */
/* Base .hero-shot__* rules live in components.css (same pattern as the
   homepage hero). Only the About-specific focal point is set here. */

.ani-about-hero .hero-shot__media img {
	object-position: center 42%;
}

@media (max-width: 760px) {
	.ani-about-hero {
		min-block-size: 74vh;
	}
}


/* ── 2. Who we are ────────────────────────────────────────────────────── */

.ani-about-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.ani-about-intro__copy .section-title {
	margin-block: 10px 22px;
}

.ani-about-intro__text {
	font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
	line-height: 1.85;
	color: var(--ani-body);
	margin-block-end: 18px;
	max-inline-size: 58ch;
}

/* "במספרים" strip: only facts that already appear elsewhere on the site */
.ani-about-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-block-start: 32px;
	border-block-start: 1px solid var(--ani-border);
	padding-block-start: 22px;
}

.ani-about-fact {
	padding-inline-end: 20px;
	border-inline-end: 1px solid var(--ani-border);
}

.ani-about-fact:last-child {
	border-inline-end: 0;
	padding-inline-end: 0;
}

.ani-about-fact + .ani-about-fact {
	padding-inline-start: 20px;
}

.ani-about-fact dt {
	font-family: var(--ani-mono);
	font-size: .66rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ani-muted);
	margin-block-end: 6px;
}

.ani-about-fact dd {
	margin: 0;
	font-size: clamp(1rem, .9rem + .35vw, 1.2rem);
	font-weight: 800;
	color: var(--ani-ink);
	line-height: 1.3;
}

.ani-about-fact dd span[dir="ltr"] {
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

.ani-about-intro__media {
	margin: 0;
	border-radius: var(--ani-radius-card);
	overflow: hidden;
	box-shadow: var(--ani-shadow-card);
	background: var(--ani-surface);
}

.ani-about-intro__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


/* ── 3. Capability tiles ──────────────────────────────────────────────── */

.ani-about-caps__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-block-start: 40px;
}

/* 5 tiles: 3 on the first row, the remaining 2 centred on the second */
@media (min-width: 961px) {
	.ani-about-caps__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ani-about-cap { grid-column: span 2; }
	.ani-about-cap:nth-child(4) { grid-column: 2 / span 2; }
}

.ani-about-cap {
	background: var(--ani-white);
	border: 1px solid var(--ani-border);
	border-radius: var(--ani-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ani-about-cap:hover {
	border-color: rgba(31, 109, 255, .3);
	box-shadow: 0 6px 22px rgba(13, 20, 27, .09);
	transform: translateY(-2px);
}

.ani-about-cap__photo {
	display: block;
	background: var(--ani-blueprint);
}

.ani-about-cap__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ani-about-cap__body {
	padding: 20px 22px 24px;
}

.ani-about-cap__title {
	font-size: clamp(1.02rem, .96rem + .25vw, 1.16rem);
	font-weight: 800;
	color: var(--ani-ink);
	margin: 0 0 8px;
	line-height: 1.35;
}

.ani-about-cap__title a {
	color: inherit;
	text-decoration: none;
}

.ani-about-cap__title a:hover {
	color: var(--ani-blue-deep);
}

.ani-about-cap__title a:focus-visible {
	outline: 2px solid var(--ani-blue);
	outline-offset: 3px;
	border-radius: 3px;
}

.ani-about-cap__blurb {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--ani-muted);
}


/* ── 4. Value cards ───────────────────────────────────────────────────── */

.ani-about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-block-start: 40px;
}

.ani-about-value-card {
	text-align: start;
}

.ani-about-value-card .card__icon {
	color: var(--ani-blue);
	margin-block-end: 14px;
}

.ani-about-value-card .card__title {
	font-size: 1.06rem;
	margin-block-end: 8px;
}

.ani-about-value-card .card__blurb {
	font-size: .95rem;
	line-height: 1.7;
	color: var(--ani-muted);
}


/* ── 5. Vision band ───────────────────────────────────────────────────── */

.ani-about-vision {
	background-color: var(--ani-ink);
	background-image:
		linear-gradient(rgba(13,20,27,.82), rgba(13,20,27,.82)),
		url("../blueprint.webp");
	background-size: cover, cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-block: 80px;
}

.ani-about-vision__inner {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.ani-about-vision__inner .eyebrow {
	color: var(--ani-blue);
	opacity: .9;
}

.ani-about-vision__title {
	font-size: clamp(1.4rem, 1rem + 1.5vw, 1.9rem);
	font-weight: 800;
	color: var(--ani-white);
	margin-block: 10px 24px;
}

/* Manual underline element */
.ani-about-vision__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--ani-blue);
	border-radius: 2px;
	margin-block-start: 14px;
	margin-inline: auto;
}

.ani-about-vision__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.ani-about-vision__quote p {
	font-size: clamp(1rem, 0.88rem + 0.5vw, 1.18rem);
	color: rgba(255,255,255,.82);
	line-height: 1.8;
	font-weight: 400;
	max-width: 74ch;
	margin-inline: auto;
}


/* ── 6. Clients & Industries ──────────────────────────────────────────── */

/* Sector tag pills */
.ani-about-sectors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 12px;
	margin-block: 32px 40px;
}

.ani-about-sector {
	display: inline-block;
	background: rgba(31, 109, 255, .07);
	border: 1px solid rgba(31, 109, 255, .22);
	border-radius: 999px;
	padding: 6px 18px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ani-blue-deep);
}

/* Logo grid */
.ani-about-logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-block-end: 24px;
	max-inline-size: 780px;
	margin-inline: auto;
}

/* Each logo cell */
.ani-about-logo-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 18px;
	background: var(--ani-white);
	border: 1px solid var(--ani-border);
	border-radius: 12px;
	min-block-size: 116px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.ani-about-logo-cell:hover {
	border-color: rgba(31, 109, 255, .3);
	box-shadow: 0 2px 12px rgba(31, 109, 255, .1);
}

/* Logo image: grayscale, size-capped */
.ani-about-logo {
	max-block-size: 58px;
	max-inline-size: 175px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	filter: grayscale(1);
	opacity: .6;
	transition: filter .2s ease, opacity .2s ease;
	margin-inline: auto;
}

.ani-about-logo-cell:hover .ani-about-logo {
	filter: grayscale(0);
	opacity: 1;
}

/* Text-only logo cell */
.ani-about-logo-text {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ani-muted);
	opacity: 1;
	direction: ltr;
	unicode-bidi: isolate;
}

.ani-about-clients__footer {
	text-align: center;
	font-size: 0.9rem;
	color: var(--ani-muted);
	font-style: italic;
	margin-block-start: 8px;
}


/* ── 7. CTA band ──────────────────────────────────────────────────────── */

/* .cta-band is defined in components.css: no extra rules needed here.
   Only section-title overrides for the dark blueprint background. */

.ani-about-cta .cta-band__title {
	color: var(--ani-ink);
}

.ani-about-cta .cta-band__title::after {
	margin-inline: auto;
}


/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.ani-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ani-about-logos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
	.ani-about-intro__inner { grid-template-columns: 1fr; gap: 32px; }
	.ani-about-intro__media { order: -1; }
	.ani-about-intro__text { max-inline-size: none; }
	.ani-about-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.ani-about-caps__grid { grid-template-columns: 1fr; gap: 20px; }
	.ani-about-values__grid { grid-template-columns: 1fr; gap: 16px; }
	.ani-about-logos { grid-template-columns: repeat(2, 1fr); }

	/* Facts stack into rows so the labels stay readable at 390px */
	.ani-about-facts {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ani-about-fact,
	.ani-about-fact:last-child {
		padding-inline: 0;
		border-inline-end: 0;
	}

	.ani-about-fact + .ani-about-fact {
		padding-inline-start: 0;
		padding-block-start: 16px;
		border-block-start: 1px solid var(--ani-border);
	}
}

@media (max-width: 420px) {
	.ani-about-logos { grid-template-columns: repeat(2, 1fr); }
	.ani-about-sectors { gap: 6px 8px; }
}