/* ==========================================================================
   All-Ok Digital Core: brand layer
   Colours and fonts come from the Elementor Kit (Global Colors / Fonts).
   Sections: 1 Tokens  2 Base  3 Header  4 Footer  5 Hero  6 Marquee
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--aok-primary: var(--e-global-color-primary, #31043B);
	--aok-plum: var(--e-global-color-secondary, #6D3A78);
	--aok-ink: var(--e-global-color-text, #2B1631);
	--aok-accent: var(--e-global-color-accent, #8B5CF6);
	--aok-lavender: var(--e-global-color-aok_lavender, #F7F3F8);
	--aok-line: var(--e-global-color-aok_mist, #E6DCEB);
	--aok-night: var(--e-global-color-aok_night, #1B0222);
	--aok-ease: cubic-bezier(.16, 1, .3, 1);
	--aok-header-h: 84px;
}

/* 2. Base ------------------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--aok-header-h) + 16px); }
body.aok-site { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Pages that are not built with the Elementor full-width template need room under the fixed header. */
body.aok-site:not(.elementor-template-full-width):not(.elementor-editor-active) #content { padding-top: var(--aok-header-h); }

/* 3. Header ---------------------------------------------------------------- */
body.ehf-header #masthead {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9990;
	background: rgba(255, 255, 255, 0);
	border-bottom: 1px solid transparent;
	transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
body.admin-bar.ehf-header #masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar.ehf-header #masthead { top: 46px; } }
body.elementor-editor-active.ehf-header #masthead { position: relative; top: 0; }

body.ehf-header #masthead.aok-scrolled {
	background: rgba(255, 255, 255, .74);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: rgba(49, 4, 59, .07);
	box-shadow: 0 10px 34px rgba(49, 4, 59, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.ehf-header #masthead.aok-scrolled { background: rgba(255, 255, 255, .96); }
}

#masthead .aok-header { transition: padding .35s var(--aok-ease); }
#masthead.aok-scrolled .aok-header { --padding-top: 8px; --padding-bottom: 8px; }

/* Logo: file is left untouched; multiply lets its white JPEG background sit cleanly on the light header. */
#masthead .aok-logo img {
	width: 52px; height: auto;
	mix-blend-mode: multiply;
	transition: width .35s var(--aok-ease);
}
#masthead.aok-scrolled .aok-logo img { width: 42px; }
#masthead .aok-wordmark .elementor-heading-title { white-space: nowrap; }

/* Navigation */
#masthead .aok-nav .hfe-nav-menu__layout-horizontal { justify-content: center; }
#masthead .aok-nav .hfe-nav-menu .menu-item a.hfe-menu-item {
	position: relative;
	padding: 10px 18px;
	border-radius: 999px;
	transition: color .3s ease;
}
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .menu-item a.hfe-menu-item::after {
	content: "";
	position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px;
	background: linear-gradient(90deg, var(--aok-accent), var(--aok-plum));
	transform: scaleX(0); transform-origin: left;
	transition: transform .45s var(--aok-ease);
	border-radius: 2px;
}
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .menu-item a.hfe-menu-item:hover::after,
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .menu-item.current-menu-item a.hfe-menu-item::after { transform: scaleX(1); }

/* CTA button in header */
#masthead .aok-header-cta .elementor-button {
	box-shadow: 0 10px 24px rgba(49, 4, 59, .22);
	transition: transform .35s var(--aok-ease), box-shadow .35s var(--aok-ease), background-color .3s ease;
}
#masthead .aok-header-cta .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(139, 92, 246, .4); }
#masthead .aok-header-cta .elementor-button-icon { transition: transform .35s var(--aok-ease); }
#masthead .aok-header-cta .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* "Let's Talk" menu item is only for the mobile menu; desktop/tablet use the button */
@media (min-width: 768px) { .aok-menu-cta { display: none !important; } }
#masthead .aok-nav .aok-menu-cta > a.hfe-menu-item,
#masthead .aok-nav .aok-menu-cta > a.hfe-sub-menu-item {
	background: var(--aok-primary); color: #fff !important;
	text-align: center; border-radius: 999px; margin-top: 8px; justify-content: center;
}

/* Tablet + mobile layout: logo left, hamburger right */
@media (max-width: 1024px) {
	#masthead .aok-header-logo { flex: 0 0 auto; width: auto !important; }
	#masthead .aok-header-nav { flex: 0 0 auto; width: auto !important; margin-left: auto; }
	#masthead .aok-header-cta-wrap { flex: 0 0 auto; width: auto !important; }
	#masthead .aok-header { --gap: 14px; }
}
@media (max-width: 767px) {
	#masthead .aok-logo img { width: 42px; }
	#masthead.aok-scrolled .aok-logo img { width: 36px; }
	#masthead .aok-header-cta-wrap { display: none !important; }
}

/* Mobile / tablet dropdown panel */
#masthead .aok-nav nav.hfe-dropdown,
#masthead .aok-nav .hfe-nav-menu__layout-horizontal.hfe-dropdown {
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(49, 4, 59, .18);
	margin: 12px 14px 0;
	padding: 10px;
	border: 1px solid var(--aok-line);
}
#masthead .aok-nav nav.hfe-dropdown .menu-item a.hfe-menu-item { font-size: 17px; padding: 14px 18px; }

/* 4. Footer ---------------------------------------------------------------- */
.aok-footer { position: relative; overflow: hidden; isolation: isolate; }
.aok-footer::before {
	content: "";
	position: absolute; z-index: -1; pointer-events: none;
	right: -12%; bottom: -45%; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .32), rgba(109, 58, 120, .14) 55%, transparent 72%);
}
.aok-footer::after {
	content: "";
	position: absolute; z-index: -1; pointer-events: none;
	top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .8), transparent);
}
.aok-footer-logo img { background: #fff; border-radius: 18px; padding: 10px; width: 68px; height: auto; display: block; }
.aok-footer .aok-footer-links .elementor-icon-list-item a { transition: transform .35s var(--aok-ease), color .25s ease; display: inline-flex; }
.aok-footer .aok-footer-links .elementor-icon-list-item:hover a { transform: translateX(6px); }
.aok-footer .aok-social .elementor-social-icon {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	transition: transform .35s var(--aok-ease), background-color .3s ease, border-color .3s ease;
}
.aok-footer .aok-social .elementor-social-icon:hover { background: var(--aok-accent); border-color: var(--aok-accent); transform: translateY(-3px); }
.aok-footer .aok-footer-cta .elementor-button { background: #fff; color: var(--aok-primary); }
.aok-footer .aok-footer-cta .elementor-button:hover { background: var(--aok-accent); color: #fff; }
.aok-footer .aok-footer-bar { border-top: 1px solid rgba(255, 255, 255, .12); }
.aok-footer .elementor-widget-text-editor p { margin: 0; }
.aok-footer .aok-copy, .aok-footer .aok-copy * { color: var(--aok-line); }
.aok-footer .aok-legal .elementor-icon-list-item a { transition: color .25s ease; }

/* 5. Hero (Home) ----------------------------------------------------------- */
html.aok-js:not(.aok-no-gsap) .aok-hero .aok-rv { opacity: 0; visibility: hidden; }
body.elementor-editor-active .aok-rv,
body.elementor-editor-preview .aok-rv { opacity: 1 !important; visibility: visible !important; }

.aok-hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--aok-lavender); }
.aok-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55% 50% at 88% 6%, rgba(139, 92, 246, .30), transparent 64%),
    radial-gradient(45% 45% at 6% 34%, rgba(109, 58, 120, .20), transparent 62%),
    radial-gradient(70% 55% at 50% 108%, rgba(49, 4, 59, .16), transparent 68%),
    linear-gradient(180deg, #fff 0%, var(--aok-lavender) 72%);
}
.aok-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(49, 4, 59, .16) 1px, transparent 1.3px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(65% 55% at 50% 38%, #000 0%, transparent 85%);
  mask-image: radial-gradient(65% 55% at 50% 38%, #000 0%, transparent 85%);
}
.aok-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin-inline: auto; }
.aok-hero-bg { position: absolute !important; inset: 0; z-index: 0; width: 100% !important; max-width: none !important; padding: 0 !important; min-height: 0 !important; pointer-events: none; overflow: hidden; }

/* Decorative shapes (empty Elementor containers, moved by GSAP) */
.aok-shape { position: absolute !important; display: block; padding: 0 !important; min-height: 0 !important; pointer-events: none; }
.aok-shape--orb { top: -140px; right: -120px; width: 540px !important; height: 540px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(139, 92, 246, .45), rgba(139, 92, 246, 0) 68%); filter: blur(8px); }
.aok-shape--ring { left: -110px; bottom: 14%; width: 280px !important; height: 280px; border-radius: 50%; border: 1.5px solid rgba(139, 92, 246, .35); box-shadow: inset 0 0 0 28px rgba(139, 92, 246, .04), 0 0 0 28px rgba(139, 92, 246, .05); }
.aok-shape--square { right: 9%; top: 24%; width: 92px !important; height: 92px; border-radius: 28px; transform: rotate(18deg); background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(49, 4, 59, .05)); border: 1px solid rgba(139, 92, 246, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aok-particle { position: absolute; border-radius: 50%; background: var(--aok-accent); opacity: 0; box-shadow: 0 0 12px rgba(139, 92, 246, .7); pointer-events: none; }

/* Pill + headline */
.aok-pill .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid var(--aok-line); box-shadow: 0 8px 24px rgba(49, 4, 59, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.aok-pill .elementor-heading-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aok-accent); animation: aokPing 2.4s ease-out infinite; }
@keyframes aokPing { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } }

.aok-hero-title { width: 100%; max-width: 1180px; margin-inline: auto; }
.aok-hero-title .elementor-heading-title { text-wrap: balance; }
@media (min-width: 1025px) { .aok-hero-title .elementor-heading-title { font-size: clamp(60px, 5.6vw, 80px); } }
.aok-grad { position: relative; display: inline-block; background-image: linear-gradient(100deg, var(--aok-accent) 0%, var(--aok-plum) 50%, var(--aok-accent) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: aokGradShift 9s linear infinite; }
.aok-grad::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: .02em; height: .12em; border-radius: 99px; background: linear-gradient(90deg, rgba(139, 92, 246, .45), rgba(139, 92, 246, 0)); transform-origin: left center; transform: scaleX(var(--aok-ul, 1)); }
@keyframes aokGradShift { to { background-position: -200% 0; } }

.aok-hero-lead { width: 100%; max-width: 640px; }
.aok-hero-lead p { margin: 0; }

