/*
 * Sigma Group — main theme styles
 * Token system + base + components + homepage sections.
 * RTL: built with CSS logical properties throughout. The same stylesheet
 * serves both directions; [dir="rtl"] overrides only disable Latin-specific
 * uppercase/letter-spacing and mirror the few angled/transform accents.
 */

/* ============================================================
 * 1. Tokens
 * ========================================================== */
:root {
	--color-brand: #BE2B2B;
	--color-brand-600: #A52424;
	--color-brand-700: #8B1E1E;
	--color-brand-050: #FBF2F2;
	--color-brand-100: #F4DEDE;

	--color-ink: #231F20;
	--color-ink-600: #5B5557;
	--color-ink-400: #8C8688;

	--color-paper: #FFFFFF;
	--color-surface: #F6F5F3;
	--color-line: #E6E3DF;
	--color-line-strong: #CFC9C2;
	--text-on-dark: #F6F5F3;

	--font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--container: 1200px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--section-pad: clamp(4rem, 8vw, 8rem);

	--radius-sm: 2px;
	--radius: 4px;
	--radius-lg: 8px;

	--shadow-sm: 0 1px 2px rgba(35, 31, 32, .05);
	--shadow-md: 0 6px 20px rgba(35, 31, 32, .08);

	--ease: cubic-bezier(.2, .6, .2, 1);
}

/* Arabic family swap (Polylang/WordPress sets dir="rtl") */
[dir="rtl"] {
	--font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
	--font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* ============================================================
 * 2. Base / reset
 * ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-ink);
	background: var(--color-paper);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-inline-size: 100%; block-size: auto; display: block; }

a { color: var(--color-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	color: var(--color-ink);
	margin: 0;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.3; }

p { margin: 0 0 1rem; }
p:last-child { margin-block-end: 0; }

.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden; white-space: nowrap;
}

.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--gutter);
	z-index: 100;
	background: var(--color-ink);
	color: var(--text-on-dark);
	padding: .6rem 1rem;
	border-radius: var(--radius);
}
.skip-link:focus { inset-block-start: .5rem; }

/* ============================================================
 * 3. Layout helpers
 * ========================================================== */
.container {
	inline-size: 100%;
	max-inline-size: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--surface { background: var(--color-surface); }
/* Soft brand-tinted band (lighter alternative to the dark ink band) — dark
 * text stays legible on the pale red wash; client asked for no dark blocks. */
.section--brand-soft { background: var(--color-brand-050); border-block: 1px solid var(--color-brand-100); }
.section--ink { background: var(--color-ink); color: var(--text-on-dark); }
.section--ink h2, .section--ink h3 { color: var(--text-on-dark); }

/* ============================================================
 * 4. Signature device — the Sigma marker
 * Approved use: eyebrow tab. Reused functionally for nav-active
 * indicator and stat dividers. Mirrors in RTL.
 * ========================================================== */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.25rem;
	font-family: var(--font-body);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--color-brand);
}
.eyebrow::before {
	content: "";
	inline-size: 34px;
	block-size: 4px;
	flex: 0 0 auto;
	background: var(--color-brand);
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.section--ink .eyebrow { color: var(--color-brand-100); }
[dir="rtl"] .eyebrow { text-transform: none; letter-spacing: normal; }
[dir="rtl"] .eyebrow::before { transform: scaleX(-1); }

.section__head { max-inline-size: 60ch; margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.section__intro { margin-block-start: 1rem; color: var(--color-ink-600); }
.section--ink .section__intro { color: rgba(246, 245, 243, .82); }

/* ============================================================
 * 5. Buttons
 * ========================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding-block: .85rem;
	padding-inline: 1.6rem;
	transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn .btn__arrow { transition: transform .15s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(.2rem); }
[dir="rtl"] .btn .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(.2rem); }

.btn--primary { background: var(--color-brand); color: var(--text-on-dark); }
.btn--primary:hover { background: var(--color-brand-600); }
.btn--primary:active { background: var(--color-brand-700); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line-strong); }
.btn--ghost:hover { border-color: var(--color-ink); }
.section--ink .btn--ghost { color: var(--text-on-dark); border-color: rgba(246, 245, 243, .4); }
.section--ink .btn--ghost:hover { border-color: var(--text-on-dark); }

/* Text link with arrow */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	color: var(--color-brand);
}
.arrow-link .btn__arrow { transition: transform .15s var(--ease); }
.arrow-link:hover .btn__arrow { transform: translateX(.2rem); }
[dir="rtl"] .arrow-link .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .arrow-link:hover .btn__arrow { transform: scaleX(-1) translateX(.2rem); }

/* ============================================================
 * 6. Header
 * ========================================================== */
/* Header actions (inline-end of the masthead): search toggle + language
 * switcher. The old top utility bar was removed per client request — these
 * controls now sit to the inline-end of the primary navigation. */
.header-actions { display: flex; align-items: center; gap: .85rem; justify-self: end; }
.header-search__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; color: #000;
	font: inherit; cursor: pointer; padding: .25rem;
	transition: color .18s var(--ease);
}
.header-search__toggle:hover { color: var(--color-brand); }
/* Explicit icon size — the global `svg { block-size: auto }` reset would
 * otherwise collapse this viewBox-only icon to zero height (invisible). */
.header-search__toggle svg { inline-size: 1.4rem; block-size: 1.4rem; }
/* The word "Search" is icon-only on desktop; it becomes a visible label
 * inside the mobile dropdown (see the responsive block). */
.header-search__label { display: none; }
/* Inline search: the field opens as a small box anchored just beside the search
 * icon (desktop overlay — floats over the empty header space, no reflow) and
 * becomes an inline block inside the mobile menu (see the responsive block). */
.header-search { position: relative; display: inline-flex; align-items: center; }
.header-search__form {
	position: absolute;
	inset-inline-end: calc(100% + .4rem);
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	align-items: center;
	gap: .25rem;
	inline-size: min(260px, 60vw);
	padding-block: .3rem;
	padding-inline: .7rem .35rem;
	background: var(--color-paper);
	border: 1px solid var(--color-line-strong);
	border-radius: 999px;
	box-shadow: var(--shadow-md);
}
.header-search__form[hidden] { display: none; }
.header-search__field {
	flex: 1 1 auto; min-inline-size: 0;
	border: 0; background: none; font: inherit; color: var(--color-ink);
	padding-block: .15rem;
}
.header-search__field:focus { outline: none; }
.header-search__submit {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer; color: var(--color-ink-600);
	padding: .2rem; transition: color .18s var(--ease);
}
.header-search__submit:hover { color: var(--color-brand); }
.header-search__submit svg { inline-size: 1.15rem; block-size: 1.15rem; }
/* Language switcher — capsule toggle sitting in the header actions
 * (white track; active language = filled brand red, which reads on light). */
.lang-switcher {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 3px;
	background: var(--color-paper);
	border: 1px solid var(--color-line-strong);
	border-radius: 999px;
}
.lang-switcher li { display: inline-flex; }
.lang-switcher a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.6rem;
	padding-block: .28rem;
	padding-inline: .8rem;
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--color-ink-600);
	border-radius: 999px;
	transition: color .18s var(--ease), background-color .18s var(--ease);
}
[dir="rtl"] .lang-switcher a { letter-spacing: normal; }
.lang-switcher a:hover { color: var(--color-ink); }
.lang-switcher .current-lang a { background: var(--color-brand); color: var(--text-on-dark); }
.lang-switcher .current-lang a:hover { background: var(--color-brand-600); color: var(--text-on-dark); }

