/*
 * Abdallah.Team — Studio Pop
 * Light paper ground, 2px ink outlines, hard offset shadows, stickers.
 * Loaded on the front end and (scoped) inside the block editor.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--abt-paper: var(--wp--preset--color--base, #fbf6ee);
	--abt-white: var(--wp--preset--color--white, #fff);
	--abt-ink: var(--wp--preset--color--contrast, #1d2939);
	--abt-ink-2: var(--wp--preset--color--slate, #344054);
	--abt-muted: var(--wp--preset--color--muted, #5b6474);
	--abt-or: var(--wp--preset--color--primary, #fd853a);
	--abt-or-d: var(--wp--preset--color--accent, #e9682a);
	--abt-peach: var(--wp--preset--color--peach, #ffe1cc);
	--abt-sky: var(--wp--preset--color--sky, #d4e6ff);
	--abt-lime: var(--wp--preset--color--lime, #e4f4b5);
	--abt-b: 2px solid var(--abt-ink);
	--abt-sh-sm: -3px 3px 0 var(--abt-ink);
	--abt-sh: -5px 5px 0 var(--abt-ink);
	--abt-sh-lg: -8px 8px 0 var(--abt-ink);
	--abt-r: 20px;
	--abt-display: var(--wp--preset--font-family--display, Lalezar, sans-serif);
	--abt-body: var(--wp--preset--font-family--body, "Readex Pro", sans-serif);
	--abt-mono: var(--wp--preset--font-family--mono, "Space Mono", monospace);
	--abt-sec: clamp(56px, 7vw, 104px);
	--abt-gut: var(--wp--style--root--padding-left, clamp(16px, 4vw, 56px));
	--abt-wrap: var(--wp--style--global--content-size, 1240px);
	--abt-dots: radial-gradient(rgba(29, 41, 57, .13) 1px, transparent 1.2px);
	--abt-header-h: 98px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--abt-header-h) + var(--wp-admin--admin-bar--height, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background-color: var(--abt-paper);
	background-image: var(--abt-dots);
	background-size: 24px 24px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
.wp-site-blocks { overflow-x: clip; }
::selection { background: var(--abt-or); color: var(--abt-ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--abt-or);
	outline-offset: 3px;
	border-radius: 6px;
}
img { max-width: 100%; height: auto; }
svg.abt-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle; }
.abt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.abt-ltr, bdi.abt-ltr { direction: ltr; unicode-bidi: isolate; }

/* Main wrapper: no gap between the header, the content and the footer. */
.wp-site-blocks > * { margin-block-start: 0 !important; }
.abt-main { padding-bottom: 0; }
.abt-main > .wp-block-post-content > :first-child { margin-block-start: 0; }

/* Sections */
.abt-sec { padding-block: var(--abt-sec); }
.abt-sec--tight { padding-block: calc(var(--abt-sec) * .55); }
.abt-sec--top0 { padding-top: 0; }
.abt-sec--bottom0 { padding-bottom: 0; }
:where(.wp-block-post-content) > .abt-sec + .abt-sec { margin-block-start: 0; }
:where(.wp-block-post-content) > * + .abt-sec,
:where(.wp-block-post-content) > .abt-sec + * { margin-block-start: 0; }

/* Components that lay out their own children: no flow gaps. */
body :is(.abt-hero__grid, .abt-stats, .abt-art, .abt-review, .abt-head, .abt-cards3, .abt-card, .abt-card__body, .abt-nums, .abt-num, .abt-why, .abt-why__art, .abt-notes, .abt-note,
	.abt-steps, .abt-step, .abt-bubbles, .abt-bubble, .abt-bubble__who, .abt-cta, .abt-cta__text, .abt-reach, .abt-reach__intro, .abt-banner, .abt-banner__text, .abt-simple, .abt-simple__text,
	.abt-grid4, .abt-feat, .abt-tools, .abt-clients, .abt-waybig, .abt-free, .abt-socials-row, .abt-logos, .abt-hero__text, .abt-head__text, .abt-head__end, .abt-ftr__top, .abt-ftr__col, .abt-404) > * {
	margin-block: 0;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
p { text-wrap: pretty; }

/* Marks (editor formats: "تمييز برتقالي/سماوي/ليموني/خوخي" and "خط تحت الكلمة"). */
:is(mark, span).abt-mark,
:is(mark, span).abt-mark-sky,
:is(mark, span).abt-mark-lime,
:is(mark, span).abt-mark-peach {
	display: inline-block;
	padding: 0 .22em;
	margin-inline: .04em;
	border: 3px solid var(--abt-ink);
	border-radius: 16px;
	background: var(--abt-or);
	color: inherit;
	box-shadow: -4px 4px 0 var(--abt-ink);
	transform: rotate(-2deg);
	line-height: 1.25;
}
:is(mark, span).abt-mark-sky { background: var(--abt-sky); transform: rotate(1.5deg); }
:is(mark, span).abt-mark-lime { background: var(--abt-lime); transform: rotate(-1.5deg); }
:is(mark, span).abt-mark-peach { background: var(--abt-peach); transform: rotate(1.5deg); }
.abt-under { background: linear-gradient(transparent 62%, var(--abt-or) 62%, var(--abt-or) 90%, transparent 90%); padding-inline: .08em; color: inherit; }
.abt-hl { color: var(--abt-or-d); }
.abt-mono, .has-mono-font-family { font-family: var(--abt-mono); }

.abt-lead { font-size: 18px; color: var(--abt-ink-2); max-width: 560px; }

/* Sticker tag (paragraph style "ستيكر"). Its colour follows the paragraph background colour. */
p.is-style-abt-tag,
.abt-tag {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	min-height: 36px;
	padding: 4px 14px !important;
	border: var(--abt-b);
	border-radius: 999px;
	background-color: var(--abt-lime);
	box-shadow: var(--abt-sh-sm);
	font-family: var(--abt-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--abt-ink);
	transform: rotate(-2.5deg);
	white-space: nowrap;
}
p.is-style-abt-tag.abt-tilt-r, .abt-tag.abt-tilt-r { transform: rotate(2.5deg); }
p.is-style-abt-tag.has-text-align-center { margin-inline: auto; }
.abt-tag--or { background-color: var(--abt-or); }
.abt-tag--sky { background-color: var(--abt-sky); }
.abt-tag--peach { background-color: var(--abt-peach); }
.abt-tag--white { background-color: var(--abt-white); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.wp-block-buttons { gap: 14px; }
.wp-block-button__link,
.abt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.abt-btn {
	box-sizing: border-box;
	padding: 0 24px;
	border: var(--abt-b);
	border-radius: 14px;
	background: var(--abt-or);
	color: var(--abt-ink);
	box-shadow: var(--abt-sh-sm);
	font-family: var(--abt-body);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
}
.wp-block-button__link:hover, .abt-btn:hover { transform: translate(2px, -2px); box-shadow: var(--abt-sh); text-decoration: none; }
.wp-block-button__link:active, .abt-btn:active { transform: translate(-1px, 1px); box-shadow: -1px 1px 0 var(--abt-ink); }
.abt-btn .abt-icon { font-size: 18px; }

.wp-block-button.is-style-abt-white .wp-block-button__link,
.abt-btn--white { background-color: var(--abt-white); color: var(--abt-ink); }
.wp-block-button.is-style-abt-ink .wp-block-button__link,
.abt-btn--ink { background-color: var(--abt-ink); color: #fff; box-shadow: -3px 3px 0 var(--abt-or); }
.wp-block-button.is-style-abt-ink .wp-block-button__link:hover,
.abt-btn--ink:hover { box-shadow: -5px 5px 0 var(--abt-or); color: #fff; }
.abt-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; }

/* Arrow (RTL: points left = forward) */
.wp-block-button:is(.is-style-abt-arrow, .is-style-abt-ink) .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url(../images/icons/arrow-forward.svg) center / contain no-repeat;
	mask: url(../images/icons/arrow-forward.svg) center / contain no-repeat;
}

/* Round arrow button (cards) */
.abt-rbtn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: var(--abt-b);
	border-radius: 50%;
	background: var(--abt-white);
	color: var(--abt-ink);
	box-shadow: var(--abt-sh-sm);
	transition: background-color .15s;
}
.abt-rbtn .abt-icon { font-size: 19px; }
a:hover > .abt-rbtn, a:focus-visible .abt-rbtn, .abt-rbtn:hover { background: var(--abt-or); }

/* "اعرف أكتر" text link with a round arrow (button style "رابط بسهم") */
.wp-block-button.is-style-abt-link .wp-block-button__link {
	min-height: 46px;
	padding: 0;
	gap: 12px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--abt-ink);
	font-weight: 600;
}
.wp-block-button.is-style-abt-link .wp-block-button__link::after {
	content: "";
	width: 46px;
	height: 46px;
	flex: none;
	border: var(--abt-b);
	border-radius: 50%;
	box-shadow: var(--abt-sh-sm);
	background: var(--abt-white) url(../images/icons/arrow-diag.svg) center / 19px no-repeat;
	transition: background-color .15s;
}
.wp-block-button.is-style-abt-link .wp-block-button__link:hover { transform: none; box-shadow: none; }
.wp-block-button.is-style-abt-link .wp-block-button__link:hover::after { background-color: var(--abt-or); }

/* ==========================================================================
   5. Brand, header, navigation, mobile menu
   ========================================================================== */

