/*
 * Shared pieces for every AH widget: kicker, buttons, hand-drawn marks, word reveal.
 * Selectors carry two classes so Elementor kit styles (".elementor-kit-N h2", "a") and the
 * Hello theme reset ("[type=button]:hover") do not override them.
 * Content is visible without JS: hidden states exist only under html.ah-motion, which ah-motion.js adds.
 */
:root { --ah-dir: 1; }
[dir="rtl"] { --ah-dir: -1; }

.ah-in {
	max-width: var(--ah-container);
	margin-inline: auto;
	padding-inline: var(--ah-gutter);
}

/* kicker: number, label, latin translation */
.ah-kicker.ah-kicker {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--ah-f-body);
	font-size: .86rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ah-ink-gold);
}
.ah-kicker .ah-kicker__no { font-family: var(--ah-f-mono); font-weight: 500; font-size: .78rem; letter-spacing: .06em; }
.ah-kicker .ah-kicker__tr { font-family: var(--ah-f-mono); font-weight: 500; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ah-soft); }
.ah-on-dark .ah-kicker { color: var(--ah-gold-hi); }
.ah-on-dark .ah-kicker .ah-kicker__tr { color: var(--ah-on-navy-muted); }

/* hand-drawn notes and marks */
.ah-hand { font-family: var(--ah-f-hand); font-weight: 700; color: var(--ah-ink-gold); font-size: 1.3rem; line-height: 1.4; }
.ah-on-dark .ah-hand { color: var(--ah-gold-hi); }
.ah-scrib { fill: none; stroke: var(--ah-ink-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ah-on-dark .ah-scrib { stroke: var(--ah-gold-hi); }

/* buttons (variants below share the same weight, so they win by order; themes lose to two classes) */
.ah-btn.ah-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--ah-f-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	padding: 13px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	transition: transform .35s var(--ah-ease), background-color .3s, color .3s, border-color .3s;
}
.ah-btn.ah-btn--gold { position: relative; overflow: hidden; isolation: isolate; background: var(--ah-gold); color: var(--ah-deep); }
.ah-btn.ah-btn--gold:hover,
.ah-btn.ah-btn--gold:focus-visible { background: var(--ah-gold-hi); color: var(--ah-deep); }
.ah-btn.ah-btn--gold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
	transform: translateX(-130%);
	transition: transform .9s var(--ah-ease);
}
.ah-btn.ah-btn--gold:hover::after { transform: translateX(130%); }
.ah-btn.ah-btn--line { border-color: rgba(232, 201, 136, .5); color: var(--ah-on-navy); }
.ah-btn.ah-btn--line:hover,
.ah-btn.ah-btn--line:focus-visible { border-color: var(--ah-gold-hi); color: var(--ah-gold-hi); background: none; }
.ah-btn.ah-btn--dark { background: var(--ah-navy); color: var(--ah-on-navy); }
.ah-btn.ah-btn--dark:hover { background: var(--ah-navy-2); color: var(--ah-on-navy); }
.ah-btn .ah-btn__arr { flex: none; width: 1em; height: 1em; transition: translate .35s var(--ah-ease); }
[dir="rtl"] .ah-btn .ah-btn__arr,
[dir="rtl"] .ah-more .ah-btn__arr { scale: -1 1; }
.ah-more .ah-btn__arr { flex: none; width: 1em; height: 1em; }
.ah-btn:hover .ah-btn__arr { translate: calc(var(--ah-dir) * 5px) 0; }
.ah-btn[hidden] { display: none; }

/* keyboard focus inside any AH widget */
:where([class^="ah-"], [class*=" ah-"]) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.ah-btn:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-btn.ah-btn--dark:focus-visible { background: var(--ah-navy-2); color: var(--ah-on-navy); }

/* word reveal: words, never letters (Arabic stays joined) */
.ah-w { display: inline-block; }
.ah-motion .ah-rv .ah-w {
	opacity: 0;
	transform: translateY(42%) rotateX(-50deg);
	transform-origin: 50% 100%;
	transition: opacity .7s var(--ah-ease), transform .9s var(--ah-spring);
	transition-delay: calc(var(--i, 0) * 55ms);
}
.ah-motion .ah-rv.seen .ah-w { opacity: 1; transform: none; }
.ah-motion .ah-rv .ah-fade {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .8s var(--ah-ease) .25s, transform .8s var(--ah-ease) .25s;
}
.ah-motion .ah-rv.seen .ah-fade { opacity: 1; transform: none; }

