/*
Theme Name: Irtiqaa
Theme URI: https://irtiqa-alkhalej.com/
Author: إرتقاء الخليج
Author URI: https://irtiqa-alkhalej.com/
Description: Block theme for إرتقاء الخليج, a digital marketing agency in Riyadh. Arabic-first and RTL by default, bilingual-ready, built for Core Web Vitals.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: irtiqaa
Tags: blog, business, portfolio, full-site-editing, block-patterns, rtl-language-support, translation-ready, accessibility-ready
*/

/*
 * Everything expressible in theme.json lives in theme.json.
 * This file is only for what it cannot express. Each rule says why.
 */

/*
 * theme.json has no direction awareness and no per-language typography.
 * Arabic is the baseline (set in theme.json); Latin is the override.
 * Arabic needs more line-height and reads smaller at the same nominal size,
 * so English steps back down. Never write this the other way round.
 */
html[lang^="en"] {
	line-height: 1.55;
}

html[lang^="en"] body {
	font-size: 1rem;
}

/*
 * Arabic is a connected script: letter-spacing breaks the letterforms apart
 * and renders words as disconnected glyphs. Guard against any block or plugin
 * that ships tracking, and against editors setting it in the sidebar.
 * Latin may still be tracked deliberately, so this is scoped to Arabic.
 */
html:not([lang^="en"]) * {
	letter-spacing: normal !important;
}

/*
 * Arabic has no true italic. Synthesised obliques are a rendering artefact,
 * not a typographic style.
 */
html:not([lang^="en"]) :is(em, i, cite, dfn, blockquote) {
	font-style: normal;
	font-weight: 500;
}

/*
 * Latin runs, phone numbers, emails and URLs inside Arabic text need bidi
 * isolation or the algorithm reorders them — a Saudi number renders its "+"
 * on the wrong end without this.
 */
bdi,
[dir="ltr"] {
	unicode-bidi: isolate;
}

/*
 * Focus.
 *
 * The block theme's own :focus outlines are gone from theme.json, because
 * :focus fires on a mouse click too and a ring nobody asked for after every
 * click is what made them worth removing. This is the belt to that braces:
 * anything WordPress core, a block or a plugin still paints on plain :focus is
 * dropped, but only where the browser has decided a focus ring is not wanted.
 *
 * What replaces it is a designed ring on :focus-visible — a keyboard user must
 * always be able to see where they are. Quality floor, non-negotiable, and
 * this is the whole reason the default could be removed at all.
 */