/* Hero buttons */
.aok-hero-btns .elementor-button { padding: 18px 34px; box-shadow: 0 12px 28px rgba(49, 4, 59, .2); transition: transform .35s var(--aok-ease), box-shadow .35s var(--aok-ease), background-color .3s ease, color .3s ease, border-color .3s ease; }
.aok-hero-btns .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(139, 92, 246, .38); }
.aok-hero-btns .elementor-button-icon { transition: transform .35s var(--aok-ease); }
.aok-hero-btns .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.aok-btn-ghost .elementor-button { background: rgba(255, 255, 255, .55) !important; box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.aok-btn-ghost .elementor-button:hover { background: var(--aok-primary) !important; color: #fff !important; border-color: var(--aok-primary) !important; box-shadow: 0 16px 34px rgba(49, 4, 59, .25); }

/* Growth journey: Strategy > Marketing > Conversion > Growth */
.aok-journey { position: relative; width: 100%; max-width: 1180px; margin: 48px auto 0; perspective: 1400px; }
.aok-journey::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; z-index: 0; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .55) 15%, rgba(109, 58, 120, .55) 85%, transparent); }
.aok-journey::after { content: ""; position: absolute; top: calc(50% - 3px); left: 4%; width: 90px; height: 8px; border-radius: 99px; z-index: 0; background: linear-gradient(90deg, transparent, var(--aok-accent), transparent); filter: blur(2px); animation: aokTravel 5.5s linear infinite; }
@keyframes aokTravel { 0% { left: 4%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 86%; opacity: 0; } }
.aok-jcard { position: relative; z-index: 1; flex: 1 1 calc(25% - 15px) !important; width: auto !important; min-width: 0; border-radius: 24px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(49, 4, 59, .07); box-shadow: 0 22px 56px rgba(49, 4, 59, .11), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .4s ease, border-color .4s ease; will-change: transform; }
.aok-jcard:hover { border-color: rgba(139, 92, 246, .45); box-shadow: 0 28px 64px rgba(139, 92, 246, .2), inset 0 1px 0 #fff; }
.aok-jtop { width: 100%; }
.aok-jnum .elementor-heading-title { opacity: .55; }
.aok-jicon .elementor-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--aok-accent), var(--aok-primary)); box-shadow: 0 10px 22px rgba(139, 92, 246, .35); }
.aok-jicon .elementor-icon svg { fill: currentColor; width: 1em; height: 1em; }
.aok-jtext p { margin: 0; }
.aok-jviz { margin-top: auto; padding-top: 4px; }
.aok-viz { display: block; width: 100%; }
.aok-viz--plan { display: grid; gap: 7px; }
.aok-viz--plan span { height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--aok-accent), rgba(139, 92, 246, .14)); }
.aok-viz--plan span:nth-child(1) { width: 94%; }
.aok-viz--plan span:nth-child(2) { width: 66%; }
.aok-viz--plan span:nth-child(3) { width: 80%; }
.aok-viz--chan { display: flex; flex-wrap: wrap; gap: 6px; }
.aok-viz--chan span { font: 600 11px/1 Poppins, sans-serif; letter-spacing: .02em; padding: 6px 10px; border-radius: 99px; color: var(--aok-primary); background: var(--aok-lavender); border: 1px solid var(--aok-line); }
.aok-viz--funnel { display: grid; justify-items: center; gap: 6px; }
.aok-viz--funnel span { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--aok-primary), var(--aok-plum)); }
.aok-viz--funnel span:nth-child(1) { width: 100%; }
.aok-viz--funnel span:nth-child(2) { width: 72%; }
.aok-viz--funnel span:nth-child(3) { width: 46%; }
.aok-viz--spark { height: 44px; overflow: visible; }

/* Floating side cards (wide screens only, in the free space beside the lead text) */
.aok-float { position: absolute !important; z-index: 1; display: none !important; align-items: center; gap: 12px; width: auto !important; min-width: 0; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(49, 4, 59, .08); box-shadow: 0 18px 44px rgba(49, 4, 59, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (min-width: 1360px) { .aok-float { display: flex !important; } }
.aok-float--search { left: 40px; top: 49%; }
.aok-float--lead { right: 40px; top: 56%; border-radius: 20px; }
.aok-ficon .elementor-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--aok-accent), var(--aok-plum)); }
.aok-ficon .elementor-icon svg { fill: currentColor; width: 1em; height: 1em; }
.aok-ftext p { margin: 0; }
.aok-fcaret .elementor-heading-title::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 4px; vertical-align: -2px; background: var(--aok-accent); animation: aokCaret 1s steps(1) infinite; }
@keyframes aokCaret { 50% { opacity: 0; } }

/* Hero responsive */
@media (max-width: 1024px) {
  .aok-journey { margin-top: 40px; }
  .aok-journey::before, .aok-journey::after { display: none; }
  .aok-jcard { flex-basis: calc(50% - 10px) !important; }
}
@media (max-width: 767px) {
  .aok-journey { margin-top: 32px; }
  .aok-jcard { flex-basis: calc(50% - 7px) !important; border-radius: 20px; }
  .aok-jicon .elementor-icon { width: 38px; height: 38px; font-size: 16px; border-radius: 12px; }
  .aok-hero-btns, .aok-hero-btns .elementor-widget-button, .aok-hero-btns .elementor-button { width: 100%; }
  .aok-hero-btns .elementor-button { justify-content: center; }
  .aok-shape--orb { width: 340px !important; height: 340px; top: -100px; right: -120px; }
  .aok-shape--ring { width: 170px !important; height: 170px; left: -80px; bottom: 6%; }
  .aok-shape--square { width: 60px !important; height: 60px; border-radius: 18px; right: 6%; top: 14%; }
}
@media (max-width: 359px) { .aok-jcard { flex-basis: 100% !important; } }

/* 6. Services marquee ------------------------------------------------------ */
/* No band behind it: the text runs on the page background, fades at the edges
   and is lit in the centre by a soft light splash. Loop is a CSS keyframe over
   two identical halves, so it never jumps. */