@keyframes ah-spin { to { transform: rotate(1turn); } }
@keyframes ah-word-in { from { opacity: 0; transform: translateY(55%); } }
/* Page titles (the largest text on first paint): words rise from almost transparent, never from 0,
   so the browser paints the title at once and counts it as the page's largest paint. */
@keyframes ah-word-up { from { opacity: .01; transform: translateY(45%); } }
@keyframes ah-fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes ah-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ah-float { 50% { transform: translateY(-10px); } }

/* ---------- small shared pieces ---------- */
.ah-fn { font-size: .8rem; line-height: 1.6; color: var(--ah-soft); }
.ah-on-dark .ah-fn { color: var(--ah-on-navy-muted); }
.ah-tagline { font-size: .8rem; font-weight: 700; color: var(--ah-ink-gold); }
.ah-on-dark .ah-tagline { color: var(--ah-gold-hi); }
.ah-proto { display: inline-flex; gap: 8px; align-items: center; width: max-content; padding: 3px 12px; border: 1px dashed var(--ah-ink-gold); border-radius: 999px; font-size: .8rem; color: var(--ah-ink-gold); }
a.ah-more.ah-more,
span.ah-more.ah-more {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	width: max-content;
	padding-bottom: 1px;
	border-bottom: 1px solid currentColor;
	font-weight: 700;
	font-size: .9rem;
	color: var(--ah-ink-gold);
	text-decoration: none;
}
a.ah-more.ah-more:hover { color: var(--ah-ink); }
.ah-on-dark a.ah-more.ah-more { color: var(--ah-gold-hi); }
.ah-on-dark a.ah-more.ah-more:hover { color: var(--ah-on-navy); }
.ah-more.ah-more.ah-more--soon { color: var(--ah-soft); border-bottom-style: dashed; font-weight: 500; }
.ah-live { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #58C79D; }
/* the pulse is a ring that grows and fades (transform + opacity: drawn by the compositor, no repaint) */
.ah-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(88, 199, 157, .6); opacity: 0; pointer-events: none; }
.ah-ltr { direction: ltr; unicode-bidi: isolate; }
/* themes italicise captions and quotes; Arabic is never italic */
:where([class^="ah-"], [class*=" ah-"]) :is(figcaption, cite, blockquote, em, i, address),
:is(figcaption, blockquote)[class*="ah-"] { font-style: normal; }
/* visible to screen readers only */
.ah-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
sup.ah-ref { font-family: var(--ah-f-mono); font-size: .62em; color: var(--ah-ink-gold); margin-inline-start: 2px; }

/* sign-up form (Leads::form) */
.ah-lf.ah-lf { display: flex; gap: 8px; margin: 0; }
.ah-lf .ah-lf__email.ah-lf__email {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--ah-line);
	border-radius: 999px;
	background: var(--ah-paper);
	color: var(--ah-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: none;
}
.ah-lf .ah-lf__email:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 2px; }
.ah-on-dark .ah-lf .ah-lf__email.ah-lf__email { border-color: var(--ah-line-navy); background: rgba(255, 255, 255, .06); color: var(--ah-on-navy); }
.ah-lf .ah-lf__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.ah-lf .ah-btn:disabled { opacity: .6; cursor: wait; }
.ah-lf__msg { min-height: 1.4em; margin: 6px 0 0; font-size: .85rem; line-height: 1.5; color: var(--ah-ink-gold); }
.ah-on-dark .ah-lf__msg { color: var(--ah-gold-hi); }
.ah-lf__msg[data-state="bad"], .ah-lf__msg[data-state="error"] { color: var(--ah-red); }
.ah-on-dark .ah-lf__msg[data-state="bad"], .ah-on-dark .ah-lf__msg[data-state="error"] { color: #FF8D73; }
@media (max-width: 420px) { .ah-lf.ah-lf { flex-wrap: wrap; } .ah-lf .ah-btn { width: 100%; justify-content: center; } }

/* hand-drawn strokes that draw themselves when their block is seen */
.ah-motion .ah-rv .ah-draw,
.ah-motion .ah-draw.ah-rv { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ah-ease); }
.ah-motion .ah-rv.seen .ah-draw,
.ah-motion .ah-draw.ah-rv.seen { stroke-dashoffset: 0; }
/* a block that rises in as a whole */
.ah-motion .ah-rv.ah-rv--up { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ah-ease), transform .9s var(--ah-ease); }
.ah-motion .ah-rv.ah-rv--up.seen { opacity: 1; transform: none; }

