/* Afaris components. Tokens come from theme.json as --wp--preset--* variables;
   these short aliases keep the rules below readable. */

:root {
	--paper: var(--wp--preset--color--paper);
	--ink: var(--wp--preset--color--ink);
	--ink-muted: var(--wp--preset--color--ink-muted);
	--wine: var(--wp--preset--color--wine);
	--wine-deep: var(--wp--preset--color--wine-deep);
	--gold: var(--wp--preset--color--gold);
	--border: var(--wp--preset--color--border);
	--rule: var(--wp--preset--color--rule);
	--ease-ink: cubic-bezier(.16, 1, .3, 1);
	--rise-dur: .85s;
	--rise-step: 70ms;
	--header-h: 92px;
}

/* Arabic ------------------------------------------------------------- */
/* XPR sets Arabic in IBM Plex Sans Arabic throughout, Latin included, with
   looser leading so marks above and below the letters are never clipped. */
:lang(ar) body,
:lang(ar) :where(h1, h2, h3, h4, h5, h6, button, input, textarea, .wp-element-button) {
	font-family: var(--wp--preset--font-family--plex-arabic);
}

:lang(ar) body { line-height: 1.8; }
:lang(ar) :where(h1, h2, h3) { line-height: 1.4; letter-spacing: 0; }

.en {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--wp--preset--font-family--manrope);
}

/* Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body { -webkit-font-smoothing: antialiased; }

::selection { background: var(--gold); color: var(--wine-deep); }

:focus-visible { outline: 3px solid #b22222; outline-offset: 5px; }

.skip-link.screen-reader-text:focus { background: var(--wine); color: #fff; }

/* Header -------------------------------------------------------------- */
/* A sticky frosted-glass pill with the wordmark, one line of navigation and
   the contact CTA. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-top: 14px;
}

.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.site-header .nav-pill {
	position: relative;
	min-height: calc(var(--header-h) - 14px);
	padding: 12px 22px !important;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 28px;
	background: linear-gradient(120deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, .58));
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #ffffff70, 0 12px 36px #46101112;
	transition: box-shadow .35s ease, border-color .35s ease;
}

.site-header .nav-pill::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 24px;
	border-top: 1px solid #ffffffb3;
	pointer-events: none;
}

html[data-scrolled] .site-header .nav-pill {
	border-color: #ffffffe6;
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #ffffff70, 0 16px 44px #4610111f;
}

@supports not (backdrop-filter: blur(1px)) {
	.site-header .nav-pill { background: rgba(255, 252, 248, .94); }
}

.wordmark { line-height: 1.2; }

.wordmark .wp-block-site-title {
	margin: 0;
	font: 800 20px/1.2 var(--wp--preset--font-family--manrope);
	letter-spacing: -.2px;
}

.wordmark .wp-block-site-title a { color: var(--wine); }

.wordmark .wp-block-site-tagline {
	margin: 4px 0 0;
	color: var(--ink-muted);
	font-size: 13px;
}

.site-header .wp-block-navigation { color: var(--ink-muted); gap: 28px; }
.site-header .wp-block-navigation a:hover { color: var(--wine); }
.site-header .wp-block-navigation .current-menu-item > a { color: var(--wine); }

.site-header .wp-block-button__link { min-height: 44px; padding: 8px 17px; font-size: 14px; border-radius: 16px; white-space: nowrap; }
.site-header .nav-pill > * { flex-shrink: 0; }
.site-header .nav-pill > .wp-block-navigation { flex-shrink: 1; }

.wp-block-polylang-language-switcher { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

.wp-block-polylang-language-switcher a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--wine);
	font-size: 14px;
	font-weight: 500;
}

.wp-block-polylang-language-switcher a:hover { border-color: var(--wine); }

/* Buttons ------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	transition: background-color .2s, transform .2s;
}

.wp-block-button__link:hover { transform: translateY(-2px); }

.wp-block-button.is-style-gold .wp-block-button__link {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--wine-deep);
}

.wp-block-button.is-style-gold .wp-block-button__link:hover { background: #ffcb75; }

.wp-block-button.is-style-text-link .wp-block-button__link {
	min-height: 0;
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid #ceae91;
	border-radius: 0;
	background: none;
	color: var(--wine);
	font-size: 15px;
	font-weight: 500;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover { transform: none; border-color: var(--wine); }

/* Eyebrow and lead ---------------------------------------------------- */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wine);
	font-size: 14px;
	font-weight: 500;
}

.is-style-eyebrow::before { content: ""; width: 23px; height: 2px; flex-shrink: 0; background: currentColor; }

.is-style-lead { color: var(--ink-muted); font-size: 18px; line-height: 1.85; max-width: 38em; }

/* Constrained layouts centre narrow children; a lead stays on the reading edge. */
.is-layout-constrained > .is-style-lead { margin-inline-start: 0 !important; margin-inline-end: auto !important; }

/* Ink rise ------------------------------------------------------------ */
/* Words rise into clipped boxes with a small tilt, then the emphasized
   phrase gets a wine-to-gold stroke. Plain CSS from the first frame: nothing
   waits on JavaScript to become readable. */
.is-style-ink-rise .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: .2em;
	margin-block: -.2em;
	padding-inline: .06em;
	margin-inline: -.06em;
}

.is-style-ink-rise .w > span {
	display: inline-block;
	transform-origin: 0 100%;
	animation: ink-rise var(--rise-dur) var(--ease-ink) calc(var(--i, 0) * var(--rise-step)) backwards;
}

:dir(rtl) .is-style-ink-rise .w > span,
[dir="rtl"] .is-style-ink-rise .w > span { transform-origin: 100% 100%; }
[dir="rtl"] .is-style-ink-rise .w[dir="ltr"] > span { transform-origin: 0 100%; }

@keyframes ink-rise {
	from { transform: translateY(115%) rotate(5deg); }
}

[dir="rtl"] .is-style-ink-rise .w > span { animation-name: ink-rise-rtl; }

@keyframes ink-rise-rtl {
	from { transform: translateY(115%) rotate(-5deg); }
}

.is-style-ink-rise em,
h1 em, h2 em {
	font-style: normal;
	color: var(--wine);
	background-image: linear-gradient(90deg, var(--wine), #c0503a 55%, var(--gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% .07em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

[dir="rtl"] :is(.is-style-ink-rise em, h1 em, h2 em) {
	background-image: linear-gradient(270deg, var(--wine), #c0503a 55%, var(--gold));
	background-position: 100% 100%;
}

.is-style-ink-rise em { animation: ink-stroke .9s var(--ease-ink) .6s backwards; }

@keyframes ink-stroke { from { background-size: 0 .07em; } }

/* Hero ---------------------------------------------------------------- */
/* XPR's hero stage: the page starts under the floating header, over a silk
   backdrop of slow wine and gold folds. XPR draws these with WebGL; here they
   are blurred CSS gradients, which keeps the theme script-free and still. */
.hero-stage {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--header-h)) !important;
	padding-top: var(--header-h);
	overflow: hidden;
	background: var(--paper);
}

.hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: radial-gradient(ellipse at 20% 40%, var(--wp--preset--color--tint), transparent 65%), var(--paper);
}