.aok-marquee { --aok-marquee-speed: 80; position: relative; overflow: hidden; isolation: isolate; background: transparent !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
@media (max-width: 1024px) { .aok-marquee { --aok-marquee-speed: 65; } }
@media (max-width: 767px) { .aok-marquee { --aok-marquee-speed: 48; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } }
.aok-marquee::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(760px, 86vw); height: 300%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(139, 92, 246, .20), rgba(139, 92, 246, .07) 55%, rgba(139, 92, 246, 0) 100%); }
.aok-marquee::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(380px, 60vw); height: 120%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.aok-marquee__track { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; gap: 0 !important; padding: 0 !important; will-change: transform; }
.aok-marquee__group { display: flex !important; flex: 0 0 auto; flex-wrap: nowrap !important; align-items: center; width: max-content !important; max-width: none !important; gap: 0 !important; padding: 0 !important; }
.aok-marquee__item { flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap; }
.aok-marquee__item .elementor-heading-title, .aok-marquee__item .elementor-heading-title a { white-space: nowrap; color: var(--aok-primary); transition: color .4s ease; }
.aok-marquee__item::after { content: "\2726"; margin-inline: clamp(22px, 3vw, 48px); color: var(--aok-accent); font-size: clamp(14px, 1.5vw, 20px); line-height: 1; transition: transform .6s var(--aok-ease); }
.aok-marquee__item.is-lit .elementor-heading-title, .aok-marquee__item.is-lit .elementor-heading-title a { color: var(--aok-accent); }
.aok-marquee__item.is-lit::after { transform: rotate(90deg) scale(1.2); }
.aok-marquee.is-running .aok-marquee__track { animation: aokMarquee var(--aok-marquee-dur, 40s) linear infinite; }
.aok-marquee.is-paused .aok-marquee__track { animation-play-state: paused; }
@media (hover: hover) { .aok-marquee:hover .aok-marquee__track { animation-play-state: paused; } }
@keyframes aokMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* Reduced-motion users still get the loop, just slower (overrides the global reset). */
@media (prefers-reduced-motion: reduce) { .aok-marquee.is-running .aok-marquee__track { animation-duration: calc(var(--aok-marquee-dur, 40s) * 1.8) !important; animation-iteration-count: infinite !important; } }
/* 7. Home sections: shared ----------------------------------------------- */
.aok-sec { position: relative; isolation: isolate; }
.aok-sec-head { width: 100%; max-width: 760px; }
.aok-sec-head--center { margin-inline: auto; text-align: center; }
.aok-sec .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.aok-sec h2.elementor-heading-title { text-wrap: balance; }
.aok-measure { width: 100%; max-width: 620px; }
a.e-con, a.e-con:hover, a.e-con:focus { text-decoration: none; color: inherit; }
a.e-con:focus-visible { outline: 3px solid var(--aok-accent); outline-offset: 4px; }
.aok-btn .elementor-button, .aok-btn-light .elementor-button { transition: transform .35s var(--aok-ease), box-shadow .35s var(--aok-ease), background-color .3s ease, color .3s ease, border-color .3s ease; }
.aok-btn .elementor-button:hover, .aok-btn-light .elementor-button:hover { transform: translateY(-2px); }
.aok-btn .elementor-button-icon, .aok-btn-light .elementor-button-icon { transition: transform .35s var(--aok-ease); }
.aok-btn .elementor-button:hover .elementor-button-icon, .aok-btn-light .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.aok-btn-light .elementor-button { background: #fff !important; color: var(--aok-primary) !important; box-shadow: 0 14px 34px rgba(27, 2, 34, .25); }
.aok-btn-light .elementor-button svg { fill: currentColor; }
.aok-btn-light .elementor-button:hover { background: var(--aok-accent) !important; color: #fff !important; }

/* 8. Service cards --------------------------------------------------------- */
.aok-scards { grid-auto-rows: 1fr; }
.aok-scard { position: relative; overflow: hidden; isolation: isolate; min-height: 310px; border-radius: 24px; background: #fff; border: 1px solid var(--aok-line); transition: transform .45s var(--aok-ease), box-shadow .45s var(--aok-ease), border-color .35s ease; }
.aok-scard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(139, 92, 246, .13), transparent 70%); }
.aok-scard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--aok-accent), var(--aok-plum)); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--aok-ease); }
.aok-scard:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, .38); box-shadow: 0 26px 60px rgba(49, 4, 59, .12); }
.aok-scard:hover::before { opacity: 1; }
.aok-scard:hover::after { transform: scaleX(1); }
.aok-scard-top { width: 100%; }
.aok-scard-body .elementor-widget-text-editor p { margin: 0; }
.aok-snum .elementor-heading-title { color: var(--aok-plum); opacity: .7; font-variant-numeric: tabular-nums; }
.aok-sicon .elementor-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; font-size: 20px; background: var(--aok-lavender); border: 1px solid var(--aok-line); transition: transform .45s var(--aok-ease), background .35s ease, color .35s ease, border-color .35s ease; }
.aok-sicon .elementor-icon svg { width: 1em; height: 1em; }
.aok-scard:hover .aok-sicon .elementor-icon { color: #fff; background: linear-gradient(135deg, var(--aok-accent), var(--aok-primary)); border-color: transparent; transform: rotate(-8deg) scale(1.06); }
.aok-scard:hover .aok-sicon .elementor-icon svg { fill: currentColor; }
.aok-sarrow { margin-top: auto; }
.aok-sarrow .elementor-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; border: 1px solid var(--aok-line); transition: transform .45s var(--aok-ease), background-color .3s ease, color .3s ease, border-color .3s ease; }
.aok-sarrow .elementor-icon svg { width: 1em; height: 1em; }
.aok-scard:hover .aok-sarrow .elementor-icon { color: #fff; background: var(--aok-primary); border-color: var(--aok-primary); transform: translateX(6px) rotate(-45deg); }
.aok-scard:hover .aok-sarrow .elementor-icon svg { fill: currentColor; }
.aok-scard--cta { border-color: transparent; background: var(--aok-primary); justify-content: space-between; }
.aok-scard--cta::before { opacity: 1; background: radial-gradient(70% 60% at 100% 0%, rgba(139, 92, 246, .55), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(109, 58, 120, .7), transparent 70%); }
.aok-scard--cta:hover { transform: none; box-shadow: 0 26px 60px rgba(49, 4, 59, .28); }
.aok-scard--cta::after { display: none; }
@media (max-width: 767px) { .aok-scards { grid-auto-rows: auto; } .aok-scard { min-height: 0; } .aok-sarrow { margin-top: 4px; } }

/* 9. Why All-Ok Digital ---------------------------------------------------- */
.aok-why { overflow: clip; }
.aok-why::before { content: ""; position: absolute; z-index: -1; left: -15%; bottom: -30%; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(139, 92, 246, .28), transparent 70%); }
@media (min-width: 1025px) { .aok-why-intro { position: sticky !important; top: calc(var(--aok-header-h) + 48px); align-self: flex-start; } }
.aok-why-row { border-top: 1px solid rgba(247, 243, 248, .14); }
.aok-why-row:last-child { border-bottom: 1px solid rgba(247, 243, 248, .14); }
.aok-why-num { flex: 0 0 auto; width: auto !important; min-width: 2.3ch; }
.aok-why-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: clamp(56px, 6.4vw, 104px); line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.4px rgba(247, 243, 248, .45); transition: color .5s ease, -webkit-text-stroke-color .5s ease; }
.aok-why-row:hover .aok-why-num .elementor-heading-title { color: var(--aok-accent); -webkit-text-stroke-color: var(--aok-accent); }
.aok-why-copy { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
.aok-why-copy .elementor-widget-text-editor p { margin: 0; }

/* 10. Process -------------------------------------------------------------- */
.aok-process-track { position: relative; }
.aok-pline-w { position: absolute !important; left: 8.333%; right: 8.333%; top: 31px; height: 2px; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 0; pointer-events: none; }
.aok-pline { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; background: var(--aok-line); }
.aok-pline-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--aok-accent), var(--aok-primary)); }
.aok-step { position: relative; z-index: 1; flex: 1 1 0 !important; min-width: 0; }
.aok-step .elementor-widget-text-editor p { margin: 0; }
.aok-step-num .elementor-heading-title { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--aok-line); color: var(--aok-primary); font-weight: 700; box-shadow: 0 10px 24px rgba(49, 4, 59, .08); transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s var(--aok-ease); }
.aok-step.is-active .aok-step-num .elementor-heading-title { background: var(--aok-primary); color: #fff; border-color: var(--aok-primary); box-shadow: 0 12px 30px rgba(139, 92, 246, .4); transform: scale(1.06); }
@media (max-width: 1024px) {
  .aok-process-track { flex-wrap: wrap !important; row-gap: 44px !important; }
  .aok-step { flex: 0 0 calc(33.333% - 14px) !important; }
  .aok-pline-w { display: none; }
}
@media (max-width: 767px) {
  .aok-process-track { row-gap: 34px !important; }
  .aok-pline-w { display: block; left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px !important; height: auto; }
  .aok-pline-fill { background: linear-gradient(180deg, var(--aok-accent), var(--aok-primary)); }
  .aok-step { flex: 0 0 100% !important; align-items: flex-start !important; padding-left: 88px !important; min-height: 64px; }
  .aok-step-num { position: absolute !important; left: 0; top: 0; width: auto !important; }
}

/* 11. Metrics -------------------------------------------------------------- */
.aok-metrics-row { border-top: 1px solid var(--aok-line); border-bottom: 1px solid var(--aok-line); }
.aok-metric { flex: 1 1 0 !important; min-width: 0; padding: 44px 32px !important; border-left: 1px solid var(--aok-line); }
.aok-metric:first-child { border-left: 0; padding-left: 0 !important; }
.aok-metric-num { overflow: hidden; }
.aok-metric-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: clamp(52px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -.03em; padding-bottom: .04em; background: linear-gradient(110deg, var(--aok-primary) 25%, var(--aok-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.aok-metric .elementor-widget-text-editor p { margin: 0; }
@media (max-width: 1024px) {
  .aok-metrics-row { flex-wrap: wrap !important; }
  .aok-metric { flex: 0 0 50% !important; padding: 36px 24px !important; }
  .aok-metric:nth-child(odd) { border-left: 0; padding-left: 0 !important; }
  .aok-metric:nth-child(n+3) { border-top: 1px solid var(--aok-line); }
}
@media (max-width: 480px) { .aok-metric { padding: 28px 14px !important; } .aok-metric-num .elementor-heading-title { font-size: 40px; } }

/* 12. Featured work -------------------------------------------------------- */
.aok-wcard { overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--aok-line); transition: transform .45s var(--aok-ease), box-shadow .45s var(--aok-ease); }
.aok-wcard:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(49, 4, 59, .14); }
@media (min-width: 768px) { .aok-wcard--big { grid-row: span 2; } }
.aok-wvis { position: relative !important; overflow: hidden; width: 100% !important; aspect-ratio: 16 / 9; padding: 0 !important; min-height: 0; }
.aok-wcard--big .aok-wvis { aspect-ratio: auto; flex: 1 1 auto !important; min-height: 320px; }
.aok-wvis::before, .aok-wvis::after { content: ""; position: absolute; pointer-events: none; transition: transform 1s var(--aok-ease); }
.aok-wvis--1 { background: radial-gradient(70% 90% at 85% 15%, rgba(139, 92, 246, .6), transparent 60%), linear-gradient(160deg, var(--aok-primary), var(--aok-night)); }
.aok-wvis--1::before { width: 70%; aspect-ratio: 1; right: -12%; bottom: -30%; border-radius: 50%; border: 1.5px solid rgba(247, 243, 248, .25); box-shadow: 0 0 0 40px rgba(247, 243, 248, .04), 0 0 0 80px rgba(247, 243, 248, .03); }
.aok-wvis--1::after { width: 38%; height: 44%; left: 10%; top: 22%; border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .25); transform: rotate(-8deg); }
.aok-wvis--2 { background: radial-gradient(80% 100% at 0% 100%, rgba(109, 58, 120, .55), transparent 60%), linear-gradient(135deg, #EDE4F1, var(--aok-lavender)); }
.aok-wvis--2::before { width: 46%; aspect-ratio: 1; right: 8%; top: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(139, 92, 246, .75), rgba(49, 4, 59, .9)); }
.aok-wvis--2::after { left: 8%; bottom: 18%; width: 44%; height: 10px; border-radius: 99px; background: var(--aok-primary); box-shadow: 0 -22px 0 rgba(49, 4, 59, .35), 0 -44px 0 rgba(49, 4, 59, .18); }
.aok-wvis--3 { background: linear-gradient(200deg, var(--aok-plum), var(--aok-primary)); }
.aok-wvis--3::before { width: 60%; height: 70%; left: -10%; top: -14%; border-radius: 40% 60% 55% 45%; background: radial-gradient(circle, rgba(139, 92, 246, .6), transparent 68%); }
.aok-wvis--3::after { right: 10%; bottom: 16%; width: 26%; aspect-ratio: 1; border-radius: 26px; border: 1.5px solid rgba(247, 243, 248, .35); transform: rotate(14deg); }
.aok-wcard:hover .aok-wvis::before { transform: scale(1.08) translateY(-4%); }
.aok-wcard:hover .aok-wvis--1::after { transform: rotate(-3deg) translateY(-6px); }
.aok-wcard:hover .aok-wvis--3::after { transform: rotate(26deg); }
.aok-wbody .elementor-widget-text-editor p { margin: 0; }
.aok-wlink .elementor-heading-title::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .35s var(--aok-ease); }
.aok-wcard:hover .aok-wlink .elementor-heading-title::after { transform: translateX(6px); }

/* 13. Latest posts ([aok_latest_posts]) ----------------------------------- */
.aok-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .aok-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .aok-posts { grid-template-columns: 1fr; } }
.aok-post { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--aok-line); transition: transform .45s var(--aok-ease), box-shadow .45s var(--aok-ease), border-color .35s ease; }
.aok-post:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, .35); box-shadow: 0 26px 60px rgba(49, 4, 59, .12); }
.aok-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--aok-lavender); }
.aok-post__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--aok-ease); }
.aok-post:hover .aok-post__img { transform: scale(1.05); }
.aok-post__ph { display: block; width: 100%; height: 100%; background: radial-gradient(60% 80% at 80% 10%, rgba(139, 92, 246, .5), transparent 60%), radial-gradient(50% 70% at 10% 100%, rgba(109, 58, 120, .6), transparent 65%), var(--aok-primary); }
.aok-post__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 28px; }
.aok-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.aok-post__cat { color: var(--aok-plum); }
.aok-post__date { color: rgba(43, 22, 49, .65); letter-spacing: .04em; font-weight: 500; }
.aok-post__title { margin: 0; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-size: 21px; font-weight: 600; line-height: 1.3; }
.aok-post__title a { color: var(--aok-primary); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px; transition: background-size .45s var(--aok-ease); }
.aok-post:hover .aok-post__title a { background-size: 100% 1.5px; }
.aok-post__excerpt { margin: 0; color: var(--aok-ink); font-size: 16px; line-height: 1.6; }
.aok-post__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 15px; font-weight: 600; color: var(--aok-primary); text-decoration: none; }
.aok-post__arrow { transition: transform .35s var(--aok-ease); }
.aok-post:hover .aok-post__arrow { transform: translateX(5px); }
.aok-posts--empty { display: block; padding: 48px 32px; border-radius: 24px; border: 1px dashed var(--aok-line); background: var(--aok-lavender); text-align: center; }
.aok-posts__empty { margin: 0; color: var(--aok-ink); }

/* 14. Final CTA ------------------------------------------------------------ */
.aok-cta-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; text-align: center; }
.aok-cta-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(50% 70% at 12% 0%, rgba(139, 92, 246, .5), transparent 70%), radial-gradient(45% 65% at 92% 100%, rgba(109, 58, 120, .75), transparent 70%); }
.aok-cta-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(247, 243, 248, .16) 1px, transparent 1.3px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 80%); }
.aok-cta-title { width: 100%; max-width: 900px; }
.aok-cta-panel .elementor-widget-text-editor p { margin: 0; }
@media (max-width: 767px) { .aok-cta-panel { border-radius: 26px; } }/* 15. Scroll motion helpers (used by aok-sections.js) ---------------------- */
.aok-hero .aok-marquee { width: 100% !important; margin-top: 72px; }
@media (max-width: 767px) { .aok-hero .aok-marquee { margin-top: 48px; } }
.aok-marquee .aok-marquee__item .elementor-heading-title { display: inline-block; transform: skewX(var(--aok-skew, 0deg)); }

/* Scroll progress line */
.aok-progress { position: fixed; left: 0; top: 0; z-index: 9995; width: 100%; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--aok-accent), var(--aok-plum), var(--aok-primary)); transform: scaleX(0); transform-origin: left center; }
body.admin-bar .aok-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .aok-progress { top: 46px; } }

/* Word-by-word heading reveal */
.aok-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.aok-wi { display: inline-block; will-change: transform; }

/* Why rows: accent line draws across as each row arrives */
.aok-why-row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, var(--aok-accent), rgba(139, 92, 246, 0)); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--aok-ease); }
.aok-why-row.is-in::before { transform: scaleX(1); }

/* Work visuals: inner shapes drift with scroll (uses the translate property, so hover transforms still work) */
.aok-wvis::before { translate: 0 var(--aok-py, 0px); }
.aok-wvis::after { translate: 0 calc(var(--aok-py, 0px) * -0.6); }
/* 16. Inner pages ---------------------------------------------------------- */

/* 16a. Header dropdown (Services) */
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .sub-menu { min-width: 260px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid var(--aok-line); box-shadow: 0 24px 60px rgba(49, 4, 59, .16); }
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .sub-menu a.hfe-sub-menu-item { padding: 12px 16px; border-radius: 12px; color: var(--aok-primary); font-size: 15px; background: transparent; border: 0; transition: background-color .25s ease, color .25s ease, padding-left .35s var(--aok-ease); }
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .sub-menu a.hfe-sub-menu-item:hover,
#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .sub-menu a.hfe-sub-menu-item:focus-visible { background: var(--aok-lavender); color: var(--aok-plum); padding-left: 22px; }
#masthead .aok-nav .sub-menu .sub-menu-item:not(:last-child), #masthead .aok-nav .sub-menu li { border-bottom: 0 !important; }
#masthead .aok-nav .sub-arrow { color: inherit; }
#masthead .aok-nav nav.hfe-dropdown .sub-menu { background: var(--aok-lavender); border-radius: 14px; margin: 4px 0 8px; }
#masthead .aok-nav nav.hfe-dropdown .sub-menu a.hfe-sub-menu-item { color: var(--aok-primary); padding: 12px 22px; font-size: 16px; }

/* 16b. Page hero */
.aok-hero--page .aok-hero-inner { max-width: 1000px; }
html:has(.aok-subnav) { scroll-padding-top: calc(var(--aok-header-h) + 84px); }