.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--color-paper); border-block-end: 1px solid var(--color-line); }
/* Three-track masthead: logo pinned to the inline-start margin, nav centred on
 * the page, actions pinned to the inline-end margin. The outer .container gutter
 * IS the page margin, so the logo aligns with it (left in LTR, right in RTL). */
.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	/* Full-bleed header so the logo reaches the page's inline-start corner
	 * (not indented by the 1200px container) while the nav stays page-centred. */
	max-inline-size: none;
	/* Tall enough to hold the larger logo with breathing room at all sizes. */
	min-block-size: clamp(6.5rem, 9vw, 9rem);
}
/* Logo in the top inline-start corner of the page. */
.site-branding { display: flex; align-items: flex-start; justify-self: start; align-self: start; }
.custom-logo-link { display: inline-flex; }
/* Confident logo presence (~1.6x previous), responsive; capped so it never
 * exceeds the header height or crowds the nav/toggle on mobile. */
.custom-logo { block-size: clamp(5.25rem, 8.25vw, 8.25rem); inline-size: auto; display: block; }

/* Logo shimmer — a subtle diagonal light streak sweeps across the logo once on
 * page load. The .logo-reveal wrapper is added in header.php around the logo.
 * mix-blend-mode: screen means the streak only ADDS light: invisible over the
 * white header, a soft sheen over the red emblem + wordmark. */
.logo-reveal { position: relative; display: inline-flex; overflow: hidden; }
.logo-reveal .custom-logo-link { display: inline-flex; }
.logo-reveal::after {
	content: "";
	position: absolute;
	inset-block: -25%;
	inset-inline-start: -65%;
	inline-size: 42%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .85) 50%, transparent 100%);
	mix-blend-mode: screen;
	pointer-events: none;
	transform: translateX(0) skewX(-18deg);
	animation: sigma-shine 2s var(--ease) both;
}
@keyframes sigma-shine {
	0%   { transform: translateX(0) skewX(-18deg); opacity: 0; }
	12%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translateX(395%) skewX(-18deg); opacity: 0; }
}
/* RTL mirrors: the streak travels from the inline-start (right) to inline-end. */
[dir="rtl"] .logo-reveal::after { animation-name: sigma-shine-rtl; }
@keyframes sigma-shine-rtl {
	0%   { transform: translateX(0) skewX(18deg); opacity: 0; }
	12%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translateX(-395%) skewX(18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.logo-reveal::after { animation: none; display: none; }
}
.site-title { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.site-title a { color: var(--color-ink); text-decoration: none; }

/* Primary nav — centred on the page (grid middle track). Per client request:
 * Arial, larger, sentence/Title case as stored (no uppercase transform),
 * black text. */
/* On desktop the nav + its collapsible wrapper are display:contents, so the
 * menu list and the header actions become direct grid items of the masthead
 * (logo | nav centred | actions). On mobile (see the responsive block) the
 * wrapper becomes the dropdown, pulling the actions inside the open menu. */
.main-navigation { display: contents; }
.nav-collapse { display: contents; }
/* Scope to the menu list ONLY (.nav-collapse > ul). A bare `.main-navigation ul/a`
 * would also hit the language switcher, which now lives inside the nav — that
 * bug made the lang buttons inherit the big nav typography and column stacking. */
.nav-collapse > ul { display: flex; align-items: center; justify-self: center; gap: clamp(1.75rem, 3.4vw, 3.5rem); list-style: none; margin: 0; padding: 0; }
.nav-collapse > ul a {
	position: relative;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: #000;
	padding-block: 1.5rem;
}
/* Arabic: same Arial/black treatment, a touch larger for legibility. */
[dir="rtl"] .nav-collapse > ul a { font-size: 1.125rem; }
.nav-collapse > ul a:hover { color: var(--color-brand); }

/* Nav active indicator — Sigma marker */
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
	content: "";
	position: absolute;
	inset-block-end: 1.1rem;
	inset-inline-start: 0;
	inline-size: 22px;
	block-size: 4px;
	background: var(--color-brand);
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
[dir="rtl"] .main-navigation .current-menu-item > a::after,
[dir="rtl"] .main-navigation .current_page_item > a::after { transform: scaleX(-1); }

.menu-toggle {
	display: none;
	align-items: center; gap: .5rem;
	background: none; border: 1px solid var(--color-line-strong);
	border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
	padding: .5rem .85rem;
	color: var(--color-ink);
}

/* ============================================================
 * 7. Hero
 * ========================================================== */
/* Hero slider — up to 3 split slides. Each slide: text on the inline-start side,
 * image on the inline-end side. Light treatment (dark ink on paper) replaced the
 * old white-on-photo hero. RTL mirrors the split automatically (logical
 * properties); photos are never flipped — only the nav arrows are. */
.hero-slider { position: relative; overflow: hidden; isolation: isolate; background: var(--color-paper); border-block-end: 1px solid var(--color-line); }
.hero-slider__viewport { position: relative; }
.hero-slider__track { position: relative; min-block-size: min(70vh, 600px); }

.hero-slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
}
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
	.hero-slide { transition: opacity .9s var(--ease), visibility .9s var(--ease); }
	/* Layered "cooler" entrance for the newly-active slide (class-triggered so it
	 * replays on every slide change; reduced-motion users get an instant switch).
	 *  1. the slide cross-fades in;
	 *  2. the image drifts with a subtle Ken Burns slow zoom-out;
	 *  3. the text lines rise + fade in, staggered top-to-bottom. */
	.hero-slide.is-active { animation: sigma-hero-fade .9s var(--ease); }
	.hero-slide.is-active .hero-slide__media img { animation: sigma-hero-kenburns 8s ease-out both; }
	.hero-slide.is-active .hero-slide__text > * { animation: sigma-hero-rise .8s var(--ease) both; }
	.hero-slide.is-active .hero-slide__text > *:nth-child(1) { animation-delay: .2s; }
	.hero-slide.is-active .hero-slide__text > *:nth-child(2) { animation-delay: .34s; }
	.hero-slide.is-active .hero-slide__text > *:nth-child(3) { animation-delay: .48s; }
	.hero-slide.is-active .hero-slide__text > *:nth-child(4) { animation-delay: .62s; }
}
@keyframes sigma-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sigma-hero-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes sigma-hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Split ratio: 40% text (inline-start) / 60% image (inline-end). RTL mirrors it. */
/* Client-requested (2026-07-25): the hero ran at the standard 1200px container,
 * leaving a very wide empty margin out to the slider arrows. Widen the hero ONLY
 * (height untouched — min-block-size below is unchanged) so that leftover space
 * shrinks to 10% of what it was. Maths: the coloured content used to be
 * (1200px - 2 x gutter) = 1120px, so empty = 100vw - 1120px; a tenth of that
 * leaves content = 100vw - .1(100vw - 1120px) = 90vw + 112px. Padding drops to 0
 * because the panel/image now supply their own inset. `inline-size: 100%` from
 * .container still caps this to the viewport, so narrow screens are unaffected. */
.hero-slide__inner { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; min-block-size: min(70vh, 600px); max-inline-size: calc(90vw + 112px); padding-inline: 0; }

