/* ==========================================================================
   Homepage motion graphics — markup in inc/showcase.php
   Every element's resting style is its finished state (site built, #1, chart
   drawn), so with animations off (reduced motion) the scene still reads.
   One 12s loop drives each scene; motion.js pauses scenes off screen.
   ========================================================================== */

.ajf-scene { --loop: 12s; }
.ajf-motion .ajf-scene:not(.is-playing) *,
.ajf-motion .ajf-scene:not(.is-playing)::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	.ajf-scene *, .ajf-scene { animation: none !important; }
}

.ajf-ring { width: 40px; height: 40px; transform: rotate(-90deg); flex-shrink: 0; }
.ajf-ring circle { fill: none; stroke-width: 4; }
.ajf-ring__track { stroke: rgba(0, 0, 0, .08); }
.ajf-ring__fill { stroke: var(--ajf-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 6; animation: ajf-ring var(--loop) cubic-bezier(.3, .7, .2, 1) infinite both; animation-delay: 1.6s; }

@keyframes ajf-ring { 0%, 12% { stroke-dashoffset: 100; } 32%, 88% { stroke-dashoffset: 6; } 96%, 100% { stroke-dashoffset: 100; } }
@keyframes ajf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ajf-build { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 7%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes ajf-pop { 0%, 18% { opacity: 0; transform: translateY(12px) scale(.9); } 26%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.95); } }

/* --------------------------------------------------------------------------
   Hero badges over the photo
   -------------------------------------------------------------------------- */
