/*! All-Ok Digital Core: styles for the All-Ok Elementor widgets (Flip Heading, Services Marquee).
   Loaded only on pages that use one of these widgets. Every visual value is a CSS variable the widget panel sets. */

/* Flip Heading ------------------------------------------------------------ */
.aok-fh { margin: 0; text-wrap: balance; }
.aok-fh__w {
  display: inline-block;
  background-image: linear-gradient(100deg,
    var(--aok-fh-c1, var(--e-global-color-heroword1, #6D3A78)) 0%,
    var(--aok-fh-c2, var(--e-global-color-heroword2, #8B5CF6)) 35%,
    var(--aok-fh-c3, var(--e-global-color-heroword3, #C084FC)) 65%,
    var(--aok-fh-c1, var(--e-global-color-heroword1, #6D3A78)) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transform-origin: 50% 55%;
  backface-visibility: visible;
}
.aok-fh--plain .aok-fh__w { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.aok-fh--tone .aok-fh__w { animation: aokFhTone var(--aok-fh-tone, 4s) linear infinite; }
.aok-fh--flip .aok-fh__w { animation: aokFhFlip var(--aok-fh-speed, 2s) cubic-bezier(.65, 0, .35, 1) infinite, aokFhTone var(--aok-fh-tone, 4s) linear infinite; }
.aok-fh--flip .aok-fh__w:nth-of-type(even) { animation-delay: var(--aok-fh-stagger, .25s), 0s; }
@keyframes aokFhFlip { 0%, 60% { transform: perspective(700px) rotateX(0deg); } 100% { transform: perspective(700px) rotateX(360deg); } }
@keyframes aokFhTone { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
/* Site-wide "3D flip" switch (All-Ok Design) also applies to this widget */
body.aok-no-flip .aok-fh--flip .aok-fh__w { animation: aokFhTone var(--aok-fh-tone, 4s) linear infinite; }
@media (prefers-reduced-motion: reduce) { .aok-fh__w { animation: none !important; } }

/* Services Marquee -------------------------------------------------------- */
.aok-mqx {
  --aok-mqx-speed: 42s; --aok-mqx-text: var(--e-global-color-primary, #31043B); --aok-mqx-lit: var(--e-global-color-accent, #8B5CF6);
  --aok-mqx-sep: var(--e-global-color-accent, #8B5CF6); --aok-mqx-glow: rgba(139, 92, 246, .18);
  --aok-mqx-gap: clamp(22px, 3vw, 48px); --aok-mqx-pad: 34px;
  position: relative; width: 100%; overflow: hidden; padding: var(--aok-mqx-pad) 0;
}
@media (max-width: 1024px) { .aok-mqx { --aok-mqx-speed: 34s; } }
@media (max-width: 767px) { .aok-mqx { --aok-mqx-speed: 26s; --aok-mqx-pad: 22px; } }
.aok-mqx--fade { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
@media (max-width: 767px) { .aok-mqx--fade { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } }
.aok-mqx--glow { background: radial-gradient(ellipse 34% 50% at 50% 50%, var(--aok-mqx-glow), transparent 100%); }
.aok-mqx__row { display: flex; width: max-content; animation: aokMqxRoll var(--aok-mqx-speed) linear infinite; will-change: transform; }
.aok-mqx--right .aok-mqx__row { animation-direction: reverse; }
.aok-mqx__clone { display: flex; flex-shrink: 0; }
.aok-mqx__row--lit {
  position: absolute; left: 0; top: var(--aok-mqx-pad); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 46%, #000 54%, transparent 64%); mask-image: linear-gradient(90deg, transparent 36%, #000 46%, #000 54%, transparent 64%);
}
.aok-mqx__list { display: flex; align-items: center; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.aok-mqx__list li { display: flex; align-items: center; white-space: nowrap; margin: 0; }
.aok-mqx__t {
  font-family: var(--e-global-typography-primary-font-family), Poppins, sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.1; font-size: clamp(28px, 4.4vw, 64px); color: var(--aok-mqx-text); text-decoration: none;
}
a.aok-mqx__t:hover { color: var(--aok-mqx-lit); }
a.aok-mqx__t:focus-visible { outline: 2px solid var(--aok-mqx-lit); outline-offset: 4px; border-radius: 6px; }
.aok-mqx__sep { margin: 0 var(--aok-mqx-gap); font-size: clamp(14px, 1.5vw, 20px); line-height: 1; color: var(--aok-mqx-sep); }
.aok-mqx__row--lit .aok-mqx__t { color: var(--aok-mqx-lit); text-shadow: 0 0 26px color-mix(in srgb, var(--aok-mqx-lit) 55%, transparent); }
.aok-mqx__row--lit .aok-mqx__sep { color: var(--aok-mqx-text); }
.aok-mqx--hover:hover .aok-mqx__row { animation-play-state: paused; }
@keyframes aokMqxRoll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .aok-mqx .aok-mqx__row { animation-duration: calc(var(--aok-mqx-speed) * 2) !important; } }

/* Metric Counter ---------------------------------------------------------- */
.aok-ctr { --aok-ctr-c1: var(--e-global-color-primary, #31043B); --aok-ctr-c2: var(--e-global-color-accent, #8B5CF6); display: flex; flex-direction: column; gap: 10px; }
.aok-ctr__num-w { overflow: hidden; }
.aok-ctr__num {
  display: inline-block; font-family: var(--e-global-typography-primary-font-family), Poppins, sans-serif; font-weight: 800;
  font-size: clamp(52px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -.03em; padding-bottom: .04em; font-variant-numeric: tabular-nums;
  color: var(--aok-ctr-c1);
}
.aok-ctr--gradient .aok-ctr__num { background: linear-gradient(110deg, var(--aok-ctr-c1) 25%, var(--aok-ctr-c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (max-width: 480px) { .aok-ctr__num { font-size: 40px; } }
.aok-ctr__label, .aok-ctr__text { margin: 0; }
/* Default look = the site's Global Fonts/Colours "Card Title" and "Card Text"; the widget's Style tab overrides these. */
.aok-ctr__label { font-family: var(--e-global-typography-aok_card_title-font-family), Poppins, sans-serif; font-size: var(--e-global-typography-aok_card_title-font-size); font-weight: var(--e-global-typography-aok_card_title-font-weight); line-height: var(--e-global-typography-aok_card_title-line-height); color: var(--e-global-color-primary); }
.aok-ctr__text { font-family: var(--e-global-typography-aok_card_text-font-family), Poppins, sans-serif; font-size: var(--e-global-typography-aok_card_text-font-size); font-weight: var(--e-global-typography-aok_card_text-font-weight); line-height: var(--e-global-typography-aok_card_text-line-height); color: var(--e-global-color-text); }
/* Entrance (only when the script arms it, so the numbers are always visible without JavaScript) */
.aok-ctr .aok-ctr__num, .aok-ctr .aok-ctr__label, .aok-ctr .aok-ctr__text { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity .9s ease; transition-delay: var(--aok-ctr-delay, 0s); }
.aok-ctr .aok-ctr__label { transition-delay: calc(var(--aok-ctr-delay, 0s) + .25s); }
.aok-ctr .aok-ctr__text { transition-delay: calc(var(--aok-ctr-delay, 0s) + .33s); }
.aok-ctr.is-armed .aok-ctr__num { transform: translateY(110%); transition: none; }
.aok-ctr.is-armed .aok-ctr__label, .aok-ctr.is-armed .aok-ctr__text { opacity: 0; transform: translateY(24px); transition: none; }
/* Vertical Marquee -------------------------------------------------------- */
.aok-vmq { --aok-vmq-speed: 26s; --aok-vmq-gap: 20px; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aok-vmq-gap); height: 560px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.aok-vmq--cols-1 { grid-template-columns: minmax(0, 1fr); }
.aok-vmq--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aok-vmq--offset .aok-vmq__col:nth-child(even) { padding-top: 56px; }
.aok-vmq__col { min-width: 0; }
.aok-vmq__track { display: flex; flex-direction: column; animation: aokVmqUp var(--aok-vmq-speed) linear infinite; will-change: transform; }
.aok-vmq__track--down { animation-name: aokVmqDown; }
.aok-vmq--hover:hover .aok-vmq__track { animation-play-state: paused; }
.aok-vmq__set { display: flex; flex-direction: column; gap: var(--aok-vmq-gap); padding-bottom: var(--aok-vmq-gap); }
@keyframes aokVmqUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes aokVmqDown { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.aok-vmq__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 104px; padding: 18px 16px; text-align: center; border: 1px solid; border-radius: 18px; transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
.aok-vmq__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--e-global-color-accent, #8B5CF6), var(--e-global-color-secondary, #6D3A78)); box-shadow: 0 10px 24px rgba(139, 92, 246, .35); }
.aok-vmq__icon svg { width: 1em; height: 1em; fill: currentColor; }
.aok-vmq__text { font-family: var(--e-global-typography-primary-font-family), Poppins, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; }
.aok-vmq__img { display: block; max-width: 80%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.aok-vmq--dark .aok-vmq__box { background: rgba(247, 243, 248, .04); border-color: rgba(247, 243, 248, .18); }
.aok-vmq--dark .aok-vmq__text { color: #F7F3F8; }
.aok-vmq--dark .aok-vmq__box:hover { border-color: rgba(139, 92, 246, .7); background: rgba(139, 92, 246, .1); box-shadow: 0 0 30px rgba(139, 92, 246, .25); }
.aok-vmq--light .aok-vmq__box { background: #fff; border-color: var(--e-global-color-aok_mist, #E6DCEB); box-shadow: 0 14px 34px rgba(49, 4, 59, .06); }
.aok-vmq--light .aok-vmq__text { color: var(--e-global-color-primary, #31043B); }
.aok-vmq--light .aok-vmq__box:hover { border-color: rgba(139, 92, 246, .55); box-shadow: 0 18px 40px rgba(139, 92, 246, .16); }
@media (max-width: 767px) { .aok-vmq { --aok-vmq-gap: 12px; } .aok-vmq__text { font-size: 13px; } .aok-vmq--offset .aok-vmq__col:nth-child(even) { padding-top: 32px; } }
@media (prefers-reduced-motion: reduce) { .aok-vmq__track { animation-duration: calc(var(--aok-vmq-speed) * 2.5); } }

/* Service Illustration ---------------------------------------------------- */
.aok-illo { --aok-illo-c1: var(--e-global-color-accent, #8B5CF6); --aok-illo-c2: var(--e-global-color-primary, #31043B); position: relative; width: 100%; max-width: 500px; aspect-ratio: 1 / .9; margin-inline: auto; }
.aok-illo__glow { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .38), rgba(139, 92, 246, 0)); filter: blur(10px); }
.aok-illo__ring { position: absolute; right: 2%; top: 2%; width: 36%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(139, 92, 246, .45); }
.aok-illo__dots { position: absolute; left: 0; bottom: 6%; width: 28%; height: 28%; background-image: radial-gradient(rgba(109, 58, 120, .35) 1.5px, transparent 1.8px); background-size: 14px 14px; }
.aok-illo__screen { position: absolute; left: 12%; top: 14%; width: 70%; height: 64%; display: flex; flex-direction: column; padding: 6% 7%; border-radius: 28px; color: #fff; background: linear-gradient(145deg, var(--aok-illo-c1), var(--aok-illo-c2)); box-shadow: 0 40px 80px rgba(49, 4, 59, .32), inset 0 1px 0 rgba(255, 255, 255, .25); transform: perspective(1100px) rotateY(-14deg) rotateX(7deg); }
.aok-illo__screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .22), transparent 60%); }
.aok-illo__bar { display: flex; gap: 6px; }
.aok-illo__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.aok-illo__icon { margin-top: auto; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 22%; font-size: clamp(24px, 3.6vw, 44px); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.aok-illo__icon svg { width: 1em; height: 1em; fill: #fff; }
.aok-illo__title { margin-top: 14px; font-family: var(--e-global-typography-primary-font-family), Poppins, sans-serif; font-weight: 700; font-size: clamp(16px, 1.8vw, 24px); line-height: 1.15; }
.aok-illo__lines { display: grid; gap: 7px; margin-top: 14px; }
.aok-illo__lines i { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .25); }
.aok-illo__lines i:nth-child(1) { width: 82%; } .aok-illo__lines i:nth-child(2) { width: 58%; } .aok-illo__lines i:nth-child(3) { width: 70%; }
.aok-illo__chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 9px; border-radius: 999px; white-space: nowrap; font-family: var(--e-global-typography-primary-font-family), Poppins, sans-serif; font-weight: 600; font-size: 14px; color: var(--e-global-color-primary, #31043B); background: rgba(255, 255, 255, .92); border: 1px solid var(--e-global-color-aok_mist, #E6DCEB); box-shadow: 0 18px 40px rgba(49, 4, 59, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.aok-illo__chip-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--e-global-color-accent, #8B5CF6), var(--e-global-color-secondary, #6D3A78)); }
.aok-illo__chip-ic svg { width: 1em; height: 1em; fill: #fff; }
.aok-illo__chip--1 { right: 0; top: 10%; }
.aok-illo__chip--2 { left: 0; bottom: 6%; } /* 2026-10-04: moved below the screen so it never covers the title */
.aok-illo__chip--3 { right: 4%; bottom: 4%; }
.aok-illo--anim .aok-illo__screen { animation: aokIlloFloat 6s ease-in-out infinite; }
.aok-illo--anim .aok-illo__chip { animation: aokIlloFloat 5s ease-in-out infinite; }
.aok-illo--anim .aok-illo__chip--2 { animation-delay: -1.6s; }
.aok-illo--anim .aok-illo__chip--3 { animation-delay: -3.2s; }
.aok-illo--anim .aok-illo__ring { animation: aokIlloSpin 40s linear infinite; }
@keyframes aokIlloFloat { 50% { translate: 0 -10px; } }
@keyframes aokIlloSpin { to { rotate: 360deg; } }
/* Phones (2026-10-04): taller box, screen moved up, chips placed around it so none covers the screen text */
@media (max-width: 767px) {
  .aok-illo { aspect-ratio: 1 / 1.05; }
  .aok-illo__screen { left: 8%; top: 5%; width: 76%; height: 58%; padding: 5% 6%; border-radius: 20px; }
  .aok-illo__icon { width: 20%; }
  .aok-illo__title { margin-top: 10px; font-size: 16px; }
  .aok-illo__lines { display: none; }
  .aok-illo__chip { font-size: 11px; gap: 6px; padding: 6px 11px 6px 6px; }
  .aok-illo__chip-ic { width: 22px; height: 22px; }
  .aok-illo__chip--1 { right: 0; top: 0; }
  .aok-illo__chip--2 { left: 0; bottom: 0; }
  .aok-illo__chip--3 { right: 0; bottom: 17%; }
  /* the hero's nested containers each add 10px side padding; let the illustration use the full column */
  .aok-svcp-hero .e-con-full:has(.elementor-widget-aok-illo) { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .aok-illo--anim .aok-illo__screen, .aok-illo--anim .aok-illo__chip, .aok-illo--anim .aok-illo__ring { animation: none; } }

/* Hanging Agent (added 2026-10-04) ---------------------------------------------
   Widget: includes/widgets/class-aok-agent.php. Trigger: assets/js/aok-widgets.js ("Hanging Agent").
   Sequence: drops down on its string -> small bounce -> thumbs-up pops -> gentle sway + occasional thumb pump.
   Without JavaScript, in the Elementor editor, or with "reduce motion" on, it simply shows in its final pose. */
.elementor-widget-aok-agent { --aok-agent-w: 92px; --aok-agent-string: 230px; --aok-agent-delay: .4s; --aok-agent-dur: 1.6s; pointer-events: none; }
.elementor-widget-aok-agent.aok-agent-place-gutter,
.elementor-widget-aok-agent.aok-agent-place-corner { position: absolute; z-index: 3; top: var(--aok-agent-top, 20px); right: 22px; width: auto; max-width: none; margin: 0; }
.elementor-widget-aok-agent.aok-agent-place-inline { align-self: center; width: auto; padding-top: var(--aok-agent-string); }
@media (min-width: 1280px) {
  .elementor-widget-aok-agent.aok-agent-place-gutter { right: auto; left: calc(100% + 18px); top: var(--aok-agent-top, 110px); }
}
/* Keep the box's heading and intro text clear of the agent when it sits in the corner */
:is(.e-con, .e-con-inner):has(> .elementor-widget-aok-agent.aok-agent-place-corner) > :is(.elementor-widget-heading, .elementor-widget-text-editor) { padding-right: calc(var(--aok-agent-w, 92px) + 26px); }
@media (max-width: 1279px) {
  :is(.e-con, .e-con-inner):has(> .elementor-widget-aok-agent.aok-agent-place-gutter) > :is(.elementor-widget-heading, .elementor-widget-text-editor) { padding-right: calc(var(--aok-agent-w, 92px) + 26px); }
}
.aok-agent { position: relative; width: var(--aok-agent-w); }
.aok-agent__bob, .aok-agent__sway { position: relative; }
.aok-agent__sway { transform-origin: 50% calc(-1 * var(--aok-agent-string)); }
.aok-agent__sway::before { content: ""; position: absolute; left: calc(50% - 1px); bottom: 88%; width: 2px; height: var(--aok-agent-string); border-radius: 2px;
  background: linear-gradient(to top, var(--aok-agent-line, #6D3A78), rgba(109, 58, 120, 0)); }
.aok-agent__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgba(49, 4, 59, .18)); }
/* The hand: the thumbs-up's wrist sits on the end of the agent's arm (2026-10-04 v2) */
.aok-agent__hand { position: absolute; left: -16%; top: 27%; width: 36%; transform-origin: 86% 68%; }
.aok-agent__thumb { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(49, 4, 59, .18)); }
.aok-agent--flip .aok-agent__thumb { transform: scaleX(-1); }
/* Armed = waiting above, out of sight, until it scrolls into view */
.aok-agent.is-armed .aok-agent__bob { opacity: 0; transform: translateY(calc(-1 * var(--aok-agent-string) - 160px)); }
.aok-agent.is-armed .aok-agent__hand { transform: scale(0) rotate(-35deg); }
.aok-agent.is-in .aok-agent__bob { animation: aokAgentDrop var(--aok-agent-dur) cubic-bezier(.22, .8, .3, 1) var(--aok-agent-delay) both; }
.aok-agent.is-in .aok-agent__hand { animation: aokAgentThumb .7s cubic-bezier(.3, 1.7, .5, 1) calc(var(--aok-agent-delay) + var(--aok-agent-dur) * .85) both; }
.aok-agent--sway.is-in .aok-agent__sway { animation: aokAgentSway 4.2s ease-in-out calc(var(--aok-agent-delay) + var(--aok-agent-dur)) infinite; }
.aok-agent--sway.is-in .aok-agent__hand { animation: aokAgentThumb .7s cubic-bezier(.3, 1.7, .5, 1) calc(var(--aok-agent-delay) + var(--aok-agent-dur) * .85) both, aokAgentPump 3.6s ease-in-out calc(var(--aok-agent-delay) + var(--aok-agent-dur) + 1.4s) infinite; }
.aok-agent--sway.is-in .aok-agent__legs { transform-origin: 50% 78%; transform-box: view-box; animation: aokAgentLegs 2.1s ease-in-out calc(var(--aok-agent-delay) + var(--aok-agent-dur)) infinite; }
@keyframes aokAgentDrop {
  0% { opacity: 0; transform: translateY(calc(-1 * var(--aok-agent-string) - 160px)); }
  12% { opacity: 1; }
  68% { transform: translateY(12px); }
  84% { transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes aokAgentThumb { 0% { transform: scale(0) rotate(-35deg); } 70% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes aokAgentPump { 0%, 72%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.14) rotate(-12deg); } 88% { transform: scale(1.04) rotate(5deg); } }
@keyframes aokAgentSway { 0%, 100% { transform: rotate(2.2deg); } 50% { transform: rotate(-2.2deg); } }
@keyframes aokAgentLegs { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
/* Safety: if scripts never start, show it (the site's head script adds aok-no-gsap after a few seconds) */
.aok-no-gsap .aok-agent.is-armed .aok-agent__bob { opacity: 1; transform: none; }
.aok-no-gsap .aok-agent.is-armed .aok-agent__hand { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aok-agent .aok-agent__bob, .aok-agent .aok-agent__hand, .aok-agent .aok-agent__sway, .aok-agent .aok-agent__legs { animation: none !important; opacity: 1 !important; transform: none !important; }
}