.abt-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--abt-ink); text-decoration: none; }
.abt-brand:hover { text-decoration: none; color: var(--abt-ink); }
.abt-brand img { width: 44px; height: auto; display: block; }
.abt-brand b { font-family: var(--abt-mono); font-size: 15px; font-weight: 700; letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.abt-brand b i { font-style: normal; color: var(--abt-or-d); }

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.abt-hdr { padding-top: 14px; }
.abt-wrap { width: 100%; max-width: calc(var(--abt-wrap) + var(--abt-gut) * 2); margin-inline: auto; padding-inline: var(--abt-gut); box-sizing: border-box; }
.abt-hdr__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 70px;
	padding-inline: 16px 12px;
	border: var(--abt-b);
	border-radius: 18px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh);
}
.abt-nav { display: flex; align-items: center; gap: 4px; }
.abt-nav__item { position: relative; }
.abt-nav a, .abt-nav__item > button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding-inline: 15px;
	border: 2px solid transparent;
	border-radius: 12px;
	background: none;
	color: var(--abt-ink);
	font: 500 15px/1 var(--abt-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s;
}
.abt-nav a:hover, .abt-nav__item > button:hover { background: var(--abt-paper); text-decoration: none; color: var(--abt-ink); }
.abt-nav .is-active > a, .abt-nav > a.is-active, .abt-nav__item.is-active > a { background: var(--abt-peach); border-color: var(--abt-ink); font-weight: 600; }
.abt-nav .abt-icon { font-size: 14px; transition: transform .2s; }
.abt-nav__sub {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-start: 0;
	z-index: 5;
	display: grid;
	gap: 4px;
	min-width: 250px;
	padding: 10px;
	border: var(--abt-b);
	border-radius: 16px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.abt-nav__sub::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; }
.abt-nav__sub a { width: 100%; height: auto; min-height: 42px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; white-space: normal; }
.abt-nav__sub a.is-active { background: var(--abt-peach); border-color: var(--abt-ink); }
.abt-nav__item:hover .abt-nav__sub,
.abt-nav__item:focus-within .abt-nav__sub,
.abt-nav__item.is-open .abt-nav__sub { opacity: 1; visibility: visible; transform: none; }
.abt-nav__item:hover > a .abt-icon, .abt-nav__item.is-open > a .abt-icon { transform: rotate(180deg); }
.abt-hdr__actions { display: flex; align-items: center; gap: 10px; }
.abt-burger {
	display: none;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: var(--abt-b);
	border-radius: 12px;
	background: var(--abt-or);
	color: var(--abt-ink);
	box-shadow: var(--abt-sh-sm);
	cursor: pointer;
}
.abt-burger .abt-icon { font-size: 22px; }

.abt-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 16px 26px;
	background-color: var(--abt-paper);
	background-image: var(--abt-dots);
	background-size: 24px 24px;
}
.abt-sheet[hidden] { display: none; }
.abt-sheet__top { display: flex; align-items: center; justify-content: space-between; flex: none; height: 64px; padding-inline: 14px 8px; border: var(--abt-b); border-radius: 16px; background: var(--abt-white); box-shadow: var(--abt-sh-sm); }
.abt-sheet__top .abt-burger { display: grid; background: var(--abt-white); }
.abt-sheet__nav { display: grid; gap: 10px; margin-top: 22px; }
.abt-sheet__nav > a {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	min-height: 62px;
	padding-inline: 14px;
	border: var(--abt-b);
	border-radius: 16px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh-sm);
	color: var(--abt-ink);
	font-family: var(--abt-display);
	font-size: 25px;
	line-height: 1.2;
	text-decoration: none;
}
.abt-sheet__nav > a small { font-family: var(--abt-mono); font-size: 12px; color: var(--abt-muted); }
.abt-sheet__nav > a .abt-icon { font-size: 20px; }
.abt-sheet__nav > a.is-active { background: var(--abt-or); }
.abt-sheet__nav > a.is-active small { color: var(--abt-ink); }
.abt-sheet__sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 4px; }
.abt-sheet__sub a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: var(--abt-b); border-radius: 999px; background: var(--abt-sky); color: var(--abt-ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.abt-sheet__sub a.is-active { background: var(--abt-or); }
.abt-sheet__bottom { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.abt-sheet__bottom .abt-btn { width: 100%; box-sizing: border-box; }
.abt-sheet__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; margin: 6px 0 0; font-family: var(--abt-mono); font-size: 12.5px; color: var(--abt-muted); }
.abt-sheet__meta a { color: inherit; text-decoration: none; direction: ltr; unicode-bidi: isolate; }
html.abt-lock, html.abt-lock body { overflow: hidden; }

/* ==========================================================================
   6. Footer
   ========================================================================== */

.abt-ftr {
	margin-top: var(--abt-sec);
	border-radius: 40px 40px 0 0;
	background: var(--abt-ink);
	color: #e6eaf0;
	overflow: hidden;
}
.abt-ftr a { color: #c6cdd8; text-decoration: none; }
.abt-ftr a:hover { color: #fff; text-decoration: none; }
.abt-ftr__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 64px 40px; }
.abt-ftr .abt-brand b { color: #fff; }
.abt-ftr .abt-brand img { box-sizing: content-box; padding: 5px 7px; border-radius: 12px; background: var(--abt-paper); }
.abt-ftr__about > p { margin-top: 16px; max-width: 340px; font-size: 15px; color: #b8c1ce; }
.abt-ftr .abt-social { margin-top: 22px; }
.abt-ftr h2, .abt-ftr h3, .abt-ftr h4 { margin: 0 0 14px; font-size: 21px; color: var(--abt-or); }
.abt-ftr ul { margin: 0; padding: 0; list-style: none; }
.abt-ftr li { margin: 0 0 9px; font-size: 15px; color: #c6cdd8; }
.abt-ftr .abt-ftr__ltr li, .abt-ftr .abt-ltr-list li { direction: ltr; text-align: right; font-family: var(--abt-mono); font-size: 14px; }
.abt-giant {
	margin: 0 !important;
	direction: ltr;
	text-align: center;
	white-space: nowrap;
	font-family: var(--abt-display);
	font-size: clamp(36px, 15.5vw, 236px) !important;
	line-height: .82;
	color: var(--abt-or);
	letter-spacing: -.01em;
	margin-bottom: -.16em !important;
	user-select: none;
}
.abt-ftr__bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .14); background: var(--abt-ink); font-size: 13.5px; color: #9aa5b5; }
.abt-ftr__bottom p { margin: 0; }

/* Social icons */
.abt-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.abt-social li { margin: 0 !important; }
.abt-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid currentColor; border-radius: 12px; font-size: 19px; transition: background-color .15s, color .15s, border-color .15s; }
.abt-social a svg { width: 20px; height: 20px; }
.abt-social--light a { color: #fff !important; }
.abt-social--light a:hover { background: var(--abt-or); border-color: var(--abt-or); color: var(--abt-ink) !important; }
.abt-social--brand a, .abt-social--dark a { color: var(--abt-ink); border-color: var(--abt-ink); background: var(--abt-white); box-shadow: var(--abt-sh-sm); }
.abt-social--brand a:hover, .abt-social--dark a:hover { background: var(--abt-or); }

/* ==========================================================================
   7. Section heads
   ========================================================================== */

.abt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px !important; }
.abt-head h2 { margin-top: 16px !important; line-height: 1.3; }
.abt-head__text { min-width: 0; }
.abt-head__end { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 430px; }
.abt-head__end p { color: var(--abt-ink-2); }
.abt-head--center { flex-direction: column; align-items: center; text-align: center; }
.abt-head--center .abt-head__text { display: flex; flex-direction: column; align-items: center; }

/* ==========================================================================
   8. Home: hero
   ========================================================================== */

.abt-hero { padding-block: 64px 40px; }
.abt-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.abt-hero h1 { margin: 26px 0 22px !important; font-size: var(--wp--preset--font-size--hero); line-height: 1.32; }
.abt-hero .abt-lead { margin-top: 0 !important; }
.abt-hero .wp-block-buttons { margin-top: 32px !important; }
.abt-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px !important; }
.abt-stat { display: flex !important; align-items: center; gap: 12px; padding: 10px 16px 10px 18px; border: var(--abt-b); border-radius: 16px; background: var(--abt-white); box-shadow: var(--abt-sh-sm); }
.abt-stat > * { margin: 0 !important; }
.abt-stat__num { font-family: var(--abt-display); font-size: 34px; line-height: 1; direction: ltr; unicode-bidi: isolate; }
.abt-stat__label { font-size: 13.5px; line-height: 1.35; color: var(--abt-ink-2); max-width: 70px; }
.abt-stat:nth-child(3n+1) { transform: rotate(-2deg); background: var(--abt-lime); }
.abt-stat:nth-child(3n+2) { transform: rotate(1.5deg); }
.abt-stat:nth-child(3n) { transform: rotate(-1deg); background: var(--abt-sky); }

.abt-art {
	position: relative;
	padding: 34px 28px 20px;
	border: var(--abt-b);
	border-radius: 30px;
	background-color: var(--abt-peach);
	box-shadow: var(--abt-sh-lg);
}
.abt-art::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 28px;
	pointer-events: none;
	background-image: linear-gradient(rgba(29, 41, 57, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 41, 57, .08) 1px, transparent 1px);
	background-size: 32px 32px;
}
.abt-art > * { position: relative; }
.abt-art > p.is-style-abt-tag { position: absolute; z-index: 2; margin: 0; }
.abt-art > p.is-style-abt-tag:nth-of-type(1) { top: -18px; inset-inline-start: 26px; transform: rotate(-4deg); }
.abt-art > p.is-style-abt-tag:nth-of-type(2) { top: 40%; inset-inline-end: -22px; transform: rotate(5deg); }
.abt-art > p.is-style-abt-tag:nth-of-type(3) { bottom: 40px; inset-inline-start: -20px; transform: rotate(-3deg); }
.abt-review {
	position: absolute !important;
	z-index: 2;
	bottom: -26px;
	inset-inline-end: 34px;
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: var(--abt-b);
	border-radius: 14px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh-sm);
}
.abt-review > * { margin: 0 !important; }
.abt-review p { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.abt-review p::after { content: "★★★★★"; display: block; margin-top: 2px; font-size: 12px; letter-spacing: 1px; color: var(--abt-or-d); font-weight: 400; }

/* ==========================================================================
   9. Image slots: fixed size, always cover (replacing the image never changes the layout)
   ========================================================================== */

.abt-fit { position: relative; overflow: hidden; margin: 0; }
.abt-fit img,
.abt-fit .wp-block-image img,
.abt-fit.wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center;
}
.abt-fit.wp-block-image, .abt-fit .wp-block-image { margin: 0; }
.abt-fit--top img { object-position: top center; }
.abt-fit--contain img { object-fit: contain !important; }
.abt-ar-art { aspect-ratio: 1124 / 944; }
.abt-ar-16x10 { aspect-ratio: 16 / 10; }
.abt-ar-4x3 { aspect-ratio: 4 / 3; }
.abt-ar-1x1 { aspect-ratio: 1; }
.abt-ar-why { aspect-ratio: 1056 / 994; }
.abt-ar-cta { aspect-ratio: 934 / 1340; }
.abt-ar-map { aspect-ratio: 16 / 7; }
.abt-ar-banner { aspect-ratio: 5 / 4; }
.abt-ar-5x4 { aspect-ratio: 5 / 4; }
.abt-ar-3x2 { aspect-ratio: 3 / 2; }
.abt-ar-post { aspect-ratio: 16 / 9; }
.abt-fit .components-resizable-box__container { width: 100% !important; height: 100% !important; max-width: none !important; }