/* 16c. Chip navigation (Services sub-nav, Blog topics) */
.aok-subnav { position: sticky !important; top: var(--aok-header-h); z-index: 60; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--aok-line); }
body.admin-bar .aok-subnav { top: calc(var(--aok-header-h) + 32px); }
.aok-subnav__nav, .aok-chipnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: center; padding: 12px 2px; }
.aok-subnav__nav::-webkit-scrollbar, .aok-chipnav::-webkit-scrollbar { display: none; }
.aok-chipnav { flex-wrap: wrap; padding: 0; }
@media (max-width: 1024px) { .aok-subnav__nav { justify-content: flex-start; } }
@media (max-width: 767px) { .aok-chipnav { flex-wrap: nowrap; justify-content: flex-start; } }
.aok-subnav__nav a, .aok-chipnav a { flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--aok-line); background: rgba(255, 255, 255, .7); color: var(--aok-primary); font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--aok-ease); }
.aok-subnav__nav a:hover, .aok-chipnav a:hover { border-color: var(--aok-accent); transform: translateY(-2px); }
.aok-subnav__nav a.is-active, .aok-chipnav a.is-active { background: var(--aok-primary); border-color: var(--aok-primary); color: #fff; }

/* 16d. Service detail module */
.aok-svc-side .elementor-widget-text-editor p, .aok-svc-block .elementor-widget-text-editor p { margin: 0; }
@media (min-width: 1025px) { .aok-svc-side { position: sticky !important; top: calc(var(--aok-header-h) + 104px); align-self: flex-start; } }
.aok-svc-num { overflow: visible; }
.aok-svc-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: clamp(84px, 9vw, 150px); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(139, 92, 246, .45); }
.aok-svc-icon .elementor-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--aok-accent), var(--aok-primary)); box-shadow: 0 14px 30px rgba(139, 92, 246, .35); }
.aok-svc-icon .elementor-icon svg { fill: #fff; width: 1em; height: 1em; }
.aok-svc-block { border-radius: 24px; border: 1px solid var(--aok-line); background: var(--aok-lavender); transition: border-color .35s ease, box-shadow .45s var(--aok-ease); }
.aok-svc--alt .aok-svc-block { background: #fff; }
.aok-svc-block:hover { border-color: rgba(139, 92, 246, .4); box-shadow: 0 22px 50px rgba(49, 4, 59, .08); }
.aok-svc-label .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.aok-svc-label .elementor-heading-title::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--aok-accent); }
.aok-svc-help .elementor-widget-text-editor p, .aok-svc-help p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--aok-primary); font-weight: 500; }
.aok-checks .elementor-icon-list-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 767px) { .aok-checks .elementor-icon-list-items { grid-template-columns: 1fr; } }
.aok-checks .elementor-icon-list-item { padding: 13px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--aok-line); align-items: flex-start !important; }
.aok-checks .elementor-icon-list-icon { margin-top: 3px; }
.aok-checks .elementor-icon-list-icon svg { width: 15px; height: 15px; }
.aok-chips .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 10px; }
.aok-chips .elementor-icon-list-item { margin: 0 !important; padding: 10px 16px 10px 12px !important; border-radius: 999px; border: 1px solid var(--aok-line); background: #fff; transition: border-color .3s ease, transform .35s var(--aok-ease), background-color .3s ease; }
.aok-svc--alt .aok-chips .elementor-icon-list-item { background: var(--aok-lavender); }
.aok-chips .elementor-icon-list-item:hover { border-color: var(--aok-accent); transform: translateY(-2px); }
.aok-chips .elementor-icon-list-item::after { display: none !important; }
.aok-chips .elementor-icon-list-icon svg { width: 13px; height: 13px; }
.aok-chips .elementor-icon-list-text, .aok-checks .elementor-icon-list-text { font-size: 16px; }

/* 16e. About: statement, horizontal pillars, bento */
.aok-statement p { margin: 0; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.22; letter-spacing: -.015em; color: var(--aok-primary); text-wrap: pretty; }
.aok-sw { display: inline; }
.aok-hscroll { overflow: hidden; }
.aok-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 32px !important; }
@media (max-width: 767px) { .aok-wrap { padding-inline: 20px !important; } }
.aok-hwrap { width: 100%; padding-inline: max(32px, calc((100vw - 1216px) / 2)) !important; }
.aok-htrack { flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; will-change: transform; }
.aok-pillar { flex: 0 0 min(430px, 82vw) !important; min-height: 400px; border-radius: 28px; background: rgba(247, 243, 248, .06); border: 1px solid rgba(247, 243, 248, .12); transition: border-color .4s ease, background-color .4s ease; }
.aok-pillar:hover { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .1); }
.aok-pillar .elementor-widget-text-editor p { margin: 0; }
.aok-pillar-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: 96px; line-height: .9; color: transparent; -webkit-text-stroke: 1.4px rgba(247, 243, 248, .4); }
.aok-pillar-icon .elementor-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; font-size: 22px; background: linear-gradient(135deg, var(--aok-accent), var(--aok-plum)); }
.aok-pillar-icon .elementor-icon svg { fill: #fff; width: 1em; height: 1em; }
.aok-pillar .aok-pillar-bottom { margin-top: auto; }
@media (max-width: 1024px) {
  .aok-hwrap { overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px !important; }
  .aok-hwrap::-webkit-scrollbar { display: none; }
  .aok-pillar { scroll-snap-align: start; min-height: 340px; }
}
.aok-bento { grid-auto-rows: minmax(260px, auto); }
@media (min-width: 1025px) { .aok-bento .aok-b--wide { grid-column: span 2; } }
.aok-b { border-radius: 28px; overflow: hidden; position: relative; isolation: isolate; }
.aok-b .elementor-widget-text-editor p { margin: 0; }
.aok-b--light { background: var(--aok-lavender); }
.aok-b--line { background: #fff; border: 1px solid var(--aok-line); }
.aok-b--dark { background: var(--aok-primary); }
.aok-b--dark::before, .aok-b--plum::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 100% 0%, rgba(139, 92, 246, .5), transparent 70%); }
.aok-b--plum { background: linear-gradient(135deg, var(--aok-plum), var(--aok-primary)); }
.aok-b-quote p { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; }
.aok-b .aok-checks .elementor-icon-list-items { grid-template-columns: 1fr; }