/* Client-requested (2026-07-25): the text column's background IS the Sigma mark,
 * recoloured — the logo's red becomes the approved faint tint
 * (--color-brand-050) and the chevron stays true white. The chevron is negative
 * space in the artwork, so the SVG paints a white base rect and fills the two
 * red shapes over it; no opacity is applied because the colours are already the
 * final faint values. The mark is scaled to COVER the panel (slice), per client
 * choice, so the panel reads as one faint-red field with a single white chevron
 * running through it and the arms bleeding off the top/bottom edges.
 * The panel keeps the tint as a fallback colour behind the SVG. */
.hero-slide__panel { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--color-brand-050); }
.hero-slide__watermark {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero-slide__watermark svg { display: block; inline-size: 100%; block-size: 100%; }
/* Fills live here, not as SVG presentation attributes, so they stay tokenised
 * (var() is unreliable inside presentation attributes). The literal hex values
 * on the markup are only a fallback if this stylesheet fails to load. */
.hero-slide__watermark rect { fill: var(--color-paper); }
.hero-slide__watermark path { fill: var(--color-brand-050); }
/* The mark is deliberately NOT mirrored in RTL (client, 2026-08-20). It used to
 * be flipped so the chevron kept pointing at the seam, matching the nav-arrow
 * convention — but the client approved the English hero and wants the Arabic
 * mark to read identically, so the brand mark keeps one fixed orientation in
 * both languages. Do not "restore" the flip as an RTL fix; it is a client
 * decision, not an oversight. */

/* Inline-start padding is >= 4.5rem so the copy always clears the prev arrow,
 * which now overlaps the panel edge at this width (arrow ends at most 1.25rem +
 * 2.75rem = 4rem in from the slide edge). */
.hero-slide__text { position: relative; align-self: center; padding-block: clamp(2rem, 5vw, 3.5rem); padding-inline: clamp(4.5rem, 5vw, 6rem) clamp(1.75rem, 4vw, 3.5rem); max-inline-size: 60ch; }
/* Upper clamp bounds raised with the widened hero: the old caps (3.4rem / 1.2rem)
 * were tuned for the 1200px container, where the text column was ~360px wide. It
 * is now ~576px inside a near-full-bleed band, so the old sizes read small for a
 * hero. Floors and the vw middle terms are unchanged, so nothing below ~1400px
 * shifts and the <=560px overrides further down still win on phones. */
.hero-slide__headline {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(2rem, 3.8vw, 4.25rem); line-height: 1.1; letter-spacing: -.02em;
	color: var(--color-ink); margin: 0 0 1.25rem;
}
[dir="rtl"] .hero-slide__headline { letter-spacing: normal; line-height: 1.2; }
.hero-slide__sub { font-size: clamp(1.0625rem, 1.5vw, 1.35rem); line-height: 1.6; color: var(--color-ink-600); margin: 0 0 2rem; max-inline-size: 46ch; }
.hero-slide__media { position: relative; overflow: hidden; }
.hero-slide__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-slide__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-surface); color: var(--color-line-strong); }
.hero-slide__placeholder svg { inline-size: 3rem; block-size: 3rem; }

/* Prev/next + dots (only rendered when >1 slide). */
.hero-slider__nav {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3;
	inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
	background: var(--color-paper); border: 1px solid var(--color-line-strong);
	border-radius: 999px; color: var(--color-ink); cursor: pointer;
	box-shadow: var(--shadow-sm); transition: color .18s var(--ease), border-color .18s var(--ease);
}
.hero-slider__nav:hover { color: var(--color-brand); border-color: var(--color-brand); }
.hero-slider__nav:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.hero-slider__nav--prev { inset-inline-start: clamp(.5rem, 2vw, 1.25rem); }
.hero-slider__nav--next { inset-inline-end: clamp(.5rem, 2vw, 1.25rem); }
.hero-slider__chevron { display: inline-flex; }
.hero-slider__chevron svg { inline-size: 1.15rem; block-size: 1.15rem; }
.hero-slider__nav--prev .hero-slider__chevron { transform: rotate(90deg); }
.hero-slider__nav--next .hero-slider__chevron { transform: rotate(-90deg); }
[dir="rtl"] .hero-slider__nav--prev .hero-slider__chevron { transform: rotate(-90deg); }
[dir="rtl"] .hero-slider__nav--next .hero-slider__chevron { transform: rotate(90deg); }
.hero-slider__dots {
	position: absolute; inset-block-end: clamp(.75rem, 2vw, 1.25rem);
	top: auto; left: 50%; transform: translateX(-50%); z-index: 3;
	display: flex; gap: 0;
}
/* The visible dot stays .6rem, but the BUTTON is 1.5rem so the tap target meets
   the 24px WCAG 2.2 minimum — the dot itself is drawn as a pseudo-element and
   the extra size is transparent. Gap is 0 because the padding now supplies the
   spacing; the dots look the same, they are just no longer 10px targets. */
.hero-slider__dot {
	inline-size: 1.5rem; block-size: 1.5rem; padding: 0; cursor: pointer;
	border: 0; background: transparent; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
}
.hero-slider__dot::before {
	content: ""; inline-size: .6rem; block-size: .6rem; border-radius: 999px;
	border: 1px solid var(--color-ink-400); background: transparent;
	transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.hero-slider__dot.is-active::before { background: var(--color-brand); border-color: var(--color-brand); transform: scale(1.15); }
.hero-slider__dot:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }

/* Tablet/phone: stack (text over image); give the image a fixed band so the
 * absolutely-positioned <img> has height. */
@media (max-width: 900px) {
	.hero-slider__track { min-block-size: 0; }
	.hero-slide__inner { grid-template-columns: 1fr; min-block-size: 0; }
	.hero-slide__panel { order: 2; }
	.hero-slide__text { padding-inline: clamp(1.25rem, 4vw, 2rem); padding-block: clamp(2rem, 7vw, 3rem); }
	.hero-slide__media { order: 1; min-block-size: clamp(220px, 42vw, 340px); }
	.hero-slider__nav { inline-size: 2.25rem; block-size: 2.25rem; }
}

/* ============================================================
 * 8. Trust stat band
 * ========================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.stat { position: relative; padding-inline-start: 1.25rem; }
/* Stat divider — Sigma marker */
.stat::before {
	content: "";
	position: absolute;
	inset-block-start: .35rem;
	inset-inline-start: 0;
	inline-size: 4px;
	block-size: 2.25rem;
	background: var(--color-brand);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 0 100%);
}
[dir="rtl"] .stat::before { transform: scaleY(1); }
.stat__number {
	font-family: var(--font-display);
	font-weight: 800;
	/* Sized down 2026-08-06 (client review): the band now carries five figures
	 * rather than four, and the old scale read as oversized against the labels. */
	font-size: clamp(2rem, 3vw, 2.875rem);
	line-height: 1;
	color: var(--color-brand);
	/* Equal-width digits so the count-up animation cannot jitter the figure. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}
.section--ink .stat__number { color: var(--color-paper); }
.stat__label { margin-block-start: .5rem; font-size: .9375rem; color: var(--color-ink-600); }
.section--ink .stat__label { color: rgba(246, 245, 243, .8); }

/* ============================================================
 * 9. Card grids (therapeutic focus, features, news)
 * ========================================================== */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 3vw, 2rem);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__title { font-size: 1.25rem; margin-block-end: .6rem; }
.card__text { color: var(--color-ink-600); font-size: .9375rem; }