:focus:not(:focus-visible) {
	outline: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * Skip link. Visually hidden until focused. theme.json cannot express this.
 */
.skip-link {
	position: absolute;
	inset-inline-start: 0;
	/* Hidden upwards, not sideways: inset-inline-start:-9999px resolves to
	   +9999px under RTL and widens the document. Vertical offscreen is
	   direction-neutral and never extends the scroll area. */
	top: -100vh;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 500;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/*
 * The gold line: the one device carried over from the brand's existing visual
 * language. A hairline rule that reads as drawn rather than as a border.
 * Applied as a block style, registered in functions.php.
 */
.is-style-irtiqaa-rule {
	border: 0;
	border-block-start: var(--wp--custom--line--weight) solid var(--wp--preset--color--accent);
	opacity: 1;
	width: 100%;
	max-width: none;
}

/*
 * Motion is opt-in per block via data-anim (see .claude/rules/motion.md).
 * Nothing may be hidden waiting for JS unless JS has confirmed it is running,
 * so the hidden state is gated behind the js class. Without it, content is
 * visible — a blank page is worse than no animation.
 */
/*
 * data-anim-skip opts a child out of its parent's stagger. A script that
 * appends a decorative element into a stagger container — a progress track, a
 * rule — needs that element left alone: the reveal writes transform, and this
 * element's transform is doing a different job.
 */
.js [data-anim="reveal"],
.js [data-anim="stagger"] > *:not([data-anim-skip]) {
	opacity: 0;
	transform: translateY(1rem);
	will-change: transform, opacity;
}

/*
 * The revealed state, applied by assets/js/motion.js. Transform and opacity
 * only — nothing here can trigger layout. will-change is dropped once the
 * element has arrived so the compositor layer is released.
 */
.js [data-anim="reveal"].is-revealed,
.js [data-anim="stagger"] > .is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: auto;
}

/*
 * Reduced motion is honoured as "no motion", not "less motion".
 */
@media (prefers-reduced-motion: reduce) {
	.js [data-anim="reveal"],
	.js [data-anim="stagger"] > *:not([data-anim-skip]) {
		opacity: 1;
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Header and overlay menu
 *
 * Core's Navigation block overlay cannot hold a second column of arbitrary
 * content, which this design needs, so the panel is ours. The primary nav
 * inside it is still plain markup pending the IA — see patterns/header.php.
 * ------------------------------------------------------------------------- */

/*
 * Sticky belongs on the template part, not on the bar inside it.
 * A sticky element travels within its parent's box, and
 * header.wp-block-template-part is exactly as tall as the bar — so sticky on
 * the bar had nowhere to go and scrolled away with the page. It looked
 * correct in a screenshot at the top of the document and was never sticky at
 * any scroll position.
 *
 * The element selector is enough to be specific: the footer part renders as
 * footer.wp-block-template-part, so this cannot reach it.
 *
 * position:sticky does not create a containing block for fixed-position
 * descendants the way transform or backdrop-filter would, so the overlay
 * panel inside still resolves inset:0 against the viewport.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.irtiqaa-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: blur(10px);
	/* The containing block for the reading-progress bar on its bottom edge. */
	position: relative;
}

.irtiqaa-header__bar {
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--40);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
}

.irtiqaa-header__actions {
	gap: var(--wp--preset--spacing--40);
}

/* The consultation CTA is the one gold element in the bar. */
.irtiqaa-cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* At 360px the title's intrinsic width plus 24px of inline padding pushed
	   the toggle 4px past the edge and scrolled the whole document sideways. */
	.irtiqaa-header__bar {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* The brand must be allowed to shrink; a flex item defaults to min-width:auto
   and will refuse to go below its content, overflowing the bar instead. */
.irtiqaa-header__brand {
	min-width: 0;
}

/*
 * Truncate rather than wrap. An earlier pass used overflow-wrap:anywhere,
 * which let the shrinkable flex item collapse the site name to a 29px column
 * of single letters stacked five high — and in Arabic that also breaks the
 * connected letterforms apart, which is the one thing rtl-arabic.md says
 * never to do. There is room for the full name once the bar's CTA is out of
 * the way; this is the guard for a longer name, not the normal case.
 */
.irtiqaa-header__title {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Toggle: two rules that become an X. Transform only, no layout properties. */
.irtiqaa-toggle {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.irtiqaa-toggle__bars {
	display: block;
	width: 1.5rem;
	height: 0.75rem;
	position: relative;
}

.irtiqaa-toggle__bars i {
	position: absolute;
	inset-inline: 0;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s ease;
}

.irtiqaa-toggle__bars i:first-child { top: 0; }
.irtiqaa-toggle__bars i:last-child  { bottom: 0; }

.irtiqaa-toggle[aria-expanded="true"] .irtiqaa-toggle__bars i:first-child {
	transform: translateY(5px) rotate(45deg);
}

.irtiqaa-toggle[aria-expanded="true"] .irtiqaa-toggle__bars i:last-child {
	transform: translateY(-5px) rotate(-45deg);
}

/*
 * The panel. Drops from the top edge, which is where the toggle that opened it
 * is — the panel arrives from the control rather than from an edge nothing
 * happened at.
 *
 * translateY needs no direction awareness, so the --irtiqaa-slide custom
 * property and its html[dir="rtl"] override are gone with it. They existed only
 * because the motion was horizontal: translateX is physical, so a right-to-left
 * document had to flip the sign or the panel flew in from the wrong side.
 * Vertical motion is the same in both languages, which is one less thing that
 * can be wrong in one of them.
 */
.irtiqaa-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--wp--preset--color--deep);
	transform: translateY(-100%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.irtiqaa-menu.is-open {
	transform: translateY(0);
}

.irtiqaa-menu__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
	.irtiqaa-menu__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* Primary nav: the one bold moment. */
.irtiqaa-menu__primary ul,
.irtiqaa-menu__services ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.irtiqaa-menu__primary a {
	display: inline-block;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

.irtiqaa-menu__primary a:hover,
.irtiqaa-menu__primary a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-menu__primary .is-cta a {
	color: var(--wp--preset--color--accent);
}

/* Aside: services and contact, quiet by comparison. */
.irtiqaa-menu__aside {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: center;
}

@media (min-width: 900px) {
	.irtiqaa-menu__aside {
		border-inline-start: var(--wp--custom--hairline);
		padding-inline-start: var(--wp--preset--spacing--50);
	}
}

/* Latin-only label. Tracking is safe here and never inherited by Arabic,
   which the letter-spacing guard above protects regardless. */
.irtiqaa-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-menu__services a {
	font-size: var(--wp--preset--font-size--small);
	line-height: 2.1;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.irtiqaa-menu__services a:hover,
.irtiqaa-menu__services a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-menu__contact {
	display: grid;
	gap: 0.35rem;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-menu__contact a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	width: fit-content;
}

.irtiqaa-menu__close {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	inset-inline-end: var(--wp--preset--spacing--40);
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	cursor: pointer;
}

.irtiqaa-menu__close:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Scroll lock while the panel is open. */
html.irtiqaa-menu-open,
html.irtiqaa-menu-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-menu,
	.irtiqaa-toggle__bars i,
	.irtiqaa-menu__primary a {
		transition: none;
	}
}

/* The header is a dynamic block returning plain markup, so the flex layout
   core's Group block would have provided is declared here instead. */
.irtiqaa-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.irtiqaa-header__actions {
	display: flex;
	align-items: center;
}

.irtiqaa-header__brand img,
.irtiqaa-header__brand .custom-logo {
	display: block;
	width: auto;
	max-height: 44px;
}

.irtiqaa-header__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/*
 * The bar's CTA still goes away on small screens — the overlay menu carries it
 * there. The hero and footer CTAs are the page's primary conversion elements
 * and must survive; an unscoped `.irtiqaa-cta { display: none }` would take
 * all three. Placed after the base rule below so source order cannot undo it.
 *
 * This only ever applies now when there is no testimonial to show and the
 * header falls back to the booking link. When there are testimonials the
 * control is .irtiqaa-storybtn, which is built to survive 360px rather than
 * be hidden at it — see the story button section.
 */
@media (max-width: 600px) {
	.irtiqaa-header__actions .irtiqaa-cta {
		display: none;
	}
}

/* CTA is a plain anchor here, so it carries the button styling itself. */
.irtiqaa-cta {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.irtiqaa-cta:hover,
.irtiqaa-cta:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* display:flex on .irtiqaa-menu outranks the UA's [hidden]{display:none},
   which left the panel laid out off-screen and scrolling the document
   sideways. The attribute stays the source of truth for closed. */
.irtiqaa-menu[hidden] {
	display: none;
}

/* Seven items at the display size overflowed the panel vertically, pinning the
   first and last to the edges. Size the nav against viewport height as well as
   width so the list always fits without scrolling. */
.irtiqaa-menu__primary a {
	font-size: clamp(1.5rem, min(5.5vw, 7.4vh), 4rem);
	line-height: 1.24;
}

.irtiqaa-menu__inner {
	padding-block: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * The footer's job is not navigation. It is the last chance to convert, so the
 * CTA leads and everything else is subordinate to it. The Maroof and
 * e-commerce authentication badges get a column because a Saudi buyer checks
 * those before they read a word of the copy.
 * ------------------------------------------------------------------------- */

/* Root inline padding lands on .has-global-padding elements, and a template
   part is not one, so the dark ground already runs edge to edge. Nothing to
   cancel here — a negative margin would push it past the viewport. */
.irtiqaa-footer {
	background: var(--wp--preset--color--deep);
}

.irtiqaa-footer__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

/* The conversion band. */
.irtiqaa-footer__cta {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
	max-width: 34rem;
}

.irtiqaa-footer__cta-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.2;
}

.irtiqaa-footer__cta-text {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-footer__cta-actions {
	margin-block: var(--wp--preset--spacing--20) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* The call number is the alternative, not a second primary. No button. */
.irtiqaa-footer__cta-alt {
	display: inline-flex;
	gap: 0.4rem;
	align-items: baseline;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-footer__cta-alt:hover,
.irtiqaa-footer__cta-alt:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* Columns. Four on desktop, two on tablet, one stacked on a phone. */
.irtiqaa-footer__cols {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.irtiqaa-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.irtiqaa-footer__cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

/* Column headings are labels, not hierarchy. They stay h2 for the outline. */
.irtiqaa-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.irtiqaa-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.irtiqaa-footer__list a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.irtiqaa-footer__list a:hover,
.irtiqaa-footer__list a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-footer__creds a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.irtiqaa-footer__creds img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	object-fit: contain;
}

.irtiqaa-footer__contact {
	display: grid;
	gap: 0.65rem;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-footer__contact a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	width: fit-content;
	line-height: 1.6;
}

.irtiqaa-footer__contact a:hover,
.irtiqaa-footer__contact a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* Bottom bar. */
.irtiqaa-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--hairline);
}

.irtiqaa-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* 44px minimum target, per the quality floor, on a 24px core icon. */
.irtiqaa-footer__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: var(--wp--custom--hairline);
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.irtiqaa-footer__social a:hover,
.irtiqaa-footer__social a:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.irtiqaa-footer__social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.irtiqaa-footer__copyright {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-footer__copyright a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.irtiqaa-footer__copyright a:hover,
.irtiqaa-footer__copyright a:focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Contact dock
 *
 * Fixed to the viewport on every page. WhatsApp is the site's one job, so it
 * carries the brand gold; the call button is quieter. Sits on the reading-start
 * side — right in Arabic, where the live site already puts it.
 * ------------------------------------------------------------------------- */

/* Shared by both docks. Each sets its own edge below — they sit on opposite
   sides so neither can cover the other, and both use logical inset properties
   so they swap sides with the document direction rather than with a media
   query. */
.irtiqaa-dock {
	position: fixed;
	inset-block-end: max(1rem, env(safe-area-inset-bottom));
	z-index: 150;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.irtiqaa-dock--contact {
	inset-inline-start: 1rem;
}

.irtiqaa-dock--tools {
	inset-inline-end: 1rem;
	align-items: flex-end;
}

/* --- The WhatsApp button and the toggle beneath it ---------------------- */

.irtiqaa-dock__btn {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.irtiqaa-dock__btn svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.irtiqaa-dock__btn.is-whatsapp {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.irtiqaa-dock__btn:hover,
.irtiqaa-dock__btn:focus-visible {
	transform: translateY(-2px);
}

/*
 * The toggle only does something once the script is running, so without it the
 * control is not shown at all and the panel below stays open. A button that
 * silently does nothing is worse than no button.
 */
.irtiqaa-dock__toggle {
	display: none;
}

.js .irtiqaa-dock__toggle {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
	cursor: pointer;
	transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.irtiqaa-dock__toggle:hover,
.irtiqaa-dock__toggle:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.irtiqaa-dock__toggle svg {
	width: 18px;
	height: 18px;
}

/* The icon swaps with the state; only one is ever in the box. */
.irtiqaa-dock__toggle-close,
.is-open .irtiqaa-dock__toggle-open {
	display: none;
}

.is-open .irtiqaa-dock__toggle-close {
	display: block;
}

/* --- The panel --------------------------------------------------------- */

.irtiqaa-dock__panel {
	display: grid;
	gap: 0.15rem;
	padding: 0.5rem;
	border: var(--wp--custom--hairline);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--deep) 96%, transparent);
	box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
	backdrop-filter: blur(8px);
}

/*
 * Collapsed, and only once JS has confirmed it can open it again. Same rule
 * the scroll reveals follow: nothing is hidden waiting for a script.
 *
 * visibility rather than display so the panel can animate — transform and
 * opacity only, per motion.md, and display is not animatable anyway.
 */
.js .irtiqaa-dock--contact:not(.is-open) .irtiqaa-dock__panel {
	visibility: hidden;
	opacity: 0;
	transform: translateY(0.5rem) scale(0.96);
	pointer-events: none;
}

.js .irtiqaa-dock__panel {
	transform-origin: bottom center;
	transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
}

.irtiqaa-dock__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.7rem;
	border-radius: 0.6rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.irtiqaa-dock__row svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-dock__row:hover,
.irtiqaa-dock__row:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-dock__row:hover svg,
.irtiqaa-dock__row:focus-visible svg {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-dock__rule {
	width: 100%;
	height: 0;
	margin: 0.35rem 0;
	border: 0;
	border-block-start: var(--wp--custom--hairline);
}

/* Five accounts in a grid rather than five more rows: they are a set, they are
   secondary to the two contact methods above them, and stacked they would make
   the panel taller than the phone it opens on. */
.irtiqaa-dock__social {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.irtiqaa-dock__mini {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0.6rem;
	color: var(--wp--preset--color--muted);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.irtiqaa-dock__mini svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.irtiqaa-dock__mini:hover,
.irtiqaa-dock__mini:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	color: var(--wp--preset--color--accent);
}

/* --- The tool shortcuts ------------------------------------------------ */

/*
 * A pill that is an icon at rest and opens to its label on hover and focus.
 * The label is a real element in the document, not a title attribute: a title
 * is not announced reliably, never appears on touch, and cannot be styled.
 *
 * grid-template-columns is animated rather than width, because the label width
 * is not knowable in advance. It is the one place on this site where a layout
 * property is animated: two elements in a fixed corner with nothing beneath
 * them to reflow, so the cost is contained — which is the trade motion.md's
 * rule exists to stop anyone making blindly, not to forbid outright.
 */
.irtiqaa-dock__tool {
	display: grid;
	grid-template-columns: 0fr;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
	transition: grid-template-columns 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, color 0.2s ease;
}

.irtiqaa-dock__tool:hover,
.irtiqaa-dock__tool:focus-visible,
.irtiqaa-dock__tool:focus-within {
	grid-template-columns: 1fr;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-dock__tool-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	grid-row: 1;
	grid-column: 2;
}

.irtiqaa-dock__tool-icon svg {
	width: 22px;
	height: 22px;
}

.irtiqaa-dock__tool-label {
	grid-row: 1;
	grid-column: 1;
	overflow: hidden;
	min-width: 0;
	font-size: var(--wp--preset--font-size--x-small);
	white-space: nowrap;
}

/* The padding lives on the label so it collapses with it and the closed pill
   stays a circle. */
.irtiqaa-dock__tool:hover .irtiqaa-dock__tool-label,
.irtiqaa-dock__tool:focus-visible .irtiqaa-dock__tool-label,
.irtiqaa-dock__tool:focus-within .irtiqaa-dock__tool-label {
	padding-inline-start: 0.9rem;
}

/* Two stacked buttons are 7.1rem tall and would sit on the copyright line, so
   below the desktop breakpoint the contact dock lies down into a row — half the
   height, and it covers one line of right-aligned Arabic instead of two. The
   footer then keeps a lane clear beneath the bottom bar for it. */
@media (max-width: 899px) {
	.irtiqaa-dock--contact {
		flex-direction: row-reverse;
		align-items: flex-end;
	}

	.irtiqaa-dock__btn {
		width: 3rem;
		height: 3rem;
	}

	.irtiqaa-dock__btn svg {
		width: 22px;
		height: 22px;
	}

	/* The panel is taller than the row it hangs off, so it comes out of the
	   row flow and is anchored above the buttons instead. */
	.irtiqaa-dock--contact .irtiqaa-dock__panel {
		position: absolute;
		inset-block-end: calc(100% + 0.6rem);
		inset-inline-start: 0;
	}

	.irtiqaa-footer__inner {
		padding-block-end: calc(var(--wp--preset--spacing--50) + 5rem);
	}
}

/*
 * On a phone a tool pill never opens — there is no hover, and a tap follows the
 * link. So it is not rendered as a collapsing column at all: the pill stays a
 * circle and the label is left for assistive tech.
 */
@media (max-width: 599px) {
	.irtiqaa-dock__tool {
		grid-template-columns: 0fr !important;
	}

	.irtiqaa-dock__tool-icon {
		width: 2.75rem;
		height: 2.75rem;
	}

	.irtiqaa-dock__tool-label {
		padding-inline-start: 0 !important;
	}
}

/* The overlay menu is above the docks and covers the whole viewport; a fixed
   button floating over it would be the only thing not dimmed. */
html.irtiqaa-menu-open .irtiqaa-dock {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-dock__btn,
	.irtiqaa-dock__toggle,
	.irtiqaa-dock__row,
	.irtiqaa-dock__mini,
	.irtiqaa-dock__tool,
	.irtiqaa-footer__social a {
		transition: none;
	}

	.irtiqaa-dock__btn:hover,
	.irtiqaa-dock__btn:focus-visible {
		transform: none;
	}

	/* No motion means the panel appears and disappears, it does not slide. */
	.js .irtiqaa-dock__panel {
		transition: none;
	}

	.js .irtiqaa-dock--contact:not(.is-open) .irtiqaa-dock__panel {
		transform: none;
	}
}

/*
 * Landing room for the two tool anchors.
 *
 * The dock shortcuts jump to these sections by fragment, and the header is
 * sticky. Measured at 1100px the header is 137px tall and the section heading
 * came to rest at exactly 137px — flush against the header's bottom edge, with
 * the section reading as though it starts under a bar rather than at a heading.
 *
 * scroll-margin is the property for this: it moves where the browser stops,
 * not where the section sits, so nothing about the layout changes and the two
 * sections still scroll past normally. Generous rather than exact, because the
 * header is taller in Arabic than the equivalent English bar will be and a
 * little air above a heading costs nothing.
 */
#irtiqaa-speed,
#irtiqaa-agent-check {
	scroll-margin-block-start: 10rem;
}

@media (max-width: 899px) {
	#irtiqaa-speed,
	#irtiqaa-agent-check {
		scroll-margin-block-start: 6rem;
	}
}

/* ---------------------------------------------------------------------------
 * Service page
 *
 * Sections are full-bleed and each constrains its own inner width, the same
 * arrangement as the footer. The template uses a default layout rather than a
 * constrained one so a section can decide for itself how wide it reads.
 * ------------------------------------------------------------------------- */

.irtiqaa-hero__inner,
.irtiqaa-evidence,
.irtiqaa-process,
.irtiqaa-gallery,
.irtiqaa-faq {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Hero: one claim and one artifact, side by side once there is room. */
.irtiqaa-hero {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.irtiqaa-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

@media (min-width: 900px) {
	.irtiqaa-hero__inner {
		grid-template-columns: 1.35fr 1fr;
	}
}

.irtiqaa-hero__title {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

/* The second line carries the whole argument, so it carries the one accent. */
.irtiqaa-hero__accent {
	color: var(--wp--preset--color--accent);
	display: block;
}

.irtiqaa-hero__lede {
	margin-block: var(--wp--preset--spacing--40) 0;
	max-width: 34rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.75;
}

.irtiqaa-hero__actions {
	margin-block: var(--wp--preset--spacing--50) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.irtiqaa-hero__jump {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	padding-block-end: 0.25rem;
}

.irtiqaa-hero__jump:hover,
.irtiqaa-hero__jump:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* The rank card. Markup, not an image: nothing to download above the fold,
   and it stays sharp at any pixel density on a page selling technical work. */
.irtiqaa-rankcard {
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	border-radius: 1.25rem;
	padding: var(--wp--preset--spacing--50);
	display: grid;
	gap: 0.5rem;
	justify-items: start;
}

.irtiqaa-rankcard__label,
.irtiqaa-rankcard__caption {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-rankcard__term {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.irtiqaa-rankcard__move {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-rankcard__from {
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--muted) 60%, transparent);
}

.irtiqaa-rankcard__arrow {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-rankcard__to {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* Any card built on unverified data says so on its face. */
.irtiqaa-rankcard__flag,
.irtiqaa-evidence__warning {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	/* Not a pill: at 360px this wraps to three lines, and a 999px radius on a
	   three-line block reads as a mistake rather than a label. */
	border-radius: 0.6rem;
	padding: 0.45rem 0.85rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Evidence panel
 * ------------------------------------------------------------------------- */

.irtiqaa-evidence {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-evidence__head {
	max-width: 40rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-evidence__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-evidence__lede {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
}

/* The window the figures cover, set as data rather than prose: a store metric
   without its date range is the unfalsifiable claim this whole panel exists to
   avoid making. */
/* Same reason as the contact labels: the period reads "1 ديسمبر 2024 — 31 يناير
   2025", which is mostly Arabic, so it carries no tracking. */
.irtiqaa-evidence__period {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

.irtiqaa-evidence__summary {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 62ch;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * The registration form
 *
 * FluentForm's own stylesheet is built for a white page: light borders, dark
 * text on white inputs, a blue button. On this navy it renders as pale boxes
 * with grey-on-grey labels. Everything below re-skins its output from our own
 * wrapper — the plugin is never edited, and nothing here is more specific than
 * it needs to be to win over the plugin's defaults.
 *
 * Scoped to .irtiqaa-signup throughout, so a form embedded anywhere else in a
 * page's own content keeps the plugin's styling and is not silently changed by
 * the theme.
 * ------------------------------------------------------------------------- */

.irtiqaa-signup {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--70);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
	.irtiqaa-signup {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--wp--preset--spacing--70);
		align-items: start;
	}
}

.irtiqaa-signup__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

.irtiqaa-signup__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-signup__points {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.irtiqaa-signup__points li {
	position: relative;
	padding-inline-start: 1.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-signup__points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* The form sits on the raised surface the evidence panel uses, so it reads as
   an instrument on the page rather than a plugin dropped into it. */
.irtiqaa-signup__form {
	background: var(--wp--preset--color--deep);
	border: var(--wp--custom--hairline);
	border-radius: 1.25rem;
	padding: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.irtiqaa-signup__form {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
		border-radius: 1rem;
	}
}

.irtiqaa-signup .fluentform .ff-el-group {
	margin-block-end: var(--wp--preset--spacing--40);
}

.irtiqaa-signup .fluentform .ff-el-input--label label {
	display: block;
	margin-block-end: 0.45rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* The required marker is the plugin's, and it is a red asterisk. Ours is the
   accent, because red on this page means a failed row in the sales report. */
.irtiqaa-signup .fluentform .ff-el-is-required.asterisk-right label:after,
.irtiqaa-signup .fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-signup .fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: var(--wp--custom--hairline);
	border-radius: 0.6rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	box-shadow: none;
}

.irtiqaa-signup .fluentform .ff-el-form-control::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent);
}

.irtiqaa-signup .fluentform .ff-el-form-control:focus,
.irtiqaa-signup .fluentform .ff-el-form-control:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* Latin-only values — an email, a URL, a phone number — typed into an RTL
   field land with their punctuation at the wrong end. `direction: ltr` with a
   start-aligned text keeps the field itself in the Arabic layout while the
   value inside it reads the way it will be sent. */
.irtiqaa-signup .fluentform input[type="email"],
.irtiqaa-signup .fluentform input[type="url"],
.irtiqaa-signup .fluentform input[type="number"],
.irtiqaa-signup .fluentform input[type="tel"] {
	direction: ltr;
	text-align: start;
}

/*
 * The button, through the plugin's own hook rather than against it.
 *
 * FluentForm injects `form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)`
 * inline in the body, which outranks anything reasonable this stylesheet can
 * write and lands later in the document besides. But that rule paints from
 * `--fluentform-primary`, so setting the property on our wrapper re-colours
 * the button without a specificity fight and without touching the plugin.
 *
 * The text colour still needs winning outright: the plugin hardcodes #ffffff,
 * which on gold is about 1.7:1. Hence the extra class on the selector — enough
 * to beat theirs, and no !important anywhere.
 */
.irtiqaa-signup {
	--fluentform-primary: var(--wp--preset--color--accent);
}

.irtiqaa-signup .fluentform .ff-btn-submit {
	width: 100%;
	padding: 0.95rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.irtiqaa-signup form.fluentform .ff-btn-submit.ff-btn {
	color: var(--wp--preset--color--base);
}

.irtiqaa-signup form.fluentform .ff-btn-submit.ff-btn:hover,
.irtiqaa-signup form.fluentform .ff-btn-submit.ff-btn:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.irtiqaa-signup .fluentform .ff-el-help-message {
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Errors and the success notice. The plugin's colours are tuned for white; on
   navy they need their own ground to stay at AA. */
.irtiqaa-signup .fluentform .error,
.irtiqaa-signup .fluentform .text-danger,
.irtiqaa-signup .fluentform .ff-el-is-error .error {
	color: #FFB4A8;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-signup .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #FFB4A8;
}

.irtiqaa-signup .ff-message-success,
.irtiqaa-signup .fluentform_wrapper .ff-message-success {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Finding things: search, and the 404
 *
 * Two pages for the same reader — someone who wanted something and did not get
 * it. Neither gets an apology or an illustration of a lost astronaut. Both get
 * a field to type in and the six things this site sells.
 * ------------------------------------------------------------------------- */

.irtiqaa-find {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	max-width: 34rem;
}

.irtiqaa-find__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.85rem 1.1rem;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-find__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.irtiqaa-find__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.irtiqaa-find__go {
	flex: none;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.irtiqaa-find__go:hover,
.irtiqaa-find__go:focus-visible {
	background: var(--wp--preset--color--contrast);
}

/* --- the search results header ------------------------------------------- */

.irtiqaa-searchtools {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--50);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.irtiqaa-searchtools__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

/* --- the recovery list --------------------------------------------------- */

.irtiqaa-recover {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
}

.irtiqaa-recover__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-recover__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: var(--wp--custom--hairline);
}

.irtiqaa-recover__link {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 18rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--hairline);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease;
}

@media (max-width: 720px) {
	.irtiqaa-recover__link {
		grid-template-columns: 2rem minmax(0, 1fr);
		row-gap: 0.2rem;
	}

	.irtiqaa-recover__note {
		grid-column: 2;
	}
}

.irtiqaa-recover__link:hover,
.irtiqaa-recover__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 40%, transparent);
}

.irtiqaa-recover__num {
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

.irtiqaa-recover__name {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-recover__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-empty {
	padding-block: var(--wp--preset--spacing--50);
}

.irtiqaa-empty__text {
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
}

/* --- 404 ------------------------------------------------------------------ */

.irtiqaa-404 {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 900px) {
	.irtiqaa-404 {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}
}

/* The number as the graphic. Outlined rather than filled: solid at this size
   it would outweigh the heading beside it, and the heading is the thing that
   actually tells a reader what happened. */
.irtiqaa-404__code {
	margin: 0;
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-404__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

.irtiqaa-404__text {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	max-width: 48ch;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * The proof gallery
 *
 * Screenshots of client dashboards, on a light card. The captures are light UI
 * and always will be — Salla's dashboard is white — so rather than fight that
 * on a dark page, each one sits on a deliberate paper-coloured tile. It reads
 * as a document laid on the page, which is what it is.
 * ------------------------------------------------------------------------- */

.irtiqaa-gallery {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-gallery__head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-gallery__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

.irtiqaa-gallery__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 56ch;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.irtiqaa-gallery__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* The whole tile is the control. A caption below it stays selectable text
   rather than being swallowed into the button's accessible name. */
.irtiqaa-gallery__open {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: var(--wp--custom--hairline);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--paper);
	overflow: hidden;
	cursor: zoom-in;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

/* One aspect ratio for every tile, and `contain` inside it. The captures are
   different shapes — one is a tall single card, the rest are wide pairs — and
   left to themselves they stagger the rows and put every caption at a
   different height. Cropping them to fit would hide figures, so the tile is a
   fixed window and the screenshot sits inside it whole, on paper. */
.irtiqaa-gallery__open img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	padding: 0.6rem;
}

.irtiqaa-gallery__open:hover,
.irtiqaa-gallery__open:focus-visible {
	border-color: var(--wp--preset--color--accent);
}

.irtiqaa-gallery__zoom {
	position: absolute;
	inset-block-end: 0.6rem;
	inset-inline-end: 0.6rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.irtiqaa-gallery__open:hover .irtiqaa-gallery__zoom,
.irtiqaa-gallery__open:focus-visible .irtiqaa-gallery__zoom {
	opacity: 1;
}

/* Always visible where hover does not exist, because a control that only
   announces itself on hover announces itself to nobody on a phone. */
@media (hover: none) {
	.irtiqaa-gallery__zoom {
		opacity: 1;
	}
}

.irtiqaa-gallery__caption {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-gallery__store {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-gallery__period {
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-gallery__note {
	color: var(--wp--preset--color--muted);
}

.irtiqaa-gallery__footnote {
	margin-block-start: var(--wp--preset--spacing--40);
	max-width: 72ch;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* --- the lightbox -------------------------------------------------------- */

.irtiqaa-lightbox {
	width: min(92vw, 76rem);
	max-width: none;
	max-height: 92vh;
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--hairline);
	border-radius: 1rem;
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--contrast);
	overflow: auto;
}

.irtiqaa-lightbox::backdrop {
	background: rgba(0, 13, 27, 0.85);
}

.irtiqaa-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.irtiqaa-lightbox__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--paper);
}

.irtiqaa-lightbox__caption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-lightbox__close {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 0.5rem 1.1rem;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	cursor: pointer;
}

.irtiqaa-lightbox__close:hover,
.irtiqaa-lightbox__close:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * The sales report
 *
 * A merchant's own dashboard rendered in our palette rather than Salla's. The
 * shape is copied deliberately — same eight rows, same order, deductions
 * negative — because recognition is the whole point: a store owner reading
 * this has seen this exact report on their own screen.
 *
 * A description list, not a table. There are no columns of independent data
 * here, only a label and its figure repeated eight times, and dl says that.
 * ------------------------------------------------------------------------- */

.irtiqaa-report {
	margin-block-start: var(--wp--preset--spacing--50);
}

.irtiqaa-report__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-report__rows {
	margin: 0;
	display: grid;
	gap: 0;
}

.irtiqaa-report__row {
	display: grid;
	grid-template-columns: 1fr auto minmax(4.5rem, auto);
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: 0.7rem;
	border-block-end: var(--wp--custom--hairline);
}

.irtiqaa-report__row:last-child {
	border-block-end: 0;
}

.irtiqaa-report__label,
.irtiqaa-report__amount,
.irtiqaa-report__change {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-report__label {
	color: var(--wp--preset--color--muted);
}

/* Tabular figures so the riyal column lines up down the whole report — the
   one thing that makes eight rows read as a statement rather than a list. */
.irtiqaa-report__amount {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.irtiqaa-report__unit {
	margin-inline-start: 0.3rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-report__none {
	color: var(--wp--preset--color--muted);
}

.irtiqaa-report__change {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-report__delta {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

/* A fall is shown, not hidden. Two of these rows go the wrong way and leaving
   them out would turn a report into a brochure. */
.irtiqaa-report__delta.is-down {
	color: var(--wp--preset--color--muted);
}

/* The two lines that are money in, and the one that is money kept. */
.irtiqaa-report__row.is-in .irtiqaa-report__label {
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-report__row.is-total {
	margin-block-start: 0.4rem;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--accent);
	border-block-end: 0;
}

.irtiqaa-report__row.is-total .irtiqaa-report__label,
.irtiqaa-report__row.is-total .irtiqaa-report__amount {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

@media (max-width: 600px) {
	.irtiqaa-report__row {
		grid-template-columns: 1fr auto;
	}

	.irtiqaa-report__change {
		grid-column: 2;
		text-align: end;
	}
}

/* Named, and deliberately plain. A source line that tries to look like a badge
   reads as decoration; one that looks like a footnote reads as a citation. */
.irtiqaa-evidence__source {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--hairline);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* The panel reads as an instrument: raised surface, hairline, tight corners. */
.irtiqaa-evidence__panel {
	background: var(--wp--preset--color--deep);
	border: var(--wp--custom--hairline);
	border-radius: 1.5rem;
	padding: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.irtiqaa-evidence__warning {
	justify-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-weight: 500;
}

.irtiqaa-evidence__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.irtiqaa-evidence__tab {
	display: grid;
	gap: 0.15rem;
	justify-items: start;
	padding: 0.7rem 1.1rem;
	border-radius: 0.9rem;
	border: var(--wp--custom--hairline);
	background: transparent;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.irtiqaa-evidence__tab[aria-selected="true"] {
	background: var(--wp--preset--color--surface);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-evidence__tab:hover {
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-evidence__platform {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-evidence__case {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* `display: grid` above outranks the user agent's `[hidden] { display: none }`,
   so without this every case renders at once and the tabs select nothing. The
   block was in no template until now, which is why it never showed. */
.irtiqaa-evidence__case[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.irtiqaa-evidence__panel {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
		border-radius: 1rem;
	}

	.irtiqaa-hero__inner,
	.irtiqaa-evidence,
	.irtiqaa-process,
	.irtiqaa-faq {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

.irtiqaa-evidence__subhead {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* Metric tiles. */
.irtiqaa-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.irtiqaa-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.irtiqaa-tile {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
	border-radius: 1rem;
	padding: var(--wp--preset--spacing--40);
}

.irtiqaa-tile__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Tabular figures so a counting animation cannot make the row jitter. */
.irtiqaa-tile__value {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* The unit rides with the figure rather than sitting in the label, so a reader
   scanning the row sees "558,395 ر.س" as one thing and never has to look up to
   find out whether a number is riyals, orders or visits. Smaller and quieter,
   because the digit is the message. */
.irtiqaa-tile__unit {
	margin-inline-start: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-tile__from {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.irtiqaa-tile__delta {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

.irtiqaa-tile__delta.is-down {
	color: var(--wp--preset--color--muted);
}

/* Chart. */
.irtiqaa-chart {
	margin: 0;
	position: relative;
}

/*
 * Two canvases, one shown. A single viewBox cannot serve both ends of the
 * range: 720x280 renders 84px tall in a phone-width column, and a
 * phone-shaped viewBox is absurdly tall on a desktop. The alternative was
 * scrolling a wide plot, which is worse — the value axis scrolls away with it.
 */
.irtiqaa-chart__svg {
	display: block;
	width: 100%;
	height: auto;
}

.irtiqaa-chart__svg.is-narrow {
	display: none;
}

@media (max-width: 700px) {
	.irtiqaa-chart__svg.is-wide {
		display: none;
	}

	.irtiqaa-chart__svg.is-narrow {
		display: block;
	}
}

.irtiqaa-chart__grid {
	stroke: color-mix(in srgb, var(--wp--preset--color--muted) 20%, transparent);
	stroke-width: 1;
}

.irtiqaa-chart__ylabel,
.irtiqaa-chart__xlabel {
	fill: var(--wp--preset--color--muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-chart__line {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.irtiqaa-chart__dot {
	fill: var(--wp--preset--color--deep);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
	transition: r 0.15s ease;
}

.irtiqaa-chart__dot.is-active {
	r: 6;
	fill: var(--wp--preset--color--accent);
}

/* Draw-in. pathLength="1" means one unit of dash covers the whole line, so
   the same rule works for any series length. Only the line animates; the
   figures were printed by the server and never wait on JavaScript. */
/* Same rule for the full chart: drawn by default, animated when it can be. */
.js .irtiqaa-chart.is-drawn .irtiqaa-chart__line {
	animation: irtiqaa-draw-line 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .irtiqaa-chart.is-drawn .irtiqaa-chart__area {
	animation: irtiqaa-fade-in 0.6s ease 0.4s forwards;
}

@keyframes irtiqaa-draw-line {
	from {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	to {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}
}

@keyframes irtiqaa-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.irtiqaa-chart__readout {
	position: absolute;
	transform: translate(-50%, calc(-100% - 12px));
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	padding: 0.3rem 0.6rem;
	border-radius: 0.5rem;
	white-space: nowrap;
	pointer-events: none;
}

/* Rank table. */
.irtiqaa-ranks {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-ranks th,
.irtiqaa-ranks td {
	text-align: start;
	padding: 0.7rem 0.5rem;
	border-block-end: var(--wp--custom--hairline);
}

.irtiqaa-ranks thead th {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-ranks tbody th {
	font-weight: 400;
}

.irtiqaa-ranks__from,
.irtiqaa-ranks__to {
	font-variant-numeric: tabular-nums;
	width: 5.5rem;
}

.irtiqaa-ranks__from {
	color: var(--wp--preset--color--muted);
}

.irtiqaa-ranks__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-ranks__badge.is-up {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Process
 * ------------------------------------------------------------------------- */

.irtiqaa-process {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-process__head {
	max-width: 38rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-process__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.irtiqaa-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

/* The rule above each step is the gold line again, used as a progress track
   rather than a divider. It is the one device carried from the old brand. */
.irtiqaa-step {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--line--weight) solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.irtiqaa-step__num {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-step__title {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--large);
}

.irtiqaa-step__body {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

/* ---------------------------------------------------------------------------
 * FAQ
 *
 * details/summary, not a scripted accordion: keyboard-operable for free, and
 * findable by the browser's own in-page search.
 * ------------------------------------------------------------------------- */

.irtiqaa-faq {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
}

/* Two columns once there is room for them.
 *
 * The questions are a narrow measure by nature — a list of one-line summaries
 * over short answers — so a full-width section left a third of the row empty
 * beside them. The heading and its lede move into that space and stay there
 * while the list is read, which also means the question you have open is never
 * scrolled away from the thing that frames it. */
.irtiqaa-faq__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.irtiqaa-faq__inner {
		grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
		align-items: start;
	}

	.irtiqaa-faq__head {
		position: sticky;
		/* The same offset the article's contents rail uses, so anything that
		   parks under the header on this site parks at one height. */
		top: calc(var(--wp--preset--spacing--70) + 3rem);
	}
}

.irtiqaa-faq__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	text-wrap: balance;
}

.irtiqaa-faq__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 34ch;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-faq__list {
	border-block-start: var(--wp--custom--hairline);
}

.irtiqaa-faq__item {
	border-block-end: var(--wp--custom--hairline);
}

.irtiqaa-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	list-style: none;
}

/* Remove the native marker in both engines; the sign below replaces it. */
.irtiqaa-faq__q::-webkit-details-marker {
	display: none;
}

.irtiqaa-faq__q::marker {
	content: "";
}

.irtiqaa-faq__q:hover {
	color: var(--wp--preset--color--accent);
}

/* A plus that becomes a minus. Two pseudo-elements, transform only. */
.irtiqaa-faq__sign {
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.irtiqaa-faq__sign::before,
.irtiqaa-faq__sign::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transition: transform 0.25s ease;
}

.irtiqaa-faq__sign::after {
	transform: rotate(90deg);
}

.irtiqaa-faq__item[open] .irtiqaa-faq__sign::after {
	transform: rotate(0deg);
}

.irtiqaa-faq__a {
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--40);
	max-width: 46rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-evidence__tab,
	.irtiqaa-chart__dot,
	.irtiqaa-faq__sign::before,
	.irtiqaa-faq__sign::after {
		transition: none;
	}

	/* The line is drawn instantly rather than not at all, so the chart never
	   sits in its hidden starting state for a reader who asked for no motion. */
	.js .irtiqaa-chart__line,
	.js .irtiqaa-chart__area {
		stroke-dashoffset: 0;
		opacity: 1;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Trailing cursor
 *
 * Additive, never a replacement: the native cursor stays visible. A lagging
 * div is not a pointer, and anyone on a machine that drops frames would lose
 * the ability to aim. Fine pointers only, and never under reduced motion —
 * assets/js/experience.js does not even build it otherwise.
 * ------------------------------------------------------------------------- */

.irtiqaa-cursor {
	position: fixed;
	/* Physical, and correctly so: a script places this with a transform in
	   viewport coordinates, so the origin must be the same corner in both
	   writing modes. inset-inline-start would flip it under RTL and the
	   maths would point off the other edge. */
	top: 0;
	left: 0;
	z-index: 300;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
	opacity: 0;
	pointer-events: none;
	/* Transform is written every frame by script, so it must not transition —
	   a transition on transform would fight the rAF loop. Only the cheap
	   properties animate. */
	transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease,
		background-color 0.25s ease, border-color 0.25s ease;
}

.irtiqaa-cursor.is-visible {
	opacity: 1;
}

.irtiqaa-cursor.is-active {
	width: 3.25rem;
	height: 3.25rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	border-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Entry
 *
 * Deliberately not a curtain. A full-screen preloader makes the curtain itself
 * the Largest Contentful Paint element and pushes the real LCP behind however
 * long it runs — on a site whose own Lighthouse report is meant to be a sales
 * asset. If that trade is wanted it is a decision to take knowingly, not a
 * default.
 *
 * So the entry animates transform and nothing else, in pure CSS. Every word is
 * fully opaque on the first frame and simply arrives from a little below, so
 * no text waits on script, nothing is a non-paintable opacity:0 while the
 * animation runs, and the hero reads correctly if the animation never runs at
 * all. It costs nothing against LCP and it is the one orchestrated moment
 * motion.md asks for.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.irtiqaa-hero__copy > *,
	.irtiqaa-hero .irtiqaa-rankcard {
		animation: irtiqaa-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.irtiqaa-hero__copy > :nth-child(1) { animation-delay: 0.05s; }
	.irtiqaa-hero__copy > :nth-child(2) { animation-delay: 0.14s; }
	.irtiqaa-hero__copy > :nth-child(3) { animation-delay: 0.23s; }
	.irtiqaa-hero__copy > :nth-child(4) { animation-delay: 0.32s; }
	.irtiqaa-hero .irtiqaa-rankcard     { animation-delay: 0.42s; }
}

@keyframes irtiqaa-enter {
	from {
		transform: translateY(1.5rem);
	}

	to {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Inherited service copy
 *
 * The existing services posts are classic-editor HTML carrying Bootstrap
 * classes this theme does not load. It renders unstyled rather than broken,
 * and it stays on the page because deleting a page's content to make a layout
 * tidy is not a design decision. Each service loses this block as its copy is
 * rewritten into data/services.json.
 * ------------------------------------------------------------------------- */

.irtiqaa-legacy-content {
	padding-block: var(--wp--preset--spacing--60);
}

.irtiqaa-legacy-content :is(h1, h2, h3, h4) {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.irtiqaa-legacy-content p {
	color: var(--wp--preset--color--muted);
}

/* Inherited media carries its own widths and alignment classes, so cap it
   here rather than trusting the old markup to stay inside the column. */
.irtiqaa-legacy-content :is(img, svg, video, iframe) {
	max-width: 100%;
	height: auto;
}

.irtiqaa-legacy-content img {
	border-radius: 0.75rem;
}

/* Inherited markup routinely sets its own widths; keep it inside the column. */
.irtiqaa-legacy-content :is(div, section, table) {
	max-width: 100%;
}

.irtiqaa-legacy-content table {
	display: block;
	overflow-x: auto;
}

/* A hero with no card should not sit in a two-column grid. The wrapper keeps
   its width and centring so the section still lines up with every other one;
   only the measure of the copy changes. */
@media (min-width: 900px) {
	.irtiqaa-hero__inner.is-single {
		grid-template-columns: 1fr;
	}
}

.irtiqaa-hero__inner.is-single .irtiqaa-hero__copy {
	max-width: 52rem;
}

/* ---------------------------------------------------------------------------
 * Pages, posts, archives
 *
 * Until now the theme had index.html and the services template and nothing
 * else, so every page and post fell through to the blog loop: /about-us/
 * rendered a list of recent posts, with no h1 and none of its own content.
 * These are the templates that were missing.
 * ------------------------------------------------------------------------- */

.irtiqaa-pagehead,
.irtiqaa-archivehead {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* The page head is start-aligned like every other section. Left inside a
   constrained layout, core gives each child auto inline margins and the whole
   header reads as centred, which nothing else on the site is. */
.irtiqaa-pagehead > * {
	margin-inline: 0;
}

.irtiqaa-pagehead__title,
.irtiqaa-archivehead__title {
	margin: 0;
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	text-wrap: balance;
}

/* A long-form headline needs a longer measure than a page title. */
.irtiqaa-pagehead__title {
	max-width: 26ch;
}

.irtiqaa-archivehead__lede,
.irtiqaa-pagehead__lede {
	margin-block: var(--wp--preset--spacing--30) 0;
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}

.irtiqaa-pagehead__media img,
.wp-block-post-featured-image.irtiqaa-pagehead__media img {
	border-radius: 1.25rem;
	width: 100%;
	height: auto;
}

/* Post meta. Numerals stay Western and tabular so a row of dates does not
   shuffle horizontally as the numbers change. */
.irtiqaa-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-meta__cat {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
}

.irtiqaa-meta__cat:hover,
.irtiqaa-meta__cat:focus-visible {
	border-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Long-form content
 *
 * Thirty-one posts of classic-editor HTML land here. Style the elements
 * directly rather than expecting block classes, because most of this content
 * has none.
 * ------------------------------------------------------------------------- */

.irtiqaa-prose {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.irtiqaa-prose p,
.irtiqaa-prose li {
	line-height: 1.95;
}

/*
 * A word longer than the column breaks rather than pushing the page.
 *
 * These articles were typed by people, not generated, and one of them carries
 * a 44-character rule of `=` left over from a plain-text draft. At 360px the
 * column is 297px wide, that run cannot wrap, and the whole document scrolled
 * 31px sideways — the one horizontal overflow across all 31 posts.
 *
 * Editing that paragraph would fix that paragraph. `overflow-wrap` fixes the
 * class of problem: a pasted URL, a long English compound, an ASCII divider.
 * It only ever acts when a word genuinely does not fit, so ordinary Arabic and
 * Latin prose is untouched, and `break-word` rather than `anywhere` so the
 * line box is still sized by the unbroken word where there is room for it.
 */
.irtiqaa-prose {
	overflow-wrap: break-word;
}

.irtiqaa-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.irtiqaa-prose :is(h2, h3, h4) {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	text-wrap: balance;
}

.irtiqaa-prose :is(ul, ol) {
	padding-inline-start: 1.5rem;
	display: grid;
	gap: 0.6rem;
}

.irtiqaa-prose li::marker {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-prose :is(img, video, iframe, svg) {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
}

.irtiqaa-prose blockquote {
	margin: var(--wp--preset--spacing--50) 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: var(--wp--custom--line--weight) solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--large);
}

.irtiqaa-prose a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Wide content scrolls inside its own box; the page itself never scrolls
   sideways. */
.irtiqaa-prose table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	width: 100%;
}

.irtiqaa-prose :is(th, td) {
	padding: 0.6rem 0.75rem;
	border: var(--wp--custom--hairline);
	text-align: start;
}

.irtiqaa-prose pre {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--deep);
	border-radius: 0.75rem;
	direction: ltr;
	text-align: left;
}

/* Inherited markup routinely sets its own widths and colours. */
.irtiqaa-prose :is(div, section) {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Card grid
 * ------------------------------------------------------------------------- */

/* The loop reads at wide size like every other section. Left inside a
   constrained layout it inherited contentSize and produced 208px columns,
   which is a list of thumbnails rather than a card grid. */
.irtiqaa-loop {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--60);
}

.irtiqaa-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.irtiqaa-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.irtiqaa-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Subgrid so media, meta, title and excerpt line up across the row. Without
 * it a post with no featured image pulls its whole card upward and the grid
 * reads as broken rather than as a grid. The fallback below is the plain
 * column, which is what browsers without subgrid get and what this looked
 * like before.
 */
.irtiqaa-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

@supports (grid-template-rows: subgrid) {
	@media (min-width: 600px) {
		.irtiqaa-cards {
			grid-template-rows: auto auto auto auto;
		}

		.irtiqaa-cards > .irtiqaa-card,
		.irtiqaa-cards > li {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			gap: 0.35rem;
		}
	}
}

.irtiqaa-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 1rem;
	/* Only the image moves on hover, and only by a hair. A card that lifts,
	   scales and shadows on hover is the template tell motion.md warns about. */
	transition: opacity 0.3s ease;
}

.irtiqaa-card:hover .irtiqaa-card__media img {
	opacity: 0.85;
}

.irtiqaa-card__title {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.irtiqaa-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.irtiqaa-card__title a:hover,
.irtiqaa-card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.irtiqaa-card__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

.irtiqaa-card__date {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* The related list reuses the card grid but never needs three wide columns. */
.irtiqaa-related {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--hairline);
}

.irtiqaa-related__title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-large);
}

/* ---------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------- */

.irtiqaa-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: 0.5rem;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-pagination :is(a, span) {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.6rem;
	border-radius: 0.75rem;
	border: var(--wp--custom--hairline);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-pagination a:hover,
.irtiqaa-pagination a:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.irtiqaa-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Conversion band
 *
 * The same ask the footer makes, placed where a reader has just finished
 * something.
 * ------------------------------------------------------------------------- */

/*
 * The closing band shares the footer's ground so the two read as one block.
 * On the raised surface colour it sat as a separate slab with a visible step
 * above the footer, which is what made the page look like it stopped rather
 * than ended. The footer's own gold rule is the only divider needed.
 */
.irtiqaa-band {
	background: var(--wp--preset--color--deep);
}

.irtiqaa-band__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
}

.irtiqaa-band__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	max-width: 24ch;
	text-wrap: balance;
}

.irtiqaa-band__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.irtiqaa-band__actions {
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* ---------------------------------------------------------------------------
 * 404
 *
 * An empty state invites an action rather than apologising. Legacy post URLs
 * are caught by inc/redirects.php long before anyone sees this.
 * ------------------------------------------------------------------------- */

.irtiqaa-404 {
	padding-block: var(--wp--preset--spacing--80);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
}

.irtiqaa-404__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.irtiqaa-404__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-404__links {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.irtiqaa-404__links a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.irtiqaa-404__links a:hover,
.irtiqaa-404__links a:focus-visible {
	text-decoration: underline;
}

.irtiqaa-404__search form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--30);
}

.irtiqaa-404__search :is(input[type="search"], .wp-block-search__input) {
	padding: 0.8rem 1rem;
	border-radius: 0.75rem;
	border: var(--wp--custom--hairline);
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	min-width: min(20rem, 100%);
}

.irtiqaa-404__search :is(input[type="submit"], button) {
	padding: 0.8rem 1.5rem;
	border-radius: 999px;
	border: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Home
 *
 * The front page used to fall through to the blog loop, so the site's most
 * important page was a list of recent posts. No stats band here: every figure
 * in the live one is an unset theme_mod falling back to a hardcoded default.
 * The evidence panel does that job with numbers that carry a source.
 * ------------------------------------------------------------------------- */

.irtiqaa-hero--home {
	/* One step down the scale at each end. The headline and the booking button
	 * are the whole hero; the space above them was sized when there were three
	 * drifting objects to give room to. */
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.irtiqaa-hero--home .irtiqaa-hero__title {
	max-width: 18ch;
}

.irtiqaa-hero--home .irtiqaa-hero__lede {
	max-width: 44ch;
}

/* Trust marks sit high, because a Saudi buyer checks the registration before
   they read a claim. A quiet row, not a badge wall. */
.irtiqaa-trust {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--hairline);
}

/* Straight after the ticker the two are one block: same ground, no seam.
   blockGap puts a margin between every child of main, which left a strip of
   page background showing through between them. */
.irtiqaa-ticker + .irtiqaa-trust {
	margin-block-start: 0;
	background: var(--wp--preset--color--deep);
	max-width: none;
	padding-inline: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.irtiqaa-ticker + .irtiqaa-trust > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.irtiqaa-trust__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

.irtiqaa-trust__list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-trust__list a:hover,
.irtiqaa-trust__list a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-trust__list img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	object-fit: contain;
}

.irtiqaa-home-services,
.irtiqaa-home-posts {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.irtiqaa-home-services__head {
	max-width: 34rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-home-services__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

/* The section head and its "all posts" link share a baseline. */
.irtiqaa-home-posts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-home-posts__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.irtiqaa-home-posts__all {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-home-posts__all:hover,
.irtiqaa-home-posts__all:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Contact
 *
 * /contact-us/ has no content in the database and ranks at position 4.1 with
 * 1,894 impressions. An empty page at position 4 is the worst combination on
 * the site, so the template supplies the details from inc/links.php.
 * ------------------------------------------------------------------------- */

.irtiqaa-contact {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

/* The lede and the expectations sit side by side once there is room. The page
   was a right-aligned column with the other half of every row empty, which on
   a contact page reads less as restraint than as a page that ran out of things
   to say — on the one page where a visitor is deciding whether to write. */
@media (min-width: 860px) {
	.irtiqaa-contact__lead {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}

.irtiqaa-contact__expect {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 0;
	border-block-start: var(--wp--custom--hairline);
}

.irtiqaa-contact__expect-item {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--hairline);
}

/* No letter-spacing: this label is Arabic, and Arabic is a connected script —
   tracking it apart breaks the joins. See .claude/rules/rtl-arabic.md. */
.irtiqaa-contact__expect-key {
	margin: 0 0 0.3rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-contact__expect-val {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	max-width: 40ch;
}

.irtiqaa-contact__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.75;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-contact__actions {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.irtiqaa-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.irtiqaa-contact__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.irtiqaa-contact__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.irtiqaa-contact__item {
	padding: var(--wp--preset--spacing--40);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
	display: grid;
	gap: 0.3rem;
	align-content: start;
}

.irtiqaa-contact__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.irtiqaa-contact__value {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.irtiqaa-contact__value:hover,
.irtiqaa-contact__value:focus-visible {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-contact__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * Stats band
 *
 * Values come from data/agency.json. Until it is filled in the band shows
 * dashes and says so, because the live site's band is four invented numbers
 * that contradict each other and a plausible placeholder is how that happens
 * again.
 * ------------------------------------------------------------------------- */

.irtiqaa-stats {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.irtiqaa-stats__warning {
	margin: 0 0 var(--wp--preset--spacing--40);
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-radius: 0.6rem;
	padding: 0.45rem 0.85rem;
	line-height: 1.6;
}

.irtiqaa-stats__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
	.irtiqaa-stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.irtiqaa-stat {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--line--weight) solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.irtiqaa-stat__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

/* A dash is not a number; it should not shout like one. */
.irtiqaa-stats.is-placeholder .irtiqaa-stat__value {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 60%, transparent);
}

.irtiqaa-stat__label {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * Comments
 *
 * 38 posts have comments open and the site has never received one. The theme
 * renders them because the setting says they are open — a form that is
 * enabled but invisible is worse than either choice made deliberately. Closing
 * them sitewide is a reasonable call and would make this section disappear on
 * its own.
 * ------------------------------------------------------------------------- */

.irtiqaa-comments {
	padding-block: var(--wp--preset--spacing--60);
}

.irtiqaa-comments .wp-block-comments-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-end: var(--wp--preset--spacing--40);
}

.irtiqaa-comments .wp-block-comment-template li {
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--hairline);
	list-style: none;
}

.irtiqaa-comments :is(.wp-block-comment-author-name, .wp-block-comment-date) {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-comments .wp-block-comment-content {
	margin-block: 0.5rem;
	line-height: 1.9;
}

.irtiqaa-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	max-width: 100%;
	padding: 0.8rem 1rem;
	border-radius: 0.75rem;
	border: var(--wp--custom--hairline);
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1.7;
}

.irtiqaa-comments :is(input, textarea)::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent);
}

.irtiqaa-comments label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-comments p {
	margin-block: var(--wp--preset--spacing--30);
}

.irtiqaa-comments :is(.wp-block-post-comments-form .submit, input[type="submit"]) {
	padding: 0.9rem 1.75rem;
	border-radius: 999px;
	border: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.irtiqaa-comments .comment-form-cookies-consent {
	display: flex;
	align-items: start;
	gap: 0.6rem;
}

.irtiqaa-comments .comment-form-cookies-consent input {
	width: auto;
	margin-block-start: 0.3rem;
}

/* ---------------------------------------------------------------------------
 * Per-service infographics
 *
 * Every service page used to carry the same SEO evidence panel, so the same
 * section repeated six times and the pages were indistinguishable. Each
 * service now argues its own case with its own diagram.
 *
 * Built from HTML wherever the shape allows: a funnel or a roadmap made of
 * divs reflows at 360px, mirrors under RTL from logical properties alone, and
 * a screen reader can read it. SVG only where the geometry needs it.
 * ------------------------------------------------------------------------- */

.irtiqaa-visual {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.irtiqaa-visual__head {
	max-width: 42rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-visual__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-visual__lede {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
}

.irtiqaa-visual__body {
	background: var(--wp--preset--color--deep);
	border: var(--wp--custom--hairline);
	border-radius: 1.5rem;
	padding: var(--wp--preset--spacing--50);
}

.irtiqaa-visual__note {
	margin-block: var(--wp--preset--spacing--30) 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* --- Core Web Vitals gauges ---------------------------------------------- */

.irtiqaa-gauges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	text-align: center;
}

@media (min-width: 700px) {
	.irtiqaa-gauges {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.irtiqaa-gauge__dial {
	position: relative;
	max-width: 10rem;
	margin-inline: auto;
}

.irtiqaa-gauge svg {
	display: block;
	width: 100%;
	height: auto;
	/* Start the arc at the bottom-left so the 270-degree gap sits at the
	   bottom, where a gauge's gap belongs. Rotation is visual, not
	   directional, so it is the same in both writing directions. */
	transform: rotate(135deg);
}

.irtiqaa-gauge__track,
.irtiqaa-gauge__fill {
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
}

.irtiqaa-gauge__track {
	stroke: color-mix(in srgb, var(--wp--preset--color--muted) 22%, transparent);
}

.irtiqaa-gauge__fill {
	stroke: var(--wp--preset--color--accent);
}

.irtiqaa-gauge.is-warn .irtiqaa-gauge__fill {
	stroke: var(--wp--preset--color--muted);
}

.irtiqaa-gauge__value {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-items: center;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-gauge__key {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.04em; /* Latin acronym only; Arabic is guarded above. */
}

.irtiqaa-gauge__label {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-gauge__target {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* --- Funnel --------------------------------------------------------------- */

.irtiqaa-funnel {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	counter-reset: funnel;
}

.irtiqaa-funnel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-block-end: 0.5rem;
}

.irtiqaa-funnel__label {
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-funnel__value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

/* The bar is a track with a filled span, so the shrinking width reads against
   something. Width is a custom property, animated only via transform on the
   inner span to keep it off the layout path. */
.irtiqaa-funnel__bar {
	height: 0.85rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--muted) 14%, transparent);
	overflow: hidden;
}

.irtiqaa-funnel__bar > span {
	display: block;
	width: var(--w);
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(
		to var(--irtiqaa-flow, left),
		var(--wp--preset--color--accent),
		color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent)
	);
	transform-origin: left center;
}

/* The gradient runs along the reading direction. */
[dir="rtl"] .irtiqaa-funnel__bar > span {
	--irtiqaa-flow: left;
	margin-inline-start: 0;
}

.irtiqaa-funnel__drop {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* --- Brand board ---------------------------------------------------------- */

.irtiqaa-board {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.irtiqaa-board {
		grid-template-columns: 1fr 1fr;
	}

	.irtiqaa-board__panel:last-child {
		grid-column: 1 / -1;
	}
}

.irtiqaa-board__caption {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.irtiqaa-swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.irtiqaa-swatch {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-swatch__chip {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.6rem;
	border: var(--wp--custom--hairline);
}

.irtiqaa-swatch__hex {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-typescale {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.irtiqaa-typescale li {
	display: grid;
	gap: 0.2rem;
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--hairline);
}

.irtiqaa-typescale__sample {
	line-height: 1.2;
}

.irtiqaa-typescale__meta {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-clearspace svg {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
}

.irtiqaa-clearspace__outer {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	stroke-dasharray: 5 5;
}

.irtiqaa-clearspace__inner {
	fill: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
	stroke: var(--wp--custom--line--color);
}

.irtiqaa-clearspace__mark {
	fill: var(--wp--preset--color--contrast);
	font-size: 20px;
	font-weight: 600;
}

.irtiqaa-clearspace__dim {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1;
}

.irtiqaa-clearspace__dim-label {
	fill: var(--wp--preset--color--accent);
	font-size: 12px;
}

/* --- Publishing calendar -------------------------------------------------- */

.irtiqaa-calendar__legend {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-calendar__legend li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.irtiqaa-dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 999px;
	display: inline-block;
	background: var(--wp--preset--color--muted);
}

.irtiqaa-dot.is-reel  { background: var(--wp--preset--color--accent); }
.irtiqaa-dot.is-post  { background: var(--wp--preset--color--contrast); }
.irtiqaa-dot.is-story { background: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }
.irtiqaa-dot.is-offer {
	background: transparent;
	border: 2px solid var(--wp--preset--color--accent);
}

.irtiqaa-calendar__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.irtiqaa-calendar__grid th {
	padding-block-end: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.irtiqaa-calendar__grid td {
	height: 3rem;
	border: var(--wp--custom--hairline);
	text-align: center;
	vertical-align: middle;
}

/* --- Roadmap -------------------------------------------------------------- */

.irtiqaa-roadmap {
	overflow-x: auto;
	overflow-y: hidden;
}

.irtiqaa-roadmap__scale {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	display: grid;
	grid-template-columns: 9rem repeat(12, minmax(1.6rem, 1fr));
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	text-align: center;
	min-width: 34rem;
}

/* The first column is the track-name gutter; the scale skips it. */
.irtiqaa-roadmap__scale li:first-child {
	grid-column: 2;
}

.irtiqaa-roadmap__tracks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	min-width: 34rem;
}

.irtiqaa-roadmap__track {
	display: grid;
	grid-template-columns: 9rem repeat(12, minmax(1.6rem, 1fr));
	gap: 0.25rem;
	align-items: center;
}

.irtiqaa-roadmap__name {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* grid-column-start is logical, so under RTL month 1 sits on the right with
   no special casing. The +1 skips the name gutter. */
.irtiqaa-roadmap__bar {
	grid-column: calc(var(--start) + 1) / span var(--span);
	height: 1.6rem;
	border-radius: 0.5rem;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--wp--preset--color--accent) 85%, transparent),
		color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent)
	);
}

.irtiqaa-roadmap__track:nth-child(even) .irtiqaa-roadmap__bar {
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--wp--preset--color--support) 90%, transparent),
		color-mix(in srgb, var(--wp--preset--color--support) 40%, transparent)
	);
}

@media (max-width: 600px) {
	.irtiqaa-visual__body {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
		border-radius: 1rem;
	}

	.irtiqaa-roadmap__scale,
	.irtiqaa-roadmap__track {
		grid-template-columns: 6rem repeat(12, minmax(1.2rem, 1fr));
	}
}

/* Generated service marks, replacing the old theme's stock vector clipart. */
.irtiqaa-card__media.is-mark {
	display: block;
	border-radius: 1rem;
	background:
		radial-gradient(120% 120% at 80% 0%,
			color-mix(in srgb, var(--wp--preset--color--surface) 75%, transparent),
			var(--wp--preset--color--deep));
	border: var(--wp--custom--hairline);
	overflow: hidden;
}

.irtiqaa-mark {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 300 / 190;
}

.irtiqaa-mark .s-line {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--muted) 45%, transparent);
	stroke-width: 2;
}

.irtiqaa-mark .s-stroke {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 3;
	stroke-linecap: round;
}

.irtiqaa-mark .s-stroke-thin {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--muted) 45%, transparent);
	stroke-width: 2;
	stroke-linecap: round;
}

.irtiqaa-mark .s-fill {
	fill: var(--wp--preset--color--accent);
	stroke: none;
}

.irtiqaa-mark .s-fill-soft {
	fill: color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	stroke: none;
}

/* One quiet move on hover, on the mark only. */
.irtiqaa-card--service .irtiqaa-mark .s-fill,
.irtiqaa-card--service .irtiqaa-mark .s-fill-soft {
	transition: opacity 0.3s ease;
}

.irtiqaa-card--service:hover .irtiqaa-mark .s-fill,
.irtiqaa-card--service:hover .irtiqaa-mark .s-fill-soft {
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-card--service .irtiqaa-mark :is(.s-fill, .s-fill-soft) {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Client work and partners
 *
 * The old site ran the nine partner logos through a marquee that repeated them
 * — 1 to 9, then 1 to 5 twice. Padding a client list is the tell that the list
 * is short. Nine shown once is the stronger claim.
 * ------------------------------------------------------------------------- */

.irtiqaa-reel,
.irtiqaa-partners {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.irtiqaa-reel__head,
.irtiqaa-partners__head {
	max-width: 38rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-reel__title,
.irtiqaa-partners__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-reel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.irtiqaa-reel__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Nothing autoplays: three videos deciding the LCP of a page arguing that this
   agency builds fast sites would be the site contradicting itself. */
.irtiqaa-reel__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--wp--preset--color--deep);
	border-radius: 1.25rem;
	border: var(--wp--custom--hairline);
}

.irtiqaa-reel__caption {
	margin: var(--wp--preset--spacing--30) 0 0;
	display: grid;
	gap: 0.2rem;
}

.irtiqaa-reel__name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.irtiqaa-reel__note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* The wall. Logos arrive as mixed artwork on mixed grounds, so each sits in an
   identical tile and is normalised to a common height — otherwise the biggest
   file wins the page. */
.irtiqaa-partners__wall {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: color-mix(in srgb, var(--wp--preset--color--muted) 18%, transparent);
	border: var(--wp--custom--hairline);
	border-radius: 1.25rem;
	overflow: hidden;
}

@media (min-width: 560px) {
	.irtiqaa-partners__wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.irtiqaa-partners__wall {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.irtiqaa-partners__wall li {
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--deep);
	min-height: 7rem;
}

.irtiqaa-partners__wall img {
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 3rem;
	object-fit: contain;
	/* Most of these marks are dark-on-white; on a navy ground they would each
	   carry their own bright rectangle. Dimming settles the wall, and hover
	   restores the real thing. */
	opacity: 0.75;
	filter: grayscale(1) brightness(1.6);
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.irtiqaa-partners__wall li:hover img {
	opacity: 1;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-partners__wall img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Partner marquee
 *
 * Edges fade with a mask rather than a gradient overlay, so the page
 * background shows through instead of being hardcoded into the fade. The row
 * is duplicated in markup and translated by exactly half the track, which is
 * what makes the loop seamless.
 * ------------------------------------------------------------------------- */

.irtiqaa-marquee {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--40);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.irtiqaa-marquee__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	width: max-content;
	animation: irtiqaa-marquee 42s linear infinite;
}

/* The row drifts towards the reading end, not always to the left. */
[dir="rtl"] .irtiqaa-marquee__track {
	animation-name: irtiqaa-marquee-rtl;
}

.irtiqaa-marquee:hover .irtiqaa-marquee__track,
.irtiqaa-marquee:focus-within .irtiqaa-marquee__track,
.irtiqaa-marquee.is-paused .irtiqaa-marquee__track {
	animation-play-state: paused;
}

.irtiqaa-marquee__track li {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 8rem;
}

.irtiqaa-marquee__track img {
	max-width: 9rem;
	max-height: 3.25rem;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Most marks are dark-on-white; on a navy ground each would carry its own
	   bright rectangle. Dimming settles the row, hover restores the real logo. */
	opacity: 0.8;
	filter: grayscale(1) brightness(1.7);
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.irtiqaa-marquee__track li:hover img {
	opacity: 1;
	filter: none;
}
/*
 * Four keyframes, because the safe direction depends on the writing mode.
 *
 * A max-content flex track is placed against the container's start edge: its
 * LEFT edge in LTR, its RIGHT edge in RTL. The animation must never pull the
 * track off the edge the window is anchored to, or a gap opens there and the
 * row reads as having ended.
 *
 *   LTR: the box sits at [L, L+W]. Negative travel is safe; positive opens a
 *        gap on the left.
 *   RTL: the box sits at [R-W, R]. Positive travel is safe; negative opens a
 *        gap on the right — which is what broke the second row and the ticker.
 *
 * A row travelling the other way starts at the far end and returns to zero,
 * which keeps the same edge covered the whole time.
 */
@keyframes irtiqaa-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes irtiqaa-marquee-back {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

@keyframes irtiqaa-marquee-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

@keyframes irtiqaa-marquee-rtl-back {
	from { transform: translateX(50%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	/* With the animation off, the duplicate row is just noise. */
	.irtiqaa-marquee__track li[aria-hidden="true"] {
		display: none;
	}

	.irtiqaa-marquee__track img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * About
 * ------------------------------------------------------------------------- */

.irtiqaa-about {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.irtiqaa-about__lead {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 24ch;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-about__body {
	margin-block-start: var(--wp--preset--spacing--40);
	max-width: 52ch;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	line-height: 1.95;
}

.irtiqaa-pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.irtiqaa-pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.irtiqaa-pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.irtiqaa-pillar {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--line--weight) solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.irtiqaa-pillar__num {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-pillar__title {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--large);
}

.irtiqaa-pillar__body {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

/* ---------------------------------------------------------------------------
 * Stats band, revised
 *
 * The warning box read as a broken page. A tag beside the heading says the
 * same thing without shouting it, and the figures are real numbers again.
 * ------------------------------------------------------------------------- */

.irtiqaa-stats__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin-block-end: var(--wp--preset--spacing--40);
}

.irtiqaa-stats__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.irtiqaa-tag {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * The closing band joins the footer
 *
 * A gap between the last section and the footer made every page look like it
 * had stopped rather than ended. The band and the footer share a ground, so
 * the seam between them should not read as one.
 * ------------------------------------------------------------------------- */

.irtiqaa-band {
	margin-block-end: 0;
	padding-block-end: 0;
}

/*
 * theme.json blockGap puts a margin between .wp-site-blocks children, which
 * left a strip of page background between the closing band and the footer.
 * The two share a ground; the seam should not read as one.
 */
footer.wp-block-template-part {
	margin-block-start: 0;
}

.irtiqaa-band__inner {
	padding-block-end: var(--wp--preset--spacing--70);
}

/* ---------------------------------------------------------------------------
 * Home rhythm
 *
 * With ten sections the page needs a beat, or it reads as one long column.
 * Alternate sections sit on the raised ground so the eye has something to
 * measure against.
 * ------------------------------------------------------------------------- */

.irtiqaa-home-posts {
	background: color-mix(in srgb, var(--wp--preset--color--deep) 55%, transparent);
}

.irtiqaa-home-posts,
.irtiqaa-process,
.irtiqaa-about,
.irtiqaa-partners,
.irtiqaa-home-services,
.irtiqaa-stats,
.irtiqaa-trust,
.irtiqaa-rows,
.irtiqaa-voices,
.irtiqaa-reel2,
.irtiqaa-pr {
	max-width: none;
	padding-inline: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

/* The inner content keeps the wide measure; only the ground runs full width. */
.irtiqaa-home-posts > *,
.irtiqaa-process > *,
.irtiqaa-about > *,
.irtiqaa-partners > *,
.irtiqaa-home-services > *,
.irtiqaa-stats > *,
.irtiqaa-trust > *,
.irtiqaa-rows > *,
.irtiqaa-voices > *,
.irtiqaa-reel2 > *,
.irtiqaa-pr > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Light sections
 *
 * The references all break their scroll with a contrasting ground — daima and
 * copula go light, brilliant and armory stay dark. Alternating gives the page
 * a spine instead of one continuous navy column.
 *
 * The muted grey that works on navy fails WCAG AA on paper, so a light section
 * redefines the tokens it needs rather than inheriting them. Everything inside
 * reads from these, so no component needs to know which ground it is on.
 * ------------------------------------------------------------------------- */

.is-light {
	--irtiqaa-ink: var(--wp--preset--color--base);
	--irtiqaa-ink-soft: color-mix(in srgb, var(--wp--preset--color--base) 68%, var(--wp--preset--color--paper));
	--irtiqaa-rule: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);

	background: var(--wp--preset--color--paper);
	color: var(--irtiqaa-ink);
}

.is-light :is(h1, h2, h3, h4) {
	color: var(--irtiqaa-ink);
}

.is-light .irtiqaa-eyebrow {
	color: var(--irtiqaa-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Isometric objects
 * ------------------------------------------------------------------------- */

.irtiqaa-iso {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.irtiqaa-iso .i-line,
.irtiqaa-iso .i-ghost,
.irtiqaa-iso .i-accent {
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.irtiqaa-iso .i-line {
	stroke: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent);
	stroke-width: 1.25;
}

/* The ground plane sits back so the object reads as standing on something. */
.irtiqaa-iso .i-ghost {
	stroke: color-mix(in srgb, var(--wp--preset--color--muted) 26%, transparent);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.irtiqaa-iso .i-accent {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.6;
}

.is-light .irtiqaa-iso .i-line {
	stroke: color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
}

.is-light .irtiqaa-iso .i-ghost {
	stroke: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
}

/* ---------------------------------------------------------------------------
 * Services as rows
 * ------------------------------------------------------------------------- */

.irtiqaa-rows {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-rows__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-rows__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	flex: 1 1 20rem;
}

/* The count opposite the heading is the daima device: a quiet marker that
   tells you how long the list is before you start reading it. */
.irtiqaa-rows__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	color: color-mix(in srgb, var(--wp--preset--color--muted) 55%, transparent);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-rows__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: var(--wp--custom--hairline);
}

.irtiqaa-row {
	border-block-end: var(--wp--custom--hairline);
}

.irtiqaa-row__link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	text-decoration: none;
	color: inherit;
	position: relative;
}

/* The object is hidden on narrow screens: six drawings stacked above six rows
   is a lot of scrolling for decoration. */
.irtiqaa-row__object {
	display: none;
	width: 8rem;
	flex: none;
}

@media (min-width: 900px) {
	.irtiqaa-row__link {
		grid-template-columns: auto 1fr 9rem auto;
	}

	.irtiqaa-row__object {
		display: block;
	}
}

.irtiqaa-row__num {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	align-self: start;
}

.irtiqaa-row__text {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.irtiqaa-row__name {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.25;
}

.irtiqaa-row__lede {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	max-width: 46ch;
}

.irtiqaa-row__go {
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: var(--wp--custom--hairline);
	color: var(--wp--preset--color--muted);
	transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.irtiqaa-row__go svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* The arrow points along the reading direction. */
[dir="rtl"] .irtiqaa-row__go svg {
	transform: scaleX(-1);
}

.irtiqaa-row__link:hover .irtiqaa-row__name,
.irtiqaa-row__link:focus-visible .irtiqaa-row__name {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-row__link:hover .irtiqaa-row__go,
.irtiqaa-row__link:focus-visible .irtiqaa-row__go {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	transform: translateX(-0.25rem);
}

[dir="ltr"] .irtiqaa-row__link:hover .irtiqaa-row__go {
	transform: translateX(0.25rem);
}

/* ---------------------------------------------------------------------------
 * Testimonials
 *
 * Eight YouTube videos behind a click. The live site mounts eight iframes at
 * once — roughly a megabyte of third-party JavaScript before anyone has
 * decided to watch something — on the site of an agency selling performance.
 * ------------------------------------------------------------------------- */

.irtiqaa-voices {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-voices__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-voices__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	flex: 1 1 20rem;
}

.irtiqaa-voices__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	color: color-mix(in srgb, var(--wp--preset--color--muted) 55%, transparent);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-voices__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.irtiqaa-voices__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.irtiqaa-voices__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.irtiqaa-voice__btn,
.irtiqaa-voice iframe {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 1rem;
	border: var(--wp--custom--hairline);
	background:
		radial-gradient(110% 110% at 70% 10%,
			color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent),
			var(--wp--preset--color--deep));
}

.irtiqaa-voice__btn {
	position: relative;
	cursor: pointer;
	color: inherit;
	font: inherit;
	display: grid;
	align-content: end;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--40);
	text-align: start;
	transition: border-color 0.25s ease;
}

.irtiqaa-voice__btn:hover,
.irtiqaa-voice__btn:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
}

.irtiqaa-voice__play {
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	transition: transform 0.25s ease;
}

.irtiqaa-voice__play svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* The play triangle points along the reading direction. */
[dir="rtl"] .irtiqaa-voice__play svg {
	transform: scaleX(-1);
}

.irtiqaa-voice__btn:hover .irtiqaa-voice__play {
	transform: scale(1.08);
}

.irtiqaa-voice__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.irtiqaa-voice iframe {
	border: 0;
}

.irtiqaa-voices__note {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-row__go,
	.irtiqaa-voice__play,
	.irtiqaa-voice__btn {
		transition: none;
	}

	.irtiqaa-row__link:hover .irtiqaa-row__go,
	.irtiqaa-voice__btn:hover .irtiqaa-voice__play {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Numbers with a trailing sign
 *
 * "20+" contains a neutral character after a digit run, and the bidi algorithm
 * moves it to the other end under RTL — the band was rendering "+20". These
 * are LTR runs and have to be declared as such; the alignment then follows the
 * document so the column still reads from the correct edge.
 * ------------------------------------------------------------------------- */

.irtiqaa-stat__value,
.irtiqaa-tile__delta,
.irtiqaa-funnel__drop,
.irtiqaa-gauge__value {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: left;
}

[dir="rtl"] :is(.irtiqaa-stat__value, .irtiqaa-tile__delta, .irtiqaa-funnel__drop) {
	text-align: right;
}

/* The gauge value is centred inside its dial either way. */
.irtiqaa-gauge__value {
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Service row preview
 *
 * A work sample follows the pointer across the list. Pointer devices only —
 * on touch there is no hover, and a panel chasing a finger is a panel covering
 * the thing being read.
 * ------------------------------------------------------------------------- */

.irtiqaa-rows__list {
	position: relative;
}

.irtiqaa-preview {
	position: absolute;
	/* Physical, and correctly so: a script places this with a transform in
	   viewport coordinates, so the origin must be the same corner in both
	   writing modes. inset-inline-start would flip it under RTL and the
	   maths would point off the other edge. */
	top: 0;
	left: 0;
	z-index: 3;
	width: 20rem;
	aspect-ratio: 4 / 3;
	border-radius: 1rem;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	/* Scale is the only thing that transitions; the position is written every
	   frame by script and must not be fighting a transition. */
	scale: 0.94;
	transition: opacity 0.28s ease, scale 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
	border: var(--wp--custom--hairline);
}

.irtiqaa-preview.is-on {
	opacity: 1;
	scale: 1;
}

.irtiqaa-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-preview {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * The work strip
 *
 * A band that advances as the section crosses the viewport, each frame tilted
 * along a shallow arc. A grid of fifteen thumbnails is a contact sheet; this
 * is the work moving past the reader.
 * ------------------------------------------------------------------------- */

.irtiqaa-strip {
	padding-block: var(--wp--preset--spacing--70);
	overflow: hidden;
}

.irtiqaa-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-strip__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
}

.irtiqaa-strip__meta {
	margin: 0;
	color: var(--irtiqaa-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* The viewport scrolls natively too, so the band stays usable on touch and
   with a keyboard where the scroll-linked transform does not apply. */
.irtiqaa-strip__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.irtiqaa-strip__viewport::-webkit-scrollbar {
	display: none;
}

.irtiqaa-strip__track {
	list-style: none;
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	display: flex;
	gap: var(--wp--preset--spacing--40);
	width: max-content;
	will-change: transform;
}

.irtiqaa-frame {
	flex: none;
	width: clamp(13rem, 22vw, 20rem);
	transition: none;
	will-change: transform;
}

.irtiqaa-frame img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	box-shadow: 0 18px 40px rgb(0 23 47 / 14%);
}

.irtiqaa-frame__caption {
	margin: 0.7rem 0 0;
	display: grid;
	gap: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-frame__name {
	font-weight: 600;
	color: var(--irtiqaa-ink);
}

.irtiqaa-frame__note {
	color: var(--irtiqaa-ink-soft);
	line-height: 1.7;
}

/* Reduced motion: no bend, no scroll-linking — a plain scrollable row. */
.irtiqaa-strip.is-static .irtiqaa-strip__track,
.irtiqaa-strip.is-static .irtiqaa-frame {
	transform: none !important;
}

/* ---------------------------------------------------------------------------
 * Partner logos, larger
 *
 * They were 9rem wide and 3.25rem tall, which on a 15-mark row read as a strip
 * of grey stamps. The hover also never fired: the track is what moves, so the
 * pointer was over a moving element and the row paused underneath it while the
 * individual filter change fought the transition.
 * ------------------------------------------------------------------------- */

.irtiqaa-marquee__track {
	gap: var(--wp--preset--spacing--70);
}

.irtiqaa-marquee__track li {
	min-width: 12rem;
}

.irtiqaa-marquee__track img {
	max-width: 12rem;
	max-height: 5.5rem;
	opacity: 0.92;
	/* No grayscale. These are client marks; draining their colour to make a
	   tidy row is a strange thing to do to a wall of other people's brands. */
	filter: none;
}

/* Pausing on hover happens on the container; dimming the rest is what makes
   the one under the pointer read as picked out. */
.irtiqaa-marquee:hover .irtiqaa-marquee__track img {
	opacity: 0.45;
}

.irtiqaa-marquee__track li:hover img,
.irtiqaa-marquee__track li:focus-within img {
	opacity: 1;
	transform: scale(1.06);
}

.irtiqaa-marquee__track img {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ---------------------------------------------------------------------------
 * Closing section
 *
 * A centred heading with a button under it is the ending every agency site
 * has. This states the ask, puts the two real ways to reach the company beside
 * it, and runs straight into the footer.
 * ------------------------------------------------------------------------- */

.irtiqaa-close {
	background: var(--wp--preset--color--deep);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	position: relative;
	overflow: hidden;
}

.irtiqaa-close__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--60);
	position: relative;
}

@media (min-width: 1000px) {
	.irtiqaa-close__inner {
		grid-template-columns: 1.15fr 1fr;
		align-items: start;
	}
}

.irtiqaa-close__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.12;
	text-wrap: balance;
}

.irtiqaa-close__accent {
	display: block;
	color: var(--wp--preset--color--accent);
}

.irtiqaa-close__lede {
	margin-block: var(--wp--preset--spacing--40) 0;
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
	line-height: 1.9;
}

.irtiqaa-close__ways {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}

.irtiqaa-close__way {
	display: grid;
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: 1.1rem;
	border: var(--wp--custom--hairline);
	text-decoration: none;
	color: inherit;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 40%, transparent);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.irtiqaa-close__way:hover,
.irtiqaa-close__way:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
}

.irtiqaa-close__way.is-primary {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

.irtiqaa-close__way.is-primary:hover {
	background: var(--wp--preset--color--contrast);
	border-color: transparent;
}

.irtiqaa-close__way-label {
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.75;
}

.irtiqaa-close__way-value {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

[dir="rtl"] .irtiqaa-close__way-value {
	text-align: right;
}

.irtiqaa-close__way-note {
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.8;
	line-height: 1.7;
}

/* The object sits behind the copy as a watermark rather than as a third
   column, so it never competes with the ask. */
.irtiqaa-close__object {
	position: absolute;
	inset-block-end: -6%;
	inset-inline-start: -4%;
	width: min(30rem, 46%);
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.irtiqaa-close__copy,
.irtiqaa-close__ways {
	position: relative;
	z-index: 1;
}

@media (max-width: 999px) {
	.irtiqaa-close__object {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-close__way,
	.irtiqaa-marquee__track img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Pinned work strip
 *
 * One viewport of height per slide, with a sticky stage inside. The browser
 * does the pinning; script only maps vertical progress to horizontal travel.
 * Slides are 100vw with no gap, so each piece owns the screen while it is
 * being looked at.
 * ------------------------------------------------------------------------- */

.irtiqaa-pin {
	position: relative;
	/*
	 * The pin spacer. A full screen of scroll per slide would be fifteen
	 * screens for the portfolio alone — longer than the entire rest of the
	 * page. 0.6 still moves one slide at a time and still holds the section
	 * until the last one clears; it just does not make the reader work for it.
	 * This is the number to change if the pacing feels wrong.
	 */
	--pin-pace: 1.15;

	height: calc((var(--slides, 8) / var(--per-view) * var(--pin-pace) + 1) * 100vh);
}

.irtiqaa-pin__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
}

.irtiqaa-pin__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

.irtiqaa-pin__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
}

.irtiqaa-pin__meta {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-variant-numeric: tabular-nums;
	direction: ltr;
	color: var(--irtiqaa-ink-soft);
}

.irtiqaa-pin__index {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--irtiqaa-ink);
}

.irtiqaa-pin__total::before {
	content: "/ ";
}

.irtiqaa-pin__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	display: flex;
	align-items: center;
}

.irtiqaa-pin__viewport::-webkit-scrollbar {
	display: none;
}

/* Once script pins the section the viewport must not scroll on its own, or
   the two compete. Without script it stays a normal scrollable row. */
.irtiqaa-pin.is-pinned .irtiqaa-pin__viewport {
	overflow-x: hidden;
}

.irtiqaa-pin__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	width: max-content;
	will-change: transform;
}

/*
 * Slides per view. Three on a desktop, four once there is room, and a little
 * over one on a phone so the next frame peeks in and the row reads as
 * scrollable. Still no gap — the frames butt together, which is what makes it
 * read as one strip rather than as cards.
 */
.irtiqaa-pin {
	--per-view: 1.15;
}

@media (min-width: 700px) {
	.irtiqaa-pin {
		--per-view: 2;
	}
}

@media (min-width: 1000px) {
	.irtiqaa-pin {
		--per-view: 3;
	}
}

@media (min-width: 1600px) {
	.irtiqaa-pin {
		--per-view: 4;
	}
}

.irtiqaa-slide {
	flex: none;
	width: calc(100vw / var(--per-view));
	height: 100%;
	display: grid;
	place-items: center;
	padding: 0;
}

.irtiqaa-slide__figure {
	margin: 0;
	width: 100%;
	height: 100%;
	position: relative;
	display: grid;
}

.irtiqaa-slide__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.irtiqaa-slide__caption {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: grid;
	gap: 0.2rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	background: linear-gradient(to top, rgb(0 13 27 / 88%), transparent);
}

.irtiqaa-slide__num {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

[dir="rtl"] .irtiqaa-slide__num {
	text-align: right;
}

.irtiqaa-slide__note {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.85;
}

.irtiqaa-pin__progress {
	margin: 0;
	height: 3px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
}

.irtiqaa-pin__progress span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
}

[dir="rtl"] .irtiqaa-pin__progress span {
	transform-origin: right center;
}

/* No script, or no motion wanted: a normal scrollable row at a sane height. */
.irtiqaa-pin.is-static {
	height: auto;
}

.irtiqaa-pin.is-static .irtiqaa-pin__stage {
	position: static;
	height: auto;
}

.irtiqaa-pin.is-static .irtiqaa-slide {
	width: min(84vw, 40rem);
	height: auto;
}

.irtiqaa-pin.is-static .irtiqaa-slide__figure img {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Ticker
 * ------------------------------------------------------------------------- */

.irtiqaa-ticker {
	overflow: hidden;
	/* Top rule only. The band below carries the closing edge, so two adjacent
	   hairlines are not drawn where one boundary exists. */
	border-block-start: var(--wp--custom--hairline);
	background: var(--wp--preset--color--deep);
	padding-block: var(--wp--preset--spacing--30);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.irtiqaa-ticker__track {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	width: max-content;
	animation: irtiqaa-marquee 38s linear infinite;
}

[dir="rtl"] .irtiqaa-ticker__track {
	animation-name: irtiqaa-marquee-rtl;
}

.irtiqaa-ticker.is-paused .irtiqaa-ticker__track {
	animation-play-state: paused;
}

.irtiqaa-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

.irtiqaa-ticker__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-ticker__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * Hero background
 * ------------------------------------------------------------------------- */

.irtiqaa-hero--home {
	position: relative;
	overflow: hidden;
}

/* The field of dots, and the only thing behind the headline. Vanta builds a <canvas>
 * into this element after load; until then — and permanently, for anyone who
 * has asked for reduced motion or whose browser has no WebGL — it is an empty
 * box that costs nothing, and the hero rests on flat navy. */
.irtiqaa-hero__field {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.6;
	pointer-events: none;
}

.irtiqaa-hero__field canvas {
	display: block;
}

.irtiqaa-hero__inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 780px) {
	/* Fewer points at this width, so the ones that are left should not read
	 * as a pattern in their own right behind the headline. */
	.irtiqaa-hero__field {
		opacity: 0.42;
	}
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-hero__field {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Partner marquee, tighter
 * ------------------------------------------------------------------------- */

.irtiqaa-marquee__track {
	gap: var(--wp--preset--spacing--50);
}

.irtiqaa-marquee__track li {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Testimonial thumbnails
 * ------------------------------------------------------------------------- */

.irtiqaa-voice__btn {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--40);
}

.irtiqaa-voice__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.55;
	transition: opacity 0.3s ease, transform 0.4s ease;
}

.irtiqaa-voice__btn:hover .irtiqaa-voice__thumb,
.irtiqaa-voice__btn:focus-visible .irtiqaa-voice__thumb {
	opacity: 0.8;
	transform: scale(1.04);
}

/* The caption sits over the image, so it needs its own ground to stay
   readable whatever the frame behind it happens to be. */
.irtiqaa-voice__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 13 27 / 92%) 12%, rgb(0 13 27 / 35%) 55%, rgb(0 13 27 / 10%));
}

.irtiqaa-voice__play,
.irtiqaa-voice__label {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-voice__thumb {
		transition: none;
	}

	.irtiqaa-voice__btn:hover .irtiqaa-voice__thumb {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Header and footer lockup
 *
 * The supplied artwork is a horizontal lockup on a 1200x1200 canvas — mostly
 * empty. Cropped to its alpha bounds it is 910x369, so it is never upscaled at
 * the sizes used here and the header mark is a real size rather than a 14px
 * sliver of a square.
 * ------------------------------------------------------------------------- */

.irtiqaa-header__brandlink {
	display: block;
	line-height: 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* The lockup is two lines — the name over a subtitle — so it needs more height
   than a single wordmark before the second line is legible at all. */
/* Beats the slice-2 rule `.irtiqaa-header__brand img { max-height: 44px }`,
   which was written for a square mark and caps this lockup mid-word. */
.irtiqaa-header__brand .irtiqaa-header__logo {
	display: block;
	width: auto;
	height: 3.25rem;
	max-height: none;
}

@media (max-width: 600px) {
	.irtiqaa-header__brand .irtiqaa-header__logo {
		height: 2.5rem;
	}
}

/* The footer mark, large and cropped by the page edge, the way the daima
   reference ends. Capped below its native width so it stays crisp. */
.irtiqaa-wordmark {
	margin-block-start: var(--wp--preset--spacing--60);
	margin-block-end: -8%;
	display: flex;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.irtiqaa-wordmark__img {
	display: block;
	width: min(56rem, 88%);
	height: auto;
	opacity: 0.5;
	/* Faded into the page edge rather than stopping dead. */
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
}

/* ---------------------------------------------------------------------------
 * Platform comparison
 *
 * A real table. This is tabular data: a screen reader should navigate it by
 * row and column, and it should still be comparable if the styles never load.
 * ------------------------------------------------------------------------- */

.irtiqaa-compare {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-compare__head {
	max-width: 42rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-compare__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-compare__lede {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.irtiqaa-compare__scroll {
	overflow-x: auto;
	border: var(--wp--custom--hairline);
	border-radius: 1.25rem;
	background: var(--wp--preset--color--deep);
}

.irtiqaa-compare__table {
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-compare__table :is(th, td) {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	text-align: start;
	border-block-end: var(--wp--custom--hairline);
	vertical-align: top;
}

.irtiqaa-compare__table tbody tr:last-child :is(th, td) {
	border-block-end: 0;
}

.irtiqaa-compare__table thead th {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent);
}

.irtiqaa-compare__name {
	display: block;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.irtiqaa-compare__note {
	display: block;
	margin-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-compare__table tbody th {
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	width: 11rem;
}

/* The strongest option in a row is marked, including where that is the
   cheapest one. A comparison that always favours the seller is an advert. */
.irtiqaa-compare__table td.is-best {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	position: relative;
}

.irtiqaa-compare__table td.is-best::before {
	content: "";
	position: absolute;
	inset-block: 0.35rem;
	inset-inline-start: 0;
	width: var(--wp--custom--line--weight);
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------
 * Work marquee
 *
 * Two rows travelling in opposite directions. Each row's cards arrive from the
 * side that row moves towards — three in from one edge, three from the other —
 * then both keep going. The full showcase lives on its own page now; this is
 * the trailer.
 *
 * The travel is a CSS animation rather than a scroll library: the effect is a
 * constant-speed loop, which is what an animation is. The reveal-from-the-side
 * is the same data-anim contract everything else uses.
 * ------------------------------------------------------------------------- */

.irtiqaa-reel2 {
	padding-block: var(--wp--preset--spacing--70);
	overflow: hidden;
}

.irtiqaa-reel2__head {
	max-width: 40rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-reel2__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-reel2__row {
	overflow: hidden;
	margin-block-end: var(--wp--preset--spacing--30);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* The entry: each row slides in from the edge it travels towards, so the two
   rows visibly come from opposite sides before they start looping. */
.js .irtiqaa-reel2__row[data-anim="reveal"] {
	opacity: 0;
	transform: translateX(-8%);
}

.js .irtiqaa-reel2__row.is-reverse[data-anim="reveal"] {
	transform: translateX(8%);
}

.js .irtiqaa-reel2__row[data-anim="reveal"].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.irtiqaa-reel2__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	width: max-content;
	animation: irtiqaa-marquee 46s linear infinite;
}

.irtiqaa-reel2__row.is-reverse .irtiqaa-reel2__track {
	animation-name: irtiqaa-marquee-back;
}

[dir="rtl"] .irtiqaa-reel2__track {
	animation-name: irtiqaa-marquee-rtl;
}

[dir="rtl"] .irtiqaa-reel2__row.is-reverse .irtiqaa-reel2__track {
	animation-name: irtiqaa-marquee-rtl-back;
}

/* A negative delay starts the second row partway through its own cycle, so the
   rows are never in step and neither looks like it is beginning from rest. */
.irtiqaa-reel2__row.is-reverse .irtiqaa-reel2__track {
	animation-delay: -23s;
}

.irtiqaa-reel2__row.is-paused .irtiqaa-reel2__track,
.irtiqaa-reel2__row:hover .irtiqaa-reel2__track {
	animation-play-state: paused;
}

.irtiqaa-reel2__card {
	flex: none;
	width: clamp(14rem, 24vw, 22rem);
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
}

.irtiqaa-reel2__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.irtiqaa-reel2__cta {
	margin: var(--wp--preset--spacing--50) 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-reel2__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}

	.js .irtiqaa-reel2__row[data-anim="reveal"] {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Results by platform
 *
 * A store owner already knows which platform they are on, so the useful
 * question is not which is better in the abstract — it is what happened to a
 * store like theirs.
 * ------------------------------------------------------------------------- */

.irtiqaa-pr {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-pr__head {
	max-width: 42rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-pr__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.irtiqaa-pr__lede {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	line-height: 1.8;
}

.irtiqaa-pr__panel {
	background: var(--wp--preset--color--deep);
	border: var(--wp--custom--hairline);
	border-radius: 1.5rem;
	padding: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.irtiqaa-pr__tabs {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.irtiqaa-pr__tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.irtiqaa-pr__tab {
	display: grid;
	gap: 0.2rem;
	justify-items: start;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: 1rem;
	border: var(--wp--custom--hairline);
	background: transparent;
	color: var(--wp--preset--color--muted);
	font: inherit;
	cursor: pointer;
	text-align: start;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.irtiqaa-pr__tab[aria-selected="true"] {
	background: var(--wp--preset--color--surface);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-pr__tab:hover {
	color: var(--wp--preset--color--contrast);
}

.irtiqaa-pr__tab-name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.irtiqaa-pr__tab-note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-pr__case {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/*
 * display:grid outranks the user agent's [hidden]{display:none}, so all three
 * panels rendered at once and the tabs looked like they did nothing. Same trap
 * as the overlay menu in slice 2.
 */
.irtiqaa-pr__case[hidden] {
	display: none;
}

.irtiqaa-pr__tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.irtiqaa-pr__tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.irtiqaa-pr__tiles li {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 50%, transparent);
	border-radius: 1rem;
	padding: var(--wp--preset--spacing--40);
}

.irtiqaa-pr__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-pr__value {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
}

[dir="rtl"] .irtiqaa-pr__value {
	text-align: right;
}

.irtiqaa-pr__from {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.irtiqaa-pr__delta {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	direction: ltr;
	unicode-bidi: isolate;
}

.irtiqaa-pr__cta {
	margin: var(--wp--preset--spacing--40) 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-pr__tab {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Entrance
 *
 * Short, once per session, never under reduced motion, never in a background
 * tab, and it leaves on a timer rather than waiting on any asset. A
 * full-screen cover is the Largest Contentful Paint element while it is up,
 * so it does not stay up.
 *
 * It leaves upwards. Sliding the whole panel off the top edge reads as the
 * page arriving from underneath, where a fade reads as the cover dissolving
 * and leaves the reader looking at the same pixels for 600ms.
 * ------------------------------------------------------------------------- */

.irtiqaa-enter {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--base, #00172f);
	transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

.irtiqaa-enter.is-done {
	transform: translateY(-100%);
	pointer-events: none;
}

.irtiqaa-enter__logo {
	width: min(22rem, 62vw);
	height: auto;
	animation: irtiqaa-enter-mark 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/*
 * The counter sits on the inline-start side — the right in Arabic, mirroring
 * to the left in English.
 *
 * The direction stays on the page's terms here and the number is isolated in
 * a <bdi> instead. An earlier version put `direction: ltr` on this element so
 * that "100%" could not be reordered to "%100", which quietly broke the
 * positioning: inset-inline-start resolves against the element's *own*
 * direction, so the logical property placed it in the bottom left. Isolating
 * the number rather than turning the box around fixes the digits without
 * touching the layout.
 */
.irtiqaa-enter__count {
	position: absolute;
	inset-block-end: clamp(1.5rem, 5vh, 3.5rem);
	inset-inline-start: clamp(1.5rem, 5vw, 4rem);
	font-size: clamp(2.5rem, 9vw, 6rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	animation: irtiqaa-enter-count 0.5s ease forwards;
}

.irtiqaa-enter__count bdi {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Scroll stays locked only while the curtain is actually up. */
.is-entering,
.is-entering body {
	overflow: hidden;
}

@keyframes irtiqaa-enter-mark {
	from {
		opacity: 0;
		transform: translateY(0.8rem) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes irtiqaa-enter-count {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-enter {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Reading progress
 *
 * A hairline along the bottom edge of the sticky header. It is a scaleX on
 * one element, so scrolling never triggers layout, and it is decorative —
 * aria-hidden, because "how far down the page am I" is something a screen
 * reader already answers better than a bar can.
 * ------------------------------------------------------------------------- */

.irtiqaa-header__progress {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 3px;
	overflow: hidden;
	pointer-events: none;
}

.irtiqaa-header__progress span {
	display: block;
	height: 100%;
	background: linear-gradient(
		to left,
		var(--wp--preset--color--accent),
		color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent)
	);
	transform: scaleX(0);
	/* The bar grows from the side the reader starts on: the right in RTL. */
	transform-origin: left center;
	will-change: transform;
}

[dir="rtl"] .irtiqaa-header__progress span {
	transform-origin: right center;
}

[dir="ltr"] .irtiqaa-header__progress span {
	background: linear-gradient(
		to right,
		var(--wp--preset--color--accent),
		color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent)
	);
}

/* ---------------------------------------------------------------------------
 * Split headings
 *
 * Each word rises out of its own mask. Words, not letters — Arabic is cursive
 * and per-letter splitting severs the joins, which is why there is no
 * character mode here at all.
 *
 * The mask needs vertical room the line box does not give it. Arabic sits
 * lower and reaches further below the baseline than Latin — ج ح خ ع غ م ن ی
 * all descend — and at the hero's 1.08 line-height `overflow: hidden` would
 * shave them off. The padding opens the clipping box and the equal negative
 * margin takes the space back, so nothing moves and nothing is cut.
 * ------------------------------------------------------------------------- */

.irtiqaa-split__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: 0.26em;
	margin-block: -0.26em;
}

/*
 * No will-change here, deliberately. A page carries twenty-eight split
 * headings and something like a hundred and forty words, and hinting every
 * one of them would hold that many compositor layers for the life of the page
 * — most of them for headings the reader never scrolls to. A transform
 * transition on a short span promotes itself for the moment it runs, which is
 * the only moment it is worth paying for.
 */
.irtiqaa-split__in {
	display: inline-block;
	transform: translateY(110%);
}

.js [data-anim="split"].is-split.is-revealed .irtiqaa-split__in {
	transform: none;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Reduced motion never reaches this — motion.js does not split at all in that
 * case — but if a heading were somehow left split with the animation off, it
 * must read, not sit hidden below its own mask.
 */
@media (prefers-reduced-motion: reduce) {
	.irtiqaa-split__in {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Home hero, second pass
 *
 * The first version was a headline on a flat field. What was missing was not
 * decoration but scale and depth: the type never got large enough to be the
 * event on the screen, and nothing sat behind it.
 * ------------------------------------------------------------------------- */

/*
 * Sized against the fold, not against the type scale. The booking CTA is the
 * only thing on this page that earns money, and a headline large enough to
 * push it under the viewport edge is a headline that costs money. This is the
 * largest it can be while the button still shows at 1920x900.
 */
.irtiqaa-hero--home .irtiqaa-hero__title {
	max-width: 24ch;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.12;
	letter-spacing: 0;
}

/* The gold line is the brand's one carried-over device; under the accent
   clause it does the work a rule under a headline does. */
.irtiqaa-hero--home .irtiqaa-hero__accent {
	position: relative;
}

.irtiqaa-hero--home .irtiqaa-hero__lede {
	max-width: 46ch;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
}


/* ---------------------------------------------------------------------------
 * Blog filter
 *
 * Two rows of chips over the article grid. Categories first — what an article
 * is — then tags, what it mentions, at a lower contrast because they are the
 * secondary cut.
 *
 * Every chip is a link to a real archive, so it is styled as something that
 * navigates rather than as a toggle.
 * ------------------------------------------------------------------------- */

.irtiqaa-filter {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.irtiqaa-filter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.irtiqaa-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	background: transparent;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.irtiqaa-chip:hover {
	color: var(--wp--preset--color--contrast);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	text-decoration: none;
}

.irtiqaa-chip.is-on {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/*
 * A count is a number in a sentence of Arabic. Isolated and forced LTR so a
 * two-digit count is not reordered against the label beside it.
 */
.irtiqaa-chip__count {
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
	opacity: 0.75;
}

/* The tag row is the second cut, and reads as one. */
.irtiqaa-filter__row.is-tags .irtiqaa-chip {
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.35rem 0.7rem;
	border-color: color-mix(in srgb, var(--wp--preset--color--muted) 22%, transparent);
}

.irtiqaa-filter__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	min-height: 1.2em;
}

.irtiqaa-loop__empty {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

/*
 * The grid's own display would beat [hidden]'s display:none, exactly as it did
 * for the overlay menu and the platform panels. Said once, here, for the cards
 * the filter hides.
 */
.irtiqaa-cards > .irtiqaa-card[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-chip {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Breadcrumbs
 *
 * Markup only — Rank Math already emits the BreadcrumbList for every post, and
 * a second one is a structured-data error rather than twice the signal.
 *
 * The separator is a pseudo-element rather than a character in the markup, so
 * a screen reader reads a list of four places and not a list of seven things
 * four of which are slashes.
 * ------------------------------------------------------------------------- */

/*
 * The single post runs wider than the rest of the site. The global wide size
 * is 78rem, which is right for a one-column page and wrong here: with a rail
 * on each side it left the article itself 560px, narrow enough that every
 * table in the content had to scroll sideways inside its own box to be read.
 * The three parts of the post share this so they line up down the left and
 * right edges.
 */
:root {
	--irtiqaa-post-width: 96rem;
}

.irtiqaa-crumbs {
	max-width: var(--irtiqaa-post-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
}

.irtiqaa-crumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.55rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-crumbs__item {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	min-width: 0;
}

.irtiqaa-crumbs__item + .irtiqaa-crumbs__item::before {
	/* A chevron that points the way the language runs. */
	content: "‹";
	color: color-mix(in srgb, var(--wp--preset--color--muted) 60%, transparent);
}

[dir="ltr"] .irtiqaa-crumbs__item + .irtiqaa-crumbs__item::before {
	content: "›";
}

.irtiqaa-crumbs a {
	color: inherit;
	text-decoration: none;
}

.irtiqaa-crumbs a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* The last crumb is the page you are on. It is long, and it is the one that
   must not push the row sideways. */
.irtiqaa-crumbs__item [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: min(28rem, 60vw);
}

/* ---------------------------------------------------------------------------
 * Post head
 *
 * Copy beside the image, not under it. A 16:9 featured image at full width
 * pushes the article's first paragraph off the screen: the reader arrives and
 * the thing they came for is below the fold.
 * ------------------------------------------------------------------------- */

.irtiqaa-posthead {
	max-width: var(--irtiqaa-post-width);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.irtiqaa-posthead {
		flex-direction: row;
		align-items: center;
	}

	/* Half and half. min-width:0 or the image's intrinsic width wins the
	   negotiation and the copy column is squeezed. */
	.irtiqaa-posthead__copy,
	.irtiqaa-posthead__media {
		flex: 1 1 50%;
		min-width: 0;
	}

	.irtiqaa-posthead.is-textonly .irtiqaa-posthead__copy {
		flex-basis: 100%;
		max-width: 46rem;
	}
}

.irtiqaa-posthead__title {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.2;
	text-wrap: balance;
}

.irtiqaa-posthead__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.85;
	max-width: 44ch;
}

.irtiqaa-posthead__media {
	margin: 0;
}

.irtiqaa-posthead__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1.25rem;
}

@media (min-width: 900px) {
	.irtiqaa-posthead__media img {
		aspect-ratio: 5 / 4;
	}
}

/* The byline. An organisation credit, because every article here is published
   by the agency rather than by a named person. */
.irtiqaa-byline {
	margin-block-start: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.irtiqaa-byline__avatar {
	flex: none;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
}

.irtiqaa-byline__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.irtiqaa-byline__text {
	display: grid;
	line-height: 1.35;
	min-width: 0;
}

.irtiqaa-byline__label {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-byline__name {
	font-weight: 600;
}

/*
 * Alignment classes in inherited content.
 *
 * The articles came from the classic editor and carry core's alignment
 * classes, some on wrappers wide enough to push the document sideways — one
 * .alignright measured 1857px against a 1905px viewport and started ten pixels
 * off the edge. Nothing in the article may widen the page.
 */
.irtiqaa-prose :is(.alignright, .alignleft, .aligncenter, .alignwide, .alignfull),
.entry-content :is(.alignright, .alignleft, .aligncenter, .alignwide, .alignfull) {
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * The wrapper irtiqaa_wrap_tables() puts around every table in the content.
 * The table keeps its own width and its own display type — a screen reader can
 * still navigate it by row and column — and this box is what scrolls.
 */
.irtiqaa-tablewrap {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/*
 * Two older rules make content tables `display: block` so they can scroll
 * themselves. That is the usual shortcut for a wide table and it costs the
 * element its table display type, which is what a screen reader uses to offer
 * row and column navigation. Where this wrapper exists it does the scrolling,
 * so the table can be a table again. The shortcut stays in place for any table
 * that never went through the filter.
 */
.irtiqaa-tablewrap table {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

/* ---------------------------------------------------------------------------
 * The article: contents, body, sidebar
 *
 * Three columns above 1200px. Contents on the inline-start side — the right in
 * Arabic, where reading begins and where the eye returns — the article in the
 * middle, and what the piece is filed under on the inline-end side.
 *
 * Below that the two rails are worth less than the measure they cost, so they
 * go: contents collapses away and the sidebar follows the article.
 * ------------------------------------------------------------------------- */

.irtiqaa-article {
	max-width: var(--irtiqaa-post-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1200px) {
	.irtiqaa-article {
		grid-template-columns: 15rem minmax(0, 1fr) 21rem;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * The measure belongs to the text, not to the column.
 *
 * Capping the whole column at 68ch capped the tables and figures with it, and
 * those are the things that need the room — a table forced into a reading
 * measure has to scroll to be read at all. So the column takes the space and
 * the paragraphs keep the measure; anything that is not a line of prose may
 * use the full width.
 */
.irtiqaa-article__body {
	min-width: 0;
}

.irtiqaa-article__body .entry-content > * {
	max-width: 68ch;
}

.irtiqaa-article__body .entry-content > :is(
	.irtiqaa-tablewrap,
	table,
	figure,
	.wp-block-image,
	.wp-block-embed,
	.wp-block-gallery,
	.wp-block-table
) {
	max-width: 100%;
}

/* --- Contents ----------------------------------------------------------- */

.irtiqaa-toc {
	position: sticky;
	top: calc(var(--wp--preset--spacing--70) + 3rem);
	max-height: calc(100vh - 10rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: var(--wp--preset--font-size--small);

	/*
	 * No scrollbar chrome. A long article's contents can run past the height
	 * of the screen, and a second scrollbar beside the page's own is visual
	 * noise on a rail that is already secondary.
	 *
	 * The list stays scrollable — by wheel, by trackpad, by keyboard, and by
	 * the script, which scrolls the marked entry into view as the reader
	 * moves through the article. Hiding the bar without keeping the scrolling
	 * would strand the last headings where nobody could reach them.
	 *
	 * The mask is what replaces the bar as the signal: the list fades out at
	 * the bottom edge while there is more below it.
	 */
	scrollbar-width: none;
}

/*
 * The fade is the signal that replaces the bar, so it belongs only where
 * there is something below to signal. On a short article the list fits and
 * the class is never set, otherwise the last entry would look dimmed for no
 * reason at all.
 */
.irtiqaa-toc.is-scrollable {
	-webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent);
	mask-image: linear-gradient(to bottom, #000 92%, transparent);
}

.irtiqaa-toc::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* Below three columns it is a rail with nowhere to be. */
@media (max-width: 1199px) {
	.irtiqaa-toc {
		display: none;
	}
}

.irtiqaa-toc__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
	/* The rail the marker sits on. */
	border-inline-start: var(--wp--custom--hairline);
}

.irtiqaa-toc__item.is-h3 {
	padding-inline-start: 0.75rem;
}

.irtiqaa-toc__link {
	display: block;
	padding: 0.35rem 0.75rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	line-height: 1.55;
	border-inline-start: 2px solid transparent;
	margin-inline-start: -1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.irtiqaa-toc__link:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* The section the reader is in. Colour and a marker on the rail — colour on
   its own is a single channel, and this has to read for someone who cannot
   separate gold from grey. */
.irtiqaa-toc__link.is-on {
	color: var(--wp--preset--color--accent);
	border-inline-start-color: var(--wp--preset--color--accent);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-toc__link {
		transition: none;
	}
}

/* --- Sidebar ------------------------------------------------------------ */

.irtiqaa-postside {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-content: start;
	min-width: 0;
}

/*
 * The rail itself is not sticky — only the call to action at the end of it is.
 *
 * Making the whole column follow the reader meant capping it to the height of
 * the screen and scrolling it inside itself, because a form plus a CTA is
 * taller than what a laptop leaves. That is a scrollbar and a fade and a
 * measurement, all to keep a block of links in view that a reader looks at
 * once. Sticking the one thing that should always be reachable costs none of
 * it: the categories, the tags, the share row and the newsletter scroll away
 * like the article they belong to, and the CTA stays.
 *
 * align-self: stretch is what gives it somewhere to travel. The grid aligns
 * its items to the start, so without this the column is only as tall as its
 * contents and a sticky child inside it has no room to move.
 */
@media (min-width: 1200px) {
	.irtiqaa-postside {
		align-self: stretch;
	}

	.irtiqaa-postside__block.is-cta {
		position: sticky;
		top: calc(var(--wp--preset--spacing--70) + 3rem);
	}
}

.irtiqaa-postside__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0;
}

.irtiqaa-postside__note {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

.irtiqaa-termlist,
.irtiqaa-share {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.irtiqaa-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: var(--wp--custom--hairline);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.irtiqaa-share__link:hover {
	color: var(--wp--preset--color--contrast);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	text-decoration: none;
}

.irtiqaa-share__link.is-copy[hidden] {
	display: none;
}

.irtiqaa-postside__block.is-cta {
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--hairline);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
}

.irtiqaa-postside__cta-text {
	margin: 0;
	font-weight: 600;
	line-height: 1.5;
}

/* FluentForm brings its own styles; this only keeps it inside the rail. */
.irtiqaa-postside .fluentform,
.irtiqaa-postside .frm-fluent-form {
	max-width: 100%;
}

.irtiqaa-postside .fluentform input[type="email"] {
	max-width: 100%;
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-share__link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * FluentForm inside the sidebar
 *
 * The plugin's own files are never edited — this is the theme overriding what
 * it renders, which is the only place that belongs. Left alone it puts a blue
 * submit button and a side-by-side row into a 288px rail, where the input is
 * narrow enough to clip its own placeholder.
 * ------------------------------------------------------------------------- */

.irtiqaa-postside .fluentform .ff-el-group,
.irtiqaa-postside .fluentform .ff-t-container,
.irtiqaa-postside .fluentform .ff-t-cell {
	display: block;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.irtiqaa-postside .fluentform .ff-el-group {
	margin-block-end: 0.6rem;
}

.irtiqaa-postside .fluentform :is(input[type="email"], input[type="text"]) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.85rem;
	border-radius: 0.6rem;
	border: var(--wp--custom--hairline);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 60%, transparent);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-postside .fluentform :is(input[type="email"], input[type="text"])::placeholder {
	color: var(--wp--preset--color--muted);
}

/*
 * FluentForm prints a per-form <style> block of its own:
 *
 *   form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit { background: #1a7efb }
 *
 * which is three classes and an element. Two classes on the button here beats
 * it on class count, which is compared first — so the brand wins without
 * !important, and without touching a plugin file. If the form is ever renamed
 * or restyled in the plugin's UI this keeps working; only a change to that
 * selector's shape would need anything here.
 */
.irtiqaa-postside .fluentform .ff-btn-submit.ff-btn {
	width: 100%;
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.irtiqaa-postside .fluentform .ff-btn-submit.ff-btn:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* The plugin's own success and error messages, in the site's voice. */
.irtiqaa-postside .fluentform .ff-message-success,
.irtiqaa-postside .fluentform .error {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * Header, two rows
 *
 * A bar — overlay toggle / logo / search + CTA — over a rule, then the site's
 * sections with the current one lit. Everything here is logical-property
 * based, so RTL puts the toggle on the right and the actions on the left
 * without a single mirrored rule.
 *
 * Placed after the slice-2 header block above, which set the bar to
 * flex/space-between; these rules replace that layout at equal specificity and
 * win on source order.
 * ------------------------------------------------------------------------- */

.irtiqaa-header__bar {
	display: grid;
	/* The centre column is the logo's own width; the two 1fr rails either side
	   are what keeps it centred on the viewport rather than between two
	   unequal groups of controls. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.irtiqaa-header__lead {
	display: flex;
	align-items: center;
	justify-self: start;
	min-width: 0;
}

.irtiqaa-header__brand {
	justify-self: center;
}

.irtiqaa-header__actions {
	gap: var(--wp--preset--spacing--30);
	justify-self: end;
}

/* The toggle grows a visible label beside its rules. It was a 3rem square with
   the label in screen-reader-text; the word is what makes it read as a menu
   rather than as decoration. */
.irtiqaa-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	width: auto;
	height: 2.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}

.irtiqaa-search-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	cursor: pointer;
	transition: color 0.2s ease;
}

.irtiqaa-toggle:hover,
.irtiqaa-search-toggle:hover,
.irtiqaa-search-toggle:focus-visible {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-toggle__label,
.irtiqaa-search-toggle__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em; /* Latin only; the Arabic guard at the top wins here. */
	white-space: nowrap;
}

/*
 * Under 600px the CTA is already gone and the bar is toggle / logo / search.
 * The two words come out as well rather than let the logo shrink: the mark is
 * the one thing in the bar that has to stay legible. Same declarations core
 * uses for .screen-reader-text, so the labels stay in the accessibility tree.
 */
/*
 * Losing the label must not lose the target.
 *
 * Under 600px the words go and .irtiqaa-search-toggle collapses to the width
 * of its glyph — measured at 18px against a 44px minimum. It was never
 * noticeable while the button sat alone; beside a 46px story ring the
 * mismatch is visible as well as failing. The button keeps its own box.
 */
@media (max-width: 600px) {
	.irtiqaa-search-toggle {
		min-inline-size: 2.75rem;
		justify-content: center;
	}

	.irtiqaa-toggle__label,
	.irtiqaa-search-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --- The section row ----------------------------------------------------- */

/*
 * Collapsed by animating the grid row from 1fr to 0fr rather than a max-height
 * guess, so the row's own height is what closes and nothing has to be measured
 * in script.
 */
.irtiqaa-header__nav {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.irtiqaa-header__nav > ul {
	/* min-height:0 is what lets the 0fr row actually reach zero — a grid item
	   otherwise refuses to shrink below its content. */
	min-height: 0;
	overflow: hidden;
	list-style: none;
	/* width:100% rather than auto margins alone. An auto margin on a grid item
	   makes it size to its content, which shrink-wrapped the divider below to
	   the width of the six links instead of the container's. */
	width: 100%;
	margin-inline: auto;
	margin-block: 0;
	/* Vertical padding lives on the links, never here: padding on this element
	   would survive the collapse and leave the row a few pixels tall. */
	padding: 0 var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 2.6vw, 2.5rem);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}

.irtiqaa-header__nav a {
	position: relative;
	display: block;
	padding-block: 0.85rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.irtiqaa-header__nav a:hover,
.irtiqaa-header__nav a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/*
 * The current section. Gold, plus a bar sitting exactly on the divider above
 * it — colour is never the only signal (WCAG 1.4.1), and the bar is what makes
 * the row read as tabs rather than as a list with one odd item.
 */
.irtiqaa-header__nav a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-header__nav a[aria-current="page"]::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/* Collapsed on scroll. The links go visibility:hidden once the row has closed,
   which is what takes them out of the tab order and the accessibility tree;
   the divider stays, because the bar still needs a bottom edge. */
.irtiqaa-header.is-condensed .irtiqaa-header__nav {
	grid-template-rows: 0fr;
}

.irtiqaa-header.is-condensed .irtiqaa-header__nav a {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.35s;
}

/* Below 900px the overlay menu carries these links and this row would be the
   same six destinations announced twice. */
@media (max-width: 899px) {
	.irtiqaa-header__nav {
		display: none;
	}
}

/* --- Search -------------------------------------------------------------- */

/* The rule goes on the form, not this wrapper: it has to be inset to the same
   wide-size container as the bar above it and the section row below it, so the
   three edges line up instead of one running the full viewport. */
.irtiqaa-searchform {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.irtiqaa-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-searchform__field::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.irtiqaa-searchform__submit {
	flex: 0 0 auto;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.irtiqaa-searchform__submit:hover,
.irtiqaa-searchform__submit:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-header__nav,
	.irtiqaa-header__nav a,
	.irtiqaa-toggle,
	.irtiqaa-search-toggle,
	.irtiqaa-searchform__submit {
		transition: none;
	}
}

/*
 * The current section in the overlay too, now that the header sets
 * aria-current on both lists. A rule under the word rather than the gold the
 * tab row uses: the CTA at the foot of that list is already gold, and two gold
 * items in one list read as two calls to action.
 */
.irtiqaa-menu__primary a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.16em;
}

/*
 * Found while checking the new bar at 360px: the panel's inner grid is
 * width:100% with inline padding and was sizing content-box, so it came out
 * 33px wider than the panel and gave the overlay its own horizontal
 * scrollbar. Nothing to do with the two-row bar above — it just had not been
 * measured at that width since the spacing scale last moved.
 */
.irtiqaa-menu__inner {
	box-sizing: border-box;
}

/*
 * The search field opts out of the global 2px gold ring.
 *
 * That ring is right for a link or a button — a small target that needs
 * finding. Here it lands 3px outside a full-width pill that already has its
 * own border, and the field takes focus the moment the panel opens, so every
 * reader who clicks بحث gets a heavy double outline they did not ask for.
 *
 * What replaces it is still an indicator, not an absence: the field's own
 * border warms to gold and a soft halo sits under it. The border is a 65% mix
 * rather than the full accent — it lands at 4.6:1 against the header ground,
 * comfortably past the 3:1 that WCAG 1.4.11 asks of a non-text indicator, and
 * a full-strength gold ring around a pill this wide was the thing that read
 * as shouting in the first place.
 */
.irtiqaa-searchform__field:focus-visible {
	outline: none;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-searchform__field {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Live speed test
 *
 * Three verdict colours the palette does not carry, scoped to this component
 * rather than added to theme.json — they are Google's traffic-light semantics,
 * not part of the brand, and nothing else on the site should reach for them.
 *
 * Measured against the section ground (--color--base, #00172F): green 10.5:1,
 * gold 11.1:1, red 6.6:1. All well past AA, and none of the three is ever the
 * only signal — every score carries its number and every metric its word.
 * ------------------------------------------------------------------------- */

.irtiqaa-speed {
	--irtiqaa-good: #4ADE80;
	--irtiqaa-average: var(--wp--preset--color--accent);
	--irtiqaa-poor: #FF6B6B;

	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--base);
}

.irtiqaa-speed__inner,
.irtiqaa-agent__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.irtiqaa-speed__head,
.irtiqaa-agent__head {
	max-width: 42rem;
}

.irtiqaa-speed__title,
.irtiqaa-agent__title {
	margin-block: 0.4em 0.5em;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

.irtiqaa-speed__lede,
.irtiqaa-agent__lede {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

.irtiqaa-speed__form,
.irtiqaa-agent__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 42rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.irtiqaa-speed__field,
.irtiqaa-agent__field {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.9rem 1.2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-speed__field::placeholder,
.irtiqaa-agent__field::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Same reasoning as the header's search field: the global 2px offset ring is
   too loud around a wide pill that already has a border of its own. */
.irtiqaa-speed__field:focus-visible,
.irtiqaa-agent__field:focus-visible {
	outline: none;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

.irtiqaa-speed__submit,
.irtiqaa-agent__submit {
	flex: 0 0 auto;
	padding: 0.9rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.irtiqaa-speed__submit:hover:not(:disabled),
.irtiqaa-speed__submit:focus-visible:not(:disabled),
.irtiqaa-agent__submit:hover:not(:disabled),
.irtiqaa-agent__submit:focus-visible:not(:disabled) {
	background: var(--wp--preset--color--contrast);
}

.irtiqaa-speed__submit:disabled,
.irtiqaa-agent__submit:disabled {
	opacity: 0.55;
	cursor: progress;
}

.irtiqaa-speed__note,
.irtiqaa-agent__note {
	margin-block: 0.9rem 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-speed__out:empty,
.irtiqaa-agent__out:empty {
	display: none;
}

.irtiqaa-speed__out,
.irtiqaa-agent__out {
	margin-block-start: var(--wp--preset--spacing--60);
}

.irtiqaa-speed__wait,
.irtiqaa-agent__wait {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-speed__spinner,
.irtiqaa-agent__spinner {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-top-color: var(--wp--preset--color--accent);
	border-radius: 50%;
	animation: irtiqaa-speed-spin 0.9s linear infinite;
}

@keyframes irtiqaa-speed-spin {
	to { transform: rotate(360deg); }
}

/*
 * Reduced motion keeps the indicator and drops the rotation. A spinner that
 * does not spin still says "something is happening" as long as it is there,
 * and the stage text beside it changes every five seconds regardless.
 */
@media (prefers-reduced-motion: reduce) {
	.irtiqaa-speed__spinner {
		animation: none;
	}

	.irtiqaa-speed__arc,
	.irtiqaa-speed__submit {
		transition: none;
	}
}

.irtiqaa-speed__error,
.irtiqaa-agent__error {
	margin: 0;
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid var(--irtiqaa-poor);
	border-radius: 4px;
	background: color-mix(in srgb, var(--irtiqaa-poor) 10%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-speed__result {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
}

@media (min-width: 900px) {
	.irtiqaa-speed__result {
		grid-template-columns: minmax(15rem, 20rem) 1fr;
		align-items: start;
	}

	.irtiqaa-speed__act {
		grid-column: 1 / -1;
	}
}

.irtiqaa-speed__score {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.irtiqaa-speed__dial {
	flex: 0 0 auto;
}

.irtiqaa-speed__track {
	stroke: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.irtiqaa-speed__arc {
	transition: stroke-dasharray 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.irtiqaa-speed__num {
	font-size: 34px;
	font-weight: 700;
	fill: var(--wp--preset--color--contrast);
}

.irtiqaa-speed__dial.is-good .irtiqaa-speed__arc { stroke: var(--irtiqaa-good); }
.irtiqaa-speed__dial.is-average .irtiqaa-speed__arc { stroke: var(--irtiqaa-average); }
.irtiqaa-speed__dial.is-poor .irtiqaa-speed__arc { stroke: var(--irtiqaa-poor); }

.irtiqaa-speed__verdictWord {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
}

.irtiqaa-speed__result.is-good .irtiqaa-speed__verdictWord { color: var(--irtiqaa-good); }
.irtiqaa-speed__result.is-average .irtiqaa-speed__verdictWord { color: var(--irtiqaa-average); }
.irtiqaa-speed__result.is-poor .irtiqaa-speed__verdictWord { color: var(--irtiqaa-poor); }

.irtiqaa-speed__tested {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	/* anywhere, not break-all: break-all splits every line at whatever
	   character lands on the edge, so a short domain that would have fitted
	   comes out cut in half. This only breaks when there is no other way.
	   Safe here because the element is a dir="ltr" URL — the rule against it
	   is about Arabic, whose letterforms must never be split. */
	overflow-wrap: anywhere;
}

.irtiqaa-speed__field {
	margin: 0;
}

.irtiqaa-speed__result .irtiqaa-speed__field {
	margin-block-start: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
}

.irtiqaa-speed__metrics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 10px;
	overflow: hidden;
}

.irtiqaa-speed__metric {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	background: var(--wp--preset--color--surface);
}

.irtiqaa-speed__metricLabel {
	display: grid;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.irtiqaa-speed__metricLabel small {
	color: var(--wp--preset--color--muted);
	font-size: 0.82em;
	font-weight: 400;
}

.irtiqaa-speed__metricValue {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * The word beside every value. This is what keeps the traffic-light colours
 * from being the only carrier of meaning — WCAG 1.4.1, and the reason the
 * three colours at the top of this section are allowed at all.
 */
.irtiqaa-speed__metricTag {
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	white-space: nowrap;
}

.irtiqaa-speed__metric.is-good .irtiqaa-speed__metricTag {
	background: color-mix(in srgb, var(--irtiqaa-good) 16%, transparent);
	color: var(--irtiqaa-good);
}

.irtiqaa-speed__metric.is-average .irtiqaa-speed__metricTag {
	background: color-mix(in srgb, var(--irtiqaa-average) 16%, transparent);
	color: var(--irtiqaa-average);
}

.irtiqaa-speed__metric.is-poor .irtiqaa-speed__metricTag {
	background: color-mix(in srgb, var(--irtiqaa-poor) 16%, transparent);
	color: var(--irtiqaa-poor);
}

.irtiqaa-speed__metric.is-unknown .irtiqaa-speed__metricTag {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	color: var(--wp--preset--color--muted);
}

/*
 * Three columns will not fit at 360px. The label keeps the first row with the
 * number beside it, and the verdict word drops under the number rather than
 * under the label — a tag hanging off the wrong end of the row reads as
 * belonging to the metric below it.
 */
@media (max-width: 600px) {
	.irtiqaa-speed__metric {
		grid-template-columns: 1fr auto;
		row-gap: 0.4rem;
	}

	.irtiqaa-speed__metricTag {
		grid-column: 2;
		justify-self: end;
	}
}

.irtiqaa-speed__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.irtiqaa-speed__verify {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.irtiqaa-speed__verify:hover,
.irtiqaa-speed__verify:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* Admin-only notice while the API key is unset. Never seen by the public. */
.irtiqaa-speed--setup {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
}

.irtiqaa-speed--setup code {
	display: inline-block;
	margin-block-start: 0.5rem;
	padding: 0.3rem 0.7rem;
	border-radius: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * The journey — كيف نعمل
 *
 * Four stages scrolling past a column that stays put. The argument the section
 * makes is that this is an order, not a menu, so the reader meets one stage at
 * a time and the sequence is felt rather than listed.
 *
 * Pinned with position:sticky and nothing else. motion.md names pinning as the
 * moment to reach for GSAP; that trade is wrong on a site whose pitch is page
 * speed and whose own PageSpeed score is 30. Two declarations, no runtime.
 * ------------------------------------------------------------------------- */

.irtiqaa-journey {
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-journey__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* --- The sticky column --------------------------------------------------- */

.irtiqaa-journey__title {
	margin-block: 0.35em 0.5em;
	/* Bolder and larger than the old process heading: this is the section the
	   page turns on, and it was set at the same weight as a card title. */
	font-size: clamp(1.9rem, 4.6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.18;
}

.irtiqaa-journey__lede {
	margin: 0;
	max-width: 30rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

.irtiqaa-journey__count {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	margin-block: var(--wp--preset--spacing--40) 0.75rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.irtiqaa-journey__at {
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.irtiqaa-journey__of {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.irtiqaa-journey__cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --- The stages ---------------------------------------------------------- */

.irtiqaa-journey__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	counter-reset: none;
}

/*
 * A grid, not a padded box with an absolutely positioned number. Once each
 * stage is a screenful tall and its content is centred vertically, an absolute
 * number pinned to the box's top edge ends up hundreds of pixels above the
 * title it belongs to. As a grid item it sits beside the title at any height.
 */
.irtiqaa-journey__step {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	column-gap: 1.15rem;
	align-content: center;
}

.irtiqaa-journey__num {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.irtiqaa-journey__step-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 0.5rem;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.3;
}

.irtiqaa-journey__step-body {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	max-width: 34rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.95;
}

/* The stage the line has reached. Gold on the number, full strength on the
   text; the others sit back so the one being reached is the one being read.
   Never below the contrast floor — a dimming, not a hiding. */
.irtiqaa-journey__step.is-on .irtiqaa-journey__num {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Pinned, from 900px -------------------------------------------------- */

@media (min-width: 900px) {
	.irtiqaa-journey__inner {
		grid-template-columns: minmax(18rem, 26rem) 1fr;
		gap: var(--wp--preset--spacing--70);
		align-items: start;
	}

	/*
	 * The pin. `top` clears the sticky site header, which condenses to about
	 * 5rem once the reader is into the page — this is the whole mechanism.
	 */
	.irtiqaa-journey__aside {
		position: sticky;
		top: 7rem;
	}

	/*
	 * The spacer. Each stage owns most of a screen, which is the scroll
	 * distance that makes the pin readable: without it the four stages pass in
	 * one flick and the column never appears to hold.
	 */
	.irtiqaa-journey__steps {
		gap: 0;
	}

	.irtiqaa-journey__step {
		min-height: 78vh;
		padding-block: var(--wp--preset--spacing--50);
	}

	.irtiqaa-journey__step :is(.irtiqaa-journey__step-title, .irtiqaa-journey__step-body) {
		transition: opacity 0.45s ease;
	}

	.irtiqaa-journey__step:not(.is-on) :is(.irtiqaa-journey__step-title, .irtiqaa-journey__step-body) {
		opacity: 0.45;
	}
}

/* --- The progress track -------------------------------------------------- */

/*
 * Vertical on desktop beside the pinned column, horizontal below it on
 * phones where the column is not pinned and a tall rail would be nonsense.
 */
.irtiqaa-journey__track {
	position: relative;
	height: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	overflow: hidden;
}

.irtiqaa-journey__fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

[dir="rtl"] .irtiqaa-journey__fill {
	transform-origin: right center;
}

@media (min-width: 900px) {
	/* Beside a pinned column the track reads as the journey itself, so it
	   stands up and fills downwards — the direction the reader is travelling. */
	.irtiqaa-journey__track {
		width: 3px;
		height: 9rem;
	}

	.irtiqaa-journey__fill,
	[dir="rtl"] .irtiqaa-journey__fill {
		transform: scaleY(0);
		transform-origin: center top;
	}
}

/*
 * Reduced motion, and the no-script case. showcase.js adds is-complete and
 * registers no scroll listener at all under prefers-reduced-motion — motion.md
 * is explicit that this means no motion, not shorter motion — so the finished
 * state has to be reachable from CSS alone.
 */
.irtiqaa-journey.is-complete .irtiqaa-journey__fill {
	transform: none;
}

.irtiqaa-journey.is-complete .irtiqaa-journey__num {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-journey__num,
	.irtiqaa-journey__step :is(.irtiqaa-journey__step-title, .irtiqaa-journey__step-body) {
		transition: none;
	}

	/* Nothing is dimmed when nothing will ever light it. */
	.irtiqaa-journey__step:not(.is-on) :is(.irtiqaa-journey__step-title, .irtiqaa-journey__step-body) {
		opacity: 1;
	}

	/* A pin is motion the reader did not ask for. */
	.irtiqaa-journey__aside {
		position: static;
	}

	.irtiqaa-journey__step {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Gallery teaser — the home page's three
 *
 * The same grid the ads service renders, at home-page weight: three across on
 * one row, and a CTA through to the full set. The service page keeps the wide
 * multi-row grid, so only what differs is declared here.
 * ------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.irtiqaa-gallery--teaser .irtiqaa-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.irtiqaa-gallery__more {
	margin-block: var(--wp--preset--spacing--50) 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Patterns
 *
 * Sections an editor inserts and then edits on the canvas, as opposed to the
 * dynamic blocks in inc/, whose copy lives in PHP. Most of them reuse classes
 * that already exist — the CTA band pattern needs nothing here at all — so
 * this section only carries what is genuinely new.
 * ------------------------------------------------------------------------- */

.irtiqaa-intro {
	max-width: 42rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-intro__lede {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

.irtiqaa-steps-band {
	padding-block: var(--wp--preset--spacing--60);
}

.irtiqaa-steps-band__num {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0 0 0.9rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	/* Western digits throughout, matching irtiqaa_number(). rtl-arabic.md:
	   pick one set and never mix. */
	font-variant-numeric: tabular-nums;
}

.irtiqaa-steps-band__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.irtiqaa-steps-band__body {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

/*
 * The open canvas.
 *
 * Five templates were a fixed run of dynamic blocks with nowhere to put
 * anything new: the front page, about, our work, partners and a service page
 * had no wp:post-content at all, so adding a section meant editing a template
 * or the Site Editor. This is the region a pattern gets inserted into instead.
 *
 * Deliberately not .irtiqaa-prose. That wrapper clamps .alignfull to the
 * container width, which it has to — the inherited classic-editor articles
 * carry alignment classes wide enough to push the document sideways, one of
 * them 1857px against a 1905px viewport. But the clamp also means a full-bleed
 * section pattern dropped into prose cannot go full-bleed, and full-bleed is
 * most of what these pages are made of. Two regions, two jobs: prose guards
 * inherited content, canvas hosts new sections.
 *
 * Core's constrained layout does the rest — children sit at contentSize,
 * .alignwide reaches wideSize and .alignfull fills the viewport, because the
 * group itself is not width-limited, only its children are.
 */
.irtiqaa-canvas > .entry-content > :is(p, li) {
	line-height: 1.95;
}

.irtiqaa-canvas :is(h2, h3, h4) {
	text-wrap: balance;
}

/*
 * Padding only when there is something to pad.
 *
 * wp:post-content on a page with no content still renders its wrapper, and
 * four of these five pages are empty in the database today — so an
 * unconditional padding-block would put a band of dead space in the middle of
 * the front page. :has() is the whole mechanism; a browser without it gets no
 * padding rather than a broken layout, and the content still renders.
 */
.irtiqaa-canvas:has(.entry-content > *) {
	padding-block: var(--wp--preset--spacing--60);
}

/*
 * ...but the canvas is exempt from that clamp.
 *
 * The rule above is written `.irtiqaa-prose :is(...), .entry-content :is(...)`,
 * and its second half is unscoped — .entry-content is the post-content block's
 * own class, so the guard reaches every content region on the site including
 * this one. Measured in the browser: an alignfull group inside the canvas came
 * out 704px against a 1521px viewport, exactly contentSize, which is the clamp
 * winning rather than core's constrained layout.
 *
 * Scoping it here rather than rewriting the rule above, because that rule is
 * doing real work for the inherited articles and narrowing its selector risks
 * letting one of them push the document sideways again. Higher specificity,
 * stated as an exception, is the smaller change.
 */
.irtiqaa-canvas .entry-content > .alignfull {
	max-width: none;
}

.irtiqaa-canvas .entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/*
 * The agent-readiness check.
 *
 * Sibling of the speed test, and it shares that section's form, spinner and
 * error styling above rather than restating it — two tools on two service
 * pages that look like two different products would read as two different
 * agencies. Only what is genuinely different lives here: the result is a list
 * of nine findings, not one dial.
 */
.irtiqaa-agent {
	--irtiqaa-pass: #4ADE80;
	--irtiqaa-warn: var(--wp--preset--color--accent);
	--irtiqaa-fail: #FF6B6B;
	--irtiqaa-unknown: var(--wp--preset--color--muted);

	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--deep);
}

.irtiqaa-agent__score {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
}

.irtiqaa-agent__score-num {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	/* The count reads left-to-right in both languages: it is "6 / 9", not a
	   phrase, and the bidi algorithm otherwise moves the slash. */
	direction: ltr;
	unicode-bidi: isolate;
}

.irtiqaa-agent__score-label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-agent__tested {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block: 0.5rem var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-agent__tested a {
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

.irtiqaa-agent__rows {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.irtiqaa-agent__row {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	/* The status colour on the leading edge, so it mirrors with the text. */
	border-inline-start: 3px solid var(--irtiqaa-unknown);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
}

.irtiqaa-agent__row.is-pass { border-inline-start-color: var(--irtiqaa-pass); }
.irtiqaa-agent__row.is-warn { border-inline-start-color: var(--irtiqaa-warn); }
.irtiqaa-agent__row.is-fail { border-inline-start-color: var(--irtiqaa-fail); }

.irtiqaa-agent__row-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/*
 * The pill carries a word, not only a colour. Status by hue alone fails
 * WCAG 1.4.1 and is unreadable to the eight percent of men who cannot
 * separate the green from the red.
 */
.irtiqaa-agent__pill {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--irtiqaa-unknown) 20%, transparent);
	color: var(--irtiqaa-unknown);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	white-space: nowrap;
}

.is-pass .irtiqaa-agent__pill { background: color-mix(in srgb, var(--irtiqaa-pass) 18%, transparent); color: var(--irtiqaa-pass); }
.is-warn .irtiqaa-agent__pill { background: color-mix(in srgb, var(--irtiqaa-warn) 18%, transparent); color: var(--irtiqaa-warn); }
.is-fail .irtiqaa-agent__pill { background: color-mix(in srgb, var(--irtiqaa-fail) 18%, transparent); color: var(--irtiqaa-fail); }

.irtiqaa-agent__label {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.irtiqaa-agent__msg {
	margin-block: 0.45rem 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

/*
 * The evidence link is the section's whole argument — the visitor opens the
 * same URL we did and sees the same thing — so it is a visible, tappable
 * target rather than a footnote.
 */
.irtiqaa-agent__evidence {
	display: inline-block;
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--x-small);
	overflow-wrap: anywhere;
}

.irtiqaa-agent__evidence:hover,
.irtiqaa-agent__evidence:focus-visible {
	color: var(--wp--preset--color--accent);
}

.irtiqaa-agent__ask {
	margin-block-start: var(--wp--preset--spacing--50);
}

.irtiqaa-agent__credit {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-agent__credit a {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * The voices, as a swipeable row on a phone
 *
 * Eight testimonial cards stacked one per screen is most of a phone's scroll
 * spent on a section a visitor samples rather than reads — they watch one, or
 * none. Side by side, the same eight are one gesture and the section costs a
 * screen instead of eight.
 *
 * Scroll-snap, not a carousel script. The list is already a <ul> of buttons in
 * the document, and native overflow keeps every one of them findable by
 * in-page search, reachable by Tab, and announced in order — which is more
 * than a slider library gives back for its weight, on a site that sells page
 * speed.
 *
 * No dots and no arrows: the third card is deliberately cut by the edge, and a
 * half-visible card is the affordance. Arrows would need JS and a second
 * keyboard path to something the buttons already reach.
 * ------------------------------------------------------------------------ */

@media (max-width: 639px) {
	.irtiqaa-voices__list {
		/*
		 * grid-auto-flow turns the existing single column into a row without
		 * restating the grid. The cards keep their gap and their styling; only
		 * the axis changes.
		 */
		grid-auto-flow: column;
		grid-auto-columns: 76%;
		grid-template-columns: none;

		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;

		/*
		 * Bleed to the section's edges so the row starts flush and the next
		 * card is cut by the screen rather than by a margin. The value is the
		 * section's own inline padding: below this breakpoint the max() in the
		 * shared section rule always resolves to spacing--40.
		 *
		 * margin-inline and padding-inline, never left/right — this section is
		 * RTL first and the row scrolls the other way there.
		 */
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
		scroll-padding-inline: var(--wp--preset--spacing--40);

		/*
		 * overflow clips in both axes once one is set, and the focus ring is
		 * drawn outside the card. Without this the keyboard outline on a card
		 * is sliced off top and bottom.
		 */
		padding-block: 4px;

		/* The scrollbar is noise under a row of video thumbnails; the cut card
		   already says the row moves. */
		scrollbar-width: none;
	}

	.irtiqaa-voices__list::-webkit-scrollbar {
		display: none;
	}

	.irtiqaa-voice {
		scroll-snap-align: start;
	}

	/*
	 * A card that has been opened stops snapping.
	 *
	 * voices.js swaps the button for a YouTube iframe in place. Snap on a
	 * playing video fights the person trying to scroll past it, and the
	 * iframe wants the width anyway.
	 */
	.irtiqaa-voice:has(iframe) {
		scroll-snap-align: none;
		grid-column: span 1;
	}
}

/* ---------------------------------------------------------------------------
 * Page transitions
 *
 * Two lines of CSS and no JavaScript. A router — Barba, Swup, Turbo — would
 * mean re-initialising thirteen scripts on every navigation, re-firing GTM on
 * a site that already double-counts from two containers, and putting Rank
 * Math's output behind a client-side swap. This is the browser doing it.
 *
 * Where it is unsupported nothing happens at all: the navigation is the plain
 * one it has always been. Chrome and Edge 126+, Safari 18+; Firefox has the
 * same-document half and cross-document is still in development, which is why
 * this is written as an enhancement and never depended on.
 *
 * Same-origin only, and only for navigations the reader started by clicking
 * something on the page — the spec's rule, not ours, and it is the right one.
 * ------------------------------------------------------------------------ */

@view-transition {
	navigation: auto;
}

/*
 * The chrome holds still while the content changes.
 *
 * Without a name of its own every fixed and sticky element is part of the root
 * snapshot, so the header, both docks and the footer would cross-fade into
 * copies of themselves — the one thing on screen that did not need to move.
 * Twelve fixed or sticky rules in this file would have flickered.
 */
header.wp-block-template-part {
	view-transition-name: irtiqaa-header;
}

footer.wp-block-template-part {
	view-transition-name: irtiqaa-footer;
}

.irtiqaa-dock--contact {
	view-transition-name: irtiqaa-dock-contact;
}

.irtiqaa-dock--tools {
	view-transition-name: irtiqaa-dock-tools;
}

/*
 * One movement, not a set piece.
 *
 * The outgoing page fades; the incoming one fades and rises a little. motion.md
 * asks for one orchestrated moment per page and warns that fade-and-slide-up on
 * everything is the most recognisable template-site tell there is — so this is
 * deliberately short, small, and the same every time rather than choreographed
 * per template.
 *
 * translate only on the incoming side. Moving both reads as a slot machine.
 */
::view-transition-old(root) {
	animation: irtiqaa-vt-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: irtiqaa-vt-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes irtiqaa-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes irtiqaa-vt-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

/*
 * The named elements get a plain cross-fade with no movement, so the header
 * does not slide while the page under it does.
 */
::view-transition-old(irtiqaa-header),
::view-transition-new(irtiqaa-header),
::view-transition-old(irtiqaa-footer),
::view-transition-new(irtiqaa-footer),
::view-transition-old(irtiqaa-dock-contact),
::view-transition-new(irtiqaa-dock-contact),
::view-transition-old(irtiqaa-dock-tools),
::view-transition-new(irtiqaa-dock-tools) {
	animation: none;
	mix-blend-mode: normal;
}

/*
 * Reduced motion turns the whole thing off, not down.
 *
 * navigation: none is the switch the spec provides, so the browser never
 * starts a transition rather than starting one and animating it to nothing.
 */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}


/* ---------------------------------------------------------------------------
 * The lead form
 *
 * The plugin renders it deliberately unstyled — plain labelled fields, so it
 * still works if this theme is swapped for another. This is the theme dressing
 * it to match the section it sits inside, which is the signup block's dark
 * ground.
 * ------------------------------------------------------------------------ */

.irtiqaa-leadform {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.irtiqaa-leadform__row {
	margin: 0;
}

.irtiqaa-leadform__row label {
	display: block;
	margin-block-end: 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* The required marker is decorative — the field carries `required`, which is
   what assistive tech reads — so it is dimmed rather than shouted. */
.irtiqaa-leadform__row label span[aria-hidden] {
	color: var(--wp--preset--color--accent);
	opacity: 0.8;
}

/*
 * Every text-like input, named by exclusion rather than by listing types.
 *
 * This rule used to say `input[type="text"], input[type="url"]`. Splitting the
 * contact field into an email and a phone field added `type="email"` and
 * `type="tel"`, which matched neither — so two fields on the site's main
 * conversion form rendered as raw browser defaults, white and square-cornered,
 * on a navy panel. The focus and invalid rules below already used
 * `:is(input, textarea)` and kept working, which is what made it look like a
 * half-styled form rather than an unstyled one.
 *
 * Excluding the three that must not be styled is the shape that cannot break
 * again the next time a field type is added.
 */
.irtiqaa-leadform :is(
	input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	textarea
) {
	width: 100%;
	/*
	 * This theme has no global border-box reset — body computes to content-box
	 * and every field that needs it declares it, as the search field does. Left
	 * off, width:100% plus 1.1rem of side padding and a 1px border made these
	 * inputs 550px inside a 513px form: 37px of overflow, which reads as the
	 * form being off-centre rather than as the fields being too wide.
	 */
	box-sizing: border-box;
	padding: 0.85rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.irtiqaa-leadform textarea {
	resize: vertical;
	min-height: 6.5rem;
	line-height: 1.8;
}

.irtiqaa-leadform ::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent);
	opacity: 1;
}

/* Same reasoning as the search field and the speed test's input: the global
   2px offset ring is too loud around a wide rounded field that already has a
   border of its own, so the border itself becomes the focus indicator and
   carries a halo for the contrast. */
.irtiqaa-leadform :is(input, textarea):focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

/* A field the browser has judged invalid, but only once the reader has left
   it — :invalid alone paints every empty required field red before anyone has
   typed a character. */
.irtiqaa-leadform :is(input, textarea):user-invalid {
	border-color: #FF6B6B;
}

.irtiqaa-leadform__actions {
	margin: 0.4rem 0 0;
}

.irtiqaa-leadform__actions button {
	border: 0;
	cursor: pointer;
}

.irtiqaa-leadform__actions button:disabled {
	opacity: 0.55;
	cursor: progress;
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   computed styles skips a hidden field and fills a visible one — and this
   needs to look fillable. aria-hidden and tabindex keep it away from anyone
   real. */
.irtiqaa-leadform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.irtiqaa-leadform__out:empty {
	display: none;
}

.irtiqaa-leadform__out {
	margin: 0.6rem 0 0;
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
}

.irtiqaa-leadform__out.is-error {
	border-inline-start-color: #FF6B6B;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-leadform :is(input, textarea) {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Case studies
 *
 * The section that says what a number meant. The gallery shows a dashboard and
 * the evidence panel prints a figure; this one carries the before, the after,
 * and the working — so its job is to stay readable at three cases on a page
 * without becoming a wall of text. The working is inside a closed <details>
 * for exactly that reason.
 * ------------------------------------------------------------------------ */

.irtiqaa-cases {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--70);
}

.irtiqaa-cases__head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.irtiqaa-cases__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

.irtiqaa-cases__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 56ch;
	color: var(--wp--preset--color--muted);
}

.irtiqaa-cases__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* The teaser puts three side by side; the full set on a service page stays one
   per row, because each of those carries its numbers and its working. */
.irtiqaa-cases__list--teaser {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.irtiqaa-case {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 26%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 38%, transparent);
}

/* Who it is about, which is deliberately not a name. */
.irtiqaa-case__who {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-case__client,
.irtiqaa-case__sector {
	color: var(--wp--preset--color--muted);
}

/*
 * The redaction bar.
 *
 * An empty element, so there is no name in the markup to select, view-source,
 * or read aloud — which is the difference between hiding a name and blurring
 * one. The width is arbitrary on purpose: a bar sized to the real name would
 * leak its length.
 */
.irtiqaa-redact {
	display: inline-block;
	inline-size: 5.5rem;
	block-size: 0.85em;
	border-radius: 3px;
	vertical-align: -0.1em;
	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--wp--preset--color--muted) 55%, transparent) 0 6px,
			color-mix(in srgb, var(--wp--preset--color--muted) 30%, transparent) 6px 12px
		);
}

.irtiqaa-case__headline {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.irtiqaa-case__headline a {
	color: inherit;
	text-decoration: none;
}

.irtiqaa-case__headline a:hover,
.irtiqaa-case__headline a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.irtiqaa-case__meta {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-case__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 64ch;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * The numbers
 *
 * Before and after as two labelled cells rather than "before → after". An
 * arrow would have to mirror in RTL and would be one more thing to get wrong;
 * two small labels read identically in both directions.
 * ------------------------------------------------------------------------ */

.irtiqaa-case__metrics {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.irtiqaa-metric {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 18%, transparent);
}

.irtiqaa-metric:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.irtiqaa-metric__label {
	flex: 1 1 8rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-metric__pair {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
}

.irtiqaa-metric__cell {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.irtiqaa-metric__when {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xx-small, 0.72rem);
	opacity: 0.8;
}

.irtiqaa-metric__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The "after" is the one the eye should land on. */
.irtiqaa-metric__cell--after .irtiqaa-metric__value {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium, 1.15rem);
}

.irtiqaa-metric__unit {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/*
 * The delta is one colour whichever way it points.
 *
 * Green-up / red-down would be wrong half the time here: a campaign case is
 * as likely to be proud of CPC falling 73% as of orders rising 73%, and
 * nothing in the data says which direction is the good one. The arrow states
 * the direction and the reader knows what it means for that metric.
 */
.irtiqaa-metric__delta {
	margin-inline-start: auto;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * The working
 * ------------------------------------------------------------------------ */

.irtiqaa-case__more {
	margin-block-start: var(--wp--preset--spacing--40);
}

.irtiqaa-case__more > summary {
	cursor: pointer;
	display: inline-block;
	padding: 0.35em 0.9em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-case__more > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.irtiqaa-case__detail {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}

.irtiqaa-case__blocktitle {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-case__points,
.irtiqaa-case__plays {
	margin: 0;
	padding-inline-start: 1.2em;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	max-width: 68ch;
}

.irtiqaa-case__plays > li > strong {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.irtiqaa-case__link {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-cases__more {
	margin-block: var(--wp--preset--spacing--50) 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-cases__footnote {
	margin-block-start: var(--wp--preset--spacing--40);
	max-width: 72ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* -------------------------------------------------------------------------
 * The testimonial reel
 *
 * A full-screen vertical feed, one client per screen. The scrolling is CSS
 * scroll-snap, not script: the browser does it natively, it keeps its momentum
 * on a touchscreen, and it costs nothing on a feed that gets flicked quickly.
 *
 * The videos are landscape 16:9, so a slide centres the frame rather than
 * filling the screen with it. Cropping a talking head to a vertical frame to
 * imitate a format these videos were not shot in would cut faces in half.
 * ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * The header's story button.
 *
 * It used to be a gold pill reading تجارب شركاء النجاح, and under 600px it was
 * set to display:none — so the one control carrying the site's proof was
 * absent on the viewport most of the traffic arrives on.
 *
 * A pill cannot stay: at 360px the bar is already toggle, logo and search, and
 * there is no room for three words. A ringed face can. It is 44px, it is the
 * one visual convention every phone user already knows, and unlike a pill it
 * says what it opens before it is read — a person, not a page.
 *
 * Same DOM at both sizes. Above 600px the label sits beside the ring; below
 * it collapses to screen-reader text, which is the pattern the menu and
 * search labels in this bar already follow.
 * ------------------------------------------------------------------------- */

.irtiqaa-storybtn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/*
 * The ring: one arc per video.
 *
 * --irtiqaa-arcs comes from PHP as the number of testimonials. The gradient
 * draws that many segments with a gap between each, so the control shows how
 * much there is to watch before anyone reads the number beside it.
 *
 * `from -90deg` starts the first arc at the top rather than at the 3 o'clock
 * position a conic gradient defaults to. The ring is radial, so it does not
 * mirror in RTL and does not need to.
 */
.irtiqaa-storybtn__ring {
	--irtiqaa-arcs: 8;
	--irtiqaa-arc: calc(360deg / var(--irtiqaa-arcs));

	/*
	 * The gap is a fraction of the arc, not a fixed angle.
	 *
	 * A fixed angle has to be chosen for one count and is wrong for every
	 * other: 7deg photographed as a solid gold circle at eight arcs — the
	 * count the ring exists to show was invisible — and 13deg, which does
	 * read, would eat half the ring at twelve. As a ratio the breaks stay
	 * proportional at every count, so the ring looks like the same object
	 * whether there are three testimonials or twelve, with no threshold to
	 * maintain.
	 */
	--irtiqaa-gap: calc(var(--irtiqaa-arc) * 0.28);

	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 3px;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from -90deg,
		var(--wp--preset--color--accent) 0deg calc(var(--irtiqaa-arc) - var(--irtiqaa-gap)),
		transparent calc(var(--irtiqaa-arc) - var(--irtiqaa-gap)) var(--irtiqaa-arc)
	);
	transition: transform 0.25s ease, filter 0.25s ease;
}



/* The dark gap between ring and face, so the arcs read as a ring rather than
   a border painted onto the photograph. */
.irtiqaa-storybtn__disc {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 2px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

.irtiqaa-storybtn__face {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* No thumbnail for any video: a play glyph on the brand navy rather than an
   empty circle. Not mirrored — a play triangle points at the timeline, which
   runs the same way in both directions. */
.irtiqaa-storybtn__glyph {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	background: var(--wp--preset--color--surface, #10203a);
	color: var(--wp--preset--color--accent);
}

.irtiqaa-storybtn__text {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	white-space: nowrap;
}

.irtiqaa-storybtn__count {
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-variant-numeric: tabular-nums;
}

.irtiqaa-storybtn:hover .irtiqaa-storybtn__ring,
.irtiqaa-storybtn:focus-visible .irtiqaa-storybtn__ring {
	transform: scale(1.06);
}

.irtiqaa-storybtn:hover .irtiqaa-storybtn__label {
	color: var(--wp--preset--color--accent);
}

/* The focus ring goes on the circle, not the whole flex row, or it draws a
   long rectangle around the label at desktop width. */
.irtiqaa-storybtn:focus-visible {
	outline: none;
}

.irtiqaa-storybtn:focus-visible .irtiqaa-storybtn__ring {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/*
 * Watched.
 *
 * The state that makes a story row worth looking at twice: an unwatched ring
 * is gold, a watched one is grey, and the difference is legible at a glance
 * from across the bar. reel.js sets this from localStorage, so it is a
 * per-visitor memory and nothing is stored about anyone.
 *
 * The count badge goes quiet with it — a gold badge beside a grey ring reads
 * as an error rather than a state.
 */
.irtiqaa-storybtn.is-seen .irtiqaa-storybtn__ring {
	background: repeating-conic-gradient(
		from -90deg,
		var(--wp--preset--color--muted) 0deg calc(var(--irtiqaa-arc) - var(--irtiqaa-gap)),
		transparent calc(var(--irtiqaa-arc) - var(--irtiqaa-gap)) var(--irtiqaa-arc)
	);
}

.irtiqaa-storybtn.is-seen .irtiqaa-storybtn__count {
	background: rgb(255 255 255 / 12%);
	color: var(--wp--preset--color--contrast);
}

/*
 * The unwatched ring turns, slowly.
 *
 * One rotation every twelve seconds is below the threshold where motion in
 * peripheral vision is read as an animation; it is enough to catch an eye
 * moving past and not enough to compete with the page. It stops once watched,
 * because at that point it has nothing left to say.
 */
@keyframes irtiqaa-storyspin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.irtiqaa-storybtn:not(.is-seen) .irtiqaa-storybtn__ring::before {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: 50%;
		background: conic-gradient(
			from -90deg,
			transparent 0deg 300deg,
			var(--wp--preset--color--contrast) 340deg,
			transparent 360deg
		);
		-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
		mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
		animation: irtiqaa-storyspin 12s linear infinite;
		pointer-events: none;
	}

	.irtiqaa-storybtn:hover .irtiqaa-storybtn__ring::before {
		animation-duration: 4s;
	}
}

/*
 * Under 600px the label leaves and the ring stays.
 *
 * Same declarations core uses for .screen-reader-text, so the words are still
 * in the accessibility tree — and the link carries its own aria-label besides,
 * so the control is named either way.
 */
@media (max-width: 600px) {
	.irtiqaa-storybtn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.irtiqaa-storybtn__ring {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}
}

/* Hold the page still behind the dialog. */
.irtiqaa-stories-open,
.irtiqaa-stories-open body {
	overflow: hidden;
}

.irtiqaa-stories {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base, #00172F);
}

.irtiqaa-stories[hidden] {
	display: none;
}

.irtiqaa-stories__bar {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex: 0 0 auto;
	padding: .9rem 1.1rem;
	border-block-end: 1px solid rgb(255 255 255 / 12%);
	color: #fff;
}

.irtiqaa-stories__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.irtiqaa-stories__position {
	margin: 0;
	margin-inline-start: auto;
	color: var(--wp--preset--color--muted, #93A9C0);
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-stories__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.irtiqaa-stories__close:hover,
.irtiqaa-stories__close:focus-visible {
	background: rgb(255 255 255 / 20%);
}

.irtiqaa-stories__feed {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/*
	 * No scrollbar. The desktop default is a chunky light track down the edge
	 * of a full-screen video, which is the most conspicuous thing on the
	 * screen and reads as a browser artefact rather than part of the design.
	 *
	 * Removing it is only safe because the affordances it carried are all
	 * still here and better: snapping makes the next slide inevitable, the
	 * counter in the bar says 3 / 8, and the hint says which way to scroll.
	 * Keyboard scrolling is unaffected — arrows and Page Up/Down are handled
	 * explicitly, which a scrollbar was never responsible for.
	 */
	scrollbar-width: none;
}

.irtiqaa-stories__feed::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.irtiqaa-stories__feed:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #FFBF1C);
	outline-offset: -2px;
}

.irtiqaa-stories__slide {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1rem;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	box-sizing: border-box;
}

/* 16:9, capped so a tall screen does not stretch a small video. */
.irtiqaa-stories__frame {
	position: relative;
	width: min(100%, 900px);
	aspect-ratio: 16 / 9;
	max-height: 70vh;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
}

.irtiqaa-stories__thumb {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/*
 * The embed covers the poster; it does not follow it.
 *
 * The poster is a block image filling the frame, and the script appends the
 * iframe after it. In normal flow that put a second full-height box directly
 * below the first, outside a box with `overflow: hidden` — so the video was
 * clipped away while its audio kept playing. A talking head you could hear and
 * not see, which is the one failure a testimonial reel cannot have.
 *
 * Absolute against the frame's positioning context, so it lands on top of the
 * poster at exactly the frame's size whatever the poster does.
 */
.irtiqaa-stories__frame iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Above the poster, below the play control's own stacking. */
	z-index: 1;
}

.irtiqaa-stories__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: rgb(0 13 27 / 35%);
	color: #fff;
	cursor: pointer;
}

.irtiqaa-stories__slide.is-playing .irtiqaa-stories__play {
	display: none;
}

.irtiqaa-stories__play-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #FFBF1C);
	color: var(--wp--preset--color--base, #00172F);
}

/*
 * The play glyph does not mirror. Arrows and chevrons follow the reading
 * direction; a play triangle is a media convention and points the same way in
 * every language — every Arabic-language player on the web agrees. The optical
 * nudge is logical so the triangle still sits centred in its circle.
 */
.irtiqaa-stories__play-icon svg {
	width: 30px;
	height: 30px;
	margin-inline-start: 4px;
}

.irtiqaa-stories__play:hover .irtiqaa-stories__play-icon,
.irtiqaa-stories__play:focus-visible .irtiqaa-stories__play-icon {
	transform: scale(1.06);
}

.irtiqaa-stories__label {
	margin: 0;
	max-width: 60ch;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.irtiqaa-stories__hint {
	flex: 0 0 auto;
	margin: 0;
	padding: .7rem;
	color: var(--wp--preset--color--muted, #93A9C0);
	font-size: .8rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-stories__feed {
		scroll-behavior: auto;
	}

	.irtiqaa-stories__play:hover .irtiqaa-stories__play-icon,
	.irtiqaa-stories__play:focus-visible .irtiqaa-stories__play-icon {
		transform: none;
	}
}

/* A short viewport has no room for a 70vh video plus chrome. */
@media (max-height: 560px) {
	.irtiqaa-stories__frame {
		max-height: 58vh;
	}

	.irtiqaa-stories__hint {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * The newsletter form
 *
 * One field and a button, in the article rail. It replaced a FluentForm
 * shortcode that was styled by the plugin inside a rail styled by this theme,
 * and loaded a stylesheet and a script on every article to draw one input.
 * ---------------------------------------------------------------------- */

.irtiqaa-subscribe__row {
	display: flex;
	gap: .4rem;
}

.irtiqaa-subscribe__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem .7rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 8px;
	background: rgb(255 255 255 / 6%);
	color: #fff;
	font-family: inherit;
	font-size: .85rem;
}

.irtiqaa-subscribe__input::placeholder {
	color: var(--wp--preset--color--muted, #93A9C0);
}

.irtiqaa-subscribe__input:focus-visible {
	border-color: var(--wp--preset--color--accent, #FFBF1C);
	outline: 2px solid var(--wp--preset--color--accent, #FFBF1C);
	outline-offset: -2px;
}

.irtiqaa-subscribe__btn {
	flex: 0 0 auto;
	padding: .55rem .9rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent, #FFBF1C);
	color: var(--wp--preset--color--base, #00172F);
	font-family: inherit;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
}

.irtiqaa-subscribe__btn:disabled {
	opacity: .6;
	cursor: default;
}

/*
 * The honeypot. Moved off-screen rather than `display: none`, because a bot
 * that reads styles skips a hidden field — and this one is meant to be filled
 * in by exactly those.
 */
.irtiqaa-subscribe__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.irtiqaa-subscribe__status {
	margin: .5rem 0 0;
	font-size: .8rem;
	min-height: 1.2em;
}

/* Colour carries the meaning for anyone who can see it; role="status" carries
   it to anyone who cannot. */
.irtiqaa-subscribe__status.is-ok {
	color: var(--wp--preset--color--accent, #FFBF1C);
}

.irtiqaa-subscribe__status.is-error {
	color: #ff9a9a;
}

.irtiqaa-subscribe__status.is-busy {
	color: var(--wp--preset--color--muted, #93A9C0);
}

/* ---------------------------------------------------------------------------
 * Profit calculator
 *
 * Two palettes scoped here rather than added to theme.json, for the same
 * reason the speed test scopes its verdict colours: they are chart semantics,
 * not brand, and nothing else should reach for them.
 *
 * The five parts of the price bar are a categorical set, checked with the
 * dataviz palette validator against the result panel's ground (--color--
 * surface, #0B2E4F): every adjacent pair clears the colour-blind separation
 * target (worst ΔE 17.3) and the normal-vision floor (worst 24.6), and all
 * five clear 3:1. The last slot is the brand gold on purpose. It is brighter
 * than the band the other four sit in, because "what is left for you" is the
 * one part a reader should find first. Order is fixed; the legend under the
 * bar names every part with its value, so no part is colour alone.
 *
 * Profit and loss reuse the speed test's good and poor, already measured on
 * this ground.
 * ------------------------------------------------------------------------- */

.irtiqaa-profit {
	--irtiqaa-seg-product: #3987E5;
	--irtiqaa-seg-ads: #D95926;
	--irtiqaa-seg-fees: #9085E9;
	--irtiqaa-seg-tax: #199E70;
	--irtiqaa-seg-keep: var(--wp--preset--color--accent);
	--irtiqaa-good: #4ADE80;
	--irtiqaa-poor: #FF6B6B;
	--irtiqaa-hairline: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);

	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--base);

	/* Nothing in the calculator may widen the page. `clip` rather than
	   `hidden`: it creates no scroll container, so nothing inside changes. */
	overflow-x: clip;
}

.irtiqaa-profit__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.irtiqaa-profit__head {
	max-width: 44rem;
}

.irtiqaa-profit__title {
	margin-block: 0.4em 0.5em;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

.irtiqaa-profit__lede {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
}

/* Without the script there is nothing to calculate with. See the render
   function's comment in inc/profit-calc.php. */
.irtiqaa-profit__nojs {
	margin-block: var(--wp--preset--spacing--50) 0;
	font-size: var(--wp--preset--font-size--small);
}

.irtiqaa-profit__nojs a {
	color: var(--wp--preset--color--accent);
}

.js .irtiqaa-profit__nojs,
html:not(.js) .irtiqaa-profit__body {
	display: none;
}

.irtiqaa-profit__body {
	display: grid;
	/* An explicit 0 minimum: the implicit `auto` column grows to the widest
	   thing inside it, and the chart is drawn at a fixed pixel width. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

.irtiqaa-profit__body > * {
	min-width: 0;
}

@media (min-width: 1000px) {
	.irtiqaa-profit__body {
		grid-template-columns: minmax(19rem, 24rem) 1fr;
		align-items: start;
	}

}

/* --- The form ------------------------------------------------------------ */

.irtiqaa-profit__form {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--irtiqaa-hairline);
	border-radius: 18px;
}

.irtiqaa-profit__fields {
	display: grid;
	gap: 1.1rem;
}

.irtiqaa-profit__label {
	display: block;
	margin-block-end: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__entry {
	display: flex;
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

.irtiqaa-profit__entry:focus-within {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

.irtiqaa-profit__number {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem 0.9rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	text-align: start;
}

/* The entry's own ring stands in for the global outline, as on the speed
   test's field: a second ring inside the first reads as a rendering fault. */
.irtiqaa-profit__number:focus-visible {
	outline: none;
}

.irtiqaa-profit__unit {
	flex: 0 0 auto;
	padding-inline: 0.9rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__range {
	display: block;
	width: 100%;
	margin-block: 0.6rem 0;
	accent-color: var(--wp--preset--color--accent);
}

.irtiqaa-profit__hint {
	margin-block: 0.35rem 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
}

.irtiqaa-profit__field--check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.7;
}

.irtiqaa-profit__check {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-block-start: 0.2rem;
	accent-color: var(--wp--preset--color--accent);
}

.irtiqaa-profit__more {
	margin-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--irtiqaa-hairline);
}

.irtiqaa-profit__more summary {
	padding-block: 1rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	cursor: pointer;
}

.irtiqaa-profit__more[open] > .irtiqaa-profit__fields {
	padding-block-end: 0.5rem;
}

.irtiqaa-profit__bank {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__reset {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--irtiqaa-hairline);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.irtiqaa-profit__reset:hover {
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}

/* --- The result ---------------------------------------------------------- */

.irtiqaa-profit__out {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
}

/* Several of these set display, which outranks the UA's [hidden] rule. */
.irtiqaa-profit__out [hidden] {
	display: none;
}

.irtiqaa-profit__headline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.irtiqaa-profit__figure-label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__figure-value {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.15;
}

.irtiqaa-profit__figure-unit {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* The word above the number already says profit or loss; the colour repeats
   it for anyone scanning. */
.irtiqaa-profit__figure [data-out="profit"] {
	color: var(--irtiqaa-good);
}

.irtiqaa-profit__figure.is-loss [data-out="profit"] {
	color: var(--irtiqaa-poor);
}

.irtiqaa-profit__warning {
	margin: 0;
	padding: 0.8rem 1rem;
	border-inline-start: 3px solid var(--irtiqaa-poor);
	border-radius: 4px;
	background: color-mix(in srgb, var(--irtiqaa-poor) 10%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.8;
}

.irtiqaa-profit__stats {
	display: grid;
	/* Five figures: two columns on a phone, three and two on anything wider.
	   auto-fill put four and an orphan on a wide panel. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem var(--wp--preset--spacing--40);
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-block: 1px solid var(--irtiqaa-hairline);
}

@media (min-width: 600px) {
	.irtiqaa-profit__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.irtiqaa-profit__stats dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__stats dd {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-profit__subtitle {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* The bar: segments sized by flex-grow, separated by a 2px gap in the
   ground colour, so adjacent parts never touch. */
.irtiqaa-profit__bar {
	display: flex;
	gap: 2px;
	height: 2.25rem;
	overflow: hidden;
	border-radius: 4px;
}

.irtiqaa-profit__seg {
	flex-basis: 0;
	min-width: 2px;
}

.irtiqaa-profit__seg--product { background: var(--irtiqaa-seg-product); }
.irtiqaa-profit__seg--ads { background: var(--irtiqaa-seg-ads); }
.irtiqaa-profit__seg--fees { background: var(--irtiqaa-seg-fees); }
.irtiqaa-profit__seg--tax { background: var(--irtiqaa-seg-tax); }
.irtiqaa-profit__seg--keep { background: var(--irtiqaa-seg-keep); }

.irtiqaa-profit__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.irtiqaa-profit__swatch {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 3px;
}

.irtiqaa-profit__legend-value {
	font-variant-numeric: tabular-nums;
}

.irtiqaa-profit__legend-pct {
	color: var(--wp--preset--color--muted);
}

/* The chart. Drawn at the box's pixel width by the script. */
.irtiqaa-profit__chart {
	position: relative;
	min-width: 0;
	min-height: 220px;
	touch-action: pan-y;
}

/* Drawn at the box's width by the script; max-width stops a drawing made at
   an earlier, wider size from holding the box open until it is redrawn. */
.irtiqaa-profit__chart svg {
	display: block;
	max-width: 100%;
	overflow: visible;
}

.irtiqaa-profit__chart [hidden] {
	display: none;
}

/* Tick labels are bare numbers, including negatives. Under RTL a leading
   minus is a neutral character and moves to the far side of its digits, so
   they are set left-to-right whatever the page is. The break-even label is a
   word and a number, and keeps the page's direction. */
.irtiqaa-profit__tick,
.irtiqaa-profit__mark-label {
	fill: var(--wp--preset--color--muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-profit__tick {
	direction: ltr;
	unicode-bidi: isolate;
}

.irtiqaa-profit__mark-label {
	fill: var(--wp--preset--color--contrast);
}

.irtiqaa-profit__grid {
	stroke: var(--irtiqaa-hairline);
	stroke-width: 1;
}

.irtiqaa-profit__grid.is-zero {
	stroke: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

.irtiqaa-profit__line {
	stroke: var(--irtiqaa-good);
	stroke-width: 2;
	stroke-linecap: round;
}

.irtiqaa-profit__line.is-loss {
	stroke: var(--irtiqaa-poor);
}

.irtiqaa-profit__marker,
.irtiqaa-profit__guide {
	stroke: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	stroke-dasharray: 4 4;
}

.irtiqaa-profit__now {
	fill: var(--wp--preset--color--accent);
	stroke: var(--wp--preset--color--surface);
	stroke-width: 2;
}

.irtiqaa-profit__guide-dot {
	fill: var(--wp--preset--color--contrast);
	stroke: var(--wp--preset--color--surface);
	stroke-width: 2;
}

/* Anchored at the inline start; the script offsets it from there. */
.irtiqaa-profit__tip {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--irtiqaa-hairline);
	border-radius: 6px;
	background: var(--wp--preset--color--deep);
	max-width: 100%;
	font-size: var(--wp--preset--font-size--x-small);
	pointer-events: none;
}

.irtiqaa-profit__axis {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
}

/* The levers are a genuine ranking, and the <ol> says so to assistive tech. */
.irtiqaa-profit__levers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.irtiqaa-profit__levers li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.3rem 1rem;
	padding-block: 0.8rem;
	border-block-end: 1px solid var(--irtiqaa-hairline);
	font-size: var(--wp--preset--font-size--x-small);
}

.irtiqaa-profit__gain {
	color: var(--irtiqaa-good);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.irtiqaa-profit__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.25rem;
}

.irtiqaa-profit__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* The label is a sentence; at phone width it wraps rather than overflow. */
@media (max-width: 480px) {
	.irtiqaa-profit__act .irtiqaa-cta {
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.irtiqaa-profit__reset {
		transition: none;
	}
}