/* 16f. Blog: magazine layout + pager */
@media (min-width: 768px) {
  .aok-posts--magazine .aok-post:first-child { grid-column: span 2; }
}
@media (min-width: 1025px) {
  .aok-posts--magazine .aok-post:first-child { grid-column: span 3; flex-direction: row; }
  .aok-posts--magazine .aok-post:first-child .aok-post__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 380px; }
  .aok-posts--magazine .aok-post:first-child .aok-post__body { justify-content: center; padding: 44px; }
  .aok-posts--magazine .aok-post:first-child .aok-post__title { font-size: 32px; line-height: 1.2; }
  .aok-posts--magazine .aok-post:first-child .aok-post__more { margin-top: 12px; }
}
.aok-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.aok-pager .page-numbers { min-width: 46px; height: 46px; display: inline-grid; place-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--aok-line); color: var(--aok-primary); text-decoration: none; font-weight: 600; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.aok-pager .page-numbers:hover { border-color: var(--aok-accent); }
.aok-pager .page-numbers.current { background: var(--aok-primary); border-color: var(--aok-primary); color: #fff; }
.aok-pager .page-numbers.dots { border-color: transparent; }

/* 16g. Contact */
.aok-contact-row { width: 100%; max-width: 1240px; }
.aok-contact-info { text-align: left; }
.aok-contact-info .elementor-widget-text-editor p { margin: 0; }
.aok-clist .elementor-icon-list-item { padding: 16px 0 !important; border-bottom: 1px solid var(--aok-line); }
.aok-clist .elementor-icon-list-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid !important; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--aok-line); margin-right: 14px; }
.aok-clist .elementor-icon-list-icon svg { width: 16px; height: 16px; }
.aok-clist .elementor-icon-list-text { font-size: 17px; }
.aok-csocial .elementor-social-icon { background: #fff !important; border: 1px solid var(--aok-line); transition: transform .35s var(--aok-ease), background-color .3s ease, border-color .3s ease; }
.aok-csocial .elementor-social-icon svg { fill: var(--aok-primary) !important; }
.aok-csocial .elementor-social-icon:hover { background: var(--aok-primary) !important; border-color: var(--aok-primary); transform: translateY(-3px); }
.aok-csocial .elementor-social-icon:hover svg { fill: #fff !important; }
.aok-form-card { border-radius: 28px; background: #fff; border: 1px solid var(--aok-line); box-shadow: 0 30px 80px rgba(49, 4, 59, .12); text-align: left; }
.aok-form-card div.wpforms-container-full, .aok-form-card .wpforms-container { margin: 0 !important; }
.aok-form-card .wpforms-field { padding: 0 0 18px !important; }
.aok-form-card .wpforms-field-label { font-family: var(--e-global-typography-secondary-font-family), sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: var(--aok-primary) !important; margin: 0 0 8px !important; }
.aok-form-card .wpforms-required-label { color: var(--aok-accent) !important; }
.aok-form-card input[type=text], .aok-form-card input[type=email], .aok-form-card input[type=tel], .aok-form-card select, .aok-form-card textarea { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 52px; padding: 14px 16px !important; border-radius: 14px !important; border: 1px solid var(--aok-line) !important; background: var(--aok-lavender) !important; color: var(--aok-ink) !important; font-family: var(--e-global-typography-text-font-family), sans-serif !important; font-size: 16px !important; box-shadow: none !important; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.aok-form-card textarea { min-height: 140px; resize: vertical; }
.aok-form-card input:focus, .aok-form-card select:focus, .aok-form-card textarea:focus { outline: none !important; border-color: var(--aok-accent) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(139, 92, 246, .15) !important; }
.aok-form-card ::placeholder { color: rgba(43, 22, 49, .5) !important; }
.aok-form-card .wpforms-submit-container { padding: 6px 0 0 !important; }
.aok-form-card button.wpforms-submit { width: 100% !important; height: auto !important; padding: 18px 32px !important; border: 0 !important; border-radius: 999px !important; background: var(--aok-primary) !important; color: #fff !important; font-family: var(--e-global-typography-secondary-font-family), sans-serif !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: 0 14px 30px rgba(49, 4, 59, .22) !important; transition: background-color .3s ease, transform .35s var(--aok-ease), box-shadow .35s var(--aok-ease) !important; }
.aok-form-card button.wpforms-submit:hover { background: var(--aok-accent) !important; transform: translateY(-2px); box-shadow: 0 18px 36px rgba(139, 92, 246, .38) !important; }
.aok-form-card .wpforms-error, .aok-form-card label.wpforms-error { color: #9B1C4A !important; font-size: 13px !important; }
.aok-form-card .wpforms-confirmation-container-full { border-radius: 16px; background: var(--aok-lavender) !important; border: 1px solid var(--aok-line) !important; color: var(--aok-primary) !important; }
@media (max-width: 767px) { .aok-form-card .wpforms-one-half { width: 100% !important; margin-left: 0 !important; } }
.aok-next { counter-reset: aoknext; }
.aok-next-step { position: relative; border-top: 2px solid var(--aok-line); }
.aok-next-step::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 2px; background: var(--aok-accent); transition: width .8s var(--aok-ease); }
.aok-next-step:hover::before { width: 100%; }
.aok-next-step .elementor-widget-text-editor p { margin: 0; }
/* 16h. Contact hero title size */
.aok-contact-info .aok-hero-title .elementor-heading-title { font-size: clamp(40px, 4.4vw, 64px); text-align: left; }
.aok-contact-info .aok-hero-title, .aok-contact-info .aok-hero-lead { margin-inline: 0; }
@media (max-width: 767px) { .aok-contact-info .aok-hero-title .elementor-heading-title { font-size: 38px; } }

/* 17. Process staircase ---------------------------------------------------- */
.aok-process-track .aok-step .aok-step-icon .elementor-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: var(--aok-plum); background: #fff; border: 1px solid var(--aok-line); box-shadow: 0 10px 24px rgba(49, 4, 59, .08); transition: color .5s ease, background-color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .6s var(--aok-ease); }
.aok-process-track .aok-step .aok-step-icon .elementor-icon svg { fill: currentColor; width: 1em; height: 1em; }
.aok-process-track .aok-step.is-active .aok-step-icon .elementor-icon { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--aok-accent), var(--aok-primary)); box-shadow: 0 14px 34px rgba(139, 92, 246, .45); transform: scale(1.08); }
.aok-process-track .aok-step.is-current .aok-step-icon .elementor-icon { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(139, 92, 246, .14), 0 18px 40px rgba(139, 92, 246, .5); }
.aok-step-title .elementor-heading-title { transition: color .5s ease; }
.aok-process-track .aok-step:not(.is-active) .aok-step-title .elementor-heading-title { color: rgba(49, 4, 59, .55); }
.aok-step .aok-step-text { transition: opacity .5s ease; }
.aok-step:not(.is-active) .aok-step-text { opacity: .6; }
.aok-stair { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; display: none; }
.aok-stair path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.aok-stair .aok-stair-base { stroke: var(--aok-line); }
@media (min-width: 1025px) {
  .aok-process-track { align-items: flex-start !important; }
  .aok-pline-w { display: none !important; }
  .aok-stair { display: block; }
  .aok-process-track > .aok-step:nth-child(2) { margin-top: 0; }
  .aok-process-track > .aok-step:nth-child(3) { margin-top: 52px; }
  .aok-process-track > .aok-step:nth-child(4) { margin-top: 104px; }
  .aok-process-track > .aok-step:nth-child(5) { margin-top: 156px; }
  .aok-process-track > .aok-step:nth-child(6) { margin-top: 208px; }
  .aok-process-track > .aok-step:nth-child(7) { margin-top: 0; margin-left: 56px; }
}
@media (max-width: 767px) {
  .aok-step-icon { position: absolute !important; left: 0; top: 0; width: auto !important; }
  .aok-process-track .aok-step .aok-step-icon .elementor-icon { width: 64px; height: 64px; font-size: 21px; }
}
/* 18. Why: horizontal scroll (pinned on desktop, swipe on touch) ----------- */
.aok-hx-wrap { width: 100%; overflow: hidden; }
.aok-hx-track { flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; padding-inline: max(32px, calc((100vw - 1216px) / 2)) !important; will-change: transform; }
.aok-hx-intro, .aok-hx-panel { flex: 0 0 auto !important; height: min(68vh, 600px); min-height: 440px; position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; }
.aok-hx-intro { width: min(64vw, 940px) !important; background: linear-gradient(135deg, var(--aok-primary) 0%, var(--aok-plum) 100%); }
.aok-hx-intro::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, rgba(139, 92, 246, .55), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(27, 2, 34, .55), transparent 70%); }
.aok-hx-intro::after { content: "\2726"; position: absolute; z-index: -1; right: 6%; top: 8%; font-size: clamp(90px, 12vw, 200px); line-height: 1; color: rgba(247, 243, 248, .08); pointer-events: none; }
.aok-hx-giant .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: clamp(56px, 7.4vw, 124px); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; }
.aok-hx-lead { max-width: 520px; }
.aok-hx-intro .elementor-widget-text-editor p, .aok-hx-panel .elementor-widget-text-editor p { margin: 0; }
.aok-hx-panel { width: min(38vw, 540px) !important; background: rgba(247, 243, 248, .05); border: 1px solid rgba(247, 243, 248, .12); transition: border-color .5s ease, background-color .5s ease; }
.aok-hx-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: radial-gradient(80% 70% at 100% 0%, rgba(139, 92, 246, .35), transparent 70%); }
.aok-hx-panel.is-focus, .aok-hx-panel:hover { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .08); }
.aok-hx-panel.is-focus::before, .aok-hx-panel:hover::before { opacity: 1; }
.aok-hx-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: clamp(96px, 10vw, 170px); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(247, 243, 248, .35); transition: color .6s ease, -webkit-text-stroke-color .6s ease; }
.aok-hx-panel.is-focus .aok-hx-num .elementor-heading-title { color: var(--aok-accent); -webkit-text-stroke-color: var(--aok-accent); }
.aok-hx-icon .elementor-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--aok-accent), var(--aok-plum)); box-shadow: 0 14px 30px rgba(139, 92, 246, .35); transition: transform .6s var(--aok-ease); }
.aok-hx-icon .elementor-icon svg { fill: #fff; width: 1em; height: 1em; }
.aok-hx-panel.is-focus .aok-hx-icon .elementor-icon { transform: rotate(-10deg) scale(1.08); }
.aok-hx-title .elementor-heading-title { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.12; }
.aok-hx-progress-w { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 32px; }
.aok-hx-progress { display: flex; align-items: center; gap: 14px; font-family: var(--e-global-typography-secondary-font-family), sans-serif; color: var(--aok-line); }
.aok-hx-count { font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.aok-hx-total { font-size: 14px; opacity: .7; }
.aok-hx-bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(247, 243, 248, .14); overflow: hidden; }
.aok-hx-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--aok-accent), var(--aok-lavender)); transform: scaleX(0); transform-origin: left center; }
@media (min-width: 1025px) { .aok-hx { min-height: 100vh; } }
@media (max-width: 1024px) {
  .aok-hx-wrap { overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .aok-hx-wrap::-webkit-scrollbar { display: none; }
  .aok-hx-intro, .aok-hx-panel { scroll-snap-align: start; height: auto; min-height: 420px; }
  .aok-hx-intro { width: 84vw !important; }
  .aok-hx-panel { width: 74vw !important; }
  .aok-hx-giant .elementor-heading-title { white-space: normal; font-size: clamp(44px, 9vw, 72px); }
}
@media (max-width: 767px) {
  .aok-hx-track { padding-inline: 20px !important; }
  .aok-hx-intro, .aok-hx-panel { width: 84vw !important; min-height: 380px; border-radius: 24px; }
  .aok-hx-progress-w { padding-inline: 20px; }
}
/* 19. Process: horizontal scroll, light variant ---------------------------- */
.aok-hx-giant--wrap .elementor-heading-title { white-space: normal; font-size: clamp(52px, 6vw, 100px); }
.aok-hx--light .aok-hx-panel { width: min(30vw, 420px) !important; height: min(62vh, 520px); min-height: 400px; background: #fff; border-color: var(--aok-line); box-shadow: 0 18px 44px rgba(49, 4, 59, .06); transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease; }
.aok-hx--light .aok-hx-intro { height: min(62vh, 520px); min-height: 400px; }
.aok-hx--light .aok-hx-panel::before { background: radial-gradient(80% 70% at 100% 0%, rgba(139, 92, 246, .14), transparent 70%); }
.aok-hx--light .aok-hx-panel.is-focus, .aok-hx--light .aok-hx-panel:hover { background: #fff; border-color: rgba(139, 92, 246, .55); box-shadow: 0 28px 64px rgba(139, 92, 246, .2); }
.aok-hx--light .aok-hx-num .elementor-heading-title { -webkit-text-stroke-color: rgba(49, 4, 59, .2); }
.aok-hx--light .aok-hx-panel.is-focus .aok-hx-num .elementor-heading-title { color: var(--aok-accent); -webkit-text-stroke-color: var(--aok-accent); }
.aok-hx--light .aok-hx-panel.is-done:not(.is-focus) .aok-hx-num .elementor-heading-title { -webkit-text-stroke-color: rgba(139, 92, 246, .5); }
/* Icon: outlined until its step is reached, then filled */
.aok-hx--light .aok-hx-icon .elementor-icon { width: 68px; height: 68px; font-size: 24px; color: var(--aok-plum); background: var(--aok-lavender); border: 1px solid var(--aok-line); box-shadow: none; transition: color .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease, transform .6s var(--aok-ease); }
.aok-hx--light .aok-hx-icon .elementor-icon svg { fill: currentColor; }
.aok-hx--light .aok-hx-panel.is-done .aok-hx-icon .elementor-icon,
.aok-hx--light .aok-hx-panel.is-focus .aok-hx-icon .elementor-icon { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--aok-accent), var(--aok-primary)); box-shadow: 0 14px 32px rgba(139, 92, 246, .4); }
.aok-hx--light .aok-hx-panel.is-focus .aok-hx-icon .elementor-icon { transform: scale(1.12) rotate(-8deg); box-shadow: 0 0 0 10px rgba(139, 92, 246, .14), 0 18px 40px rgba(139, 92, 246, .5); }
.aok-hx--light .aok-hx-progress { color: var(--aok-plum); }
.aok-hx--light .aok-hx-count { color: var(--aok-primary); }
.aok-hx--light .aok-hx-bar { background: var(--aok-line); }
.aok-hx--light .aok-hx-fill { background: linear-gradient(90deg, var(--aok-accent), var(--aok-primary)); }
@media (max-width: 1024px) { .aok-hx--light .aok-hx-panel { width: 62vw !important; height: auto; min-height: 340px; } .aok-hx--light .aok-hx-intro { height: auto; } .aok-hx-giant--wrap .elementor-heading-title { font-size: clamp(40px, 8vw, 64px); } }
@media (max-width: 767px) { .aok-hx--light .aok-hx-panel { width: 80vw !important; } }
/* 20. Why: scroll story (pinned explainer with a transforming centre visual) */
.aok-story-grid { width: 100%; max-width: 1280px; }
@media (min-width: 1025px) { .aok-story { min-height: 100vh; } }
.aok-story-nav .elementor-widget-text-editor p, .aok-story-item .elementor-widget-text-editor p { margin: 0; }
.aok-story-tabs { position: relative; }
.aok-story-tabs::before { content: none; }
.aok-story-fill-w { position: absolute !important; left: 0; top: 0; bottom: 0; width: 2px !important; margin: 0 !important; z-index: 1; pointer-events: none; }
.aok-story-fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, var(--aok-accent), var(--aok-lavender)); transform: scaleY(0); transform-origin: center top; }
.aok-story-tab { cursor: pointer; padding-left: 0 !important; transition: transform .45s var(--aok-ease); }
.aok-story-tab:hover { transform: translateX(4px); }
.aok-story-tab:focus-visible { outline: 2px solid var(--aok-accent); outline-offset: 4px; border-radius: 8px; }
.aok-story-tab .elementor-heading-title { transition: color .45s ease; }
.aok-story .aok-story-tab .aok-story-tnum .elementor-heading-title { color: rgba(247, 243, 248, .35); }
.aok-story .aok-story-tab .aok-story-ttitle .elementor-heading-title { color: rgba(247, 243, 248, .5); }
.aok-story .aok-story-tab.is-done .aok-story-tnum .elementor-heading-title { color: rgba(139, 92, 246, .8); }
.aok-story .aok-story-tab.is-active .aok-story-tnum .elementor-heading-title { color: var(--aok-accent); }
.aok-story .aok-story-tab.is-active .aok-story-ttitle .elementor-heading-title { color: #fff; }
.aok-story-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: clamp(72px, 7vw, 120px); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--aok-accent); }
.aok-story-title .elementor-heading-title { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; }
.aok-story.is-pinned .aok-story-copy { display: grid !important; align-items: center; }
.aok-story.is-pinned .aok-story-item { grid-area: 1 / 1; }