.hero-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #fffefa0d, #fffefa99), linear-gradient(0deg, var(--paper), transparent 18%);
}

.silk {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	will-change: transform;
	animation: silk-drift 24s var(--ease-ink) infinite alternate;
}

.silk-1 { width: 52vw; height: 36vw; inset-inline-end: -8vw; top: -10vw; background: radial-gradient(closest-side, #ffdb9e, transparent); }
.silk-2 { width: 34vw; height: 48vw; inset-inline-end: 22vw; top: 4vw; background: radial-gradient(closest-side, #e8b9a2, transparent); animation-duration: 30s; animation-delay: -8s; transform: rotate(-28deg); }
.silk-3 { width: 26vw; height: 26vw; inset-inline-start: -6vw; bottom: -6vw; background: radial-gradient(closest-side, #f2d3c4, transparent); animation-duration: 36s; animation-delay: -14s; }

@keyframes silk-drift {
	from { transform: translate3d(0, 0, 0) rotate(-12deg) scale(1); }
	to { transform: translate3d(-4vw, 3vw, 0) rotate(8deg) scale(1.12); }
}

.hero { padding-block: clamp(45px, 6vw, 77px) clamp(50px, 6vw, 74px); gap: clamp(35px, 5vw, 60px); }
.hero > * { min-width: 0; }

.hero .is-style-eyebrow { margin-bottom: 22px; font-size: 13px; }

.hero-title {
	margin: 0 0 22px !important;
	font-size: clamp(44px, 5.4vw, 76px) !important;
	font-weight: 600;
	line-height: 1.12 !important;
	letter-spacing: -1.6px;
}

.hero-copy { max-width: 510px; margin: 0 0 27px; color: #675854; font-size: 18px; line-height: 1.95; }

.social-proof { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.avatar-stack { display: flex; margin: 0; padding: 0; list-style: none; }
.avatar { width: 36px; height: 36px; overflow: hidden; border: 2px solid var(--paper); border-radius: 50%; }
.avatar + .avatar { margin-inline-start: -10px; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proof-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { color: #f0b441; }
.proof-line { color: #6d605b; font-size: 14px; line-height: 1.6; }
.proof-line b { color: var(--ink); font-weight: 700; }
.proof-line a { border-bottom: 1px solid #ceae91; color: inherit; }
.proof-line a:hover { border-color: var(--wine); color: var(--wine); }

.hero-actions { gap: 24px !important; }
.hero-note { margin-top: 15px !important; color: #756864; font-size: 13px; }

.hero-facts { gap: 0 !important; margin-top: 37px !important; }
.hero-fact { margin: 0 !important; padding-inline: 21px; border-inline-start: 1px solid #d8cbc1; }
.hero-fact:first-child { padding-inline-start: 0; border: 0; }
.hero-fact strong { display: block; color: var(--wine-deep); font-size: 23px; font-weight: 600; line-height: 1.4; }
.hero-fact span { color: #72645f; font-size: 13px; }

/* The workbench: XPR's tilted wine panel with a paper sheet inside. */
.workbench {
	position: relative;
	padding: 29px 28px 25px !important;
	border-radius: 12px;
	background: var(--wine-deep);
	box-shadow: 0 24px 55px #46101114;
	transform: rotate(-1.2deg);
}

.bench-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.bench-title { font: 800 26px/1 var(--wp--preset--font-family--manrope); letter-spacing: -1.2px; }

.paper { min-height: 330px; padding: 25px !important; border-radius: 5px; background: var(--paper); transform: rotate(1.2deg); }
.paper .paper-label { margin: 0; color: #75635d; font-size: 13px; letter-spacing: .4px; }
.paper h2, .paper h3 { margin: 9px 0 19px; font-size: 21px; font-weight: 600; line-height: 1.4; }

.paper-track { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid var(--border); color: inherit !important; transition: opacity .2s; }
.paper-track:hover { opacity: .72; }
.paper-track > svg { flex-shrink: 0; color: var(--wine); }
.paper-track div { flex: 1; }
.paper-track strong { display: block; font-size: 15px; }
.paper-track p { margin: 2px 0 0; color: #796860; font-size: 13px; line-height: 1.6; }
.paper-track > span { color: var(--wine); font: 600 16px var(--wp--preset--font-family--manrope); }
[dir="rtl"] .paper-track > span { transform: scaleX(-1); }

.bench-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; color: #d0aca0; font-size: 13px; }
.bench-bottom a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff33; border-radius: 50%; color: #fff; }
.bench-bottom a:hover { border-color: var(--gold); color: var(--gold); }

/* Classic hero (home): portrait beside the headline over a warm glow. */
.hero-classic {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--header-h)) !important;
	padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px)) !important;
	overflow: hidden;
}

.hero-classic::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--gradient--glow);
	opacity: .55;
	filter: blur(10px);
}

.hero-classic .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 4px;
	background: #f4eae1;
	color: var(--wine);
	font: 500 13px var(--wp--preset--font-family--manrope);
}

.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b22222; }

@media (max-width: 760px) {
	.hero-classic .wp-block-image img { aspect-ratio: 1; }
}

/* Inner pages reuse the stage for a short title band. */
.page-hero { padding-bottom: clamp(40px, 6vw, 64px); }
.page-hero .section-tag { margin-top: clamp(40px, 6vw, 72px); }
.page-title { margin-top: clamp(48px, 7vw, 88px) !important; font-size: clamp(38px, 4.6vw, 62px) !important; letter-spacing: -1.3px; line-height: 1.15 !important; }
.page-hero .section-tag + .page-title { margin-top: 0 !important; }
.case-cover img { width: 100%; max-height: min(560px, 62vh); object-fit: cover; border-radius: 12px; }

/* Top-rule columns and cards ------------------------------------------ */
.is-style-top-rule { border-top: 2px solid var(--rule); padding-top: 26px; }
.is-style-top-rule h3 { margin: 0 0 9px; }
.is-style-top-rule p { color: var(--ink-muted); font-size: 16px; line-height: 1.85; }

.is-style-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .45s var(--ease-ink), box-shadow .45s var(--ease-ink);
}

.is-style-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px #4610111a; }
.is-style-card .wp-block-post-featured-image { margin: 0; }
.is-style-card .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; }

/* Tags ---------------------------------------------------------------- */
.is-style-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }

.is-style-tags li {
	padding: 8px 12px;
	border-radius: 4px;
	background: #f4eae1;
	color: var(--wine);
	font: 500 13px/1.3 var(--wp--preset--font-family--manrope);
}

/* Bio photo caption --------------------------------------------------- */
.photo-caption { position: relative; }
.photo-caption .wp-block-image { margin: 0; }
.photo-caption .wp-block-image img { width: 100%; height: 470px; object-fit: cover; object-position: center 35%; }

.photo-caption .caption-panel {
	position: absolute;
	inset-inline: 18px;
	bottom: 18px;
	padding: 17px 22px !important;
	border-radius: 5px;
	background: #461011ed;
	color: #fff;
}

.photo-caption .caption-panel strong { display: block; font: 600 21px/1.3 var(--wp--preset--font-family--manrope); }
.photo-caption .caption-panel span { display: block; margin-top: 3px; color: var(--gold); font-size: 13px; }

/* Trust strip and logo loop --------------------------------------------- */
.trust-strip { padding-block: clamp(48px, 6vw, 76px); }
.trust-inner { gap: 25px !important; }
.trust-inner > p { flex-shrink: 0; max-width: 270px; margin: 0; color: #6d605b; font-size: 14px; line-height: 1.6; }

.logo-loop { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; gap: 48px; width: max-content; animation: logo-loop 40s linear infinite; }
.logo-loop:hover .logo-track { animation-play-state: paused; }
.logo-track img { display: block; width: auto; height: 28px; max-width: none; }

@keyframes logo-loop { to { transform: translateX(-50%); } }
[dir="rtl"] .logo-track { animation-name: logo-loop-rtl; }
@keyframes logo-loop-rtl { to { transform: translateX(50%); } }

/* Client logos in a calm grid. */
.clients { margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--border); }
.clients-label { margin-bottom: 22px !important; color: #6d605b; font-size: 14px; }

/* FAQ ----------------------------------------------------------------- */
.is-style-faq { border-bottom: 1px solid var(--border); }

.is-style-faq summary {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-block: 22px;
	cursor: pointer;
	font-size: 17px;
	font-weight: 500;
	list-style: none;
}

.is-style-faq summary::-webkit-details-marker { display: none; }

.is-style-faq summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	flex-shrink: 0;
	border-right: 2px solid var(--wine);
	border-bottom: 2px solid var(--wine);
	transform: rotate(45deg) translateY(-3px);
	transition: transform .3s var(--ease-ink);
}

.is-style-faq[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.is-style-faq > :not(summary) { padding-bottom: 22px; color: var(--ink-muted); font-size: 16px; line-height: 1.9; }

/* Contact band and footer --------------------------------------------- */
.contact-band { position: relative; overflow: hidden; isolation: isolate; }

.contact-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(at 85% 20%, rgba(255, 219, 158, .22), transparent 45%);
}

.contact-band .wpcf7 input:not([type="submit"]),
.contact-band .wpcf7 textarea,
.contact-band .wpforms-field input,
.contact-band .wpforms-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

.contact-band .wpcf7 :is(input, textarea) { box-sizing: border-box; font: inherit; }
.contact-band .wpcf7 label { color: var(--wp--preset--color--footer-text); font-size: 14px; }
.contact-band .wpcf7 textarea { height: 150px; }
.contact-band .wpcf7 :is(input, textarea):focus { outline: 2px solid var(--gold); outline-offset: 2px; border-color: transparent; }

.contact-band .wpcf7 input[type="submit"] {
	min-height: 52px;
	padding: 13px 24px;
	border: 1px solid var(--gold);
	border-radius: 6px;
	background: var(--gold);
	color: var(--wine-deep);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.contact-band .wpcf7 input[type="submit"]:hover { background: #ffcb75; transform: translateY(-2px); }

.site-footer a { color: var(--gold); }
.site-footer a:hover { color: #fff; }

/* Posts --------------------------------------------------------------- */
.wp-block-post-content > * + h2 { margin-top: 2.2em; }
.wp-block-post-content :where(p, li) { max-width: 68ch; }
.wp-block-query-pagination a { color: var(--wine); }

/* Reveal -------------------------------------------------------------- */
/* Hidden only once JS has marked <html class="js">, so content is always
   visible without it. theme.js adds .is-in as sections scroll into view. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease-ink), transform .85s var(--ease-ink); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1020px) {
	.site-header .header-cta { display: none; }
}

/* XPR sections ---------------------------------------------------------- */
/* Numbered section labels, two-line headings with the second line in wine,
   and the alternating paper / soft bands are the XPR rhythm. */
.section { padding-block: clamp(60px, 8vw, 95px) !important; }
.section-soft { background: #f5efe8; }
.section-tag { display: block; margin: 0 0 12px; color: var(--wine); font-size: 13px; }
.section-tag a { color: inherit; }

.section-head { align-items: flex-end !important; gap: clamp(24px, 5vw, 60px) !important; margin-bottom: 42px !important; }
.section-head h2,
.section h2,
.mentor-copy h2 { margin: 0; font-size: clamp(30px, 3.2vw, 43px); font-weight: 600; line-height: 1.35; letter-spacing: -.6px; }
.section-head .wp-block-column:last-child p { margin: 0 0 6px; color: #75635d; font-size: 17px; line-height: 1.9; }
.section-head .wp-block-buttons { margin-top: 12px; }

h1 em, h2 em, h3 em { font-style: normal; color: var(--wine); }
.section h2 em,
.mentor-copy h2 em,
.contact-band h2 em { background: none; }
.contact-band h2 em { color: var(--gold); }
.contact-band .section-tag { color: var(--gold); }

/* Service rows: icon, kicker, title, a muted line and a hairline between. */
.pain-list { border-top: 1px solid #d9c8bb; }
.pain-row { display: flex; align-items: flex-start; gap: 20px; padding: 26px 0; border-bottom: 1px solid #d9c8bb; color: inherit !important; }
.pain-row > svg { flex-shrink: 0; margin-top: 4px; color: var(--wine); }
.pain-row div { flex: 1; }
.pain-kicker { display: block; color: var(--wine); font-size: 13px; }
.pain-row strong { display: block; margin: 2px 0 4px; font-size: 20px; font-weight: 600; }
.pain-row p { max-width: 62ch; margin: 0; color: #77665e; font-size: 16px; line-height: 1.85; }
.pain-arrow { align-self: center; color: var(--wine); font-size: 20px; transition: transform .3s var(--ease-ink); }
.pain-row:hover .pain-arrow { transform: translateX(6px); }
[dir="rtl"] .pain-arrow { transform: scaleX(-1); }
[dir="rtl"] .pain-row:hover .pain-arrow { transform: scaleX(-1) translateX(6px); }

/* Mentor ------------------------------------------------------------------ */
.mentor .photo-caption .wp-block-image img { height: 520px; border-radius: 9px; object-position: center 30%; }
.mentor-copy h2 { margin-bottom: 21px; }
.mentor-copy p { color: #726058; font-size: 17px; line-height: 1.95; }
.mentor-copy .is-style-tags { margin-block: 23px; }

/* Reviews: dark portrait cards on a scroll-snapping rail. */
.tst { position: relative; }
.tst-controls { position: absolute; inset-inline-end: 0; top: -84px; display: flex; gap: 10px; }
.tst-controls[hidden] { display: none; }
.tst-arrow { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--wp--preset--color--rule); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.tst-arrow:hover:not(:disabled) { border-color: var(--wine); color: var(--wine); }
.tst-arrow:disabled { opacity: .38; cursor: default; }

.tst-rail { display: flex; gap: 20px; margin: 0; padding: 4px 0 18px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tst-rail::-webkit-scrollbar { display: none; }

.tst-card { position: relative; display: flex; flex: 0 0 clamp(248px, 24%, 304px); min-height: 460px; overflow: hidden; border-radius: 14px; background: var(--wine-deep); scroll-snap-align: start; }
.tst-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.tst-monogram { display: flex; justify-content: center; padding-top: 26px; background: linear-gradient(150deg, #5c1415, var(--wine-deep) 72%); color: #ffffff1a; font: 700 132px/1 var(--wp--preset--font-family--manrope); }
.tst-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, #1a0f0ff5 0%, #1a0f0feb 38%, #1a0f0f9e 64%, #1a0f0f1a 100%); }
.tst-card figure { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; margin: 0; padding: 26px 24px; }
.tst-card .stars { margin-bottom: 14px; }
.tst-card blockquote { margin: 0 0 20px; padding: 0; border: 0; }
.tst-card blockquote p { margin: 0; color: #fdf8f3; font-size: 15px; line-height: 1.7; text-shadow: 0 1px 2px #00000073; }
.tst-card blockquote[lang="ar"] p { font-family: var(--wp--preset--font-family--plex-arabic); }
.tst-card figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 16px; border-top: 1px solid #ffffff2e; }
.tst-name { color: #fff; font-size: 15px; font-weight: 600; }
.tst-role { color: #ffffffb8; font-size: 13px; }
.tst-meta { margin-top: 4px; color: #ffffffb3; font-size: 13px; }
.tst-meta a { color: #ffffffd9; text-decoration: underline; text-underline-offset: 3px; }
.tst-meta a:hover { color: var(--gold); }

/* The same dark card treatment for testimonials inside rebuilt pages. */
.afaris-testimonial.wp-block-quote {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	border: 0 !important;
	background: linear-gradient(150deg, #5c1415, var(--wine-deep) 72%) !important;
	color: #fdf8f3;
}

.afaris-testimonial.wp-block-quote::before { content: "\201C"; margin-bottom: auto; color: #ffffff1a; font: 700 110px/0.8 var(--wp--preset--font-family--manrope); }
.afaris-testimonial p { color: #fdf8f3; }
.afaris-testimonial cite { padding-top: 14px; border-top: 1px solid #ffffff2e; color: #ffffffb8 !important; }
.afaris-testimonial cite strong { color: #fff !important; }

/* Brand mark: a wine disc with gold initials, after the XPR badge. */
.brand-mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #9a1d1d, var(--wine) 55%, var(--wine-deep));
	box-shadow: inset 0 0 0 2px #ffdb9e40;
	color: var(--gold) !important;
	font: 800 16px/1 var(--wp--preset--font-family--manrope);
	letter-spacing: -.5px;
	transition: transform .45s var(--ease-ink);
}

html[data-scrolled] .brand-mark { transform: scale(.88); }

.mobile-cta { display: none; }

/* Rebuilt page content ------------------------------------------------- */
/* Sections inside post content: the components the old WPBakery pages used,
   redrawn in the XPR system. */
.wp-block-post-content > .afaris-section,
.wp-block-post-content > .afaris-facts,
.wp-block-post-content > .afaris-stats,
.wp-block-post-content > .afaris-cards { margin-block: clamp(48px, 7vw, 80px) !important; }

/* Inside page content, leads sit on the same column as the text around them. */
.wp-block-post-content .is-style-lead { max-width: none; }

/* A tall or square featured image would push the case study below the fold. */
.hero .wp-block-post-featured-image img { max-height: min(560px, 62vh); width: 100%; object-fit: cover; }

.afaris-section > h2 { margin-bottom: 12px; }
.afaris-section > .is-style-lead { margin-bottom: var(--wp--preset--spacing--lg); }

.afaris-facts { gap: 27px !important; }
.afaris-fact { border-top: 2px solid var(--rule); padding-top: 18px; }
.afaris-fact p { margin: 0; font-size: 16px; line-height: 1.6; }
.afaris-fact-label,
.afaris-card-meta { color: var(--wine); font-size: 13px !important; font-weight: 500; }
.afaris-fact-label { margin-bottom: 6px !important; }

.afaris-stats {
	gap: 0 !important;
	padding: clamp(28px, 4vw, 42px) clamp(24px, 4vw, 48px) !important;
	border-radius: 16px;
	background: var(--wine-deep);
	color: var(--wp--preset--color--footer-text);
}

.afaris-stat { padding-inline-end: 24px; }
.afaris-stat p { margin: 0; }
.afaris-stat-number {
	color: var(--gold);
	font: 600 clamp(40px, 5vw, 58px)/1.05 var(--wp--preset--font-family--manrope);
	letter-spacing: -1px;
}

.afaris-items,
.afaris-quotes,
.afaris-cards { gap: 27px !important; }
.afaris-items .is-style-top-rule h3 { font-size: 18px; }

.afaris-testimonial.wp-block-quote {
	margin: 0;
	padding: 26px 26px 22px !important;
	border: 1px solid var(--border) !important;
	border-radius: 16px;
	background: #fff;
}

.afaris-testimonial p { font-size: 16px; line-height: 1.8; }
.afaris-testimonial cite { display: block; margin-top: 16px; color: var(--ink-muted); font-size: 13px; font-style: normal; }
.afaris-testimonial cite strong { color: var(--ink); font-size: 15px; font-weight: 600; }

.wp-block-quote:not(.afaris-testimonial) { margin-block: var(--wp--preset--spacing--lg); font-size: 20px; line-height: 1.6; }
.wp-block-quote:not(.afaris-testimonial) cite { color: var(--wine); font-size: 14px; font-style: normal; }

.afaris-card { display: flex; flex-direction: column; }
.afaris-card > :not(.wp-block-image) { margin-inline: 24px !important; }
.afaris-card > .wp-block-image { margin: 0 0 20px; }
.afaris-card > .wp-block-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.afaris-card h3 { margin-block: 0 6px; font-size: 18px; }
.afaris-card h3 a { color: var(--ink); }
.afaris-card .wp-block-buttons { margin-top: auto !important; padding-block: 12px 22px; }

.afaris-logos.wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	align-items: center;
	gap: 28px 40px !important;
}

.afaris-logos.wp-block-gallery .wp-block-image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: 64px;
	margin: 0 !important;
}

.afaris-logos.wp-block-gallery .wp-block-image img,
.afaris-logos.wp-block-gallery.is-cropped .wp-block-image img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 56px;
	object-fit: contain !important;
	border-radius: 0;
	filter: grayscale(1) sepia(.25);
	opacity: .8;
	transition: filter .3s, opacity .3s;
}

.afaris-logos.wp-block-gallery .wp-block-image img:hover { filter: none; opacity: 1; }

.afaris-cta { padding: clamp(32px, 5vw, 56px) !important; border-radius: 16px; background: var(--wp--preset--color--soft); text-align: center; }
.afaris-cta .wp-block-buttons { justify-content: center; }

.afaris-adplist { width: 100%; height: 520px; margin-top: var(--wp--preset--spacing--lg); border: 1px solid var(--border); border-radius: 16px; }

.wp-block-post-content .wp-block-embed { margin-block: var(--wp--preset--spacing--lg); }
.wp-block-post-content .wp-block-embed iframe { border-radius: 9px; }
.wp-block-post-content figure.wp-block-image figcaption { margin-top: 10px; text-align: start; }
.wp-block-post-content > .wp-block-pattern-afaris-contact,
.wp-block-post-content > .contact-band { margin-top: var(--wp--preset--spacing--section) !important; }

@media (max-width: 760px) {
	.afaris-stat { padding-block: 10px; }
	.afaris-adplist { height: 440px; }
}

@media (max-width: 760px) {
	:root { --header-h: 78px; }
	.site-header .nav-pill { border-radius: 20px; padding: 10px 16px !important; }
	.wordmark .wp-block-site-tagline { display: none; }
	.photo-caption .wp-block-image img { height: 380px; }
	.hero .wp-block-image img { aspect-ratio: 1; }
	.logo-loop .wp-block-image img { height: 34px !important; }
}

@media (max-width: 1020px) {
	.hero.wp-block-columns { flex-wrap: wrap !important; }
	.hero > .wp-block-column { flex-basis: 100% !important; }
	.workbench, .paper { transform: none; }
	.section-head.wp-block-columns { flex-wrap: wrap !important; }
	.section-head > .wp-block-column { flex-basis: 100% !important; }
	.tst-controls { position: static; justify-content: flex-end; margin-bottom: 14px; }
}

@media (max-width: 760px) {
	.hero-title { font-size: clamp(42px, 11vw, 58px) !important; }
	.hero-copy { font-size: 17px; }
	.hero-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 29px !important; }
	.hero-fact { padding-inline: 10px; }
	.hero-fact strong { font-size: 18px; white-space: nowrap; }
	.workbench { padding: 25px 20px !important; }
	.paper { padding: 22px !important; }
	.trust-inner { display: block !important; text-align: center; }
	.trust-inner > p { max-width: none; margin-bottom: 17px; font-size: 13px; }
	.mentor .photo-caption .wp-block-image img { height: 420px; }
	.tst-card { flex-basis: 82%; min-height: 420px; }
	.site-footer { padding-bottom: 90px !important; }
	.mobile-cta {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 13px;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid #d9c9ba;
		background: #fffefaf7;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	.mobile-cta span { color: var(--wine); font-size: 14px; font-weight: 600; }
	.mobile-cta small { display: block; color: #7e6558; font-size: 12px; font-weight: 400; }
	.mobile-cta .wp-element-button { min-height: 42px; padding: 7px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.is-style-ink-rise .w > span,
	.is-style-ink-rise em,
	.logo-track,
	.silk { animation: none !important; }
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.wp-block-button__link:hover,
	.is-style-card:hover { transform: none; }
}

/* Page body -------------------------------------------------------------- */
/* Every page body sits on the same 1184px column as the header and the title
   band, with text kept to a readable measure instead of a centred strip. */
.wp-site-blocks > * + * { margin-block-start: 0; }

.page-body {
	width: min(1184px, 100% - 64px);
	margin-inline: auto;
	padding-block: clamp(48px, 6vw, 72px) clamp(64px, 8vw, 95px);
}

.page-body .is-layout-constrained > :not(.alignfull),
.page-body .wp-block-post-content > * { max-width: none; margin-inline: 0 !important; }

/* Nested groups carry the root padding; inside the page column it only pushes
   section headings off the edge the rest of the text sits on. */
.page-body .has-global-padding { padding-inline: 0 !important; }

.page-body .wp-block-post-content > p,
.page-body .wp-block-post-content > .wp-block-list,
.page-body .afaris-section > p,
.page-body .wp-block-quote:not(.afaris-testimonial) { max-width: 68ch !important; }
.page-body .is-style-lead { max-width: 60ch !important; }
.page-body .wp-block-post-content > h2,
.page-body .afaris-section > h2 { max-width: 24ch; }

.page-body .wp-block-post-content > :first-child { margin-top: 0 !important; }
.page-body .wp-block-post-content > .afaris-section:first-child,
.page-body .wp-block-post-content > .afaris-facts:first-child { margin-top: 0 !important; }

/* The contact band always closes a page edge to edge, straight onto the footer. */
.contact-band { margin-block: 0 !important; }
.page-body + .contact-band,
.section + .contact-band,
.section-soft + .contact-band { margin-top: 0 !important; }

/* Product slider (XPR) ------------------------------------------------------ */
.product-slider { --slide: min(1000px, 86%); position: relative; }
.product-track {
	display: grid;
	grid-auto-columns: var(--slide);
	grid-auto-flow: column;
	gap: 28px;
	margin: 0 -24px;
	padding: 12px calc((100% + 48px - var(--slide)) / 2) 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.product-track::-webkit-scrollbar { display: none; }
.product-track:focus-visible { outline: 2px solid var(--wine); outline-offset: -2px; }

.product-slide {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	min-height: 460px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 30px 60px -30px #46101159;
	opacity: .45;
	transform: scale(.94);
	scroll-snap-align: center;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.product-slide[data-active="true"] { opacity: 1; transform: none; }

.product-info { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 34px 36px 30px; }
.product-index { position: absolute; inset-inline-end: 28px; top: 18px; color: transparent; font: 800 84px/1 var(--wp--preset--font-family--manrope); -webkit-text-stroke: 1.5px #80121238; }
.product-name { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.case-logo { display: block; flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: contain; }
.case-initial { display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--soft); color: var(--wine); font-size: 22px; font-weight: 600; }
.product-name h3 { display: flex; flex-direction: column; margin: 0; font-size: 24px; line-height: 1.3; }
.product-name small { color: var(--ink-muted); font: 500 15px var(--wp--preset--font-family--plex-arabic); }
.case-problem { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
.product-body { margin: 0; color: #5d4f4c; font-size: 16px; line-height: 1.8; }
.product-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.product-tools li { padding: 5px 12px; border-radius: 4px; background: var(--wp--preset--color--tint); color: var(--wine); font-size: 13px; font-weight: 700; }
.product-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: auto; padding-top: 14px; }
.link-button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ceae91; color: var(--wine) !important; font-size: 15px; }
.link-button:hover { border-color: var(--wine); }

.product-window { display: flex; align-items: center; padding: 34px 30px; background: radial-gradient(circle at 30% 20%, #ffdb9e47, transparent 55%), linear-gradient(150deg, var(--wine), var(--wine-deep)); }
.product-browser { width: 100%; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px #00000059; transform: rotate(-1.2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.product-slide[data-active="true"] .product-browser { transform: none; }
.product-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--border); background: #f4f0ed; direction: ltr; }
.product-lights { display: flex; gap: 6px; }
.product-lights i { width: 10px; height: 10px; border-radius: 50%; background: #d7cac1; }
.product-lights i:first-child { background: #b22222; }
.product-lights i:nth-child(2) { background: var(--gold); }
.product-url { flex: 1; padding: 3px 10px; border-radius: 6px; background: #fff; color: var(--ink-muted); font-size: 12px; font-weight: 600; text-align: center; }
.product-screen { aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--wp--preset--color--soft); }
.product-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.product-slide[data-active="true"] .product-screen img { animation: product-pan 11s ease-in-out .8s infinite alternate; }
.product-slide:hover .product-screen img { animation-play-state: paused; }
@keyframes product-pan { to { object-position: 50% 100%; } }

.product-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.product-nav { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--wine); font-size: 18px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.product-nav:hover { border-color: var(--wine); background: var(--wine); color: #fff; }
.product-dots { display: flex; gap: 8px; }
.product-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .4s ease; }
.product-dots button::before { content: ""; width: 100%; height: 6px; border-radius: 3px; background: var(--border); transition: background-color .3s; }
.product-dots button[aria-current="true"] { width: 48px; }
.product-dots button[aria-current="true"]::before { background: var(--wine); }
.product-count { min-width: 64px; color: var(--wine); font-size: 15px; font-weight: 800; text-align: center; }
.product-count span { color: var(--ink-muted); font-weight: 600; }

@media (max-width: 760px) {
	.product-slider { --slide: 88%; }
	.product-track { gap: 14px; margin: 0 -16px; padding-inline: calc((100% + 32px - var(--slide)) / 2); }
	.product-slide { grid-template-columns: 1fr; min-height: 0; transform: none; }
	.product-window { order: -1; padding: 22px 20px; }
	.product-info { padding: 24px 22px 22px; }
	.product-index, .product-dots { display: none; }
	.page-body { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
	.product-slide, .product-browser, .product-dots button { transition: none; }
	.product-slide[data-active="true"] .product-screen img { animation: none; }
}

/* Grids fill the row: three cards stretch instead of leaving an empty fourth slot. */
.page-body .afaris-cards.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.page-body .afaris-quotes.is-layout-grid,
.page-body .afaris-items.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }

/* The backdrop sits inside a constrained group, which caps every child at the
   content width; it has to span the whole stage edge to edge. */
.hero-stage > .hero-backdrop { max-width: none !important; margin: 0 !important; inset: 0; width: auto; }

/* Facts marquee ------------------------------------------------------------ */
/* Large-type facts between hairlines, sliding slowly, after felixlee.dev. */
.marquee {
	position: relative;
	overflow: hidden;
	padding-block: 22px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--paper);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
	display: flex;
	align-items: center;
	gap: 36px;
	width: max-content;
	animation: logo-loop 48s linear infinite;
	color: var(--ink);
	font: 500 clamp(26px, 3vw, 40px)/1.15 var(--wp--preset--font-family--manrope);
	letter-spacing: -.8px;
	white-space: nowrap;
}

.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 4px #ffdb9e66; }
[dir="rtl"] .marquee-track { animation-name: logo-loop-rtl; }

/* Client logos: a calm row now that the marquee carries the motion. */
.logo-row { flex: 1; min-width: 0; }
.logo-row-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.logo-row-inner img { display: block; width: auto; height: 34px; max-width: 120px; object-fit: contain; filter: grayscale(1) sepia(.25); opacity: .8; transition: filter .3s, opacity .3s; }
.logo-row-inner img:hover { filter: none; opacity: 1; }

/* About story (after aosama.net) ------------------------------------------ */
.about-story { padding-block: calc(var(--header-h) + clamp(32px, 5vw, 64px)) clamp(48px, 6vw, 72px); margin-top: calc(-1 * var(--header-h)) !important; }
.about-grid { width: min(1184px, 100% - 64px); max-width: none !important; margin-inline: auto !important; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); }
.about-aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.about-photo { margin: 0; }
.about-photo img { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 16px; }
.about-caption { margin-top: 14px; color: var(--ink-muted); font-size: 14px; }

.about-main, .about-aside { min-width: 0; }
.about-title { margin: 0 0 24px; font-size: clamp(36px, 4.2vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -1.2px; }
.about-bio p { max-width: 62ch; margin: 0 0 18px; color: #5d4f4c; font-size: 17px; line-height: 1.9; }
.about-bio .about-lead { color: var(--ink); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.6; letter-spacing: -.2px; }
.about-label { margin-top: clamp(48px, 6vw, 72px) !important; }

.timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.timeline-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--border); }
.timeline-meta { display: flex; flex-direction: column; gap: 14px; }
.timeline-years { color: var(--wine); font: 600 13px/1.4 var(--wp--preset--font-family--manrope); letter-spacing: 1px; text-transform: uppercase; }
.timeline-logo { width: auto; max-width: 96px; height: 28px; object-fit: contain; object-position: left center; filter: grayscale(1) sepia(.25); opacity: .75; }
.timeline-body h3 { margin: 0; font-size: 22px; font-weight: 600; }
.timeline-role { margin: 4px 0 10px !important; color: var(--ink); font-size: 15px; font-weight: 600; }
.timeline-body p { max-width: 62ch; margin: 0; color: #5d4f4c; font-size: 16px; line-height: 1.8; }
.timeline-body .link-button { margin-top: 12px; }

.more-roles { border-bottom: 1px solid var(--border); }
.more-roles summary { display: flex; align-items: center; gap: 18px; padding-block: 20px; cursor: pointer; list-style: none; }
.more-roles summary::-webkit-details-marker { display: none; }
.more-roles summary strong { flex: none; font-size: 16px; }
.more-roles summary span { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-muted); font-size: 12px; letter-spacing: 1px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.more-roles summary::after { content: "+"; flex: none; color: var(--wine); font-size: 22px; transition: transform .3s var(--ease-ink); }
.more-roles[open] summary::after { transform: rotate(45deg); }
.more-roles > p { margin: 0 0 20px; color: #5d4f4c; font-size: 15px; line-height: 1.9; }

.about-speaking { max-width: 62ch; color: #5d4f4c; font-size: 17px; line-height: 1.9; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 28px; border-block: 1px solid var(--border); }
.about-stats p { margin: 0; padding: 22px 20px 22px 0; }
.about-stats p + p { padding-inline-start: 20px; border-inline-start: 1px solid var(--border); }
.about-stats strong { display: block; color: var(--wine-deep); font: 600 clamp(30px, 3vw, 40px)/1.1 var(--wp--preset--font-family--manrope); letter-spacing: -.8px; }
.about-stats span { color: var(--ink-muted); font-size: 13px; }
.about-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-stories figure { margin: 0; }
.about-stories img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; }
.about-stories figcaption { margin-top: 8px; color: var(--ink-muted); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; }
	.about-aside { position: static; }
	.about-photo img { max-width: 320px; }
}

@media (max-width: 760px) {
	.about-grid { width: calc(100% - 40px); }
	.timeline-row { grid-template-columns: 1fr; gap: 10px; }
	.timeline-meta { flex-direction: row; align-items: center; justify-content: space-between; }
	.about-stats { grid-template-columns: 1fr; }
	.about-stats p + p { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--border); }
	.about-stories { grid-template-columns: 1fr 1fr; }
	.logo-row-inner { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; }
}

/* Screen-reader-only text (the marquee carries its facts here as one sentence). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* LinkedIn hand-off: the timeline rail carries on, dashed, into a card. */
.timeline-more { display: block; margin-top: 0; color: inherit !important; }
.timeline-more-rail { display: block; width: 150px; height: 34px; margin-inline-start: 4px; border-inline-start: 2px dashed var(--rule); }
.timeline-more-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	overflow: hidden;
	padding: 24px 26px;
	border-radius: 16px;
	background-color: var(--wine-deep);
	background-image: linear-gradient(150deg, #5c1415, var(--wine-deep) 72%);
	color: #fdf8f3;
	transition: transform .45s var(--ease-ink), box-shadow .45s var(--ease-ink);
}
.timeline-more-card::after { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, #ffdb9e40, transparent); pointer-events: none; }
.timeline-more:hover .timeline-more-card { transform: translateY(-3px); box-shadow: 0 22px 44px -18px #46101180; }
.timeline-more-badge { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--gold); color: var(--wine-deep); font: 800 22px/1 var(--wp--preset--font-family--manrope); letter-spacing: -.5px; }
.timeline-more-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.timeline-more-tag { color: var(--gold); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.timeline-more-copy strong { color: #fff; font-size: 20px; font-weight: 600; line-height: 1.3; }
.timeline-more-copy > span:last-child { color: #ffffffb8; font-size: 14px; line-height: 1.6; }
.timeline-more-cta { flex: none; padding: 10px 16px; border: 1px solid #ffffff40; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s; }
.timeline-more:hover .timeline-more-cta { border-color: var(--gold); color: var(--gold); }

@media (max-width: 760px) {
	.timeline-more-card { flex-wrap: wrap; }
	.timeline-more-cta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.timeline-more:hover .timeline-more-card { transform: none; }
}

/* Case study (after sebastianst.design/clubcard) ------------------------- */
/* Centred hero: label, title, one-line summary, tags, then a wide cover. */
.case-hero { text-align: center; padding-bottom: clamp(32px, 5vw, 56px); }
.case-hero > * { margin-inline: auto !important; }
.case-hero .section-tag { margin-top: clamp(40px, 6vw, 72px); }
.case-hero .page-title { max-width: 20ch; margin-top: 0 !important; }
.case-summary { max-width: 46ch; margin-top: 18px !important; }
.case-summary p { margin: 0; color: #675854; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; }
.case-hero .is-style-tags { justify-content: center; margin-top: 20px; }
.case-hero .case-cover { max-width: 1184px; margin-top: clamp(32px, 4vw, 48px) !important; }
.case-hero .case-cover img { border-radius: 20px; box-shadow: 0 30px 60px -30px #46101166; }

/* Facts read as the meta row right under the cover. */
.case-body .wp-block-post-content > .afaris-facts:first-child { padding-bottom: 8px; }

/* Sticky section chips under the header. */
.case-nav {
	position: sticky;
	top: calc(var(--header-h) + 6px);
	z-index: 30;
	width: min(1184px, 100% - 64px);
	margin: 0 auto;
}
.admin-bar .case-nav { top: calc(var(--header-h) + 6px + var(--wp-admin--admin-bar--height, 32px)); }
.case-nav ol {
	display: flex;
	gap: 6px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 6px;
	overflow-x: auto;
	list-style: none;
	border: 1px solid #ffffffcc;
	border-radius: 999px;
	background: #fffefad9;
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 10px 30px #46101114;
	scrollbar-width: none;
}
.case-nav ol::-webkit-scrollbar { display: none; }
.case-nav a { display: block; padding: 7px 14px; border-radius: 999px; color: #665754 !important; font-size: 13px; white-space: nowrap; transition: background-color .2s, color .2s; }
.case-nav a b { color: var(--wine); font-weight: 700; }
.case-nav a:hover { color: var(--wine) !important; }
.case-nav a[aria-current] { background: var(--wine); color: #fff !important; }
.case-nav a[aria-current] b { color: var(--gold); }

/* Numbered section labels above each section heading, the XPR "01 /" way. */
.case-body .wp-block-post-content { counter-reset: case-section; }
.case-body .wp-block-post-content > h2,
.case-body .wp-block-post-content > .afaris-section > h2 { counter-increment: case-section; scroll-margin-top: calc(var(--header-h) + 80px); }
.case-body .wp-block-post-content > h2::before,
.case-body .wp-block-post-content > .afaris-section > h2::before {
	content: counter(case-section, decimal-leading-zero) " /";
	display: block;
	margin-bottom: 10px;
	color: var(--wine);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}
.case-body .wp-block-post-content > h2 { margin-top: clamp(56px, 7vw, 88px) !important; }

/* Explore more */
.case-more .wp-block-post-excerpt p { margin: 0; }

@media (max-width: 760px) {
	.case-nav { width: calc(100% - 32px); top: calc(var(--header-h) + 4px); }
	.case-nav ol { margin: 0; }
}

/* The template-part wrapper is exactly as tall as the header, so the header
   cannot stick inside it. Make the wrapper the sticky element. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 40; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.wp-site-blocks > header.wp-block-template-part .site-header { position: relative; top: 0; }

/* Audit fixes ---------------------------------------------------------- */

/* Section labels that are real headings keep the label look. */
h2.section-tag { font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; line-height: 1.5; }

/* WCAG 2.2 target size: small links get at least a 24px hit area. */
.wp-block-post-terms a,
.site-footer p a,
.tst-meta a,
.site-header .wp-block-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.wp-block-post-terms a { min-height: 28px; }
.site-header .wp-block-navigation a { min-height: 32px; }
.site-footer p a { min-height: 32px; }

/* Windows High Contrast drops gradients and glass; keep text readable. */
@media (forced-colors: active) {
	.tst-card, .timeline-more-card, .afaris-stats, .product-window { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
	.tst-card::after { display: none; }
}

/* The marquee also pauses for keyboard users. */
.marquee:focus-within .marquee-track, .logo-loop:focus-within * { animation-play-state: paused !important; }

/* Case study library --------------------------------------------------- */
.case-library { margin-top: var(--wp--preset--spacing--lg); }
.case-filters { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.case-library.is-ready .case-filters { display: flex; }
.case-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	color: #665754;
	font: 500 14px/1 var(--wp--preset--font-family--manrope);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.case-filter span { color: var(--wine); font-size: 12px; font-weight: 700; }
.case-filter:hover { border-color: var(--wine); color: var(--wine); }
.case-filter[aria-pressed="true"] { border-color: var(--wine); background: var(--wine); color: #fff; }
.case-filter[aria-pressed="true"] span { color: var(--gold); }
.case-filter:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

.case-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 27px; margin: 0; padding: 0; list-style: none; }
.case-item[hidden] { display: none; }
.case-item { display: flex; animation: case-in .5s var(--ease-ink) both; }
@keyframes case-in { from { opacity: 0; transform: translateY(14px); } }
.case-card { position: relative; display: flex; flex: 1; flex-direction: column; }
.case-card .wp-block-post-featured-image img { display: block; width: 100%; height: auto; }
.case-card-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.case-card-cats { margin: 0; color: var(--wine); font-size: 13px; font-weight: 500; }
.case-card h3 { margin: 0; font-size: 21px; line-height: 1.35; }
.case-card h3 a { color: var(--ink); text-decoration: none; }
.case-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.case-card h3 a:focus-visible { outline: none; }
.case-card:has(h3 a:focus-visible) { outline: 2px solid var(--wine); outline-offset: 3px; }
.case-card-excerpt { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.7; }

/* Whole Explore more cards click through too, tags stay their own links. */
.case-more .is-style-card { position: relative; }
.case-more .is-style-card h3 a::after { content: ""; position: absolute; inset: 0; }
.case-more .is-style-card .wp-block-post-terms a { position: relative; z-index: 1; }

.case-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 36px; }
.case-actions .case-load[hidden] { display: none; }

@media (max-width: 900px) { .case-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.case-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.case-filters { flex-wrap: nowrap; margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
	.case-filter { flex: none; }
}

/* Cursor label over case cards (theme.js) ------------------------------ */
.case-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--ink);
	color: #fff;
	font: 500 13px/1 var(--wp--preset--font-family--manrope);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	scale: .85;
	transition: opacity .2s, scale .25s var(--ease-ink);
	box-shadow: 0 10px 30px #2519192e;
}
.case-cursor.is-on { opacity: 1; scale: 1; }
.case-cursor svg { width: 6px; color: var(--gold); }

/* "Let's discuss your next …" headline -------------------------------- */
.discuss { margin: 0 0 var(--wp--preset--spacing--md); color: #fff; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -.02em; }
.discuss-line { display: block; }
.discuss-arrow { display: inline-block; width: .9em; margin: 0 .12em; vertical-align: -.02em; color: var(--gold); transition: transform .45s var(--ease-ink); }
.contact-band:hover .discuss-arrow { transform: translateX(.12em); }
.discuss-word { display: inline-grid; color: var(--gold); font-style: italic; }
.discuss-live, .discuss-sizer { grid-area: 1 / 1; }
.discuss-sizer { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	.case-item { animation: none; }
	.case-cursor { transition: none; }
}

/* Hero portrait: the cut-out stands on the marquee line, with 3D shapes
   around it that drift with the mouse (theme.js). */
.hero-classic { padding-bottom: 0 !important; }
.hero-classic > .wp-block-columns { align-items: stretch !important; margin-bottom: 0; }
.hero-classic > .wp-block-columns > .wp-block-column:first-child { align-self: center; padding-bottom: var(--wp--preset--spacing--section); }
.hero-classic .hero-portrait-col { align-self: flex-end !important; }
.hero-classic + .marquee { margin-block-start: 0 !important; }
.hero-portrait { position: relative; max-width: 480px; margin-inline: auto; }
.hero-person { position: relative; z-index: 1; display: block; width: 100%; height: auto; transition: translate .2s linear; }
.hero-halo { position: absolute; inset: auto 4% 0; z-index: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #ffdb9e8c, #f7e9dd55 45%, transparent 68%); }
.hero-3d { position: absolute; inset: 0; z-index: 0; perspective: 900px; pointer-events: none; }
.hero-3d-front { z-index: 2; }
.obj { position: absolute; display: block; transform-style: preserve-3d; will-change: transform; }
.obj > i { display: block; transform-style: preserve-3d; animation: obj-float 7s ease-in-out infinite; }
@keyframes obj-float { 50% { translate: 0 -12px; } }

/* Glossy gold sphere, behind, beside the head. */
.obj-orb { top: 6%; left: -2%; }
.obj-orb > i { width: clamp(52px, 6vw, 82px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fffaf0 0 5%, #ffe3ad 18%, #f0b35e 46%, #b5651f 78%, #6e360c); box-shadow: 0 26px 40px -14px #8012125c, inset -6px -10px 18px #6e360c4d; animation-duration: 6.5s; }

/* Wine and gold torus, behind, low on the left. */
.obj-ring { bottom: 20%; left: -12%; }
.obj-ring > i { width: clamp(84px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, transparent 55%, #5c1415 57%, #a3261f 64%, #ffdb9e 72%, #d0843f 80%, #6e1414 88%, transparent 90%); transform: rotateX(62deg) rotateY(-18deg); filter: drop-shadow(0 18px 14px #46101133); animation-duration: 8.5s; }

/* Spinning wine cube, in front, by the shoulder. */
.obj-cube { top: 34%; right: -6%; }
.obj-cube > i { animation-duration: 7.5s; }
.cube { --s: clamp(42px, 4.6vw, 62px); position: relative; display: block; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: cube-spin 16s linear infinite; }
.cube b { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(140deg, #b4322c, #6e1414); box-shadow: inset 0 0 0 1px #ffdb9e66; }
.cube b:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.cube b:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: #5c1415; }
.cube b:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(140deg, #8f1c18, #4f1012); }
.cube b:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(140deg, #c2463a, #801212); }
.cube b:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(140deg, #ffdb9e, #e6a95e); }
.cube b:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #46101a; }
@keyframes cube-spin { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }

/* A design-tool cursor with a name tag, in front, top right. */
.obj-cursor { top: 12%; right: 2%; }
.obj-cursor > i { display: flex; align-items: flex-start; animation-duration: 5.5s; }
.obj-cursor svg { width: clamp(22px, 2.2vw, 30px); color: var(--wine); filter: drop-shadow(0 6px 8px #46101140); transform: rotate(-8deg); }
.obj-cursor em { margin: 18px 0 0 -4px; padding: 6px 11px; border-radius: 8px 8px 8px 2px; background: var(--wine); color: #fff; font: 600 13px/1 var(--wp--preset--font-family--manrope); font-style: normal; box-shadow: 0 10px 22px -8px #46101180; }

@media (max-width: 781px) {
	.hero-classic > .wp-block-columns > .wp-block-column:first-child { padding-bottom: 8px; }
	.hero-portrait { max-width: min(360px, 82%); }
	.obj-ring { left: -16%; }
	.obj-cube { right: -10%; }
}

/* Client tiles: bigger logos that tilt toward the pointer and colour in. */
.trust-title { margin: 0 0 26px; color: #6d605b; font-size: 14px; letter-spacing: .3px; text-align: center; }
.client-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; perspective: 900px; }
.client-tile {
	--mx: 50%;
	--my: 50%;
	position: relative;
	display: grid;
	box-sizing: border-box;
	flex: 0 0 calc((100% - 4 * 14px) / 5);
	place-items: center;
	height: 128px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: #fff;
	transition: transform .5s var(--ease-ink), box-shadow .5s var(--ease-ink), border-color .3s;
}
.client-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px circle at var(--mx) var(--my), #ffdb9e66, transparent 70%); opacity: 0; transition: opacity .3s; }
.client-tile img { position: relative; width: auto; max-width: 82%; height: 100px; object-fit: contain; filter: grayscale(1) sepia(.2); opacity: .72; transition: filter .35s, opacity .35s, transform .5s var(--ease-ink); }
.client-name { position: absolute; inset: auto 8px 10px; color: var(--wine); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-ink); }
.client-tile:hover { border-color: #e8cdb0; box-shadow: 0 22px 44px -22px #46101166; }
.client-tile:hover::before { opacity: 1; }
.client-tile:hover img { filter: none; opacity: 1; transform: translateY(-12px) scale(.86); }
.client-tile:hover .client-name { opacity: 1; transform: none; }

@media (hover: none) {
	.client-tile img { filter: none; opacity: 1; }
}
@media (max-width: 900px) { .client-tile { flex-basis: calc((100% - 3 * 14px) / 4); } }
@media (max-width: 600px) {
	.client-tiles { gap: 10px; }
	.client-tile { flex-basis: calc((100% - 2 * 10px) / 3); height: 100px; }
	.client-tile img { height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	.obj > i, .cube { animation: none; }
	.client-tile, .client-tile img { transition: none; }
}