/* AKOTECH Dynamics – UI refresh. Everything is scoped to html.akui. */

html.akui {
	--ak-ink: #020626;
	--ak-ink-2: #0A1035;
	--ak-text: #4A4458;
	--ak-muted: #6B6478;
	--ak-line: #ECEAF1;
	--ak-soft: #F7F6FA;
	--ak-orange: #FF5100;
	--ak-orange-text: #C23D00;
	--ak-orange-soft: #FFF1E8;
	--ak-cyan: #00C3F2;
	--ak-radius: 22px;
	--ak-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ak-serif: 'Instrument Serif', Georgia, serif;
	scroll-behavior: smooth;
}

/* ---------- Typography: one family everywhere (icons excluded) ---------- */
html.akui body,
html.akui body :is(h1, h2, h3, h4, h5, h6, p, a, li, span, strong, em, b, label, input, select, textarea, button, blockquote, figcaption, td, th, dt, dd, div):not(i):not(svg):not([class*="fa-"]):not([class^="fa"]):not([class*="eicon"]):not([class*="icon-"]):not([class*="dashicons"]):not(.jw-icon):not(#site-topbar *):not(#site-header *):not(#site-header-sticky *):not(#off-canvas-right *) {
	font-family: var(--ak-font) !important;
}
html.akui body { color: var(--ak-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Headings: big titles are heavy and tight; smaller headings and sentence-length
   sub-headings stay readable (normal spacing, comfortable line height). */
html.akui body :is(h1, h2, h3, h4, h5, h6),
html.akui .elementor-heading-title {
	font-weight: 700 !important;
	letter-spacing: -0.012em !important;
	line-height: 1.3 !important;
}
html.akui h1.elementor-heading-title,
html.akui h2.elementor-heading-title,
html.akui .jw-headline--direction-vertical .jw-headline__second {
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.12 !important;
}
html.akui :is(p, div, span).elementor-heading-title {
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.65 !important;
}
/* Side-by-side headline (label + sentence): the sentence reads as an intro line. */
html.akui .jw-headline--direction-horizontal { align-items: center; gap: 18px; }
html.akui .jw-headline--direction-horizontal .jw-headline__second {
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.55 !important;
	font-size: 17px !important;
}
html.akui h1.elementor-heading-title,
html.akui .page-title-inner {
	font-size: clamp(38px, 4.4vw, 60px) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.045em !important;
}
html.akui .jw-headline--direction-vertical .jw-headline__second { font-size: clamp(28px, 3.2vw, 44px) !important; }
html.akui .jw-headline__first.ak-empty { display: none !important; }
html.akui body p,
html.akui .elementor-text-editor,
html.akui .elementor-widget-text-editor { line-height: 1.7; }
html.akui ::selection { background: var(--ak-orange); color: var(--ak-ink); }

/* Section labels ("WHAT WE DO", "FAQs"…) become small pills */
html.akui .jw-headline__first {
	display: inline-block !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: var(--ak-orange-text) !important;
	background: var(--ak-orange-soft) !important;
	padding: 7px 14px !important;
	border-radius: 999px !important;
	margin-bottom: 14px !important;
}

/* Italic serif accent: wrap a word in <em class="ak-accent"> in any heading */
html.akui .ak-accent,
html.akui h1 em, html.akui h2 em {
	font-family: var(--ak-serif) !important;
	font-style: italic;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	color: var(--ak-orange);
}

/* ---------- Buttons ---------- */
html.akui .elementor-button,
html.akui .btn, html.akui a.button, html.akui button.button,
html.akui .metform-btn, html.akui input[type="submit"], html.akui .wpcf7-submit {
	border-radius: 999px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease !important;
}
html.akui .elementor-button:hover,
html.akui .btn:hover, html.akui a.button:hover, html.akui .metform-btn:hover, html.akui input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(255, 81, 0, .26);
}

/* ---------- Cards ---------- */
html.akui .jw-services,
html.akui .elementor-widget-icon-box > .elementor-widget-container,
html.akui .elementor-widget-image-box > .elementor-widget-container,
html.akui .jw-team-member,
html.akui .jw-posts__item,
html.akui .jw-carousel__item-inner {
	border-radius: var(--ak-radius) !important;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease !important;
}
html.akui .jw-services:hover,
html.akui .elementor-widget-icon-box > .elementor-widget-container:hover,
html.akui .jw-team-member:hover,
html.akui .jw-posts__item:hover,
html.akui .jw-carousel__item-inner:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 54px rgba(2, 6, 38, .12) !important;
}
html.akui .elementor-widget-image img,
html.akui .jw-posts__thumb img,
html.akui .project-thumbnail img { border-radius: 18px; }