.e-con:has(> .ajf-chips-layer) { position: relative; }
.elementor-element.ajf-chips-layer { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; z-index: 2; width: 100% !important; }
.ajf-chips-float { position: absolute; inset: 0; --loop: 6s; }
.ajf-glass {
	position: absolute; display: flex; align-items: center; gap: .7rem;
	padding: .7rem .95rem; border-radius: 18px; color: var(--ajf-ink);
	background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -12px rgba(0, 0, 0, .28);
	font: 600 .85rem/1.2 var(--ajf-font-body); animation: ajf-bob 6s ease-in-out infinite;
}
.ajf-glass__label { display: block; font-size: .72rem; font-weight: 500; color: var(--ajf-muted); }
.ajf-glass strong { display: block; font-size: 1rem; letter-spacing: -.01em; }
.ajf-glass--rank { top: 9%; left: -7%; flex-direction: column; align-items: flex-start; gap: .4rem; }
.ajf-glass--speed { bottom: 9%; right: -7%; animation-delay: -3s; }
.ajf-glass__up { position: absolute; top: .65rem; right: .8rem; color: var(--ajf-accent); font-size: .7rem; }
.ajf-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.ajf-bars i { width: 9px; border-radius: 3px; background: var(--ajf-accent); transform-origin: bottom; animation: ajf-bar var(--loop) cubic-bezier(.3, .7, .2, 1) infinite both; }
.ajf-bars i:nth-child(1) { height: 22%; opacity: .45; }
.ajf-bars i:nth-child(2) { height: 38%; opacity: .55; animation-delay: .12s; }
.ajf-bars i:nth-child(3) { height: 55%; opacity: .7; animation-delay: .24s; }
.ajf-bars i:nth-child(4) { height: 76%; opacity: .85; animation-delay: .36s; }
.ajf-bars i:nth-child(5) { height: 100%; background: var(--ajf-bright); animation-delay: .48s; }
@keyframes ajf-bar { 0% { transform: scaleY(0); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@media (max-width: 1024px) {
	.ajf-glass--rank { left: 10px; top: 10px; }
	.ajf-glass--speed { right: 10px; bottom: 10px; }
}

/* --------------------------------------------------------------------------
   "Build + Rank" section (dark)
   -------------------------------------------------------------------------- */
.ajf-showcase { display: grid; gap: clamp(2rem, 4vw, 3.5rem); width: 100%; }
.ajf-showcase__intro { max-width: 760px; margin-inline: auto; text-align: center; }
.ajf-showcase .ajf-showcase__eyebrow { color: var(--ajf-bright); font-weight: 600; margin: 0 0 .5rem; }
.ajf-showcase__title {
	color: #fff; font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 1rem;
	background: linear-gradient(180deg, #fff 30%, #b9f5c9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ajf-showcase .ajf-showcase__lead { color: var(--ajf-on-dark); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin: 0; }
.ajf-showcase__grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ajf-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ajf-panel {
	margin: 0; padding: clamp(1rem, 2.5vw, 1.75rem); border-radius: 28px; display: grid; gap: 1.25rem;
	background: linear-gradient(160deg, #2c2c2e, #1d1d1f 70%); border: 1px solid rgba(255, 255, 255, .08);
	position: relative; overflow: hidden;
}
.ajf-panel::before {
	content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(48, 209, 88, .22), transparent 70%);
}
.ajf-panel figcaption { color: var(--ajf-on-dark); font-size: .975rem; position: relative; }
.ajf-panel figcaption strong { display: block; color: #fff; font-size: 1.15rem; letter-spacing: -.015em; margin-bottom: .2rem; }
.ajf-stage { position: relative; height: 360px; }
@media (max-width: 560px) { .ajf-stage { height: 330px; } }

/* Browser that assembles itself */
.ajf-browser { position: absolute; inset: 0 12% 12% 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); display: flex; flex-direction: column; }
@media (max-width: 560px) { .ajf-browser { inset: 0 0 14% 0; } }
.ajf-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f5f5f7; border-bottom: 1px solid #e5e5ea; }
.ajf-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d1d1d6; }
.ajf-browser__bar i:first-child { background: #ff5f57; } .ajf-browser__bar i:nth-child(2) { background: #febc2e; } .ajf-browser__bar i:nth-child(3) { background: #28c840; }
.ajf-browser__bar span { margin-left: 10px; flex: 1; max-width: 220px; padding: 3px 10px; border-radius: 6px; background: #fff; font: 500 .72rem/1.4 var(--ajf-font-body); color: var(--ajf-muted); }
.ajf-browser__body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ajf-b { animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; }
.ajf-b--nav { display: flex; align-items: center; gap: 10px; animation-delay: .2s; }
.ajf-b--nav b { width: 54px; height: 10px; border-radius: 4px; background: var(--ajf-ink); margin-right: auto; }
.ajf-b--nav span { width: 30px; height: 6px; border-radius: 3px; background: #d1d1d6; }
.ajf-b--hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; flex: 1; min-height: 0; animation: none; }
.ajf-b__copy { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.ajf-b__copy > * { animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; }
.ajf-b__copy b { height: 13px; border-radius: 4px; background: var(--ajf-ink); animation-delay: .6s; }
.ajf-b__copy b + b { width: 75%; animation-delay: .75s; }
.ajf-b__copy span { height: 6px; border-radius: 3px; background: #d1d1d6; animation-delay: 1s; }
.ajf-b__copy span + span { width: 85%; animation-delay: 1.1s; }
.ajf-b__copy em { margin-top: 6px; width: 70px; height: 20px; border-radius: 99px; background: var(--ajf-accent); animation-delay: 1.35s; }
.ajf-b__img { border-radius: 10px; background: linear-gradient(135deg, #30d158, #1e7a35 55%, #0f3d1b); animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; animation-delay: .9s; }
.ajf-b--cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation: none; }
.ajf-b--cards span { height: 46px; border-radius: 8px; background: #f5f5f7; border: 1px solid #e5e5ea; animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; }
.ajf-b--cards span:nth-child(1) { animation-delay: 1.5s; } .ajf-b--cards span:nth-child(2) { animation-delay: 1.62s; } .ajf-b--cards span:nth-child(3) { animation-delay: 1.74s; }

/* Floating chips on the stages */
.ajf-float {
	position: absolute; border-radius: 16px; padding: .7rem .9rem; color: var(--ajf-ink);
	background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .55); animation: ajf-pop var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both;
}
.ajf-float small { display: block; font-size: .72rem; color: var(--ajf-muted); font-weight: 500; }
.ajf-float strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.ajf-float--score { right: 0; bottom: 0; display: flex; align-items: center; gap: .65rem; animation-delay: .9s; }
.ajf-float--code { right: 4%; top: 22%; padding: .55rem .8rem; background: #1d1d1f; border: 1px solid rgba(255, 255, 255, .12); animation-delay: 1.9s; }
.ajf-float--code code { font: 500 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ajf-bright); background: none; padding: 0; white-space: nowrap; }
@media (max-width: 560px) { .ajf-float--code { right: 8px; top: auto; bottom: 22%; } }

/* Search results: "Your website" climbs from #4 to #1 */
.ajf-serp { position: absolute; inset: 0 0 16% 0; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); overflow: hidden; }
.ajf-serp__search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid #e5e5ea; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); color: var(--ajf-muted); }
.ajf-serp__query {
	display: inline-block; overflow: hidden; white-space: nowrap; width: 26ch; max-width: calc(100% - 30px);
	font: 500 .85rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ajf-ink);
	border-right: 2px solid var(--ajf-accent); padding-right: 2px;
	animation: ajf-type var(--loop) steps(26, end) infinite both, ajf-caret .8s step-end infinite;
}
@keyframes ajf-type { 0%, 3% { width: 0; } 20%, 90% { width: 26ch; } 96%, 100% { width: 0; } }
@keyframes ajf-caret { 50% { border-color: transparent; } }
.ajf-serp__list { list-style: none; margin: 14px 0 0; padding: 0; position: relative; height: calc(4 * 58px); }
.ajf-r {
	--slot: 0; position: absolute; left: 0; right: 0; top: 0; height: 50px; padding: 8px 12px; box-sizing: border-box;
	border-radius: 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 5px 10px; align-content: center;
	transform: translateY(calc(var(--slot) * 58px)); background: #fff;
}
.ajf-r b { grid-column: 1 / -1; width: 55%; height: 9px; border-radius: 3px; background: #1a0dab; opacity: .55; }
.ajf-r span { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e5e5ea; }
.ajf-r span + span { width: 70%; }
.ajf-r--1 { --slot: 1; animation: ajf-r1 var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both; }
.ajf-r--2 { --slot: 2; animation: ajf-r2 var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both; }
.ajf-r--3 { --slot: 3; animation: ajf-r3 var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both; }
.ajf-r--you {
	z-index: 1; background: var(--ajf-tint); box-shadow: 0 0 0 2px var(--ajf-accent), 0 14px 30px -12px rgba(30, 122, 53, .55);
	grid-template-rows: auto auto auto; height: 50px; gap: 4px 10px;
	animation: ajf-you var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both;
}
.ajf-r--you strong { font: 700 .82rem/1 var(--ajf-font-body); color: var(--ajf-accent-dark); align-self: center; }
.ajf-r--you span { grid-column: 2; }
.ajf-r__pos { grid-row: 1 / span 3; align-self: center; position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--ajf-accent); color: #fff; font: 700 .85rem/34px var(--ajf-font-body); text-align: center; font-style: normal; }
.ajf-r__pos span { position: absolute; inset: 0; height: auto; background: none; border-radius: 0; }
.ajf-r__pos span:first-child { opacity: 0; animation: ajf-pos-old var(--loop) step-end infinite both; }
.ajf-r__pos span + span { width: auto; animation: ajf-pos-new var(--loop) step-end infinite both; }
@keyframes ajf-you { 0%, 30% { transform: translateY(174px); } 52%, 92% { transform: translateY(0); } 100% { transform: translateY(174px); } }
@keyframes ajf-r1 { 0%, 30% { transform: translateY(0); } 52%, 92% { transform: translateY(58px); } 100% { transform: translateY(0); } }
@keyframes ajf-r2 { 0%, 30% { transform: translateY(58px); } 52%, 92% { transform: translateY(116px); } 100% { transform: translateY(58px); } }
@keyframes ajf-r3 { 0%, 30% { transform: translateY(116px); } 52%, 92% { transform: translateY(174px); } 100% { transform: translateY(116px); } }
@keyframes ajf-pos-old { 0% { opacity: 1; } 44% { opacity: 0; } 96% { opacity: 1; } }
@keyframes ajf-pos-new { 0% { opacity: 0; } 44% { opacity: 1; } 96% { opacity: 0; } }

.ajf-float--traffic { right: 0; bottom: 0; width: min(220px, 60%); animation-delay: 3.6s; }
.ajf-float--traffic small b { color: var(--ajf-accent); font-size: .65rem; }
.ajf-float--traffic svg { display: block; width: 100%; height: 48px; margin-top: 6px; overflow: visible; }
.ajf-chart__area { fill: rgba(48, 209, 88, .18); }
.ajf-chart__line { fill: none; stroke: var(--ajf-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; animation: ajf-draw var(--loop) ease-out infinite both; animation-delay: 3.6s; }
@keyframes ajf-draw { 0%, 22% { stroke-dashoffset: 100; } 45%, 88% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 100; } }
@media (max-width: 560px) { .ajf-serp { inset: 0 0 8% 0; } }
.ajf-panel figcaption { font-style: normal; }
.ajf-glass--rank .ajf-glass__label { padding-right: 1.1rem; }

/* ==========================================================================
   Service-page hero scenes ([ajf_service_scene]). Resting styles are the end
   state (ranked, fixed, published) for reduced motion; one 12s loop each.
   ========================================================================== */
.e-con.ajf-hero:has(.ajf-hero__visual) { --gap: 3rem; --column-gap: 3rem; --row-gap: 2.5rem; }
/* Fixed column widths: the scenes are absolutely positioned, so they have no natural width to flex from. */
@media (min-width: 1025px) {
	.e-con.ajf-hero:has(.ajf-hero__visual) > .e-con-inner > .e-con:not(.ajf-hero__visual),
	.e-con.ajf-hero:has(.ajf-hero__visual) > .e-con:not(.ajf-hero__visual) { --width: 52%; width: 52% !important; flex: 0 0 52% !important; max-width: none; }
	.e-con.ajf-hero .e-con.ajf-hero__visual { --width: 44%; width: 44% !important; flex: 0 0 44% !important; }
}
@media (max-width: 1024px) { .e-con.ajf-hero .e-con.ajf-hero__visual { --width: 100%; width: 100% !important; } }
.e-con.ajf-hero__visual { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; }
.ajf-hero .elementor-widget-shortcode:has(.ajf-svc) { animation-delay: .25s; }

@keyframes ajf-swap-old { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ajf-swap-new { 0%, 30% { opacity: 0; transform: scale(.6); } 36% { opacity: 1; transform: scale(1.12); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.ajf-svc { --loop: 12s; position: relative; width: 100%; max-width: 500px; margin-inline: auto; padding: 1.5rem 1rem 1.5rem 0; box-sizing: border-box; font-family: var(--ajf-font-body); color: var(--ajf-ink); }
.ajf-svc__card { position: relative; overflow: hidden; background: #fff; border-radius: 24px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04); }
.ajf-svc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; font-size: .95rem; }
.ajf-svc__head span { font-size: .8rem; color: var(--ajf-muted); }
.ajf-svc .ajf-float { z-index: 3; }
.ajf-svc svg { display: block; }

/* SEO: rank tracker */
.ajf-rank__row { display: grid; grid-template-columns: minmax(0, 1fr) 46px 48px; align-items: center; gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--ajf-line); font-size: .9rem; }
.ajf-rank__kw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajf-rank__pos { position: relative; height: 28px; }
.ajf-rank__pos span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ajf-rank__pos span:first-child { background: var(--ajf-surface); color: var(--ajf-muted); opacity: 0; animation: ajf-swap-old var(--loop) step-end infinite both; animation-delay: calc(1s + var(--i) * .45s); }
.ajf-rank__pos span + span { background: var(--ajf-accent); color: #fff; animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: calc(1s + var(--i) * .45s); }
.ajf-rank__up { color: var(--ajf-accent); font-weight: 700; font-size: .8rem; text-align: right; animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: calc(1.1s + var(--i) * .45s); }
.ajf-rank__chart { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ajf-line); }
.ajf-rank__chart small { display: block; font-size: .78rem; color: var(--ajf-muted); margin-bottom: .4rem; }
.ajf-rank__chart b { color: var(--ajf-accent); font-size: .65rem; }
.ajf-rank__chart svg { width: 100%; height: 70px; overflow: visible; }
.ajf-rank .ajf-chart__line { animation-delay: 1.6s; }
.ajf-svc__chip--a { top: 0; right: 0; animation-delay: 2.4s; }

/* Local SEO: map pack */
.ajf-map { padding: 0; }
.ajf-map__area {
	position: relative; height: 190px; background-color: #e9f1ea;
	background-image:
		radial-gradient(circle at 82% 18%, #d3ead7 0 16%, transparent 17%),
		linear-gradient(90deg, transparent calc(50% - 5px), #fff calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)),
		linear-gradient(0deg, transparent calc(50% - 4px), #fff calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)),
		linear-gradient(28deg, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px));
	background-size: 100% 100%, 110px 100%, 100% 90px, 100% 100%;
}
.ajf-map__search { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: #fff; border-radius: 99px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); color: var(--ajf-muted); }
.ajf-map__search .ajf-icon { width: 16px; height: 16px; }
.ajf-map__query { display: inline-block; overflow: hidden; white-space: nowrap; width: 15ch; font: 500 .85rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ajf-ink); border-right: 2px solid var(--ajf-accent); animation: ajf-type-15 var(--loop) steps(15, end) infinite both, ajf-caret .8s step-end infinite; }
@keyframes ajf-type-15 { 0%, 3% { width: 0; } 18%, 92% { width: 15ch; } 97%, 100% { width: 0; } }
.ajf-map__pin { position: absolute; width: 16px; height: 16px; margin: -16px 0 0 -8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #aeaeb2; }
.ajf-map__pin--you { width: 26px; height: 26px; margin: -26px 0 0 -13px; background: var(--ajf-accent); box-shadow: 0 6px 14px rgba(30, 122, 53, .45); animation: ajf-pin-drop var(--loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; animation-delay: 1.4s; z-index: 1; }
.ajf-map__pin--you::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.ajf-map__pin--you span { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--ajf-accent); opacity: 0; animation: ajf-pulse 2s ease-out infinite; animation-delay: 2.4s; }
@keyframes ajf-pin-drop { 0%, 12% { opacity: 0; transform: translateY(-70px) rotate(-45deg); } 20%, 92% { opacity: 1; transform: rotate(-45deg); } 98%, 100% { opacity: 0; transform: rotate(-45deg); } }
@keyframes ajf-pulse { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }
.ajf-map__list { list-style: none; margin: 0; padding: 12px; position: relative; height: calc(3 * 56px + 24px); box-sizing: border-box; }
.ajf-map__item { --slot: 0; position: absolute; left: 12px; right: 12px; top: 12px; height: 50px; padding: 8px 14px; box-sizing: border-box; border-radius: 12px; background: #fff; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 10px; transform: translateY(calc(var(--slot) * 56px)); }
.ajf-map__item b { width: 55%; height: 9px; border-radius: 3px; background: #d1d1d6; }
.ajf-map__stars { display: flex; gap: 1px; color: #f4b23e; grid-column: 1; }
.ajf-map__stars svg { width: 12px; height: 12px; }
.ajf-map__item--1 { --slot: 1; animation: ajf-m1 var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both; }
.ajf-map__item--2 { --slot: 2; animation: ajf-m2 var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both; }
.ajf-map__item--you { z-index: 1; background: var(--ajf-tint); box-shadow: 0 0 0 2px var(--ajf-accent), 0 12px 26px -12px rgba(30, 122, 53, .55); animation: ajf-myou var(--loop) cubic-bezier(.5, 0, .2, 1) infinite both; }
.ajf-map__item--you strong { font-size: .88rem; color: var(--ajf-accent-dark); }
.ajf-map__item--you em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--ajf-accent); }
@keyframes ajf-myou { 0%, 34% { transform: translateY(112px); } 52%, 92% { transform: translateY(0); } 100% { transform: translateY(112px); } }
@keyframes ajf-m1 { 0%, 34% { transform: translateY(0); } 52%, 92% { transform: translateY(56px); } 100% { transform: translateY(0); } }
@keyframes ajf-m2 { 0%, 34% { transform: translateY(56px); } 52%, 92% { transform: translateY(112px); } 100% { transform: translateY(56px); } }

/* Technical SEO: audit */
.ajf-audit__score { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.ajf-ring--lg { width: 76px; height: 76px; }
.ajf-ring--lg circle { stroke-width: 3.5; }
.ajf-audit .ajf-ring__fill { animation-delay: .8s; }
.ajf-audit__num { position: absolute; left: 0; top: 0; width: 76px; height: 76px; }
.ajf-audit__num span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ajf-audit__num span:first-child { color: var(--ajf-muted); opacity: 0; animation: ajf-swap-old var(--loop) step-end infinite both; animation-delay: 1.2s; }
.ajf-audit__num span + span { color: var(--ajf-accent); animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: 1.2s; }
.ajf-audit__score p { margin: 0; }
.ajf-audit__score strong { display: block; font-size: 1.05rem; }
.ajf-audit__score small { color: var(--ajf-muted); font-size: .8rem; }
.ajf-audit__list { list-style: none; margin: 0; padding: 0; }
.ajf-audit__list li { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-top: 1px solid var(--ajf-line); font-size: .9rem; }
.ajf-audit__state { position: relative; width: 24px; height: 24px; }
.ajf-audit__state i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.ajf-audit__state svg { width: 14px; height: 14px; }
.ajf-audit__state .is-bad { background: #fde7e9; color: #c41e3a; opacity: 0; animation: ajf-swap-old var(--loop) step-end infinite both; animation-delay: calc(1.4s + var(--i) * .35s); }
.ajf-audit__state .is-good { background: var(--ajf-tint); color: var(--ajf-accent); animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: calc(1.4s + var(--i) * .35s); }
.ajf-audit__scan { position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(48, 209, 88, .16) 70%, rgba(48, 209, 88, .5) 100%); animation: ajf-scan var(--loop) linear infinite both; }
@keyframes ajf-scan { 0%, 6% { opacity: 0; transform: translateY(80px); } 9% { opacity: 1; } 40% { opacity: 1; transform: translateY(300px); } 44%, 100% { opacity: 0; transform: translateY(300px); } }

/* Web design: browser + phone */
.ajf-svc__stage { height: 360px; }
.ajf-svc__stage .ajf-browser { inset: 0 22% 10% 0; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .05); }
.ajf-phone { position: absolute; right: 2%; bottom: 0; width: 30%; aspect-ratio: 9 / 18.5; background: #fff; border: 6px solid #1d1d1f; border-radius: 26px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .45); box-sizing: border-box; overflow: hidden; }
.ajf-phone__screen { display: flex; flex-direction: column; gap: 7px; padding: 14px 9px; height: 100%; box-sizing: border-box; }
.ajf-ph { display: block; animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; animation-delay: var(--d); }
.ajf-phone__screen b.ajf-ph { width: 55%; height: 8px; border-radius: 3px; background: var(--ajf-ink); }
.ajf-ph--img { height: 30%; border-radius: 8px; background: linear-gradient(135deg, #30d158, #1e7a35 60%, #0f3d1b); }
.ajf-phone__screen span.ajf-ph { height: 5px; border-radius: 3px; background: #d1d1d6; }
.ajf-phone__screen em.ajf-ph { width: 60%; height: 14px; border-radius: 99px; background: var(--ajf-accent); }
.ajf-svc__chip--web { left: 4%; bottom: 0; animation-delay: 2.8s; }

/* Hosting */
.ajf-host__domain { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .45rem .45rem 1rem; border: 1px solid var(--ajf-line); border-radius: 99px; }
.ajf-host__name { display: inline-block; overflow: hidden; white-space: nowrap; width: 16ch; font: 600 .92rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; animation: ajf-type-16 var(--loop) steps(16, end) infinite both; }
.ajf-host__name span { color: var(--ajf-accent); }
@keyframes ajf-type-16 { 0%, 3% { width: 0; } 18%, 92% { width: 16ch; } 97%, 100% { width: 0; } }
.ajf-host__ok { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: 99px; background: var(--ajf-tint); color: var(--ajf-accent-dark); font-size: .8rem; font-weight: 700; animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: -1.5s; }
.ajf-host__ok svg { width: 14px; height: 14px; }
.ajf-host__rack { display: grid; gap: 8px; margin: 1.25rem 0 1rem; }
.ajf-host__unit { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; border-radius: 12px; background: #1d1d1f; animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; animation-delay: calc(.4s + var(--i) * .15s); }
.ajf-host__unit i { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; animation: ajf-led 1.6s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * .3s); }
.ajf-host__unit i + i { background: #febc2e; box-shadow: 0 0 8px #febc2e; animation-duration: 2.2s; }
.ajf-host__unit b { height: 4px; border-radius: 2px; background: #3a3a3c; width: 16%; }
.ajf-host__unit i + i + b { margin-left: auto; }
@keyframes ajf-led { 0% { opacity: 1; } 100% { opacity: .35; } }
.ajf-host__status { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; }
.ajf-host__status i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--ajf-bright); }
.ajf-host__status i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ajf-bright); animation: ajf-pulse 2s ease-out infinite; }
.ajf-svc__chip--mail { right: 0; bottom: 6%; animation-delay: 2.6s; }
.ajf-svc__chip--cpanel { right: 0; top: 34%; animation-delay: 3.2s; }

/* Social media */
.ajf-social-ph { position: relative; height: 400px; }
.ajf-phone--social { left: 6%; right: auto; bottom: auto; top: 0; width: 52%; max-width: 230px; }
.ajf-phone--social .ajf-phone__screen { padding: 12px 10px; gap: 9px; }
.ajf-post__head { display: flex; align-items: center; gap: 7px; }
.ajf-post__head i { width: 22px; height: 22px; border-radius: 50%; background: var(--ajf-accent); }
.ajf-post__head b { width: 50%; height: 7px; border-radius: 3px; background: var(--ajf-ink); }
.ajf-post__img { height: 46%; border-radius: 10px; background: radial-gradient(circle at 70% 30%, #30d158, transparent 45%), linear-gradient(135deg, #1e7a35, #0f3d1b); }
.ajf-post__actions { display: flex; align-items: center; gap: 8px; }
.ajf-post__heart { width: 22px; height: 22px; color: #ff2d55; animation: ajf-heart var(--loop) ease-out infinite both; animation-delay: 1.2s; }
.ajf-post__heart svg { width: 100%; height: 100%; }
@keyframes ajf-heart { 0%, 10% { color: #c7c7cc; transform: scale(1); } 14% { color: #ff2d55; transform: scale(1.45); } 18%, 94% { color: #ff2d55; transform: scale(1); } 100% { color: #c7c7cc; } }
.ajf-post__likes { position: relative; flex: 1; height: 16px; font-size: .72rem; font-weight: 700; }
.ajf-post__likes span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ajf-post__likes span:first-child { color: var(--ajf-muted); opacity: 0; animation: ajf-swap-old var(--loop) step-end infinite both; animation-delay: -2s; }
.ajf-post__likes span + span { animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: -2s; transform-origin: left center; }
.ajf-post__line { display: block; height: 5px; border-radius: 3px; background: #e5e5ea; }
.ajf-post__line + .ajf-post__line { width: 70%; }
.ajf-bubbles span { position: absolute; right: 0; top: calc(14% + var(--i) * 62px); padding: .55rem .9rem; border-radius: 18px 18px 4px 18px; background: #fff; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .35); font-size: .85rem; font-weight: 500; white-space: nowrap; animation: ajf-bubble var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both; animation-delay: calc(2s + var(--i) * 1s); }
.ajf-bubbles span:nth-child(2) { right: 12%; }
@keyframes ajf-bubble { 0% { opacity: 0; transform: translateY(18px) scale(.9); } 6%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-10px); } }
.ajf-reach { right: 2%; bottom: 0; animation-delay: 3.6s; }
.ajf-reach small b { color: var(--ajf-accent); font-size: .65rem; }
.ajf-reach__bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: 6px; }
.ajf-reach__bars i { width: 10px; border-radius: 3px; background: var(--ajf-accent); transform-origin: bottom; animation: ajf-bar var(--loop) cubic-bezier(.3, .7, .2, 1) infinite both; animation-delay: 3.8s; }
.ajf-reach__bars i:nth-child(1) { height: 20%; opacity: .4; } .ajf-reach__bars i:nth-child(2) { height: 34%; opacity: .5; } .ajf-reach__bars i:nth-child(3) { height: 45%; opacity: .6; }
.ajf-reach__bars i:nth-child(4) { height: 62%; opacity: .75; } .ajf-reach__bars i:nth-child(5) { height: 80%; opacity: .9; } .ajf-reach__bars i:nth-child(6) { height: 100%; background: var(--ajf-bright); }

@media (max-width: 560px) {
	.ajf-svc { padding: 1rem 0; }
	.ajf-svc__stage { height: 300px; }
	.ajf-social-ph { height: 360px; }
	.ajf-bubbles span { font-size: .78rem; }
}

/* --------------------------------------------------------------------------
   Services page: [ajf_service_scene type="hub"], card icons, [ajf_lead_journey]
   -------------------------------------------------------------------------- */

/* Hub: seven services connect to your website while inquiries rise */
.ajf-svc--hub { max-width: 520px; padding: 0; }
.ajf-hub { position: relative; aspect-ratio: 50 / 44; container-type: inline-size; }
.ajf-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ajf-hub__lines line {
	stroke: var(--ajf-accent); stroke-opacity: .4; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke;
	animation: ajf-hub-line var(--loop) ease-out infinite both, ajf-hub-flow 1s linear infinite;
	animation-delay: calc(.5s + var(--i) * .3s), 0s;
}
@keyframes ajf-hub-line { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ajf-hub-flow { to { stroke-dashoffset: 8; } } /* dashes travel toward the centre */
.ajf-hub__pulse {
	position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(48, 209, 88, .35), rgba(48, 209, 88, 0));
	animation: ajf-hub-pulse 3s ease-out infinite;
}
@keyframes ajf-hub-pulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.ajf-hub__core {
	position: absolute; left: 50%; top: 50%; width: 40%; translate: -50% -50%; z-index: 2; overflow: hidden;
	background: #fff; border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .04);
	animation: ajf-build var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both;
}
.ajf-hub__core .ajf-browser__bar { padding: 6px 8px; gap: 4px; }
.ajf-hub__core .ajf-browser__bar i { width: 6px; height: 6px; }
.ajf-hub__core .ajf-browser__bar span { margin-left: 4px; padding: 2px 6px; font-size: clamp(.5rem, 2cqi, .65rem); }
.ajf-hub__body { padding: 3.2cqi 3.6cqi 2.4cqi; }
.ajf-hub__body small { display: block; font-size: clamp(.55rem, 2.3cqi, .72rem); color: var(--ajf-muted); }
.ajf-hub__num { position: relative; display: block; height: 1.15em; font: 700 clamp(1.1rem, 6.4cqi, 2rem)/1.1 var(--ajf-font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ajf-hub__num span { position: absolute; left: 0; top: 0; }
.ajf-hub__num span:first-child { color: var(--ajf-muted); opacity: 0; animation: ajf-swap-old var(--loop) step-end infinite both; animation-delay: .6s; }
.ajf-hub__num span + span { color: var(--ajf-accent); transform-origin: left center; animation: ajf-swap-new var(--loop) ease-out infinite both; animation-delay: .6s; }
.ajf-hub__body svg { width: 100%; height: 8cqi; margin-top: 1.4cqi; overflow: visible; }
.ajf-hub .ajf-chart__line { animation-delay: .2s; }
.ajf-hub__node {
	position: absolute; z-index: 3; translate: -50% -50%; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
	padding: .55em .9em .55em .7em; border-radius: 99px; background: #fff; color: var(--ajf-ink);
	font: 600 clamp(.6rem, 2.9cqi, .85rem)/1 var(--ajf-font-body); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .04);
	animation: ajf-hub-node var(--loop) cubic-bezier(.2, .7, .2, 1) infinite both, ajf-bob 5s ease-in-out infinite;
	animation-delay: calc(.5s + var(--i) * .3s), calc(var(--i) * -.7s);
}
.ajf-hub__node svg { width: 1.3em; height: 1.3em; color: var(--ajf-accent); flex-shrink: 0; }
@keyframes ajf-hub-node { 0% { opacity: 0; scale: .6; } 5%, 90% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; scale: .9; } }

/* Service card icons: one small motion per service */
.ajf-svc-card { --loop: 4s; }
.ajf-svc-card .elementor-icon { position: relative; }
.ajf-svc-card .elementor-icon svg { transform-box: fill-box; transform-origin: center; animation: var(--loop) ease-in-out infinite both; }
.ajf-svc-card .elementor-icon::after { content: none; position: absolute; pointer-events: none; }
.ajf-svc-card .e-fas-search { animation-name: ajf-ico-scan; }
.ajf-svc-card .e-fas-map-marker-alt { animation-name: ajf-ico-drop; animation-delay: .4s; transform-origin: bottom center; }
.ajf-svc-card .e-fas-tools { animation-name: ajf-ico-twist; animation-delay: .8s; }
.ajf-svc-card .e-fas-robot { animation-name: ajf-ico-think; animation-delay: 1.2s; }
.ajf-svc-card .e-fas-laptop-code { animation-name: ajf-ico-glow; }
.ajf-svc-card .e-fas-server { animation-name: none; }
.ajf-svc-card .e-fas-hashtag { animation-name: ajf-ico-pop; animation-delay: .8s; }
/* map pin ripple, AI sparkle, server status light */
.ajf-svc-card .elementor-icon:has(.e-fas-map-marker-alt)::after { content: ""; left: 50%; bottom: 9px; width: 18px; height: 6px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--ajf-accent); animation: ajf-ico-ripple var(--loop) ease-out infinite both; animation-delay: .4s; }
.ajf-svc-card .elementor-icon:has(.e-fas-robot)::after { content: "✦"; top: 3px; right: 4px; font-size: 12px; line-height: 1; color: var(--ajf-accent); animation: ajf-ico-spark var(--loop) ease-in-out infinite both; animation-delay: 1.2s; }
.ajf-svc-card .elementor-icon:has(.e-fas-server)::after { content: ""; top: 15px; right: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--ajf-bright); box-shadow: 0 0 6px var(--ajf-bright); animation: ajf-ico-led 1.4s steps(2, jump-none) infinite; }
@keyframes ajf-ico-scan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(0, 3px); } 75% { transform: translate(-3px, -1px); } }
@keyframes ajf-ico-drop { 0%, 40%, 100% { transform: none; } 8% { transform: translateY(-9px); } 16% { transform: none; } 22% { transform: translateY(-3px) scaleY(1.04); } 28% { transform: scaleY(.94); } 34% { transform: none; } }
@keyframes ajf-ico-ripple { 0%, 14% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; } 45%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes ajf-ico-twist { 0%, 45%, 100% { transform: none; } 55% { transform: rotate(-16deg); } 65% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } 85% { transform: none; } }
@keyframes ajf-ico-think { 0%, 100% { transform: none; } 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(-3px) rotate(6deg); } }
@keyframes ajf-ico-spark { 0%, 20%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 35%, 65% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes ajf-ico-glow { 0%, 100% { filter: none; transform: none; } 50% { filter: drop-shadow(0 0 5px rgba(48, 209, 88, .8)); transform: translateY(-2px); } }
@keyframes ajf-ico-led { from { opacity: 1; } to { opacity: .15; } }
@keyframes ajf-ico-pop { 0%, 60%, 100% { transform: none; } 70% { transform: scale(1.25) rotate(-12deg); } 80% { transform: scale(.94) rotate(5deg); } 88% { transform: none; } }

/* Lead journey: search → visit → inquiry → customer */
.ajf-journey {
	--loop: 8s; --pad: clamp(1rem, 3vw, 1.75rem); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
	padding: var(--pad); border-radius: var(--ajf-radius); background: var(--ajf-white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); width: 100%; box-sizing: border-box;
}
.ajf-journey__track { position: absolute; top: calc(var(--pad) + 26px); left: calc(var(--pad) + (100% - 2 * var(--pad)) / 8); right: calc(var(--pad) + (100% - 2 * var(--pad)) / 8); height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--ajf-line); }
.ajf-journey__track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ajf-accent); transform-origin: left; animation: ajf-j-fill var(--loop) linear infinite both; }
.ajf-journey__dot { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--ajf-bright); box-shadow: 0 0 0 4px rgba(48, 209, 88, .25); animation: ajf-j-dot var(--loop) linear infinite both; }
.ajf-journey__step { position: relative; z-index: 1; text-align: center; }
.ajf-journey__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ajf-surface); color: var(--ajf-muted); box-shadow: 0 0 0 1px var(--ajf-line); animation: ajf-j0 var(--loop) ease-out infinite both; }
.ajf-journey__step:nth-of-type(2) .ajf-journey__icon { animation-name: ajf-j1; }
.ajf-journey__step:nth-of-type(3) .ajf-journey__icon { animation-name: ajf-j2; }
.ajf-journey__step:nth-of-type(4) .ajf-journey__icon { animation-name: ajf-j3; }
.ajf-journey__icon svg { width: 24px; height: 24px; }
.ajf-journey__step strong { display: block; margin: .75rem 0 .2rem; font-size: 1rem; color: var(--ajf-ink); }
.ajf-journey__step small { display: block; font-size: .85rem; line-height: 1.4; color: var(--ajf-muted); }
@keyframes ajf-j-fill { 0% { transform: scaleX(0); } 70%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ajf-j-dot { 0% { left: 0; opacity: 1; } 70%, 90% { left: 100%; opacity: 1; } 96%, 100% { left: 100%; opacity: 0; } }
@keyframes ajf-j0 { 0% { background: var(--ajf-surface); color: var(--ajf-muted); } 3%, 90% { background: var(--ajf-accent); color: #fff; box-shadow: 0 0 0 5px var(--ajf-tint); } 96%, 100% { background: var(--ajf-surface); color: var(--ajf-muted); } }
@keyframes ajf-j1 { 0%, 23% { background: var(--ajf-surface); color: var(--ajf-muted); } 26%, 90% { background: var(--ajf-accent); color: #fff; box-shadow: 0 0 0 5px var(--ajf-tint); } 96%, 100% { background: var(--ajf-surface); color: var(--ajf-muted); } }
@keyframes ajf-j2 { 0%, 46% { background: var(--ajf-surface); color: var(--ajf-muted); } 49%, 90% { background: var(--ajf-accent); color: #fff; box-shadow: 0 0 0 5px var(--ajf-tint); } 96%, 100% { background: var(--ajf-surface); color: var(--ajf-muted); } }
@keyframes ajf-j3 { 0%, 70% { background: var(--ajf-surface); color: var(--ajf-muted); } 73%, 90% { background: var(--ajf-accent); color: #fff; box-shadow: 0 0 0 5px var(--ajf-tint); } 96%, 100% { background: var(--ajf-surface); color: var(--ajf-muted); } }
@media (max-width: 700px) {
	.ajf-journey { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
	.ajf-journey__step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: .9rem; align-items: center; text-align: left; }
	.ajf-journey__icon { grid-row: span 2; }
	.ajf-journey__step strong { margin: 0; align-self: end; }
	.ajf-journey__step small { align-self: start; }
	.ajf-journey__track { top: calc(var(--pad) + 26px); bottom: calc(var(--pad) + 26px); left: calc(var(--pad) + 26px); right: auto; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
	.ajf-journey__track::before { transform-origin: top; animation-name: ajf-j-fill-v; }
	.ajf-journey__dot { left: 50%; top: 0; animation-name: ajf-j-dot-v; }
	@keyframes ajf-j-fill-v { 0% { transform: scaleY(0); } 70%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(1); opacity: 0; } }
	@keyframes ajf-j-dot-v { 0% { top: 0; opacity: 1; } 70%, 90% { top: 100%; opacity: 1; } 96%, 100% { top: 100%; opacity: 0; } }
}
/* The hub sizes from its width (container query), so its column must not shrink to fit. */
.e-con.ajf-hero__visual:has(.ajf-hub), .ajf-hero__visual .elementor-widget-shortcode:has(.ajf-hub) { align-self: stretch; width: 100%; }