/* odometer digits (AH.odometer, or any .ah-odo inside a revealed .ah-rv) */
.ah-oc { display: inline-block; height: 1.05em; overflow: hidden; vertical-align: top; font-variant-numeric: tabular-nums; }
.ah-os { display: flex; flex-direction: column; transition: transform 2s cubic-bezier(.2, .8, .2, 1); }
.ah-os span { display: block; height: 1.05em; line-height: 1.05em; }

/* 3D tilt and glare (AH.tilt on .ah-tilt) */
.ah-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s var(--ah-ease); }
.ah-tilt.is-tilting { transition: transform .08s linear; }
.ah-glare { position: relative; overflow: hidden; }
.ah-glare::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 55%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s;
}
.ah-glare:hover::after { opacity: 1; }

/* tabs (AH.tabs): <div class="ah-tabs" role="tablist"><span class="ah-tabs__ind"></span><button class="ah-tab" role="tab">… */
.ah-tabs.ah-tabs {
	position: relative;
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 16px;
	border: 1px solid var(--ah-line);
	background: var(--ah-paper);
	overflow-x: auto;
	scrollbar-width: none;
}
.ah-tabs::-webkit-scrollbar { display: none; }
.ah-tabs .ah-tab.ah-tab {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 12px;
	background: none;
	box-shadow: none;
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--ah-muted);
	cursor: pointer;
	transition: color .3s;
}
.ah-tabs .ah-tab.ah-tab:hover { background: none; color: var(--ah-ink); }
.ah-tabs .ah-tab.ah-tab[aria-selected="true"] { color: var(--ah-on-navy); }
.ah-tabs .ah-tab .ah-tab__cnt { padding: 0 7px; border: 1px solid var(--ah-line); border-radius: 999px; font-family: var(--ah-f-mono); font-weight: 500; font-size: .72rem; color: var(--ah-soft); }
.ah-tabs .ah-tab[aria-selected="true"] .ah-tab__cnt { color: var(--ah-gold-hi); border-color: rgba(232, 201, 136, .4); }
.ah-tabs .ah-tab .ah-itile { width: 36px; height: 36px; border-radius: 11px; }
.ah-tabs .ah-tab .ah-itile .ah-ic { width: 20px; height: 20px; }
.ah-tabs .ah-tabs__ind {
	position: absolute;
	z-index: 0;
	top: 6px;
	bottom: 6px;
	left: 0;
	width: 0;
	border-radius: 12px;
	background: var(--ah-navy);
	box-shadow: 0 12px 24px -16px rgba(9, 18, 42, .9);
	transition: left .5s var(--ah-spring), width .5s var(--ah-spring);
}
/* without JS the indicator is not placed: the selected tab carries the navy itself */
html:not(.ah-motion) .ah-tabs .ah-tab.ah-tab[aria-selected="true"] { background: var(--ah-navy); }
.ah-panel[hidden] { display: none; }
.ah-panel.is-entering { animation: ah-panel-in .6s var(--ah-ease); }
@keyframes ah-panel-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 1024px) { .ah-tabs .ah-tab .ah-tab__long { display: none; } }
@media (max-width: 767px) {
	.ah-tabs .ah-tab.ah-tab { padding: 8px 12px; font-size: .88rem; }
	.ah-tabs .ah-tab .ah-itile { display: none; }
}