/* ---------- FAQ toggles ---------- */
html.akui .elementor-toggle .elementor-toggle-item {
	border: 1px solid var(--ak-line) !important;
	border-radius: 18px !important;
	margin-bottom: 12px !important;
	background: #FFFFFF;
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}
html.akui .elementor-toggle .elementor-toggle-item:hover { border-color: #FFC4A3 !important; }
html.akui .elementor-toggle .elementor-tab-title {
	border: 0 !important;
	padding: 22px 24px 22px 72px !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	color: var(--ak-ink) !important;
}
html.akui .elementor-toggle .elementor-tab-title.elementor-active { color: var(--ak-orange-text) !important; }
html.akui .elementor-toggle .elementor-tab-content {
	border: 0 !important;
	padding: 0 24px 22px !important;
	color: var(--ak-text);
	line-height: 1.7;
}

/* ---------- Forms ---------- */
html.akui .mf-input, html.akui .wpcf7-form-control:not([type="submit"]),
html.akui input[type="text"], html.akui input[type="email"], html.akui input[type="tel"], html.akui textarea, html.akui select {
	border-radius: 14px !important;
	border: 1.5px solid #D9D6E2 !important;
	min-height: 50px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
html.akui textarea { min-height: 120px; }
html.akui :is(.mf-input, input, textarea, select):focus {
	border-color: var(--ak-ink) !important;
	box-shadow: 0 0 0 4px rgba(0, 195, 242, .18) !important;
	outline: none;
}

/* ---------- Counters ---------- */
html.akui .elementor-counter-number-wrapper { font-weight: 800 !important; letter-spacing: -0.04em; }

/* ---------- Footer ---------- */
html.akui .site-footer { background: var(--ak-ink) !important; }
html.akui .site-footer a { transition: color .2s ease; }
html.akui .site-footer a:hover { color: var(--ak-orange) !important; }

/* ---------- Accessibility ---------- */
html.akui a:focus-visible,
html.akui button:focus-visible,
html.akui [tabindex]:focus-visible {
	outline: 3px solid var(--ak-cyan) !important;
	outline-offset: 3px;
	border-radius: 8px;
}

/* ---------- Scroll reveal (classes added by akotech-ui.js) ---------- */
html.akui .ak-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
html.akui .ak-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.akui { scroll-behavior: auto; }
	html.akui .ak-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	html.akui * { transition-duration: 0s !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	html.akui .jw-headline--direction-vertical .jw-headline__second { font-size: 30px !important; }
	html.akui .elementor-toggle .elementor-tab-title { padding: 18px !important; font-size: 16px !important; }
}

/* ---------- "How we work" process cards ---------- */
html.akui .ak-process { background: #FFF7F1; }
html.akui .ak-process .jw-headline { text-align: center; }
html.akui .ak-step > .elementor-widget-container {
	height: 100%;
	box-sizing: border-box;
	padding: 30px 28px !important;
	background: #FFFFFF;
	border: 1px solid #F4E3D6;
}
html.akui .ak-step .elementor-icon {
	width: 52px; height: 52px; font-size: 20px !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	border-radius: 14px; background: var(--ak-orange-soft); color: var(--ak-orange-text) !important;
}
html.akui .ak-step .elementor-icon svg { fill: var(--ak-orange-text); width: 22px; height: 22px; }
html.akui .ak-step .elementor-icon-box-title { font-size: 20px !important; margin: 18px 0 10px !important; }
html.akui .ak-step .elementor-icon-box-description { font-size: 15px; line-height: 1.6; color: var(--ak-text); }
/* Without the new look (visitors before launch) the cards still read cleanly. */
.ak-step > .elementor-widget-container { padding: 28px; border: 1px solid #F4E3D6; border-radius: 20px; background: #FFFFFF; height: 100%; }

/* Label pills: hug their text; side-by-side headlines keep them at the start. */
html.akui .jw-headline__first { width: auto !important; max-width: max-content; }
html.akui .jw-headline--direction-vertical { align-items: center; }
html.akui .jw-headline--direction-horizontal .jw-headline__first { align-self: flex-start !important; }
html.akui .ak-process .jw-headline { display: flex; flex-direction: column; align-items: center; }

/* FAQ: the theme draws the round arrow; keep it inside the card, hide the duplicate icon. */
html.akui .elementor-toggle .elementor-tab-title::before { left: 22px !important; }
html.akui .elementor-toggle .elementor-toggle-icon { display: none !important; }
html.akui .elementor-toggle .elementor-toggle-title { color: inherit !important; text-decoration: none; }

/* Featured project card: dark fade under the title so it stays readable on any image. */
html.akui .projects-style3 .project-thumbnail { position: relative; }
html.akui .projects-style3 .project-thumbnail::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(2, 6, 38, .88) 0%, rgba(2, 6, 38, .45) 38%, rgba(2, 6, 38, 0) 65%);
	pointer-events: none;
}
html.akui .projects-style3 .project-info { z-index: 2; }

/* Footer client names (replaces the theme's demo logo strip). */
html.akui .ak-clients, .ak-clients { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin: 0; font-size: 18px; font-weight: 800; color: rgba(255, 255, 255, .78); letter-spacing: -0.01em; }

/* Label pill text: the widget colours the inner label (often white for the theme's
   solid orange box), so set it on the label itself to stay readable on the pale pill. */
html.akui .jw-headline__first .jw-headline__label {
	color: var(--ak-orange-text) !important;
	background: transparent !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	padding: 0 !important;
}

/* MetForm dropdowns contain a hidden search input: keep it unstyled. */
html.akui :is(.mf_select__control, .mf_multiselect__control) input {
	border: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
html.akui :is(.mf_select__control, .mf_multiselect__control) { border-radius: 14px !important; min-height: 50px; }