/* Therapeutic focus item */
.focus-item {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	min-block-size: 7rem;
}
.focus-item__icon {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	inline-size: 2.75rem; block-size: 2.75rem;
	display: grid; place-items: center;
	background: var(--color-brand-050);
	color: var(--color-brand);
	border-radius: var(--radius);
}
.focus-item__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.focus-item__body { position: relative; z-index: 1; }
.focus-item__name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.focus-item__count { display: block; font-family: var(--font-body); font-weight: 400; font-size: .8125rem; color: var(--color-ink-400); margin-block-start: .15rem; }

/* Abstract motif watermark — large, ultra-subtle, anchored to the far
 * (inline-end) top corner and bleeding off the card, so it never sits under
 * the text. Kept at very low opacity over the light card so the ink-on-paper
 * name stays at full contrast (no scrim needed for the SVG treatment). */
.focus-item__bg {
	position: absolute;
	inset-block-start: -0.9rem;
	inset-inline-end: -0.9rem;
	inline-size: clamp(6rem, 11vw, 8rem);
	block-size: clamp(6rem, 11vw, 8rem);
	color: var(--color-brand);
	opacity: .07;
	pointer-events: none;
	z-index: 0;
}
.focus-item__bg svg { inline-size: 100%; block-size: 100%; }
[dir="rtl"] .focus-item__bg svg { transform: scaleX(-1); }
a.focus-item:hover .focus-item__bg { opacity: .12; transition: opacity .15s var(--ease); }

/* Optional client-supplied photography override (ACF area_background). A dark
 * scrim is layered automatically so the white area name stays legible over any
 * image. */
.focus-item--photo { align-items: flex-end; min-block-size: 8.5rem; color: #fff; }
.focus-item__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.focus-item__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(35, 31, 32, .85) 0%, rgba(35, 31, 32, .5) 42%, rgba(35, 31, 32, .12) 100%);
}
.focus-item--photo .focus-item__body { z-index: 2; }
.focus-item--photo .focus-item__name { color: #fff; }
.focus-item--photo .focus-item__count { color: rgba(255, 255, 255, .85); }

/* Therapeutic-focus "view more" toggle */
/* The .focus-item/.focus-more display rules (class selectors) outrank the UA
 * [hidden] rule, so make the hidden attribute win explicitly — this is what
 * both the collapsed extra cards and the no-JS button state rely on. */
.focus-item[hidden] { display: none; }
.focus-more[hidden] { display: none; }
.focus-more-wrap { display: flex; justify-content: center; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.focus-more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-brand);
	background: none;
	border: 1px solid var(--color-line-strong);
	padding-block: .7rem;
	padding-inline: 1.4rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.focus-more:hover { background: var(--color-surface); border-color: var(--color-brand); color: var(--color-brand-700); }
.focus-more:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.focus-more__icon { display: inline-flex; }
.focus-more__icon svg { inline-size: 1.15em; block-size: 1.15em; transition: transform .2s ease; }
.focus-more[aria-expanded="true"] .focus-more__icon svg { transform: rotate(180deg); }
/* Arabic labels are not uppercased/tracked (matches the eyebrow convention). */
[dir="rtl"] .focus-more { text-transform: none; letter-spacing: normal; }

/* Feature card */
.feature .arrow-link { margin-block-start: 1.25rem; }

/* News card */
.news-card { padding: 0; overflow: hidden; }
.news-card__media { aspect-ratio: 16 / 10; background: var(--color-surface); overflow: hidden; }
.news-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.news-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.news-card__date { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand); }
[dir="rtl"] .news-card__date { text-transform: none; letter-spacing: normal; }
.news-card__title { font-size: 1.1875rem; margin-block: .5rem .6rem; }

/* Image tile: picture fills the card, title sits over its foot.
   Used for a pinned news tile that has an image but no body copy. The scrim is
   a gradient rather than a flat overlay so the top of the photo stays clean.
   Logical properties throughout, so Arabic mirrors without a separate rule. */