/* Stage: one glowing platform, four scenes that swap as you scroll */
.aok-story-stage-w { width: 100%; }
.aok-stage { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; margin-inline: auto; }
.aok-stage__glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .45), rgba(139, 92, 246, 0)); animation: aokBreath 6s ease-in-out infinite; }
.aok-stage__base { position: absolute; left: 12%; right: 12%; bottom: 4%; height: 14%; border-radius: 50%; border: 1px solid rgba(247, 243, 248, .14); background: radial-gradient(closest-side, rgba(139, 92, 246, .35), rgba(139, 92, 246, 0)); }
@keyframes aokBreath { 50% { transform: scale(1.08); opacity: .8; } }
.aok-scene { position: absolute; inset: 12% 12% 20%; display: grid; place-items: center; will-change: transform, opacity; }
.aok-scene + .aok-scene { opacity: 0; visibility: hidden; }
@keyframes aokSpin { to { transform: rotate(360deg); } }
/* Strategy: target with orbiting points */
.aok-scene--strategy .r { position: absolute; border-radius: 50%; border: 1.5px solid rgba(247, 243, 248, .22); }
.aok-scene--strategy .r1 { inset: 0; }
.aok-scene--strategy .r2 { inset: 17%; border-style: dashed; border-color: rgba(247, 243, 248, .3); animation: aokSpin 26s linear infinite reverse; }
.aok-scene--strategy .r3 { inset: 33%; border-color: rgba(139, 92, 246, .8); box-shadow: 0 0 40px rgba(139, 92, 246, .35); }
.aok-scene--strategy .core { position: absolute; inset: 43%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--aok-accent) 45%, var(--aok-primary)); box-shadow: 0 0 50px rgba(139, 92, 246, .9); }
.aok-scene--strategy .orbit { position: absolute; inset: 0; animation: aokSpin 9s linear infinite; }
.aok-scene--strategy .orbit--b { inset: 17%; animation-duration: 6s; animation-direction: reverse; }
.aok-scene--strategy .orbit i { position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px rgba(139, 92, 246, 1); }
.aok-scene--strategy .orbit--b i { width: 10px; height: 10px; top: -5px; left: calc(50% - 5px); background: var(--aok-accent); }
/* Creative: three shapes that blend where they meet */
.aok-scene--creative .b { position: absolute; width: 56%; aspect-ratio: 1; mix-blend-mode: screen; animation: aokBlob 9s ease-in-out infinite alternate; }
.aok-scene--creative .b1 { left: 4%; top: 6%; background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 1), rgba(139, 92, 246, .2)); border-radius: 58% 42% 51% 49% / 46% 55% 45% 54%; }
.aok-scene--creative .b2 { right: 4%; top: 14%; background: radial-gradient(circle at 60% 30%, rgba(247, 243, 248, .9), rgba(247, 243, 248, .1)); border-radius: 44% 56% 38% 62% / 55% 41% 59% 45%; animation-delay: -3s; }
.aok-scene--creative .b3 { left: 22%; bottom: 0; background: radial-gradient(circle at 50% 70%, rgba(109, 58, 120, 1), rgba(139, 92, 246, .3)); border-radius: 50% 50% 42% 58% / 40% 60% 40% 60%; animation-delay: -6s; }
.aok-scene--creative .spark { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 10px rgba(247, 243, 248, .6); }
@keyframes aokBlob { 0% { transform: translate(0, 0) rotate(0deg); } 50% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; } 100% { transform: translate(6%, -5%) rotate(25deg); } }
/* Data: tilted glass card with a live chart */
.aok-scene--data { perspective: 900px; }
.aok-scene--data .card { position: relative; width: 86%; aspect-ratio: 1.15; display: flex; align-items: flex-end; gap: 7%; padding: 12% 10%; border-radius: 26px; background: linear-gradient(160deg, rgba(247, 243, 248, .12), rgba(247, 243, 248, .03)); border: 1px solid rgba(247, 243, 248, .18); box-shadow: 0 40px 80px rgba(14, 1, 18, .5); transform: rotateY(-16deg) rotateX(10deg); }
.aok-scene--data .card span { flex: 1; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--aok-accent), rgba(139, 92, 246, .2)); transform-origin: bottom; animation: aokBar 2.6s ease-in-out infinite alternate; }
.aok-scene--data .card span:nth-child(2) { animation-delay: -.5s; } .aok-scene--data .card span:nth-child(3) { animation-delay: -1s; } .aok-scene--data .card span:nth-child(4) { animation-delay: -1.5s; } .aok-scene--data .card span:nth-child(5) { animation-delay: -2s; }
@keyframes aokBar { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
.aok-scene--data svg { position: absolute; left: 10%; right: 10%; top: 12%; bottom: 12%; width: 80%; height: 76%; overflow: visible; }
.aok-scene--data path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .9)); }
/* Optimization: continuous loops around a hub */
.aok-scene--optimize svg { width: 92%; height: 92%; overflow: visible; }
.aok-scene--optimize circle { fill: none; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.aok-scene--optimize .l1 { stroke: var(--aok-accent); stroke-width: 3; stroke-dasharray: 230 84; animation: aokSpin 7s linear infinite; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .8)); }
.aok-scene--optimize .l2 { stroke: rgba(247, 243, 248, .6); stroke-width: 2; stroke-dasharray: 140 99; animation: aokSpin 10s linear infinite reverse; }
.aok-scene--optimize .l3 { stroke: rgba(139, 92, 246, .55); stroke-width: 2; stroke-dasharray: 60 103; animation: aokSpin 5s linear infinite; }
.aok-scene--optimize .hub { position: absolute; inset: 40%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--aok-accent) 50%, var(--aok-primary)); box-shadow: 0 0 46px rgba(139, 92, 246, .9); }

/* Tablet and mobile: visual sticks to the top, reasons scroll beneath it */
@media (max-width: 1024px) {
  .aok-story-tabs { display: none !important; }
  .aok-story-stage { position: sticky !important; top: calc(var(--aok-header-h) + 8px); z-index: 2; background: var(--aok-night); padding: 8px 0 !important; }
  .aok-stage { max-width: 260px; }
  .aok-story-copy { gap: 0 !important; }
  .aok-story-item { min-height: 46vh; justify-content: center; padding: 32px 0 !important; border-top: 1px solid rgba(247, 243, 248, .1); opacity: .35; transition: opacity .5s ease; }
  .aok-story-item.is-active { opacity: 1; }
  .aok-story-num .elementor-heading-title { font-size: 64px; }
}
@media (max-width: 767px) { .aok-stage { max-width: 210px; } .aok-story-item { min-height: 40vh; } }
/* 21. Process card fixes: outlined numbers that fit the card, no tilt */
.aok-hx--light .aok-hx-panel { transform: none; }
.aok-hx.aok-hx--light .aok-hx-num .elementor-heading-title { font-size: clamp(64px, 5.6vw, 104px); color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(49, 4, 59, .22); }
.aok-hx.aok-hx--light .aok-hx-panel.is-done .aok-hx-num .elementor-heading-title { -webkit-text-stroke-color: rgba(139, 92, 246, .55); }
.aok-hx.aok-hx--light .aok-hx-panel.is-focus .aok-hx-num .elementor-heading-title { color: var(--aok-accent); -webkit-text-fill-color: var(--aok-accent); -webkit-text-stroke-color: var(--aok-accent); }

/* 22. Pinned sections: native smooth scrolling fights GSAP pinning, so it is off on pages that pin */
html:has(.aok-story), html:has(.aok-hx), html:has(.aok-hscroll) { scroll-behavior: auto; }


/* 23. Sticky scroll sections (all screen sizes). JS sets the section height; the inner block sticks. */
.aok-story.is-sticky, .aok-hx.is-sticky { display: block !important; padding: 0 !important; min-height: 0 !important; }
.aok-story.is-sticky > .aok-story-grid { position: sticky !important; top: 0; height: 100vh; height: 100svh; margin-inline: auto; padding: 96px 32px 64px !important; display: flex !important; align-items: center !important; }
.aok-hx.is-sticky > .aok-hx-wrap { position: sticky !important; top: 0; height: 100vh; height: 100svh; display: flex !important; align-items: center !important; padding-top: 64px !important; overflow: hidden !important; scroll-snap-type: none !important; }
.aok-hx:not(.is-sticky) .aok-hx-wrap { overflow-x: auto !important; }
.aok-story.is-sticky .aok-story-copy { display: grid !important; align-items: start; }
.aok-story.is-sticky .aok-story-item { grid-area: 1 / 1; }

@media (max-width: 1024px) {
  /* Why: heading, visual and the current reason all fit one screen */
  .aok-story.is-sticky > .aok-story-grid { flex-direction: column !important; justify-content: center !important; gap: 18px !important; padding: 88px 28px 28px !important; }
  .aok-story.is-sticky .aok-story-nav { gap: 0 !important; }
  .aok-story.is-sticky .aok-story-nav .elementor-widget-text-editor { display: none; }
  .aok-story.is-sticky .aok-story-nav h2.elementor-heading-title { font-size: clamp(28px, 5vw, 40px); text-align: center; }
  .aok-story.is-sticky .aok-story-stage { position: relative !important; top: auto; background: none; padding: 0 !important; }
  .aok-story.is-sticky .aok-stage { max-width: min(260px, 32vh); }
  .aok-story.is-sticky .aok-story-item { min-height: 0; padding: 0 !important; border: 0; opacity: 1; text-align: center; align-items: center; }
  .aok-story.is-sticky .aok-story-num .elementor-heading-title { font-size: 52px; }
  .aok-story.is-sticky .aok-story-title .elementor-heading-title { font-size: clamp(24px, 4vw, 32px); }
  .aok-story.is-sticky .aok-story-copy { max-width: 560px; margin-inline: auto; }
  /* Process */
  .aok-hx.is-sticky > .aok-hx-wrap { padding-top: 72px !important; }
  .aok-hx--light .aok-hx-intro, .aok-hx--light .aok-hx-panel { max-height: calc(100svh - 120px); }
}
@media (max-width: 767px) {
  .aok-story.is-sticky > .aok-story-grid { padding: 80px 20px 20px !important; gap: 14px !important; }
  .aok-story.is-sticky .aok-stage { max-width: min(210px, 28vh); }
  .aok-story.is-sticky .aok-story-num .elementor-heading-title { font-size: 44px; }
  .aok-story.is-sticky .aok-story-item .elementor-widget-text-editor p { font-size: 16px; }
  .aok-hx--light .aok-hx-intro, .aok-hx--light .aok-hx-panel { min-height: 0; }
  .aok-hx--light .aok-hx-panel { min-height: 320px; }
}

/* 24. Header: brand sits further in from the left edge, towards the menu */
.elementor-45 .aok-header .aok-header-logo { padding-left: 180px !important; }
.elementor-45 .aok-header .aok-logo { margin-left: 0 !important; }
@media (max-width: 1280px) { .elementor-45 .aok-header .aok-header-logo { padding-left: 110px !important; } }
@media (max-width: 1024px) { .elementor-45 .aok-header .aok-header-logo { padding-left: 32px !important; } }
@media (max-width: 767px) { .elementor-45 .aok-header .aok-header-logo { padding-left: 6px !important; } }

/* 25. Marquee glow: drawn inside the strip and fading to nothing before its edges, so no box shows */
.aok-marquee::before, .aok-marquee::after { display: none !important; }
.aok-marquee { background: radial-gradient(ellipse 34% 50% at 50% 50%, rgba(139, 92, 246, .18), rgba(139, 92, 246, 0) 100%), radial-gradient(ellipse 15% 40% at 50% 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 100%) !important; }