/* lightbox (AH.lightbox) */
.ah-lbx { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 56px) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); background: rgba(9, 18, 42, .9); }
.ah-lbx[hidden] { display: none; }
.ah-lbx figure { display: grid; gap: 12px; justify-items: center; max-width: min(1100px, 100%); margin: 0; }
.ah-lbx img { width: auto; max-width: 100%; max-height: 76vh; padding: 8px; border-radius: 8px; background: #fff; }
.ah-lbx figcaption { max-width: 70ch; text-align: center; font-size: .92rem; color: var(--ah-on-navy); }
.ah-lbx .ah-lbx__x.ah-lbx__x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); inset-inline-start: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--ah-line-navy); background: none; color: var(--ah-on-navy); font-size: 1.4rem; line-height: 1; cursor: pointer; }

/* scroll progress, cursor ring, spotlight, chapter rail (all added by ah-motion.js) */
.ah-prog { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 96; height: 2px; pointer-events: none; }
.ah-prog i { display: block; height: 100%; background: var(--ah-gold-hi); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .ah-prog i { transform-origin: right; }
.admin-bar .ah-prog { top: 32px; }
.ah-cring { position: fixed; left: 0; top: 0; z-index: 110; width: 0; height: 0; pointer-events: none; }
.ah-cring i { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid var(--ah-gold); border-radius: 50%; transition: transform .35s var(--ah-ease), background-color .35s, opacity .2s; }
.ah-cring.is-big i { transform: scale(1.9); background: rgba(197, 165, 114, .12); }
.ah-cring em { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--ah-gold-hi); color: var(--ah-deep); font-style: normal; font-family: var(--ah-f-body); font-weight: 700; font-size: .82rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); transform: scale(0); transition: transform .4s var(--ah-spring); }
.ah-cring.is-label em { transform: scale(1); }
.ah-cring.is-label i { opacity: 0; }
.ah-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 50%), rgba(232, 201, 136, .1), transparent 62%); opacity: 0; transition: opacity .6s; }
.is-lit > .ah-spot { opacity: 1; }
.ah-rail { position: fixed; top: 50%; inset-inline-end: max(14px, env(safe-area-inset-left, 0px)); z-index: 80; display: grid; gap: 2px; padding: 8px 6px; border-radius: 16px; border: 1px solid rgba(232, 201, 136, .22); background: rgba(9, 18, 42, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .4s; }
.ah-rail.is-shown { opacity: 1; pointer-events: auto; }
.ah-rail a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; font-family: var(--ah-f-body); font-size: .8rem; line-height: 1.4; color: var(--ah-on-navy-muted); text-decoration: none; transition: color .3s, background-color .3s; }
.ah-rail a:hover, .ah-rail a.is-on { color: var(--ah-on-navy); }
.ah-rail a:hover { background: rgba(255, 255, 255, .06); }
.ah-rail span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ah-ease), opacity .3s; }
.ah-rail:hover span, .ah-rail.is-flash a.is-on span { max-width: 150px; opacity: 1; }
.ah-rail b { font-family: var(--ah-f-mono); font-weight: 500; font-size: .66rem; color: var(--ah-on-navy-muted); }
.ah-rail a.is-on b { color: var(--ah-gold-hi); }
.ah-rail i { position: relative; flex: none; width: 3px; height: 26px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.ah-rail i::after { content: ""; position: absolute; inset: 0; background: var(--ah-gold-hi); transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform .2s linear; }
@media (max-width: 1359px) { .ah-rail { display: none; } }

@media (prefers-reduced-motion: no-preference) {
	.ah-live::after { animation: ah-live 2s infinite; }
}
@keyframes ah-live { 0% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.ah-motion .ah-rv .ah-w,
	.ah-motion .ah-rv .ah-fade,
	.ah-motion .ah-rv.ah-rv--up { opacity: 1; transform: none; transition: none; }
	.ah-motion .ah-rv .ah-draw { stroke-dashoffset: 0; transition: none; }
	.ah-btn.ah-btn, .ah-btn.ah-btn::after, .ah-btn .ah-btn__arr { transition: none; }
	.ah-tilt { transform: none; transition: none; }
	.ah-panel.is-entering { animation: none; }
}