.news-card--overlay { position: relative; display: block; }
.news-card--overlay .news-card__media { aspect-ratio: 16 / 10; block-size: 100%; }
.news-card--overlay .news-card__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: clamp(1rem, 2.2vw, 1.5rem);
	background: linear-gradient(to top, rgb(35 31 32 / .88) 0%, rgb(35 31 32 / .55) 55%, rgb(35 31 32 / 0) 100%);
}
.news-card--overlay .news-card__title { color: #fff; margin-block: 0; }
.news-card--overlay .news-card__date { color: #fff; }

.section__foot { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* ============================================================
 * 10. CTA band
 * ========================================================== */
.cta-band { text-align: start; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.cta-band__title { font-size: clamp(1.75rem, 3.2vw, 2.75rem); max-inline-size: 24ch; }
.cta-band__text { margin-block-start: .75rem; max-inline-size: 50ch; color: var(--color-ink-600); }

/* ============================================================
 * 11. Footer
 * ========================================================== */
/* Footer height was disproportionate to how little it carries (client review
 * 2026-08-12). The desktop end of each clamp is pulled in; the mobile end is
 * left exactly as it was, since the stacked layout reads correctly already. */
.site-footer { background: var(--color-surface); color: var(--color-ink-600); padding-block: clamp(3rem, 4vw, 3.25rem); border-block-start: 1px solid var(--color-line); }
.site-footer a { color: var(--color-ink); text-decoration: none; }
.site-footer a:hover { color: var(--color-brand); }
/* Explicit tracks: wide Brand, then Explore | Legal | Contact as three equal
 * columns — so Explore and Legal always sit parallel in the middle (the Contact
 * track stays reserved even while its Customizer fields are empty). */
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: clamp(2rem, 3vw, 2.5rem); align-items: start; }
/* Logo keeps its original scale (client review 2026-08-12) — the footer's
 * reduced padding and gaps still bring the overall height down. */
.footer-brand__logo { block-size: clamp(5.25rem, 8.25vw, 8.25rem); inline-size: auto; margin-block-end: 1rem; }
.footer-brand p { color: var(--color-ink-600); font-size: .9375rem; max-inline-size: 40ch; }
.footer-col__title {
	font-family: var(--font-display);
	font-size: .8125rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--color-ink); margin: 0 0 .75rem;
}
[dir="rtl"] .footer-col__title { letter-spacing: normal; text-transform: none; }
.footer-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* inline-flex + min-height lifts these from 22px to the 24px tap-target
   minimum without changing where they sit. */
.footer-navigation a { font-weight: 500; display: inline-flex; align-items: center; min-block-size: 1.5rem; }
.footer-contact p { margin: 0 0 .6rem; color: var(--color-ink-600); font-size: .9375rem; font-style: normal; }
.footer-contact__addr { white-space: normal; }
.footer-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 2.1rem; block-size: 2.1rem;
	border: 1px solid var(--color-line-strong); border-radius: 999px;
	color: var(--color-ink-600);
	transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.footer-social a:hover { color: var(--text-on-dark); background: var(--color-brand); border-color: var(--color-brand); }
.footer-social svg { inline-size: 1.05rem; block-size: 1.05rem; }
/* Tablet: drop the 4-track footer to two columns so it never crowds. */
@media (min-width: 861px) and (max-width: 1024px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Generic content pages (page.php — Terms, Privacy, etc.): readable prose
 * column inside the site container. Uses logical properties (RTL-safe). */
.page-article { max-inline-size: 820px; padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-article__head { margin-block-end: 1.5rem; }
.page-article__body { color: var(--color-ink); font-size: 1rem; line-height: 1.7; }
.page-article__body > * + * { margin-block-start: 1rem; }
.page-article__body h2 { font-family: var(--font-display); font-size: 1.5rem; margin-block-start: 2rem; }
.page-article__body h3 { font-size: 1.2rem; margin-block-start: 1.5rem; }
.page-article__body ul,
.page-article__body ol { padding-inline-start: 1.5rem; }
.page-article__body li + li { margin-block-start: .4rem; }
.page-article__body a { color: var(--color-brand); text-decoration: underline; }
.page-article__body img { border-radius: var(--radius); }
/* Bottom bar: site copyright at the inline-start, agency credit at the
 * inline-end, centred and stacked once there is no room for both.
 * NOTE: this block previously used the dark-footer colours (near-white text and
 * rule on rgba(246,245,243,...)). After the footer was lightened to
 * --color-surface those were the SAME colour as the background, so the
 * copyright line was invisible. Now uses the ink tokens. */
.site-info {
	margin-block-start: clamp(1.5rem, 2.5vw, 2rem);
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--color-line);
	font-size: .8125rem;
	color: var(--color-ink-600);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
}
.site-info p { margin: 0; }
.site-credit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--color-ink-600);
	text-decoration: none;
	transition: color .18s var(--ease);
}
.site-footer .site-credit:hover { color: var(--color-brand); }
.site-credit__logo {
	/* Only used if a logo file is dropped in - the credit currently ships TEXT
	   ONLY by the client's choice (2026-08-30), so no file is present and this
	   rule does not apply to anything. Kept so adding one later just works. */
	block-size: 2.5rem;
	inline-size: auto;
	flex: 0 0 auto;
	opacity: .75;
	transition: opacity .18s var(--ease);
}
.site-credit:hover .site-credit__logo { opacity: 1; }

@media (max-width: 600px) {
	.site-info { justify-content: center; text-align: center; }
	/* The centred credit line (always on since 0.9.3) sits at the very end of
	 * the page, where the fixed .back-to-top button would cover it. Clear the
	 * button: its inset + size (same values as .back-to-top) + a gap. */
	.site-footer { padding-block-end: calc(clamp(1rem, 3vw, 1.75rem) + 2.75rem + 1rem); }
}

/* ============================================================
 * 12. Responsive
 * ========================================================== */
@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; }
	/* Collapse the three-track grid to a flex row: logo (start), menu toggle
	 * (end). The nav wrapper stops being display:contents and becomes the
	 * dropdown, so the menu list AND the actions (language + search) both live
	 * inside the open menu. */
	.site-header__inner { display: flex; align-items: center; justify-content: space-between; position: relative; }
	.main-navigation { display: flex; align-items: center; }
	.nav-collapse {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--color-paper);
		border-block-start: 1px solid var(--color-line);
		box-shadow: var(--shadow-md);
		padding: .5rem var(--gutter) 1rem;
	}
	.main-navigation.is-open .nav-collapse { display: flex; }
	.nav-collapse > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-collapse > ul a { padding-block: .85rem; }
	.main-navigation .current-menu-item > a::after,
	.main-navigation .current_page_item > a::after { inset-block-end: .65rem; }
	/* Language + search sit below the menu items, separated by a divider.
	 * Column layout so the search field can open full-width inside the menu. */
	.header-actions {
		justify-self: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		margin-block-start: .35rem;
		padding-block-start: .85rem;
		border-block-start: 1px solid var(--color-line);
	}
	.header-search { flex-direction: column; align-items: stretch; gap: .5rem; inline-size: 100%; }
	/* Keep the language capsule its natural width, not stretched to the column. */
	.lang-switcher { align-self: start; }
	.header-search__toggle { align-self: start; padding-block: .35rem; }
	.header-search__toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }
	.header-search__label { display: inline; }
	/* In the mobile menu the field is a normal inline block, not an overlay. */
	.header-search__form {
		position: static;
		transform: none;
		inset: auto;
		inline-size: 100%;
		box-shadow: none;
	}
	.footer-grid { grid-template-columns: 1fr; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
 * 13. Product archive + therapeutic-area taxonomy archive
 * ========================================================== */
.archive-product { padding-block: clamp(2.5rem, 5vw, 4rem); }
.archive-product__head { margin-block-end: 2rem; max-inline-size: 60ch; }
.archive-product__intro { margin-block-start: 1rem; color: var(--color-ink-600); }
.archive-product__count { margin-block-start: .6rem; font-size: .9375rem; color: var(--color-ink-400); }

/* Filter bar */
.product-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin-block-end: 2rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--color-line);
}
.product-filter__label {
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--color-ink-600);
	margin-inline-end: .5rem;
}
[dir="rtl"] .product-filter__label { text-transform: none; letter-spacing: normal; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.filter-chip {
	display: inline-flex;
	align-items: center;
	padding-block: .4rem;
	padding-inline: .9rem;
	border: 1px solid var(--color-line-strong);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--color-ink);
	background: var(--color-paper);
	transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.filter-chip:hover { border-color: var(--color-ink); }
.filter-chip.is-active { background: var(--color-brand); border-color: var(--color-brand); color: var(--text-on-dark); }
.filter-clear { font-size: .8125rem; font-weight: 600; color: var(--color-brand); }
/* "View more areas" toggle for the filter — compact chip-styled button that
 * matches the filter row (lighter than the homepage focus-more pill). */
.filter-more[hidden] { display: none; }
.filter-more {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-block-start: .5rem;
	padding: .4rem .9rem;
	background: none;
	border: 1px dashed var(--color-line-strong);
	border-radius: 999px;
	font: inherit; font-size: .8125rem; font-weight: 600;
	color: var(--color-ink-600); cursor: pointer;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.filter-more:hover { color: var(--color-brand); border-color: var(--color-brand); }
.filter-more:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.filter-more__icon { display: inline-flex; }
.filter-more__icon svg { inline-size: 1.05em; block-size: 1.05em; transition: transform .2s ease; }
.filter-more[aria-expanded="true"] .filter-more__icon svg { transform: rotate(180deg); }

/* Back-to-top button — fixed, appears after scrolling; bottom inline-end corner
 * (bottom-right LTR / bottom-left RTL via logical properties). */
.back-to-top {
	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 1.75rem);
	inset-inline-end: clamp(1rem, 3vw, 1.75rem);
	z-index: 45;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 2.75rem; block-size: 2.75rem;
	background: var(--color-brand); color: var(--text-on-dark);
	border: 0; border-radius: 999px; cursor: pointer;
	box-shadow: var(--shadow-md);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease), background-color .18s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-brand-600); }
.back-to-top:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.back-to-top__icon { display: inline-flex; }
.back-to-top__icon svg { inline-size: 1.35rem; block-size: 1.35rem; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: opacity .2s linear, visibility .2s linear; }
}

/* A–Z jump index */
.az-index { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: 2.5rem; }
.az-index__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.1rem;
	padding-block: .3rem;
	padding-inline: .5rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .8125rem;
	text-decoration: none;
	color: var(--color-ink);
	transition: border-color .15s var(--ease), color .15s var(--ease);
}
.az-index__item:hover { border-color: var(--color-brand); color: var(--color-brand); }