/* ==========================================================================
   10. Ticker (two crossing bands)
   ========================================================================== */

.abt-tick { position: relative; height: 150px; overflow: hidden; margin-block: 20px; }
.abt-tick__band {
	position: absolute;
	inset-inline: -6%;
	top: 50%;
	display: flex;
	gap: 34px;
	padding-block: 16px;
	border-block: var(--abt-b);
	white-space: nowrap;
}
.abt-tick__band--a { z-index: 2; background: var(--abt-ink); color: #fff; transform: translateY(-50%) rotate(-2.6deg); }
.abt-tick__band--b { background: var(--abt-or); color: var(--abt-ink); transform: translateY(-50%) rotate(2.2deg); }
.abt-tick__track { display: flex; gap: 34px; flex: none; animation: abt-tick 46s linear infinite; }
.abt-tick__band--b .abt-tick__track { animation-direction: reverse; }
.abt-tick__track span { display: inline-flex; align-items: center; gap: 34px; font-family: var(--abt-display); font-size: 26px; line-height: 1.2; }
.abt-tick__track .abt-icon { font-size: 22px; color: var(--abt-or); }
.abt-tick__band--b .abt-icon { color: var(--abt-ink); }
@keyframes abt-tick { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .abt-tick__track { animation: none; } }

/* ==========================================================================
   11. Logos strip
   ========================================================================== */

.abt-logos { display: flex !important; align-items: center; gap: 30px; padding: 20px 28px; border: var(--abt-b); border-radius: var(--abt-r); background: var(--abt-white); box-shadow: var(--abt-sh); }
.abt-logos > p { flex: none; font-family: var(--abt-display); font-size: 20px; line-height: 1.3; }
.wp-block-gallery.is-style-abt-logos { flex: 1; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 28px !important; margin: 0 !important; }
.wp-block-gallery.is-style-abt-logos > .wp-block-image { flex: 0 1 auto !important; width: auto !important; margin: 0 !important; }
.wp-block-gallery.is-style-abt-logos > .wp-block-image img { width: auto !important; height: 34px !important; max-width: 140px; object-fit: contain !important; filter: brightness(0); opacity: .78; }
.wp-block-gallery.is-style-abt-logos figcaption { display: none; }

/* ==========================================================================
   12. Service cards
   ========================================================================== */

.abt-cards3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.abt-card {
	display: flex !important;
	flex-direction: column;
	border: var(--abt-b);
	border-radius: 24px;
	background-color: var(--abt-white);
	box-shadow: var(--abt-sh);
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
}
.abt-card:hover { transform: translate(3px, -3px); box-shadow: var(--abt-sh-lg); }
.abt-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px !important;
	border-bottom: var(--abt-b);
	background-color: var(--abt-or);
	font-family: var(--abt-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}
.abt-card__top::after { content: ""; width: 54px; height: 14px; flex: none; background: radial-gradient(circle at 7px 7px, #fff 5px, var(--abt-ink) 5.5px 7px, transparent 7.5px) 0 0 / 20px 14px repeat-x; }
.abt-card--sky .abt-card__top { background-color: var(--abt-sky); }
.abt-card--lime .abt-card__top { background-color: var(--abt-lime); }
.abt-card__img { margin: 20px 20px 0 !important; border: var(--abt-b); border-radius: 16px; }
.abt-card__body { display: flex !important; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.abt-card__en { font-family: var(--abt-mono); font-size: 12px; color: var(--abt-muted); text-transform: uppercase; letter-spacing: .04em; direction: ltr; text-align: right; }
.abt-card__body h3 { margin-top: 2px !important; font-size: 25px; line-height: 1.4; }
.abt-card__body > p:not(.abt-card__en) { margin-top: 10px !important; font-size: 15px; color: var(--abt-ink-2); }
.abt-card__body .wp-block-buttons { margin-top: auto !important; padding-top: 20px; }
.abt-card__body .wp-block-button { width: 100%; }
.abt-card__body .wp-block-button.is-style-abt-link .wp-block-button__link { width: 100%; justify-content: space-between; }

/* Chips list (list style "شيبس") */
ul.is-style-abt-chips, .abt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}
ul.is-style-abt-chips li, .abt-chips span, .abt-chips li {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin: 0 !important;
	padding: 2px 11px;
	border: var(--abt-b);
	border-radius: 999px;
	background: var(--abt-paper);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
}

/* ==========================================================================
   13. Numbers
   ========================================================================== */

.abt-nums { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--abt-b); border-radius: 24px; background-color: var(--abt-white); box-shadow: var(--abt-sh); overflow: hidden; }
.abt-num { padding: 28px 26px; border-inline-start: var(--abt-b); }
.abt-num:first-child { border-inline-start: 0; }
.abt-num:nth-child(2) { background: var(--abt-lime); }
.abt-num:nth-child(4) { background: var(--abt-sky); }
.abt-num__value { font-family: var(--abt-display); font-size: clamp(44px, 5vw, 68px) !important; line-height: 1.05; direction: ltr; text-align: right; }
.abt-num__label { margin-top: 6px !important; font-size: 15px; color: var(--abt-ink-2); }

/* ==========================================================================
   14. Why us (notes)
   ========================================================================== */

.abt-why { display: grid !important; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.abt-why__art { position: relative; padding: 30px; border: var(--abt-b); border-radius: 30px; background-color: var(--abt-sky); box-shadow: var(--abt-sh-lg); }
.abt-why__art > p.is-style-abt-tag { position: absolute; top: -18px; inset-inline-end: 30px; z-index: 2; }
.abt-why h2 { margin: 16px 0 26px !important; }
.abt-notes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.abt-note { padding: 20px 20px 18px; border: var(--abt-b); border-radius: 18px; background-color: var(--abt-white); box-shadow: var(--abt-sh-sm); }
.abt-note:nth-child(1) { transform: rotate(-1.2deg); background-color: var(--abt-lime); }
.abt-note:nth-child(2) { transform: rotate(1deg); }
.abt-note:nth-child(3) { transform: rotate(.6deg); }
.abt-note:nth-child(4) { transform: rotate(-.8deg); background-color: var(--abt-peach); }
.abt-note:nth-child(5) { grid-column: 1 / -1; transform: rotate(-.4deg); background-color: var(--abt-ink); color: #fff; box-shadow: -3px 3px 0 var(--abt-or); }
.abt-note:nth-child(n+6) { background-color: var(--abt-white); }
.abt-note__n { font-family: var(--abt-mono); font-size: 12.5px; font-weight: 700; color: var(--abt-or-d); }
.abt-note:nth-child(5) .abt-note__n { color: var(--abt-or); }
.abt-note h3 { margin-top: 4px !important; font-size: 23px; line-height: 1.35; color: inherit; }
.abt-note > p:not(.abt-note__n) { margin-top: 4px !important; font-size: 14.5px; color: var(--abt-ink-2); }
.abt-note:nth-child(5) > p:not(.abt-note__n) { color: #d3d9e2; }

/* ==========================================================================
   15. Project cards (browser windows)
   ========================================================================== */

.abt-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.abt-wins--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abt-win {
	position: relative;
	display: flex;
	flex-direction: column;
	border: var(--abt-b);
	border-radius: 24px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh);
	overflow: hidden;
	color: var(--abt-ink);
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.abt-win:hover { transform: translate(3px, -3px); box-shadow: var(--abt-sh-lg); }
.abt-win__bar { display: flex; align-items: center; gap: 12px; height: 46px; padding-inline: 16px; border-bottom: var(--abt-b); background: var(--abt-white); }
.abt-dots { display: flex; gap: 6px; flex: none; }
.abt-dots i { width: 12px; height: 12px; border: var(--abt-b); border-radius: 50%; }
.abt-dots i:nth-child(1) { background: var(--abt-or); }
.abt-dots i:nth-child(2) { background: var(--abt-lime); }
.abt-dots i:nth-child(3) { background: var(--abt-sky); }
.abt-win__url { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; padding-inline: 12px; border: var(--abt-b); border-radius: 999px; background: var(--abt-paper); font-family: var(--abt-mono); font-size: 12px; color: var(--abt-muted); direction: ltr; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abt-win__media { position: relative; height: 330px; overflow: hidden; border-bottom: var(--abt-b); background: var(--pc, var(--abt-or)); }
.abt-win__logo { position: absolute; top: 22px; inset-inline-start: 24px; z-index: 2; display: block; width: auto !important; max-width: 55%; height: 28px !important; object-fit: contain; object-position: right center; }
.abt-win__logo-text { position: absolute; top: 18px; inset-inline-start: 24px; z-index: 2; font-family: var(--abt-mono); font-size: 18px; font-weight: 700; color: #fff; direction: ltr; }
.abt-win__shots { position: absolute; top: 72px; inset-inline: 24px; display: flex; gap: 16px; }
.abt-shot { position: relative; flex: 1; min-width: 0; height: 360px; border: var(--abt-b); border-radius: 14px 14px 0 0; overflow: hidden; background: #fff; }
.abt-shot img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: top center; }
.abt-win__shots .abt-shot + .abt-shot { margin-top: 34px; }
.abt-win__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 20px; }
.abt-win__title { margin: 0; font-family: var(--abt-display); font-size: 27px; font-weight: 400; line-height: 1.3; }
.abt-win__title a { color: inherit; text-decoration: none; }
.abt-win__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.abt-win__desc { margin: 2px 0 0; font-size: 14.5px; color: var(--abt-ink-2); }
.abt-win .abt-chips { margin-top: 10px !important; }
.abt-win .abt-rbtn { position: relative; z-index: 1; }
.abt-wins--3 .abt-win__media { height: 260px; }
.abt-wins--3 .abt-win__shots .abt-shot + .abt-shot { display: none; }
.abt-wins--3 .abt-win .abt-chips { display: none; }
.abt-projects-more { display: flex; justify-content: center; margin-top: 44px !important; }

/* Pagination */
.abt-pagination, .wp-block-query-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 44px !important; }
.abt-pagination .page-numbers, .wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding-inline: 12px;
	border: var(--abt-b);
	border-radius: 12px;
	background: var(--abt-white);
	color: var(--abt-ink);
	font-family: var(--abt-mono);
	font-weight: 700;
	text-decoration: none;
}
.abt-pagination .page-numbers.current, .wp-block-query-pagination .page-numbers.current { background: var(--abt-ink); color: #fff; box-shadow: -3px 3px 0 var(--abt-or); }
.abt-pagination .page-numbers.dots, .wp-block-query-pagination .page-numbers.dots { border: 0; background: none; }
.wp-block-query-pagination-previous, .wp-block-query-pagination-next { font-family: var(--abt-body); font-size: 14.5px; }

/* Filters / pills */
.abt-filters, ul.is-style-abt-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px !important; padding: 0 !important; list-style: none; }
.abt-filters a, ul.is-style-abt-pills li a, ul.is-style-abt-pills li > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 16px;
	border: var(--abt-b);
	border-radius: 12px;
	background: var(--abt-white);
	color: var(--abt-ink);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
}
ul.is-style-abt-pills li { margin: 0 !important; }
.abt-filters a small { font-family: var(--abt-mono); font-size: 11.5px; color: var(--abt-muted); }
.abt-filters a.is-active, ul.is-style-abt-pills li.is-active a, .abt-filters a:hover, ul.is-style-abt-pills li a:hover { background: var(--abt-or); box-shadow: var(--abt-sh-sm); font-weight: 600; text-decoration: none; }
.abt-filters a.is-active small { color: var(--abt-ink); }

/* ==========================================================================
   16. Steps
   ========================================================================== */

.abt-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; margin-top: 30px !important; }
.abt-step { position: relative; padding: 26px 24px 24px; border: var(--abt-b); border-radius: 22px; background-color: var(--abt-white); box-shadow: var(--abt-sh); }
.abt-step__n { display: grid !important; place-items: center; width: 62px; height: 62px; margin: -58px 0 14px !important; border: var(--abt-b); border-radius: 50%; background: var(--abt-or); box-shadow: var(--abt-sh-sm); font-family: var(--abt-display); font-size: 30px; line-height: 1; }
.abt-step:nth-child(3n+2) .abt-step__n { background: var(--abt-lime); }
.abt-step:nth-child(3n) .abt-step__n { background: var(--abt-sky); }
.abt-step h3 { font-size: 23px; }
.abt-step > p:not(.abt-step__n) { margin-top: 8px !important; font-size: 15px; color: var(--abt-ink-2); }
.abt-step + .abt-step::before { content: ""; position: absolute; top: 38px; inset-inline-start: -46px; width: 46px; border-top: 2px dashed var(--abt-ink); }

/* ==========================================================================
   17. Testimonials (speech bubbles)
   ========================================================================== */

.abt-bubbles { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.abt-bubble__quote {
	position: relative;
	margin: 0 !important;
	padding: 24px 24px 22px;
	border: var(--abt-b);
	border-radius: 22px;
	background-color: var(--abt-white);
	box-shadow: var(--abt-sh);
	font-size: 16px;
	line-height: 1.85;
}
.abt-bubble__quote::before { content: ""; display: block; width: 30px; height: 26px; margin-bottom: 10px; background: var(--abt-or-d); -webkit-mask: url(../images/icons/quote.svg) center / contain no-repeat; mask: url(../images/icons/quote.svg) center / contain no-repeat; }
.abt-bubble__quote::after { content: ""; position: absolute; bottom: -12px; inset-inline-start: 36px; width: 20px; height: 20px; background: inherit; border-inline-end: var(--abt-b); border-bottom: var(--abt-b); transform: rotate(45deg); }
.abt-bubble:nth-child(3n+2) .abt-bubble__quote { background-color: var(--abt-peach); }
.abt-bubble__who { display: flex !important; align-items: center; gap: 12px; margin-top: 22px !important; padding-inline-start: 16px; }
.abt-bubble__who::after { content: "★★★★★"; margin-inline-start: auto; font-size: 13px; letter-spacing: 1px; color: var(--abt-or-d); }
.abt-bubble__who > .wp-block-group > * { margin: 0 !important; }
.abt-bubble__who strong, .abt-bubble__name { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.abt-bubble__role { font-size: 13px; color: var(--abt-muted); }
.abt-avatar { width: 50px; height: 50px; flex: none; border: var(--abt-b); border-radius: 50%; }

/* ==========================================================================
   18. CTA
   ========================================================================== */

.abt-cta {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	gap: 30px;
	align-items: center;
	padding: 50px 56px;
	border: var(--abt-b);
	border-radius: 32px;
	background-color: var(--abt-or);
	box-shadow: var(--abt-sh-lg);
	overflow: hidden;
}
.abt-cta h2 { margin-top: 14px !important; font-size: clamp(40px, 5vw, 72px); line-height: 1.25; }
.abt-cta__text > p:not(.is-style-abt-tag) { margin-top: 12px !important; max-width: 520px; font-size: 18px; }
.abt-cta__text .abt-wa { margin-top: 28px !important; }
.abt-cta__art { align-self: end; margin-bottom: -50px !important; max-height: 400px; width: 100%; max-width: 280px; justify-self: center; }

/* WhatsApp + call */
.abt-wa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.abt-wa__call { margin: 0; font-weight: 600; }
.abt-wa__call a { color: inherit; text-decoration: none; }
.abt-wa__call bdi { font-family: var(--abt-mono); font-weight: 700; }

/* ==========================================================================
   19. Contact section, ways, map, form card
   ========================================================================== */

.abt-reach { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.abt-reach h2 { margin: 16px 0 12px !important; }
.abt-reach__intro > p:not(.is-style-abt-tag) { color: var(--abt-ink-2); max-width: 440px; }
.abt-ways { display: grid; gap: 12px; margin-top: 28px !important; }
.abt-ways__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: var(--abt-b); border-radius: 16px; background: var(--abt-white); box-shadow: var(--abt-sh-sm); color: var(--abt-ink); text-decoration: none; }
.abt-ways__item:hover { text-decoration: none; color: var(--abt-ink); }
.abt-ways__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: var(--abt-b); border-radius: 12px; background: var(--abt-lime); font-size: 20px; }
.abt-ways__item:nth-child(2) .abt-ways__ic { background: var(--abt-sky); }
.abt-ways__item:nth-child(3) .abt-ways__ic { background: var(--abt-peach); }
.abt-ways__txt { min-width: 0; }
.abt-ways__txt small { display: block; font-size: 12.5px; color: var(--abt-muted); line-height: 1.4; }
.abt-ways__txt b { display: inline-block; font-family: var(--abt-mono); font-size: 15px; font-weight: 700; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.abt-ways .abt-rbtn { margin-inline-start: auto; width: 40px; height: 40px; box-shadow: none; }
.abt-map { position: relative; margin-top: 12px !important; border: var(--abt-b); border-radius: 18px; box-shadow: var(--abt-sh-sm); }
.abt-map img { filter: grayscale(.4) sepia(.15); }
.abt-map::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	border: var(--abt-b);
	border-radius: 50% 50% 50% 0;
	background: var(--abt-or);
	transform: rotate(-45deg);
	box-shadow: var(--abt-sh-sm);
	pointer-events: none;
}

.abt-form-card { padding: 30px; border: var(--abt-b); border-radius: 26px; background: var(--abt-white); box-shadow: var(--abt-sh-lg); }
.abt-form-card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px dashed rgba(29, 41, 57, .35); }
.abt-form-card__head b { font-family: var(--abt-display); font-size: 25px; font-weight: 400; line-height: 1.3; }
.abt-form-card__head .abt-tag { transform: none; box-shadow: none; }
.abt-form-card__note { margin: 0; padding: 18px; border: 2px dashed var(--abt-ink); border-radius: 14px; background: var(--abt-paper); font-size: 15px; }
.abt-form-card__fallback { display: grid; gap: 14px; }

/* XF Forms inside the theme: follow the Studio Pop look (plugin CSS has zero specificity). */
.xf {
	--xf-accent: var(--abt-or);
	--xf-on-accent: var(--abt-ink);
	--xf-text: var(--abt-ink);
	--xf-muted: var(--abt-muted);
	--xf-border: var(--abt-ink);
	--xf-field-bg: var(--abt-paper);
	--xf-radius: 12px;
	--xf-gap: 16px 18px;
	--xf-field-h: 52px;
	--xf-font-size: 15px;
	--xf-label-size: 14px;
	--xf-error: #c2410c;
	--xf-success: #15803d;
	font-family: var(--abt-body);
}
.xf .xf__fields { gap: 16px 18px; }
.xf .xf-label { font-weight: 600; color: var(--abt-ink); }
.xf .xf-req { color: var(--abt-or-d); }
.xf .xf-input:not(.xf-choice__input), .xf .xf-select, .xf .xf-textarea {
	border: var(--abt-b);
	border-radius: 12px;
	background-color: var(--abt-paper);
	color: var(--abt-ink);
	font-family: var(--abt-body);
	box-shadow: none;
	transition: box-shadow .15s, background-color .15s;
}
.xf .xf-input:not(.xf-choice__input):focus, .xf .xf-select:focus, .xf .xf-textarea:focus { outline: none; border-color: var(--abt-ink); background-color: var(--abt-white); box-shadow: -3px 3px 0 var(--abt-or); }
.xf .xf-input::placeholder, .xf .xf-textarea::placeholder { color: #8a909b; }
.xf .xf-textarea { min-height: 120px; }
.xf .xf-field.is-invalid .xf-input:not(.xf-choice__input), .xf .xf-field.is-invalid .xf-select, .xf .xf-field.is-invalid .xf-textarea { border-color: #c2410c; box-shadow: -3px 3px 0 #c2410c; }
.xf .xf-error { font-size: 13px; font-weight: 600; }
.xf .xf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 28px;
	border: var(--abt-b);
	border-radius: 14px;
	background: var(--abt-or);
	color: var(--abt-ink);
	box-shadow: var(--abt-sh-sm);
	font-family: var(--abt-body);
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.xf .xf-submit::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url(../images/icons/arrow-forward.svg) center / contain no-repeat; mask: url(../images/icons/arrow-forward.svg) center / contain no-repeat; }
.xf .xf-submit:hover { transform: translate(2px, -2px); box-shadow: var(--abt-sh); }
.xf.is-sending .xf-submit { opacity: .7; cursor: progress; }
.xf .xf-status:not(:empty) { margin-top: 16px; padding: 14px 16px; border: var(--abt-b); border-radius: 14px; font-weight: 600; }
.xf .xf-status.is-success { background: var(--abt-lime); color: var(--abt-ink); }
.xf .xf-status.is-error { background: #ffe4dc; color: #7c2d12; }
.xf .xf-choice { gap: 8px; }
.xf .xf-choice__input { accent-color: var(--abt-or-d); width: 18px; height: 18px; }

/* ==========================================================================
   20. Inner page banner, breadcrumbs
   ========================================================================== */

.abt-banner {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 40px;
	align-items: center;
	margin-top: 40px !important;
	padding: 48px 52px;
	border: var(--abt-b);
	border-radius: 34px;
	background-color: var(--abt-peach);
	box-shadow: var(--abt-sh-lg);
}
.abt-banner--solo { grid-template-columns: minmax(0, 1fr); }
.abt-banner h1 { margin: 20px 0 16px !important; font-size: var(--wp--preset--font-size--display); line-height: 1.3; }
.abt-banner__text > p.is-style-abt-tag { margin-top: 22px !important; }
.abt-banner__text > .abt-crumbs + p.is-style-abt-tag { margin-top: 22px !important; }
.abt-banner .abt-lead { max-width: 560px; }
.abt-banner .wp-block-buttons { margin-top: 26px !important; }
.abt-banner__art { width: 100%; max-width: 440px; justify-self: center; }
.abt-banner__art--frame { max-width: none; border: var(--abt-b); border-radius: 22px; box-shadow: var(--abt-sh); background: #fff; }

.abt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.abt-crumbs li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.abt-crumbs a, .abt-crumbs span[aria-current] { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border: var(--abt-b); border-radius: 999px; background: var(--abt-white); color: var(--abt-ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.abt-crumbs span[aria-current] { background: var(--abt-ink); color: #fff; font-weight: 600; }
.abt-crumbs .abt-icon { font-size: 14px; }

/* About: simple */
.abt-simple { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; padding: 40px 44px; border: var(--abt-b); border-radius: 30px; background-color: var(--abt-white); box-shadow: var(--abt-sh); }
.abt-simple__icon { width: 130px; }
.abt-simple__icon img { width: 100% !important; height: auto !important; }
.abt-simple__text > p:first-child { font-family: var(--abt-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.5; }
.abt-simple__text > p + p { margin-top: 12px !important; font-size: 17px; color: var(--abt-ink-2); }

/* Feature grid (4 or 3 columns) */
.abt-grid4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.abt-grid4.abt-grid4--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abt-feat { padding: 22px 22px 24px; border: var(--abt-b); border-radius: 20px; background-color: var(--abt-white); box-shadow: var(--abt-sh-sm); }
.abt-feat__ic { display: grid !important; place-items: center; width: 50px; height: 50px; margin-bottom: 16px !important; border: var(--abt-b); border-radius: 14px; background: var(--abt-peach); }
.abt-feat__ic img { width: 24px !important; height: 24px !important; object-fit: contain !important; }
.abt-feat:nth-child(4n+2) .abt-feat__ic { background: var(--abt-lime); }
.abt-feat:nth-child(4n+3) .abt-feat__ic { background: var(--abt-sky); }
.abt-feat:nth-child(4n+4) .abt-feat__ic { background: var(--abt-or); }
.abt-feat h3 { font-size: 21px; line-height: 1.4; }
.abt-feat > p { margin-top: 8px !important; font-size: 14.5px; color: var(--abt-ink-2); }
.abt-grid4--3 .abt-feat { padding: 26px; }

/* Tools (skill block, restyled as a card with a bar) */
.abt-tools { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.abt-tools--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abt-skill {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "ring label" "value value" "bar bar";
	align-items: center;
	gap: 4px 10px;
	padding: 16px;
	border: var(--abt-b);
	border-radius: 16px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh-sm);
}
.abt-skill__ring { grid-area: ring; display: grid; place-items: center; width: 34px; height: 34px; border: var(--abt-b); border-radius: 10px; background: var(--abt-paper); overflow: hidden; }
.abt-skill__ring img { width: 22px !important; height: 22px !important; object-fit: contain; }
.abt-skill__ring svg { display: none; }
.abt-skill__label { grid-area: label; font-family: var(--abt-mono); font-size: 13px; font-weight: 700; line-height: 1.3; direction: ltr; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.abt-skill__value { grid-area: value; margin-top: 6px; font-family: var(--abt-display); font-size: 30px; font-weight: 400; line-height: 1.1; direction: ltr; text-align: right; }
.abt-skill::after { content: ""; grid-area: bar; height: 12px; margin-top: 6px; border: var(--abt-b); border-radius: 999px; background: linear-gradient(to left, var(--abt-or) calc(var(--p, 50) * 1%), var(--abt-paper) 0); }
.abt-skill:nth-child(even)::after { background: linear-gradient(to left, var(--abt-sky) calc(var(--p, 50) * 1%), var(--abt-paper) 0); }
.abt-skill__pick { display: contents; }

/* Clients (gallery style "لوجوهات في كروت") */
.wp-block-gallery.is-style-abt-clients { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; }
.wp-block-gallery.is-style-abt-clients > .wp-block-image {
	display: grid !important;
	place-items: center;
	width: auto !important;
	height: 120px;
	margin: 0 !important;
	border: var(--abt-b);
	border-radius: 18px;
	background: var(--abt-white);
	box-shadow: var(--abt-sh-sm);
}
.wp-block-gallery.is-style-abt-clients > .wp-block-image:nth-child(3n+2) { background: var(--abt-lime); }
.wp-block-gallery.is-style-abt-clients > .wp-block-image:nth-child(4n+3) { background: var(--abt-sky); }
.wp-block-gallery.is-style-abt-clients > .wp-block-image img { width: auto !important; height: auto !important; max-width: 60% !important; max-height: 54px !important; object-fit: contain !important; filter: brightness(0); }
.wp-block-gallery.is-style-abt-clients figcaption { display: none; }

/* Contact page */
.abt-waybig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.abt-waybig a { display: flex; flex-direction: column; min-height: 230px; padding: 24px; border: var(--abt-b); border-radius: 24px; background: var(--abt-white); box-shadow: var(--abt-sh); color: var(--abt-ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.abt-waybig a:hover { transform: translate(3px, -3px); box-shadow: var(--abt-sh-lg); color: var(--abt-ink); text-decoration: none; }
.abt-waybig a:nth-child(1) { background: var(--abt-or); }
.abt-waybig a:nth-child(3) { background: var(--abt-sky); }
.abt-waybig__ic { display: grid; place-items: center; width: 56px; height: 56px; border: var(--abt-b); border-radius: 16px; background: var(--abt-white); font-size: 24px; }
.abt-waybig small { margin-top: auto; padding-top: 22px; font-size: 14.5px; font-weight: 600; }
.abt-waybig b { margin-top: 4px; font-family: var(--abt-mono); font-size: 18px; font-weight: 700; direction: ltr; text-align: right; overflow-wrap: anywhere; }
.abt-waybig em { display: block; font-style: normal; font-size: 14px; direction: ltr; text-align: right; overflow-wrap: anywhere; color: var(--abt-ink-2); }
.abt-socials-row { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px !important; padding: 16px 22px; border: var(--abt-b); border-radius: 18px; background-color: var(--abt-white); }
.abt-socials-row > p { font-weight: 600; }
.abt-free { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; padding: 40px 44px; border: var(--abt-b); border-radius: 30px; background-color: var(--abt-peach); box-shadow: var(--abt-sh-lg); }
.abt-free h2 { margin-top: 14px !important; font-size: clamp(30px, 3.5vw, 46px); }
ul.is-style-abt-checks { display: grid; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; }
ul.is-style-abt-checks li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 0 !important;
	padding: 12px 14px;
	border: var(--abt-b);
	border-radius: 14px;
	background: var(--abt-white);
	font-size: 16px;
	font-weight: 500;
}
ul.is-style-abt-checks li::before { content: ""; width: 36px; height: 36px; border: var(--abt-b); border-radius: 50%; background: var(--abt-lime) url(../images/icons/check.svg) center / 18px no-repeat; }

/* ==========================================================================
   21. Single project
   ========================================================================== */

.abt-phead { margin-top: 40px; }
.abt-phead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 26px; }
.abt-phead__title { margin: 16px 0 0; font-family: var(--abt-display); font-weight: 400; font-size: clamp(42px, 5vw, 76px); line-height: 1.3; }
.abt-phead__title .abt-mark-lime { font-size: .6em; direction: ltr; unicode-bidi: isolate; }
.abt-phead__end { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 460px; }
.abt-phead__end p { margin: 0; color: var(--abt-ink-2); }
.abt-plinks { display: flex; flex-wrap: wrap; gap: 10px; }
.abt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.abt-facts div { padding: 14px 18px; border: var(--abt-b); border-radius: 16px; background: var(--abt-white); }
.abt-facts div:nth-child(odd) { background: var(--abt-lime); }
.abt-facts small { display: block; font-size: 13px; color: var(--abt-muted); }
.abt-facts b { font-size: 16.5px; font-weight: 600; }

.abt-project-body > * + * { margin-block-start: 0; }
/* Cover: the first gallery ("غلاف المشروع") shows its first two images as screens on the brand colour. */
.abt-project-gallery { margin-top: 30px !important; }
.abt-project-gallery > .wp-block-gallery.is-style-abt-stack {
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	justify-content: center;
	gap: 28px !important;
	height: 600px;
	margin: 0 !important;
	padding: 100px 6% 0;
	border: var(--abt-b);
	border-radius: 32px;
	background: var(--abt-pc, var(--abt-or));
	box-shadow: var(--abt-sh-lg);
	overflow: hidden;
}
.abt-project-gallery > .wp-block-gallery.is-style-abt-stack > .wp-block-image { display: none !important; }
.abt-project-gallery > .wp-block-gallery.is-style-abt-stack > .wp-block-image:nth-of-type(-n+2) {
	display: block !important;
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: 560px;
	height: 640px;
	margin: 0 !important;
	border: var(--abt-b);
	border-radius: 18px 18px 0 0;
	overflow: hidden;
	background: #fff;
}
.abt-project-gallery > .wp-block-gallery.is-style-abt-stack > .wp-block-image:nth-of-type(2) { margin-top: 60px !important; }
.abt-project-gallery > .wp-block-gallery.is-style-abt-stack > .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center; }
.abt-project-gallery > .wp-block-gallery.is-style-abt-stack figcaption { display: none; }
.abt-cover-logo { position: absolute; top: 30px; inset-inline-start: 34px; z-index: 2; height: 34px; width: auto; max-width: 45%; object-fit: contain; }
.abt-cover-tag { position: absolute; top: 30px; inset-inline-end: 34px; z-index: 2; }

/* Screen galleries: each image is a framed screen, fixed height, cropped from the top. */
.wp-block-gallery.is-style-abt-showcase {
	display: grid !important;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: 24px !important;
	margin-block: 40px 0 !important;
}
.wp-block-gallery.is-style-abt-showcase.abt-gallery-count-1 { --cols: 1; }
.wp-block-gallery.is-style-abt-showcase.abt-gallery-count-2 { --cols: 2; }
.wp-block-gallery.is-style-abt-showcase.abt-gallery-count-4 { --cols: 4; }
.wp-block-gallery.is-style-abt-showcase > .wp-block-image {
	width: auto !important;
	height: 520px;
	margin: 0 !important;
	border: var(--abt-b);
	border-radius: 18px;
	box-shadow: var(--abt-sh);
	overflow: hidden;
	background: #fff;
}
.wp-block-gallery.is-style-abt-showcase.abt-gallery-count-4 > .wp-block-image { height: 440px; }
.wp-block-gallery.is-style-abt-showcase > .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center; }
.wp-block-gallery.is-style-abt-showcase > .wp-block-image figcaption {
	position: absolute;
	inset: auto 12px 12px;
	display: inline-flex;
	width: auto;
	max-width: calc(100% - 24px);
	padding: 4px 12px;
	border: var(--abt-b);
	border-radius: 999px;
	background: var(--abt-white);
	color: var(--abt-ink);
	font-size: 13px;
	font-weight: 600;
}

/* Project sections */
.abt-project-section { padding-block: calc(var(--abt-sec) * .8) 0; }
.abt-project-section > * { margin-block: 0; }
.abt-project-section.abt-project-section > * { max-width: none !important; margin-inline: 0 !important; }
@media (min-width: 900px) {
	.abt-project-section:not(.is-steps):not(.is-result) {
		display: grid !important;
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		grid-auto-flow: row dense;
		column-gap: 48px;
		row-gap: 0;
		align-items: start;
	}
	.abt-project-section:not(.is-steps):not(.is-result) > * { grid-column: 2; max-width: none !important; margin-inline: 0 !important; }
	.abt-project-section:not(.is-steps):not(.is-result) > :is(h2, h3):first-child { grid-column: 1; grid-row: 1; }
	.abt-project-section:not(.is-steps):not(.is-result) > p.abt-project-text:first-of-type { grid-column: 1; grid-row: 2 / span 30; }
	.abt-project-section:not(.is-steps):not(.is-result) > .wp-block-gallery { grid-column: 1 / -1; order: 1; }
}
.abt-project-section > h2, .abt-project-section > h3 { font-size: var(--wp--preset--font-size--section); text-align: start !important; }
.abt-project-section > h2 mark, .abt-project-section > h3 mark { background: none !important; color: var(--abt-or-d) !important; }
.abt-project-section > p { margin-top: 16px !important; font-size: 16.5px; line-height: 1.95; color: var(--abt-ink-2); }
.abt-project-section:not(.is-steps):not(.is-result) > p.abt-project-text:first-of-type {
	margin-top: 24px !important;
	padding: 22px 24px;
	border: var(--abt-b);
	border-radius: 20px;
	background: var(--abt-peach);
	box-shadow: var(--abt-sh-sm);
	color: var(--abt-ink);
	font-family: var(--abt-display);
	font-size: 22px;
	line-height: 1.6;
	transform: rotate(-1deg);
}
.abt-project-section.is-steps { counter-reset: abt-step; }
.abt-project-section.is-steps > p { counter-increment: abt-step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border: var(--abt-b); border-radius: 18px; background: var(--abt-white); color: var(--abt-ink-2); font-size: 15.5px; }
.abt-project-section.is-steps > p::before { content: counter(abt-step); display: grid; place-items: center; width: 44px; height: 44px; border: var(--abt-b); border-radius: 12px; background: var(--abt-or); color: var(--abt-ink); font-family: var(--abt-display); font-size: 22px; line-height: 1; }
.abt-project-section.is-steps > p:nth-of-type(even)::before { background: var(--abt-sky); }
@media (min-width: 900px) {
	.abt-project-section.is-steps { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
	.abt-project-section.is-steps > :is(h2, h3, .wp-block-gallery) { grid-column: 1 / -1; }
	.abt-project-section.is-steps > p { margin: 0 !important; }
	.abt-project-section.is-steps > .wp-block-gallery { order: 1; margin-top: 24px !important; }
}
.abt-project-section.is-result { margin-top: calc(var(--abt-sec) * .8); padding: 44px; border: var(--abt-b); border-radius: 30px; background: var(--abt-lime); box-shadow: var(--abt-sh-lg); }
.abt-project-section.is-result > p { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: var(--abt-b); border-radius: 16px; background: var(--abt-white); color: var(--abt-ink); font-size: 15.5px; }
.abt-project-section.is-result > p::before { content: ""; width: 34px; height: 34px; border: var(--abt-b); border-radius: 50%; background: var(--abt-or) url(../images/icons/check.svg) center / 16px no-repeat; }
@media (min-width: 900px) {
	.abt-project-section.is-result { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
	.abt-project-section.is-result > :is(h2, h3, .wp-block-gallery) { grid-column: 1 / -1; }
	.abt-project-section.is-result > p { margin: 0 !important; }
	.abt-project-section.is-result > .wp-block-gallery { order: 1; margin-top: 24px !important; }
}
.abt-project-section > p:empty { display: none; }
.abt-project-body > .wp-block-heading, .abt-project-body > p, .abt-project-body > ul, .abt-project-body > ol { max-width: 820px; }

/* Project action links */
.abt-project-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px !important; }
.abt-plink { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px; border: var(--abt-b); border-radius: 14px; background: var(--abt-white); color: var(--abt-ink); box-shadow: var(--abt-sh-sm); font-weight: 600; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.abt-plink:hover { transform: translate(2px, -2px); box-shadow: var(--abt-sh); color: var(--abt-ink); text-decoration: none; }
.abt-plink.is-primary { background: var(--abt-or); }
.abt-plink svg { width: 18px; height: 18px; }

/* ==========================================================================
   22. Blog, posts, search, 404
   ========================================================================== */

.abt-posts .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.abt-posts .wp-block-post-template > li { margin: 0 !important; }
.abt-pcard2 { display: flex !important; flex-direction: column; height: 100%; border: var(--abt-b); border-radius: 24px; background-color: var(--abt-white); box-shadow: var(--abt-sh); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.abt-pcard2:hover { transform: translate(3px, -3px); box-shadow: var(--abt-sh-lg); }
.abt-pcard2 > * { margin: 0 !important; }
.abt-pcard2 .wp-block-post-featured-image { aspect-ratio: 16 / 10; border-bottom: var(--abt-b); overflow: hidden; background: var(--abt-peach); }
.abt-pcard2 .wp-block-post-featured-image a, .abt-pcard2 .wp-block-post-featured-image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.abt-pcard2__body { display: flex !important; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.abt-pcard2__body > * { margin: 0 !important; }
.abt-pcard2 .wp-block-post-title { font-size: 24px; line-height: 1.4; }
.abt-pcard2 .wp-block-post-title a { color: var(--abt-ink); text-decoration: none; }
.abt-pcard2 .wp-block-post-title a:hover { color: var(--abt-or-d); }
.abt-pcard2 .wp-block-post-excerpt { font-size: 15px; color: var(--abt-ink-2); }
.abt-pcard2 .wp-block-post-excerpt__more-text { display: none; }
.abt-pcard2 .wp-block-post-date, .abt-pcard2 .wp-block-post-terms { font-size: 13px; color: var(--abt-muted); }
.abt-pcard2 .wp-block-post-terms a, .abt-post-terms a { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: var(--abt-b); border-radius: 999px; background: var(--abt-lime); color: var(--abt-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.abt-pcard2 .wp-block-post-terms__separator { display: none; }
.abt-pcard2__meta { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto !important; padding-top: 6px; }

.abt-post-head { margin-top: 40px !important; }
.abt-post-head h1 { margin: 18px 0 14px !important; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.35; }
.abt-post-meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--abt-muted); font-size: 14px; }
.abt-post-meta > * { margin: 0 !important; }
.abt-post-cover { margin-top: 30px !important; border: var(--abt-b); border-radius: 26px; box-shadow: var(--abt-sh); overflow: hidden; aspect-ratio: 16 / 8; }
.abt-post-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.abt-prose { font-size: 17.5px; line-height: 2; }
.abt-prose > * { max-width: 780px; margin-inline: auto !important; }
.abt-prose > .alignwide { max-width: 1100px; }
.abt-prose > .alignfull { max-width: none; }
.abt-prose h2 { margin-top: 1.6em !important; font-size: clamp(28px, 3vw, 38px); }
.abt-prose h3 { margin-top: 1.4em !important; font-size: 26px; }
.abt-prose a { color: var(--abt-or-d); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.abt-prose blockquote { margin-block: 1.6em; }
.abt-prose .wp-block-image img { border: var(--abt-b); border-radius: 18px; }
.abt-prose ul li::marker, .abt-prose ol li::marker { color: var(--abt-or-d); font-weight: 700; }
.abt-prose code { padding: 2px 6px; border-radius: 6px; background: var(--abt-peach); font-size: .9em; }
.abt-prose pre { padding: 18px; border: var(--abt-b); border-radius: 16px; background: var(--abt-ink); color: #f1f5f9; overflow-x: auto; }
.abt-prose table { width: 100%; border-collapse: collapse; }
.abt-prose :is(th, td) { padding: 10px 12px; border: var(--abt-b); }

.abt-search-form .wp-block-search__inside-wrapper { gap: 10px; padding: 0 !important; border: 0 !important; }
.abt-search-form .wp-block-search__input { min-height: 54px; padding-inline: 16px; border: var(--abt-b) !important; border-radius: 14px; background: var(--abt-white); font: inherit; color: var(--abt-ink); }
.abt-search-form .wp-block-search__button { min-height: 54px; margin: 0; padding-inline: 22px; border: var(--abt-b) !important; border-radius: 14px; background: var(--abt-or); color: var(--abt-ink); box-shadow: var(--abt-sh-sm); font-weight: 600; }

.abt-404 { display: grid !important; justify-items: center; gap: 16px; padding: 60px 28px; text-align: center; border: var(--abt-b); border-radius: 34px; background-color: var(--abt-white); box-shadow: var(--abt-sh-lg); margin-top: 40px !important; }
.abt-404__code { font-family: var(--abt-display); font-size: clamp(110px, 18vw, 220px) !important; line-height: .9; color: var(--abt-or); -webkit-text-stroke: 3px var(--abt-ink); text-shadow: -8px 8px 0 var(--abt-ink); }
.abt-empty { padding: 30px; border: 2px dashed var(--abt-ink); border-radius: 20px; background: var(--abt-white); text-align: center; }

/* Comments (simple) */
.wp-block-comments { max-width: 780px; margin-inline: auto !important; }
.wp-block-comments input:not([type="checkbox"]):not([type="submit"]), .wp-block-comments textarea { width: 100%; padding: 12px 14px; border: var(--abt-b); border-radius: 12px; background: var(--abt-white); font: inherit; }
.wp-block-comments .wp-block-post-comments-form input[type="submit"] { min-height: 50px; padding: 0 22px; border: var(--abt-b); border-radius: 14px; background: var(--abt-or); color: var(--abt-ink); box-shadow: var(--abt-sh-sm); font-weight: 600; cursor: pointer; }

/* Legacy carousel (old content keeps working) */
.abt-carousel { position: relative; }
.abt-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.abt-carousel__viewport::-webkit-scrollbar { display: none; }
.abt-carousel__track { display: flex; gap: var(--gap, 24px); }
.abt-carousel__slide { flex: 0 0 min(var(--slide-w, 420px), 86vw); scroll-snap-align: start; }
.abt-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.abt-carousel__dots button { width: 12px; height: 12px; padding: 0; border: var(--abt-b); border-radius: 50%; background: var(--abt-white); cursor: pointer; }
.abt-carousel__dots button[aria-current="true"] { background: var(--abt-or); }

/* ==========================================================================
   23. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.abt-nav, .abt-hdr__cta { display: none; }
	.abt-burger { display: grid; }
	.abt-hero__grid, .abt-banner, .abt-why, .abt-reach, .abt-free { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.abt-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.abt-ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-ftr__about { grid-column: 1 / -1; }
	.abt-wins--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-wins--3 .abt-win:nth-child(3) { display: none; }
	.abt-cta { grid-template-columns: minmax(0, 1fr); }
	.abt-cta__art { display: none !important; }
	.abt-posts .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-banner__art { max-width: 380px; }
}
@media (max-width: 860px) {
	.abt-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px !important; }
	.abt-head--center { align-items: center; }
	.abt-phead__row { flex-direction: column; align-items: flex-start; }
	.abt-cards3, .abt-wins, .abt-bubbles, .abt-waybig, .abt-grid4.abt-grid4--3 { grid-template-columns: minmax(0, 1fr); }
	.abt-steps { grid-template-columns: minmax(0, 1fr); gap: 52px; }
	.abt-step + .abt-step::before { top: -52px; inset-inline-start: 50px; width: 0; height: 52px; border-top: 0; border-inline-start: 2px dashed var(--abt-ink); }
	.abt-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-num:nth-child(3) { border-inline-start: 0; }
	.abt-num:nth-child(-n+2) { border-bottom: var(--abt-b); }
	.wp-block-gallery.is-style-abt-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abt-logos { flex-direction: column; align-items: flex-start; gap: 16px; }
	.wp-block-gallery.is-style-abt-logos { width: 100%; flex-wrap: wrap !important; justify-content: flex-start; gap: 20px 26px !important; }
	.wp-block-gallery.is-style-abt-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wp-block-gallery.is-style-abt-showcase.abt-gallery-count-1 { grid-template-columns: minmax(0, 1fr) !important; }
	.wp-block-gallery.is-style-abt-showcase > .wp-block-image { height: 420px; }
}
@media (max-width: 600px) {
	:root { --abt-header-h: 84px; }
	body { background-size: 20px 20px; }
	.abt-hdr { padding-top: 10px; }
	.abt-hdr__bar { height: 62px; padding-inline: 12px 8px; border-radius: 16px; box-shadow: var(--abt-sh-sm); }
	.abt-brand img { width: 38px; }
	.abt-brand b { font-size: 13.5px; }
	.abt-hero { padding-block: 36px 20px; }
	.abt-hero h1 { font-size: 44px; margin: 22px 0 16px !important; }
	:is(mark, span):is(.abt-mark, .abt-mark-sky, .abt-mark-lime, .abt-mark-peach) { border-width: 2px; box-shadow: -3px 3px 0 var(--abt-ink); border-radius: 12px; }
	.abt-lead, .abt-banner .abt-lead { font-size: 16.5px; }
	.abt-hero .wp-block-buttons > .wp-block-button, .abt-banner .wp-block-buttons > .wp-block-button { flex: 1 1 100%; }
	.abt-hero .wp-block-buttons > .wp-block-button .wp-block-button__link, .abt-banner .wp-block-buttons > .wp-block-button .wp-block-button__link { width: 100%; }
	.abt-stats { gap: 10px; margin-top: 30px !important; }
	.abt-stat { padding: 8px 12px; gap: 8px; }
	.abt-stat__num { font-size: 26px; }
	.abt-stat__label { font-size: 12px; }
	.abt-art { padding: 24px 16px 14px; border-radius: 24px; box-shadow: var(--abt-sh); }
	.abt-art > p.is-style-abt-tag { min-height: 32px; font-size: 12.5px; padding: 3px 10px !important; }
	.abt-art > p.is-style-abt-tag:nth-of-type(2) { inset-inline-end: -8px; }
	.abt-art > p.is-style-abt-tag:nth-of-type(3) { inset-inline-start: -8px; bottom: 26px; }
	.abt-review { inset-inline-end: 14px; bottom: -22px; }
	.abt-tick { height: 120px; }
	.abt-tick__track span { font-size: 20px; gap: 24px; }
	.abt-tick__track, .abt-tick__band { gap: 24px; }
	.abt-tick__band { padding-block: 12px; }
	.abt-logos { padding: 18px; }
	.wp-block-gallery.is-style-abt-logos > .wp-block-image img { height: 26px !important; }
	.abt-card__body h3 { font-size: 22px; }
	.abt-num { padding: 18px 16px; }
	.abt-num__value { font-size: 42px !important; }
	.abt-num__label { font-size: 13.5px; }
	.abt-why__art { padding: 20px; border-radius: 24px; box-shadow: var(--abt-sh); }
	.abt-notes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.abt-note h3 { font-size: 21px; }
	.abt-win__media { height: 270px; }
	.abt-win__shots { top: 64px; inset-inline: 18px; gap: 12px; }
	.abt-win__logo { top: 20px; inset-inline-start: 18px; height: 24px !important; }
	.abt-shot { height: 300px; }
	.abt-win__body { padding: 16px 18px 18px; }
	.abt-win__title { font-size: 23px; }
	.abt-step { padding: 22px 20px; }
	.abt-cta { padding: 34px 22px 30px; border-radius: 26px; box-shadow: var(--abt-sh); }
	.abt-cta h2 { font-size: 40px; }
	.abt-cta__text > p:not(.is-style-abt-tag) { font-size: 16px; }
	.abt-wa .abt-btn { width: 100%; }
	.abt-form-card { padding: 20px; border-radius: 22px; box-shadow: var(--abt-sh); }
	.abt-form-card__head { flex-direction: column; align-items: flex-start; }
	.xf .xf-submit { width: 100%; }
	.abt-ftr { border-radius: 28px 28px 0 0; }
	.abt-ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 18px; padding-block: 48px 30px; }
	.abt-ftr__contact { grid-column: 1 / -1; }
	.abt-ftr__bottom { flex-direction: column; }
	.abt-banner { margin-top: 26px !important; padding: 28px 20px 30px; border-radius: 26px; box-shadow: var(--abt-sh); gap: 28px; }
	.abt-banner h1 { font-size: 42px; }
	.abt-banner__art { max-width: 300px; }
	.abt-simple { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; gap: 18px; }
	.abt-simple__icon { width: 90px; }
	.abt-simple__text > p:first-child { font-size: 25px; }
	.abt-grid4 { grid-template-columns: minmax(0, 1fr); }
	.abt-tools, .abt-tools--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.wp-block-gallery.is-style-abt-clients > .wp-block-image { height: 96px; }
	.abt-filters a, ul.is-style-abt-pills li a { min-height: 40px; padding: 4px 12px; font-size: 13.5px; }
	.abt-filters, ul.is-style-abt-pills { gap: 8px; }
	.abt-phead { margin-top: 26px; }
	.abt-facts { gap: 10px; }
	.abt-facts div { padding: 12px 14px; }
	.abt-project-gallery > .wp-block-gallery.is-style-abt-stack { height: 400px; padding: 74px 18px 0; gap: 12px !important; border-radius: 24px; box-shadow: var(--abt-sh); }
	.abt-project-gallery > .wp-block-gallery.is-style-abt-stack > .wp-block-image:nth-of-type(-n+2) { height: 420px; }
	.abt-project-gallery > .wp-block-gallery.is-style-abt-stack > .wp-block-image:nth-of-type(2) { margin-top: 36px !important; }
	.abt-cover-logo { top: 22px; inset-inline-start: 20px; height: 26px; }
	.abt-cover-tag { display: none !important; }
	.wp-block-gallery.is-style-abt-showcase { grid-template-columns: minmax(0, 1fr) !important; }
	.wp-block-gallery.is-style-abt-showcase > .wp-block-image, .wp-block-gallery.is-style-abt-showcase.abt-gallery-count-4 > .wp-block-image { height: 380px; }
	.abt-project-section.is-result { padding: 26px 18px; border-radius: 24px; box-shadow: var(--abt-sh); }
	.abt-project-section.is-steps > p, .abt-project-section.is-result > p { margin-top: 12px !important; }
	.abt-waybig a { min-height: 0; }
	.abt-free { padding: 26px 18px; border-radius: 24px; box-shadow: var(--abt-sh); }
	ul.is-style-abt-checks li { font-size: 15px; }
	.abt-posts .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.abt-post-cover { border-radius: 20px; aspect-ratio: 4 / 3; }
	.abt-prose { font-size: 16.5px; }
	.abt-404 { padding: 40px 18px; }
}

/* Small fixes */
.abt-review .abt-avatar { width: 34px; height: 34px; }
.abt-skill:has(.abt-skill__ring:empty) { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
.abt-skill__ring:empty { display: none; }
.abt-related-title { margin-bottom: 30px !important; }
.abt-service-switch { margin: 30px 0 0 !important; }
.xf-chat .xfc-launcher { border: 2px solid var(--abt-ink); box-shadow: -3px 3px 0 var(--abt-ink); }
.xf-chat .xfc-panel { border: 2px solid var(--abt-ink); box-shadow: -6px 6px 0 var(--abt-ink); }

/* Empty service archive note */
.abt-empty-note{margin:0 0 28px;padding:16px 20px;background:var(--wp--preset--color--white);border:2px dashed var(--abt-ink,#1d2939);border-radius:16px;font-weight:500;text-align:center}

/* Tablets (601–1080px): keep the big illustrations at a comfortable size, and use the width. */
@media (min-width: 601px) and (max-width: 1080px) {
	.abt-art, .abt-why__art { width: 100%; max-width: 560px; margin-inline: auto !important; box-sizing: border-box; }
}
@media (min-width: 601px) and (max-width: 860px) {
	.abt-cards3 .abt-card { display: grid !important; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; }
	.abt-cards3 .abt-card__top { grid-column: 1 / -1; }
	.abt-cards3 .abt-card__img { margin: 20px !important; margin-inline-end: 0 !important; }
	.abt-cards3 .abt-card__body { height: 100%; box-sizing: border-box; }
	.abt-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
	.abt-wins .abt-win__media { height: 240px; }
	.abt-wins .abt-win__shots .abt-shot + .abt-shot { display: none; }
	.abt-wins .abt-win .abt-chips { display: none; }
	.abt-wins--3 .abt-win:nth-child(3) { display: none; }
}