/* 26. Home hero words "Creative" and "Digital": three-tone gradient + 3D flip every 2s (home hero only) */
.aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad {
  display: inline-block;
  background-image: linear-gradient(100deg, var(--e-global-color-heroword1, #6D3A78) 0%, var(--e-global-color-heroword2, #8B5CF6) 35%, var(--e-global-color-heroword3, #C084FC) 65%, var(--e-global-color-heroword1, #6D3A78) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transform-origin: 50% 55%;
  backface-visibility: visible;
  animation: aokFlip 2s cubic-bezier(.65, 0, .35, 1) infinite, aokTone 4s linear infinite !important;
}
.aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad + .aok-grad,
.aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad:last-of-type { animation-delay: .25s, 0s !important; }
@keyframes aokFlip {
  0%, 60% { transform: perspective(700px) rotateX(0deg); }
  100% { transform: perspective(700px) rotateX(360deg); }
}
@keyframes aokTone { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@media (prefers-reduced-motion: reduce) { .aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad { animation: none !important; } }
/* 27. No underline under the home hero words */
.aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad::after, .aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad::before { display: none !important; content: none !important; }

/* 28. Bigger header brand (logo + wordmark), shrinks slightly once scrolled */
#masthead .aok-header .aok-logo img { width: 66px !important; }
#masthead.aok-scrolled .aok-header .aok-logo img { width: 52px !important; }
#masthead .aok-header .aok-wordmark .elementor-heading-title { font-size: calc(var(--e-global-typography-aok_logo_text-font-size, 22px) * 1.22) !important; transition: font-size .35s var(--aok-ease); }
#masthead.aok-scrolled .aok-header .aok-wordmark .elementor-heading-title { font-size: calc(var(--e-global-typography-aok_logo_text-font-size, 22px) * 1.08) !important; }
@media (max-width: 1024px) { #masthead .aok-header .aok-logo img { width: 54px !important; } #masthead.aok-scrolled .aok-header .aok-logo img { width: 46px !important; } }
@media (max-width: 767px) { #masthead .aok-header .aok-logo img { width: 48px !important; } #masthead.aok-scrolled .aok-header .aok-logo img { width: 42px !important; } #masthead .aok-header .aok-wordmark .elementor-heading-title, #masthead.aok-scrolled .aok-header .aok-wordmark .elementor-heading-title { font-size: calc(var(--e-global-typography-aok_logo_text-font-size, 20px) * 1.08) !important; } }

/* 29. Hero refresh: no square tile; home hero gets a slow aurora and a cursor-following light */
.aok-shape--square { display: none !important; }
.aok-hero:not(.aok-hero--page) .aok-hero-bg::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: min(1100px, 120vw); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; opacity: .42; filter: blur(70px);
  background: conic-gradient(from 0deg, rgba(139, 92, 246, .55), rgba(247, 243, 248, 0) 25%, rgba(192, 132, 252, .5) 45%, rgba(247, 243, 248, 0) 65%, rgba(109, 58, 120, .4) 85%, rgba(139, 92, 246, .55));
  animation: aokAurora 26s linear infinite;
}
.aok-hero:not(.aok-hero--page) .aok-hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(520px circle at var(--aok-sx, 50%) var(--aok-sy, 40%), rgba(139, 92, 246, .16), rgba(139, 92, 246, 0) 70%);
}
.aok-hero:not(.aok-hero--page).is-lit .aok-hero-bg::after { opacity: 1; }
@keyframes aokAurora { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (max-width: 767px) { .aok-hero:not(.aok-hero--page) .aok-hero-bg::before { filter: blur(50px); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .aok-hero:not(.aok-hero--page) .aok-hero-bg::before { animation: none; } }

/* 30. Home hero background: mild gradient tinted with #1A1342 (2026-10-03).
   Colours and strengths come from wp-admin > All-Ok Design (CSS variables printed in <head>); the values after the commas are the defaults. */
.aok-hero:not(.aok-hero--page)::before {
  background:
    radial-gradient(55% 50% at 88% 6%, rgba(139, 92, 246, .22), transparent 64%),
    radial-gradient(80% 60% at 50% 110%, rgba(26, 19, 66, .20), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F1FA 45%, #E4E1F1 100%);
  background:
    radial-gradient(55% 50% at 88% 6%, color-mix(in srgb, var(--aok-hero-glow, #8B5CF6) var(--aok-hero-glow-pct, 22%), transparent), transparent 64%),
    radial-gradient(45% 45% at 6% 34%, color-mix(in srgb, var(--aok-hero-tint, #1A1342) calc(var(--aok-hero-tint-pct, 20%) / 2), transparent), transparent 62%),
    radial-gradient(80% 60% at 50% 110%, color-mix(in srgb, var(--aok-hero-tint, #1A1342) var(--aok-hero-tint-pct, 20%), transparent), transparent 70%),
    linear-gradient(180deg, var(--aok-hero-top, #FFFFFF) 0%, var(--aok-hero-mid, #F3F1FA) 45%, var(--aok-hero-bottom, #E4E1F1) 100%);
}
.aok-hero:not(.aok-hero--page)::after { background-image: radial-gradient(rgba(26, 19, 66, .14) 1px, transparent 1.3px); }

/* 31. All-Ok Design Controls hooks (wp-admin > All-Ok Design). Body classes are added only when a switch is off. */
.aok-hero:not(.aok-hero--page) .aok-hero-bg::before { opacity: var(--aok-aurora-op, .42); animation-duration: var(--aok-aurora-speed, 26s); }
@media (max-width: 767px) { .aok-hero:not(.aok-hero--page) .aok-hero-bg::before { opacity: calc(var(--aok-aurora-op, .42) * .83); } }
body.aok-no-aurora .aok-hero .aok-hero-bg::before { display: none !important; }
body.aok-no-cursorlight .aok-hero .aok-hero-bg::after { display: none !important; }
body.aok-no-dots .aok-hero::after { display: none !important; }
.aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad { animation-duration: var(--aok-flip-speed, 2s), calc(var(--aok-flip-speed, 2s) * 2) !important; }
body.aok-no-flip .aok-hero:not(.aok-hero--page) .aok-hero-title .aok-grad { animation: aokTone 4s linear infinite !important; }
html.aok-motion-off { scroll-behavior: auto; }
html.aok-motion-off *, html.aok-motion-off *::before, html.aok-motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }

/* 32. All-Ok Motion controls (Elementor > section > Advanced > All-Ok Motion; Heading > Advanced > All-Ok word reveal).
   These rules only add fallbacks and CSS variables; the defaults reproduce the original design. */
/* Pinned story switched off (or not running): show every reason at full strength */
.aok-story:not(.is-sticky) .aok-story-item { opacity: 1; }
/* Horizontal pinned row (About pillars): when not pinning on this device, it is a swipeable row */
.aok-hscroll:not(.is-pinning) .aok-hwrap { overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; }
.aok-hscroll:not(.is-pinning) .aok-hwrap::-webkit-scrollbar { display: none; }
.aok-hscroll:not(.is-pinning) .aok-pillar { scroll-snap-align: start; }
.aok-hscroll.is-pinning .aok-hwrap { overflow: visible !important; scroll-snap-type: none !important; }
/* Word reveal styles other than "rise" are not clipped by the word mask */
.aok-wr-nomask .aok-w { overflow: visible; }
/* Card group: hover lift and glare strength come from the panel (defaults 6px and 13%) */
.aok-scard:not(.aok-scard--cta):hover { transform: translateY(calc(-1 * var(--aok-card-lift, 6px))); }
.aok-scard:not(.aok-scard--cta)::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, #8B5CF6 var(--aok-glare, 13%), transparent), transparent 70%); }
.aok-noglare .aok-scard:not(.aok-scard--cta)::before { display: none; }

/* 33. Service detail pages (/services/<service>/). Layout is built in Elementor; these rules only style the
   All-Ok classes used there: aok-svcp-hero, aok-crumbs, aok-svcp-split, aok-feat, aok-pstep, aok-faq, aok-related. */
.aok-svcp-hero .aok-hero-inner { max-width: 1240px; }
.aok-svcp-hero .aok-hero-title .elementor-heading-title { font-size: clamp(38px, 4.2vw, 62px); text-align: left; }
.aok-svcp-hero .aok-pill .elementor-heading-title { margin: 0; }
.aok-crumbs p { margin: 0; font-size: 14px; color: var(--aok-plum); }
.aok-crumbs a { color: var(--aok-primary); text-decoration: none; font-weight: 600; }
.aok-crumbs a:hover { color: var(--aok-accent); }
.aok-crumbs .sep { margin: 0 8px; opacity: .6; }
.aok-svcp-split .elementor-widget-text-editor p { margin: 0 0 14px; }
.aok-svcp-split .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.aok-feat { height: 100%; border-radius: 24px; background: #fff; border: 1px solid var(--aok-line); transition: transform .45s var(--aok-ease), box-shadow .45s var(--aok-ease), border-color .35s ease; }
.aok-feat:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, .4); box-shadow: 0 24px 56px rgba(49, 4, 59, .1); }
.aok-feat .elementor-widget-text-editor p { margin: 0; }
.aok-feat-ic .elementor-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 20px; color: var(--aok-plum); background: var(--aok-lavender); border: 1px solid var(--aok-line); transition: color .35s ease, background .35s ease, transform .45s var(--aok-ease); }
.aok-feat-ic .elementor-icon svg { width: 1em; height: 1em; fill: currentColor; }
.aok-feat:hover .aok-feat-ic .elementor-icon { color: #fff; background: linear-gradient(135deg, var(--aok-accent), var(--aok-primary)); border-color: transparent; transform: rotate(-8deg); }
.aok-pstep { position: relative; height: 100%; border-radius: 24px; background: #fff; border: 1px solid var(--aok-line); }
.aok-pstep-num .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 800; font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(139, 92, 246, .55); }
.aok-pstep .elementor-widget-text-editor p { margin: 0; }
.aok-faq .elementor-toggle-item { border-bottom: 1px solid var(--aok-line); }
.aok-faq .elementor-tab-title { padding: 22px 4px !important; border: 0 !important; }
.aok-faq .elementor-tab-title a, .aok-faq .elementor-toggle-title { color: var(--aok-primary); font-weight: 600; font-size: 18px; text-decoration: none; }
.aok-faq .elementor-tab-title.elementor-active a, .aok-faq .elementor-tab-title.elementor-active .elementor-toggle-title { color: var(--aok-plum); }
.aok-faq .elementor-toggle-icon { color: var(--aok-accent); }
.aok-faq .elementor-tab-content { padding: 0 4px 22px !important; border: 0 !important; color: var(--e-global-color-text); }
.aok-faq .elementor-tab-content p { margin: 0; }
.aok-related .elementor-icon-list-item a { color: var(--aok-primary); }
@media (max-width: 1024px) { .aok-svcp-hero .aok-hero-title .elementor-heading-title { text-align: center; } .aok-svcp-hero .aok-crumbs, .aok-svcp-hero .aok-hero-lead { text-align: center; } }

/* 34. Mobile and tablet fixes (2026-10-04) */
/* Header: logo left, hamburger right on one row. The open menu drops down below the header instead of
   pushing the layout wider than the screen. */
@media (max-width: 1024px) {
	#masthead .aok-header { flex-wrap: nowrap !important; position: relative; }
	#masthead .aok-header-nav { flex: 0 0 auto !important; width: auto !important; min-width: 0; padding-left: 0 !important; }
	#masthead .aok-nav, #masthead .aok-nav > .elementor-widget-container, #masthead .aok-nav .hfe-nav-menu { width: auto !important; position: static !important; }
	#masthead .aok-nav nav.hfe-dropdown { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; width: auto !important; z-index: 9999; max-height: calc(100svh - 110px); overflow-y: auto; }
	#masthead .aok-nav .hfe-nav-menu__toggle { margin-left: auto; }
}
/* Metrics row: two neat columns on tablet and mobile (the gap made 50% + 50% wrap into one column) */
@media (max-width: 1024px) {
	.aok-metrics-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; }
	.aok-metric { width: auto !important; max-width: none !important; }
}
/* Service cards: on phones each card is only as tall as its content */
@media (max-width: 767px) {
	.aok-scards { grid-template-rows: none !important; grid-auto-rows: auto !important; }
}
/* Back-to-top button in brand colours */
#ast-scroll-top { background: var(--aok-primary) !important; color: #fff !important; border-radius: 14px !important; box-shadow: 0 10px 24px rgba(49, 4, 59, .25); }
#ast-scroll-top:hover { background: var(--aok-accent) !important; }
/* All-Ok illustration and vertical marquee always fill their column (they are drawn with absolute layers, so they would otherwise collapse to 0 width when the column centres its content) */
.elementor-widget-aok-illo, .elementor-widget-aok-vmarquee { width: 100%; align-self: stretch; }
@media (max-width: 767px) { .aok-illo { max-width: 360px; } }

/* Hero services marquee: readable size on phones (its own CSS goes down to 10px) */
@media (max-width: 767px) { .aok-mq__list a, .aok-mq__list span.t { font-size: 13px !important; } }

/* Header dropdown is positioned against the whole header row, not the small hamburger column */
@media (max-width: 1024px) { #masthead .aok-header-nav { position: static !important; } }

/* 35. Image feature sections (service pages, Services, About, Blog, Contact). Built in Elementor with native
   Image widgets (real <img> with alt text, lazy loading, responsive srcset). These rules add the frame,
   the soft gradient shape behind the photo, the floating badge and the hover zoom. */
.aok-imgfeat-media { position: relative; isolation: isolate; padding: 0 0 26px; }
.aok-imgfeat-media::before { content: ""; position: absolute; z-index: -1; left: 7%; right: -4%; top: 9%; bottom: 2%; border-radius: 34px; background: linear-gradient(135deg, var(--aok-accent), var(--aok-plum)); opacity: .22; transform: rotate(-3deg); transition: transform .8s var(--aok-ease); }
.aok-imgfeat-media--rev::before { left: -4%; right: 7%; transform: rotate(3deg); }
.aok-imgfeat-media::after { content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; left: -26px; top: -26px; background-image: radial-gradient(rgba(109, 58, 120, .35) 1.6px, transparent 2px); background-size: 14px 14px; }
.aok-imgfeat-media--rev::after { left: auto; right: -26px; }
.aok-imgfeat-media:hover::before { transform: rotate(-1deg) scale(1.02); }
.aok-imgfeat-media--rev:hover::before { transform: rotate(1deg) scale(1.02); }
.aok-imgfeat-img, .aok-imgfeat-img2 { position: relative; z-index: 1; }
.aok-imgfeat-img .elementor-widget-container, .aok-imgfeat-img2 .elementor-widget-container { overflow: hidden; border-radius: 28px; box-shadow: 0 30px 70px rgba(49, 4, 59, .18); }
.aok-imgfeat-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--aok-ease); }
.aok-imgfeat-media:hover .aok-imgfeat-img img { transform: scale(1.045); }
/* Optional second, smaller photo overlapping the corner (About page) */
.aok-imgfeat-media--duo { padding-bottom: 64px; }
.aok-imgfeat-media--duo .aok-imgfeat-img { width: 84% !important; }
.aok-imgfeat-img2 { position: absolute !important; z-index: 2; right: 0; bottom: 0; width: 44% !important; }
.aok-imgfeat-img2 .elementor-widget-container { border: 6px solid #fff; border-radius: 24px; }
.aok-imgfeat-img2 img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Floating badge */
.aok-imgfeat-badge { position: absolute !important; z-index: 3; left: 24px; bottom: 0; width: auto !important; }
.aok-imgfeat-media--rev .aok-imgfeat-badge { left: auto; right: 24px; }
.aok-imgfeat-media--duo .aok-imgfeat-badge { bottom: 34px; left: 24px; right: auto; }
.aok-imgfeat-badge .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); border: 1px solid var(--aok-line); box-shadow: 0 18px 40px rgba(49, 4, 59, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--e-global-typography-primary-font-family), Poppins, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--aok-primary); white-space: nowrap; }
.aok-imgfeat-badge .elementor-heading-title::before { content: ""; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--aok-accent); animation: aokPing 2.4s ease-out infinite; }
.aok-imgfeat .aok-checks .elementor-icon-list-text { font-size: 17px; }
@media (max-width: 767px) {
  .aok-imgfeat-media::after { display: none; }
  .aok-imgfeat-media::before { left: 4%; right: -2%; }
  .aok-imgfeat-media--rev::before { left: -2%; right: 4%; }
  .aok-imgfeat-badge { left: 14px; }
  .aok-imgfeat-media--rev .aok-imgfeat-badge { right: 14px; }
  .aok-imgfeat-badge .elementor-heading-title { font-size: 13px; padding: 10px 16px 10px 12px; }
  .aok-imgfeat-img .elementor-widget-container { border-radius: 22px; }
}
/* 36. Desktop header fix (2026-10-04): bigger logo icon (wordmark text unchanged) and the menu kept on one line.
   The logo column was a fixed 22% with a large left padding, so the icon was being squeezed by flexbox. */
@media (min-width: 1025px) {
	#masthead .aok-header { flex-wrap: nowrap !important; }
	#masthead .aok-header-logo { flex: 0 0 auto !important; width: auto !important; }
	#masthead .aok-header .aok-logo { flex: 0 0 auto !important; width: auto !important; }
	#masthead .aok-header .aok-logo img { width: 72px !important; max-width: none !important; }
	#masthead.aok-scrolled .aok-header .aok-logo img { width: 58px !important; }
	#masthead .aok-header-nav { flex: 1 1 auto !important; width: auto !important; min-width: 0; padding-left: 0 !important; }
	#masthead .aok-header-cta-wrap { flex: 0 0 auto !important; width: auto !important; }
	#masthead .aok-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu { flex-wrap: nowrap !important; }
	#masthead .aok-nav .hfe-nav-menu > .menu-item { flex: 0 0 auto; }
	#masthead .aok-nav .hfe-nav-menu .menu-item a.hfe-menu-item { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1366px) {
	.elementor-45 .aok-header .aok-header-logo { padding-left: 24px !important; }
	#masthead .aok-nav .hfe-nav-menu .menu-item a.hfe-menu-item { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
	.elementor-45 .aok-header .aok-header-logo { padding-left: 0 !important; }
	#masthead .aok-header .aok-logo img { width: 64px !important; }
	#masthead .aok-nav .hfe-nav-menu .menu-item a.hfe-menu-item { padding-left: 9px !important; padding-right: 9px !important; }
}
/* 37. Home hero: a little more breathing room between the header and the hero heading on desktop */
@media (min-width: 1025px) { body.home .aok-hero { padding-top: 190px !important; } }

/* 38. Why (scroll story) on desktop: everything fits inside the pinned screen, whatever the window height.
   On shorter laptop screens the list and the 4th reason were running past the bottom of the section. */
@media (min-width: 1025px) {
	.aok-story.is-sticky > .aok-story-grid { padding: calc(var(--aok-header-h) + 20px) 32px 36px !important; }
}
@media (min-width: 1025px) and (max-height: 920px) {
	.aok-story.is-sticky .aok-story-nav { gap: 2.6vh !important; }
	.aok-story.is-sticky .aok-story-nav h2.elementor-heading-title { font-size: clamp(28px, 5vh, 48px) !important; line-height: 1.1; }
	.aok-story.is-sticky .aok-story-nav .elementor-widget-text-editor p { font-size: clamp(15px, 2vh, 18px) !important; line-height: 1.5; }
	.aok-story.is-sticky .aok-story-tabs { gap: .8vh !important; }
	.aok-story.is-sticky .aok-story-tab { padding-top: 1.1vh !important; padding-bottom: 1.1vh !important; }
	.aok-story.is-sticky .aok-story-item { gap: 1.6vh !important; }
	.aok-story.is-sticky .aok-story-num .elementor-heading-title { font-size: clamp(48px, 10vh, 104px) !important; }
	.aok-story.is-sticky .aok-story-title .elementor-heading-title { font-size: clamp(24px, 4.4vh, 40px) !important; }
	.aok-story.is-sticky .aok-story-item .elementor-widget-text-editor p { font-size: clamp(15px, 2.2vh, 20px) !important; line-height: 1.55 !important; }
	.aok-story.is-sticky .aok-stage { max-width: min(470px, 58vh); }
}
@media (min-width: 1025px) and (max-height: 680px) {
	.aok-story.is-sticky .aok-story-nav .elementor-widget-text-editor { display: none; }
	.aok-story.is-sticky > .aok-story-grid { padding-bottom: 20px !important; }
}
/* 39. Services dropdown on desktop: 3 x 3 grid of services with hover effects */
@media (min-width: 1025px) {
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu { position: relative; }
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu {
		display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
		width: 760px !important; min-width: 760px !important; padding: 12px !important;
		left: 50% !important; right: auto !important; transform: translate(-50%, 14px);
		transition: opacity .3s ease, visibility .3s ease, transform .45s var(--aok-ease) !important;
		background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	}
	/* invisible bridge so the menu stays open while the pointer moves down to it */
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu:hover > .sub-menu,
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu:focus-within > .sub-menu { transform: translate(-50%, 6px); }

	/* items fade up one after another when the menu opens */
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li { margin: 0 !important; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s var(--aok-ease); }
	#masthead .aok-nav .hfe-has-submenu:hover > .sub-menu > li,
	#masthead .aok-nav .hfe-has-submenu:focus-within > .sub-menu > li { opacity: 1; transform: none; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(1) { transition-delay: .03s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(2) { transition-delay: .06s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(3) { transition-delay: .09s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(4) { transition-delay: .12s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(5) { transition-delay: .15s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(6) { transition-delay: .18s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(7) { transition-delay: .21s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(8) { transition-delay: .24s; }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li:nth-child(9) { transition-delay: .27s; }

	/* each service tile */
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item {
		position: relative; overflow: hidden; display: flex !important; align-items: center; justify-content: flex-start !important; text-align: left !important; gap: 10px;
		min-height: 54px; height: 100%; padding: 12px 34px 12px 14px !important; white-space: normal; line-height: 1.3;
		border: 1px solid transparent !important; border-radius: 14px; font-size: 15px; font-weight: 500;
		transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--aok-ease), box-shadow .35s ease !important;
	}
	/* small accent dot that grows into a glowing gem */
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item::before {
		content: ""; position: relative !important; inset: auto !important; display: block !important; flex: 0 0 auto; width: 8px !important; height: 8px !important; border-radius: 50%;
		background: var(--aok-accent); opacity: .45; transition: transform .35s var(--aok-ease), opacity .3s ease, box-shadow .35s ease;
	}
	/* arrow that slides in on hover */
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item::after {
		content: "\2192"; position: absolute; right: 14px; top: 50%; font-size: 16px; color: var(--aok-accent);
		opacity: 0; transform: translate(-8px, -50%); transition: opacity .3s ease, transform .35s var(--aok-ease);
		background: none; width: auto; height: auto;
	}
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item:hover,
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item:focus-visible {
		padding-left: 14px !important; color: var(--aok-plum);
		background: linear-gradient(135deg, var(--aok-lavender), rgba(139, 92, 246, .12)) !important;
		border-color: rgba(139, 92, 246, .28) !important; transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(139, 92, 246, .18);
	}
	#masthead .aok-nav .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item:hover::before,
	#masthead .aok-nav .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item:focus-visible::before { opacity: 1; transform: scale(1.5); box-shadow: 0 0 0 4px rgba(139, 92, 246, .18), 0 0 12px rgba(139, 92, 246, .8); }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item:hover::after,
	#masthead .aok-nav .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
	/* the page you are on */
	#masthead .aok-nav .hfe-has-submenu > .sub-menu .current-menu-item > a.hfe-sub-menu-item { background: var(--aok-lavender) !important; color: var(--aok-plum); }
	#masthead .aok-nav .hfe-has-submenu > .sub-menu .current-menu-item > a.hfe-sub-menu-item::before { opacity: 1; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu { width: 660px !important; min-width: 660px !important; }
}
@media (prefers-reduced-motion: reduce) {
	#masthead .aok-nav .hfe-has-submenu > .sub-menu > li, #masthead .aok-nav .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item { transition: none !important; }
}
/* 40. Services grid: every service name on one line; columns size to the longest name */
@media (min-width: 1025px) {
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu {
		grid-template-columns: repeat(3, max-content) !important; width: max-content !important; min-width: 0 !important; column-gap: 8px;
	}
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu > li { border: 0 !important; background: transparent !important; box-shadow: none !important; }
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item { white-space: nowrap !important; padding-right: 40px !important; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
	#masthead .aok-nav nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) .hfe-has-submenu > .sub-menu a.hfe-sub-menu-item { font-size: 14px; padding-right: 32px !important; }
}