/* Letter groups */
.products-group { margin-block-end: clamp(2rem, 4vw, 3.25rem); scroll-margin-block-start: 6rem; }
.products-group__letter {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--color-brand);
	margin: 0 0 1.5rem;
	padding-block-end: .5rem;
	border-block-end: 2px solid var(--color-line);
}

/* Product cards */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.product-card {
	display: flex;
	flex-direction: column;
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.product-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card__media {
	aspect-ratio: 4 / 3;
	background: var(--color-surface);
	display: grid;
	place-items: center;
	overflow: hidden;
	border-block-end: 1px solid var(--color-line);
}
.product-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-card__placeholder { color: var(--color-line-strong); }
.product-card__placeholder svg { inline-size: 2.5rem; block-size: 2.5rem; }
.product-card__body { display: flex; flex-direction: column; gap: .4rem; flex: 1 0 auto; padding: 1.1rem 1.2rem 1.3rem; }
.product-card__title { font-family: var(--font-display); font-size: 1.125rem; }
.product-card__generic { font-size: .875rem; color: var(--color-ink-600); }
.product-card__desc { font-size: .9rem; line-height: 1.5; color: var(--color-ink-600); }
.product-card__areas { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.tag-badge {
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.3;
	padding-block: .2rem;
	padding-inline: .5rem;
	border-radius: var(--radius-sm);
	background: var(--color-brand-050);
	color: var(--color-brand-700);
	border: 1px solid var(--color-brand-100);
}
.products-empty { color: var(--color-ink-600); padding-block: 2rem; }

/* ============================================================
 * 14. Single product
 * ========================================================== */
.single-product { padding-block: clamp(2rem, 5vw, 4rem); }

.back-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-ink-600);
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}
.back-link:hover { color: var(--color-brand); }
.back-link__arrow { display: inline-flex; transform: scaleX(-1); }
.back-link__arrow svg { inline-size: 1.1rem; block-size: 1.1rem; }
[dir="rtl"] .back-link__arrow { transform: none; }

/* Hero */
.product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	margin-block-end: clamp(2.5rem, 5vw, 4rem);
}
.product-hero__media {
	aspect-ratio: 4 / 3;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.product-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-hero__placeholder { color: var(--color-line-strong); }
.product-hero__placeholder svg { inline-size: 4rem; block-size: 4rem; }

.product-hero__areas { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.product-hero__areas .tag-badge { text-decoration: none; }
.product-hero__areas .tag-badge:hover { background: var(--color-brand-100); }
.product-hero__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.08; }
[dir="rtl"] .product-hero__title { line-height: 1.25; }
.product-hero__generic { margin-block-start: .75rem; font-size: 1.0625rem; color: var(--color-ink-600); }
.product-hero__dosage { margin-block-start: 1rem; font-size: .9375rem; color: var(--color-ink); }
.product-hero__dosage-label {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-ink-400);
	margin-inline-end: .5rem;
}
[dir="rtl"] .product-hero__dosage-label { text-transform: none; letter-spacing: normal; }
.product-hero__lead { margin-block-start: 1.25rem; font-size: 1.125rem; line-height: 1.6; }
.product-hero__info .btn { margin-block-start: 1.75rem; }

/* Body sections */
.product-body { max-inline-size: 760px; }
.product-section { margin-block-end: clamp(2rem, 4vw, 3rem); }
.product-section__title {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	margin-block-end: 1rem;
	padding-inline-start: 1rem;
	border-inline-start: 4px solid var(--color-brand);
}
.product-section__content { line-height: 1.7; color: var(--color-ink); }
.product-section__content p { margin-block: 0 1rem; }
.product-section__content ul, .product-section__content ol { margin-block: 0 1rem; padding-inline-start: 1.25rem; }
.product-section__content li { margin-block-end: .35rem; }

/* Administration box — visually distinct "how to take" panel */
.admin-box {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.admin-box .product-section__title { border-inline-start: 0; padding-inline-start: 0; }
.admin-box .product-section__title::before {
	content: "";
	display: inline-block;
	inline-size: 26px;
	block-size: 4px;
	margin-inline-end: .6rem;
	vertical-align: middle;
	background: var(--color-brand);
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
[dir="rtl"] .admin-box .product-section__title::before { transform: scaleX(-1); }

/* Related news */
.related-news { list-style: none; margin: 0; padding: 0; }
.related-news__item { border-block-start: 1px solid var(--color-line); }
.related-news__item:last-child { border-block-end: 1px solid var(--color-line); }
.related-news__link { display: flex; flex-direction: column; gap: .25rem; padding-block: 1rem; text-decoration: none; color: var(--color-ink); }
.related-news__link:hover .related-news__title { color: var(--color-brand); }
.related-news__date { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand); }
[dir="rtl"] .related-news__date { text-transform: none; letter-spacing: normal; }
.related-news__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }

@media (max-width: 760px) {
	.product-hero { grid-template-columns: 1fr; }
}

/* ============================================================
 * 15. About Us page
 * ========================================================== */
.about-hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.about-hero__title { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; max-inline-size: 18ch; }
[dir="rtl"] .about-hero__title { line-height: 1.2; }
.about-hero__intro { margin-block-start: 1.25rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--color-ink-600); max-inline-size: 60ch; }

.about-figure { padding-block: clamp(1rem, 2vw, 2rem); }
.about-figure img { inline-size: 100%; block-size: auto; border-radius: var(--radius); aspect-ratio: 16 / 7; object-fit: cover; }

.about-body { padding-block: clamp(2rem, 4vw, 3.5rem); }
.about-body__content { max-inline-size: 70ch; line-height: 1.75; font-size: 1.0625rem; }
.about-body__content > * + * { margin-block-start: 1.1rem; }
.about-body__content h2 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); margin-block-start: 2rem; }
.about-body__content h3 { font-size: 1.25rem; margin-block-start: 1.5rem; }

/* Mission / Vision */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.mv-card {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mv-card__title {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	margin-block-end: .9rem;
	padding-inline-start: 1rem;
	border-inline-start: 4px solid var(--color-brand);
}
.mv-card__text { line-height: 1.7; color: var(--color-ink); }
.mv-card__text p { margin-block: 0 1rem; }
.mv-card__text p:last-child { margin-block-end: 0; }

/* Our companies — the card grid with the Sigma marker used by .stat, so the
 * block reads as part of the same family without competing with Values. */
.company-card { position: relative; padding-block-start: clamp(1.75rem, 3vw, 2.25rem); }
.company-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: clamp(1.5rem, 3vw, 2rem);
	inline-size: 2.25rem;
	block-size: 4px;
	background: var(--color-brand);
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
[dir="rtl"] .company-card::before { clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%); }
.company-card .card__text { line-height: 1.7; }

/* Company mark (logo, or the Swiss + EU flags on Osmopharm). Its own row at the
   foot of the card — never overlapping the copy. The card is a flex column and
   the row takes `margin-block-start:auto`, so the marks line up across the three
   cards no matter how long each description runs. `justify-content:flex-end`
   with logical padding puts it in the bottom inline-end corner, which mirrors to
   the bottom-left in Arabic on its own. */
.company-card { display: flex; flex-direction: column; }
.company-card__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .625rem;
	margin-block-start: auto;
	padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}
.company-card__logo {
	inline-size: auto;
	block-size: clamp(3.5rem, 6.5vw, 5rem);
	max-inline-size: 70%;
	object-fit: contain;
	object-position: right center;
}
[dir="rtl"] .company-card__logo { object-position: left center; }
.company-card__flag {
	inline-size: auto;
	block-size: 1.5rem;
	border: 1px solid var(--color-line);
	border-radius: 1px;
}

/* Phones: the cards are full width and stack, so the marks get a touch smaller
   and stay on one line with their own gap rather than wrapping awkwardly. */
@media (max-width: 560px) {
	.company-card__logo { block-size: 3.25rem; max-inline-size: 65%; }
	.company-card__flag { block-size: 1.25rem; }
}

/* Leadership — portrait beside the biography; the bio takes the full measure
 * when no photo is set. */
.leader {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.leader--no-photo { grid-template-columns: minmax(0, 1fr); }
.leader__media img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--color-line);
}
.leader__body { max-inline-size: 70ch; }
.leader__name { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; }
.leader__role {
	margin-block-start: .35rem;
	color: var(--color-brand);
	font-size: .9375rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.leader__bio { margin-block-start: 1.25rem; line-height: 1.75; color: var(--color-ink); }
.leader__bio > * + * { margin-block-start: 1.1rem; }
.leader__bio h2,
.leader__bio h3 { font-size: 1.125rem; margin-block-start: 1.75rem; }

@media (max-width: 720px) {
	.leader { grid-template-columns: minmax(0, 1fr); }
	.leader__media img { aspect-ratio: 3 / 2; }
}

/* ============================================================
 * 17b. Regional presence map (template-mena-map.php)
 *
 * Real Natural Earth borders for the served countries only. The field's
 * aspect-ratio is set inline from the viewBox, and the SVG is
 * preserveAspectRatio="none", so SVG units and field percentages are the same
 * space — that is what keeps the HTML labels on their countries.
 * The map is FORCED LTR: geography must not mirror in Arabic.
 * ========================================================== */
.presence-map { direction: ltr; margin-block-end: clamp(2rem, 4vw, 3rem); }
.presence-map__field {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.presence-map__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.presence-country {
	fill: var(--color-paper);
	stroke: var(--color-line-strong);
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: fill .2s var(--ease), stroke .2s var(--ease);
}
.presence-country:hover,
.presence-country.is-active { fill: var(--color-brand-050); stroke: var(--color-brand); }
.presence-country:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* Head office reads as filled rather than outlined. */
.presence-country--home { fill: var(--color-brand-100); }
.presence-country--home:hover,
.presence-country--home.is-active { fill: var(--color-brand-050); }

/* The Sigma mark that glows over a country. */
.presence-glow {
	fill: var(--color-brand);
	opacity: 0;
	transition: opacity .25s var(--ease);
	pointer-events: none;
	overflow: visible;
}
.presence-glow.is-active { opacity: 1; filter: drop-shadow(0 0 6px rgba(190, 43, 43, .75)); }

.presence-label {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	white-space: nowrap;
	font-size: clamp(.625rem, 1vw, .8125rem);
	font-weight: 600;
	color: var(--color-ink-600);
	text-shadow: 0 1px 0 var(--color-paper), 0 -1px 0 var(--color-paper), 1px 0 0 var(--color-paper), -1px 0 0 var(--color-paper);
	transition: color .2s var(--ease);
}
.presence-label.is-active { color: var(--color-brand); }

@media (prefers-reduced-motion: reduce) {
	.presence-country,
	.presence-glow,
	.presence-label { transition: none; }
}

/* --- Intro animation: opens from the centre like a book -------------------
 * The map is revealed outward from the spine with an animated clip-path, while
 * two "cover" halves swing away from the centre in 3D and fade. The covers are
 * plain pseudo-elements, NOT copies of the map — duplicating the SVG would mean
 * two sets of interactive countries.
 *
 * All of it is gated behind `.is-intro`, which only JS adds, so no-JS and
 * reduced-motion visitors get the finished map with nothing hidden. Per-country
 * --i is set by the script, ordered by distance from the spine so the draw
 * spreads outward with the opening rather than left-to-right.
 * ------------------------------------------------------------------------ */
.presence-map { perspective: 1800px; }

.presence-map__field { transform-style: preserve-3d; }

/* The map itself: revealed outward from the centre line. */
.presence-map.is-intro .presence-map__field { clip-path: inset(0 50% 0 50%); }
.presence-map.is-open .presence-map__field {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.05s cubic-bezier(.22, .61, .36, 1);
}

/* Two covers hinged on the spine, swinging open. */
.presence-map__cover {
	position: absolute;
	inset-block: 0;
	inline-size: 50%;
	background: linear-gradient(to right, var(--color-brand-050), var(--color-surface));
	border: 1px solid var(--color-line);
	z-index: 2;
	pointer-events: none;
	opacity: 0;
}
.presence-map__cover--start { left: 0; transform-origin: right center; }
.presence-map__cover--end { right: 0; transform-origin: left center; background: linear-gradient(to left, var(--color-brand-050), var(--color-surface)); }

.presence-map.is-intro .presence-map__cover { opacity: 1; transform: rotateY(0deg); }
.presence-map.is-open .presence-map__cover--start {
	opacity: 0;
	transform: rotateY(-105deg);
	transition: transform 1.05s cubic-bezier(.4, 0, .2, 1), opacity .8s ease .25s;
}
.presence-map.is-open .presence-map__cover--end {
	opacity: 0;
	transform: rotateY(105deg);
	transition: transform 1.05s cubic-bezier(.4, 0, .2, 1), opacity .8s ease .25s;
}
.presence-map.is-done .presence-map__cover { display: none; }

/* Borders draw themselves, then the fill arrives behind them. */
.presence-map.is-intro .presence-country {
	fill-opacity: 0;
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
}
.presence-map.is-open .presence-country {
	fill-opacity: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(.33, 1, .68, 1) calc(500ms + var(--i) * 110ms),
		fill-opacity .55s ease calc(850ms + var(--i) * 110ms);
}

.presence-map.is-intro .presence-label { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
.presence-map.is-open .presence-label {
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: opacity .5s ease calc(1050ms + var(--i) * 110ms), transform .5s ease calc(1050ms + var(--i) * 110ms);
}

/* Nothing is clickable mid-flight, so a stray hover can't fight the intro. */
.presence-map.is-intro .presence-country,
.presence-map.is-open:not(.is-done) .presence-country { pointer-events: none; }
.presence-map.is-done .presence-country { pointer-events: auto; }

/* Legend — also the accessible / no-JS / small-screen equivalent of the map. */
.presence-legend__title { font-size: clamp(1.125rem, 2vw, 1.375rem); margin-block-end: 1rem; }
.presence-legend__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: .6rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.presence-legend__list li { display: flex; align-items: center; gap: .6rem; }
.presence-legend__swatch {
	inline-size: .7rem; block-size: .7rem; border-radius: 999px;
	background: var(--color-brand); flex: 0 0 auto;
}
.presence-legend__swatch--home { background: var(--color-ink); }
.presence-legend__note { color: var(--color-ink-400); font-size: .8125rem; font-style: normal; }

/* ============================================================
 * 16. Contact Us page
 * ========================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}

.contact-info__title {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	margin-block-end: 1.5rem;
	padding-inline-start: 1rem;
	border-inline-start: 4px solid var(--color-brand);
}
.contact-info__item { margin-block-end: 1.25rem; }
.contact-info__label {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--color-ink-400);
	margin-block-end: .25rem;
}
[dir="rtl"] .contact-info__label { text-transform: none; letter-spacing: normal; }

/* Two contact groups, told apart by colour (client, 2026-08-30). The labels
   were --color-ink-400 at .75rem, which the client found too faint to scan, so
   they step up in size and weight and take the group's own colour. The accent
   rule repeats the treatment already on .contact-info__title, so the block
   reads as one family rather than a new device. Logical properties, so the rule
   sits on the correct side in Arabic. */
.contact-info__item--email,
.contact-info__item--location {
	padding-inline-start: .875rem;
	border-inline-start: 3px solid var(--color-line-strong);
}
.contact-info__item--email { border-inline-start-color: var(--color-brand); }
.contact-info__item--location { border-inline-start-color: var(--color-ink); }
.contact-info__item--email .contact-info__label { color: var(--color-brand); }
.contact-info__item--location .contact-info__label { color: var(--color-ink); }
.contact-info__item--email .contact-info__label,
.contact-info__item--location .contact-info__label {
	font-size: .8125rem;
	font-weight: 700;
	margin-block-end: .35rem;
}
.contact-info__value { color: var(--color-ink); line-height: 1.6; }
.contact-info__value a { color: var(--color-ink); text-decoration: none; }
.contact-info__value a:hover { color: var(--color-brand); }

/* Form */
.contact-form-wrap {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.form-field { margin-block-end: 1.25rem; }
.form-field label { display: block; font-size: .9375rem; font-weight: 600; margin-block-end: .4rem; }
.form-field .req { color: var(--color-brand); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	inline-size: 100%;
	font: inherit;
	color: var(--color-ink);
	background: var(--color-paper);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius);
	padding-block: .7rem;
	padding-inline: .9rem;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-form textarea { resize: vertical; min-block-size: 8rem; }
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px var(--color-brand-050);
}
.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--color-brand); }
.field-error { display: block; margin-block-start: .35rem; font-size: .8125rem; color: var(--color-brand-700); }

/* Honeypot — visually hidden but present for bots (not display:none). */
.contact-hp {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Notices */
.form-notice {
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-block-end: 1.5rem;
	font-size: .9375rem;
	border: 1px solid transparent;
}
.form-notice--ok { background: #ECF6EE; border-color: #BFE0C6; color: #1E5631; }
.form-notice--error { background: var(--color-brand-050); border-color: var(--color-brand-100); color: var(--color-brand-700); }
/* Enquiry stored but the notification email failed — neither success nor error. */
.form-notice--warn { background: #FDF6E3; border-color: #EBD9A6; color: #6B4E12; }

@media (max-width: 760px) {
	.contact-layout { grid-template-columns: 1fr; }
}

/* ============================================================
 * 17. News (archive + single)
 * ========================================================== */
.archive-news { padding-block: clamp(2.5rem, 5vw, 4rem); }
.archive-news .archive-product__head { margin-block-end: clamp(2rem, 4vw, 3rem); }

/* Pagination */
.pagination { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	padding-block: .45rem;
	padding-inline: .7rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	color: var(--color-ink);
	transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination .page-numbers.current { background: var(--color-brand); border-color: var(--color-brand); color: var(--text-on-dark); }
.pagination .page-numbers.dots { border-color: transparent; }
[dir="rtl"] .pagination .page-numbers.prev svg,
[dir="rtl"] .pagination .page-numbers.next svg { transform: scaleX(-1); }

/* Single news */
.single-news { padding-block: clamp(2rem, 5vw, 4rem); }
/* Scoped to the ARTICLE's own container, not any descendant of it. WordPress
 * also puts `single-news` on the <body> for this post type, so the old
 * `.single-news .container` selector matched the masthead and footer containers
 * too and squeezed the header and footer to 820px on every news article — while
 * every other page used the full width. Keep the `article` + `>` in this
 * selector. */
article.single-news > .container { max-inline-size: 820px; }
.single-news__head { margin-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); }
.single-news__date {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-block-end: .75rem;
}
[dir="rtl"] .single-news__date { text-transform: none; letter-spacing: normal; }
.single-news__title { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.1; }
[dir="rtl"] .single-news__title { line-height: 1.25; }
.single-news__media { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.single-news__media img { inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.single-news__content { line-height: 1.8; font-size: 1.0625rem; }
.single-news__content > * + * { margin-block-start: 1.2rem; }
.single-news__content h2 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); margin-block-start: 2rem; }
.single-news__content h3 { font-size: 1.25rem; margin-block-start: 1.5rem; }
.single-news__content img { border-radius: var(--radius); block-size: auto; }
.single-news__content blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 4px solid var(--color-brand);
	color: var(--color-ink-600);
	font-size: 1.125rem;
}

/* ============================================================
 * 18. Events (archive + single)
 * ========================================================== */
.event-list { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
.event-card {
	display: flex;
	align-items: stretch;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	padding: clamp(1.1rem, 2.5vw, 1.5rem);
	text-decoration: none;
	color: inherit;
}
.event-card__date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	inline-size: 4.5rem;
	padding-block: .75rem;
	background: var(--color-brand-050);
	border: 1px solid var(--color-brand-100);
	border-radius: var(--radius);
	color: var(--color-brand-700);
	line-height: 1.1;
}
.event-card__day { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; }
.event-card__month { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.event-card__year { font-size: .75rem; color: var(--color-ink-400); }
.event-card__body { display: flex; flex-direction: column; gap: .35rem; }
.event-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; }
.event-card__location { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--color-ink-600); }
.event-card__icon { display: inline-flex; color: var(--color-brand); }
.event-card__icon svg { inline-size: 1rem; block-size: 1rem; }
.event-card__excerpt { font-size: .9rem; color: var(--color-ink-600); }

/* Single event meta */
.event-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.event-meta__item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--color-ink-600); }
.event-meta__icon { display: inline-flex; color: var(--color-brand); }
.event-meta__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.event-register { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* ============================================================
 * 19. Investor documents
 * ========================================================== */
.lang-notice {
	display: inline-block;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: .6rem 1rem;
	font-size: .875rem;
	color: var(--color-ink-600);
}
.archive-product__head .lang-notice { margin-block-start: 1rem; }

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	border-block-start: 1px solid var(--color-line);
}
.doc-item:last-child { border-block-end: 1px solid var(--color-line); }
.doc-item__main { display: flex; flex-direction: column; gap: .3rem; }
.doc-item__type {
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-brand-700);
}
[dir="rtl"] .doc-item__type { text-transform: none; letter-spacing: normal; }
.doc-item__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--color-ink); }
.doc-item__title:hover { color: var(--color-brand); }
.doc-item__date { font-size: .8125rem; color: var(--color-ink-400); }
.doc-item__download {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	color: var(--color-brand);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius);
	padding-block: .55rem;
	padding-inline: 1rem;
	transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.doc-item__download:hover { border-color: var(--color-brand); background: var(--color-brand-050); }
.doc-item__icon { display: inline-flex; }
.doc-item__icon svg { inline-size: 1.1rem; block-size: 1.1rem; }
.doc-single__date { margin-block-start: .5rem; color: var(--color-ink-600); }

@media (max-width: 560px) {
	.event-card { flex-direction: column; align-items: flex-start; }
	.event-card__date { flex-direction: row; gap: .4rem; inline-size: auto; padding-inline: 1rem; }

	/* Hero slider on phones: smaller headline/subtext. */
	.hero-slide__headline { font-size: 1.9rem; line-height: 1.15; }
	.hero-slide__sub { font-size: 1rem; }
}