/* BUILD 1.2.2 — 2026-08-16 · Kaianat United — 180D Agency */

/* ====================================================================
   0. DESIGN TOKENS
   ==================================================================== */
:root {
	--kaianat-navy:            #0a2a3f;
	--kaianat-navy-2:          #0c3f59;
	--kaianat-brand:           #0c7b9a;
	--kaianat-brand-dark:      #095f78;
	--kaianat-turquoise:       #22c4c8;
	--kaianat-turquoise-soft:  #7fdcdd;
	--kaianat-bg:              #f4f7f9;
	--kaianat-fg:              #0a2233;
	--kaianat-card:            #ffffff;
	--kaianat-muted:           #eef3f6;
	--kaianat-muted-fg:        #5b6f7a;
	--kaianat-border:          rgba(10, 42, 63, 0.10);
	--kaianat-border-light:    rgba(255, 255, 255, 0.15);
	--kaianat-index:           #b9ccd4;

	--kaianat-font:            "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
	--kaianat-font-display:    "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;

	--kaianat-radius:          4px;
	--kaianat-radius-md:       0.5rem;
	--kaianat-radius-lg:       1rem;
	--kaianat-radius-xl:       1.5rem;

	--kaianat-shadow-sm:       0 1px 3px rgba(10, 42, 63, 0.06);
	--kaianat-shadow-md:       0 4px 14px -4px rgba(10, 42, 63, 0.10);
	--kaianat-shadow-lg:       0 10px 30px -10px rgba(10, 42, 63, 0.18);
	--kaianat-shadow-xl:       0 20px 45px -15px rgba(10, 42, 63, 0.28);
	--kaianat-shadow-brand:    0 10px 30px -12px rgba(12, 123, 154, 0.60);

	--kaianat-container:       1400px;
	--kaianat-ease:            cubic-bezier(0.16, 1, 0.3, 1);
	--kaianat-transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	/* Gradients — copied verbatim from the source build */
	--kaianat-grad-text:       linear-gradient(to left, var(--kaianat-turquoise), var(--kaianat-turquoise-soft) 55%, #ffffff);
	--kaianat-grad-text-2:     linear-gradient(to left, var(--kaianat-turquoise), var(--kaianat-turquoise-soft));
	--kaianat-grad-stat:       linear-gradient(to bottom, #ffffff, var(--kaianat-turquoise-soft));
	--kaianat-grad-card-1:     linear-gradient(145deg, rgba(12, 123, 154, 0.22) 0%, rgba(10, 42, 63, 0.95) 100%);
	--kaianat-grad-card-2:     linear-gradient(145deg, rgba(18, 127, 156, 0.22) 0%, rgba(10, 42, 63, 0.95) 100%);
	--kaianat-grad-card-3:     linear-gradient(145deg, rgba(26, 138, 160, 0.22) 0%, rgba(10, 42, 63, 0.95) 100%);
	--kaianat-grad-card-4:     linear-gradient(145deg, rgba(34, 196, 200, 0.22) 0%, rgba(10, 42, 63, 0.95) 100%);

	/* Deep gradients — value deck + certification badges */
	--kaianat-grad-deep-1:     linear-gradient(155deg, #12506d 0%, #061c2b 100%);
	--kaianat-grad-deep-2:     linear-gradient(155deg, #0c7b9a 0%, #072634 100%);
	--kaianat-grad-deep-3:     linear-gradient(155deg, #14657f 0%, #05202f 100%);
	--kaianat-grad-deep-4:     linear-gradient(155deg, #1a92a4 0%, #082a3a 100%);
}

/* ====================================================================
   1. HORIZONTAL-SCROLL DEFENSE — all nine layers, from the first build
   ==================================================================== */

/* 1.1 Box sizing */
[class^="kaianat-"], [class*=" kaianat-"],
[class^="kaianat-"] *, [class*=" kaianat-"] *,
[class^="kaianat-"] *::before, [class*=" kaianat-"] *::before,
[class^="kaianat-"] *::after,  [class*=" kaianat-"] *::after {
	box-sizing: border-box;
}

/* 1.2 Section-level clip */
.kaianat-section,
.kaianat-hero,
.kaianat-page-hero,
.kaianat-cta,
.kaianat-footer,
.kaianat-header,
.kaianat-contact,
.kaianat-form {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* 1.3 Grid children must shrink below intrinsic width */
[class^="kaianat-"][class*="-grid"] > *,
[class^="kaianat-"][class*="-row"] > *,
[class^="kaianat-"][class*="-cols"] > *,
.kaianat-form-row > *,
.kaianat-contact-grid > *,
.kaianat-form-field {
	min-width: 0;
	max-width: 100%;
}

/* 1.4 Media never breaks out */
[class^="kaianat-"] img, [class*=" kaianat-"] img,
[class^="kaianat-"] iframe, [class*=" kaianat-"] iframe,
[class^="kaianat-"] video, [class*=" kaianat-"] video,
[class^="kaianat-"] svg, [class*=" kaianat-"] svg {
	max-width: 100%;
}
:where([class^="kaianat-"], [class*=" kaianat-"]) :where(img, iframe) {
	height: auto;
}

/* 1.5 Form controls */
[class^="kaianat-"] input, [class*=" kaianat-"] input,
[class^="kaianat-"] textarea, [class*=" kaianat-"] textarea,
[class^="kaianat-"] select, [class*=" kaianat-"] select,
[class^="kaianat-"] button, [class*=" kaianat-"] button {
	max-width: 100%;
}
[class^="kaianat-"] input[type="text"],
[class^="kaianat-"] input[type="email"],
[class^="kaianat-"] input[type="tel"],
[class^="kaianat-"] input[type="url"],
[class^="kaianat-"] textarea,
[class^="kaianat-"] select {
	width: 100%;
}

/* 1.6 Long unbroken Latin strings inside RTL text */
[class^="kaianat-"] p,
[class^="kaianat-"] a,
[class^="kaianat-"] span,
[class^="kaianat-"] li,
[class^="kaianat-"] td,
[class^="kaianat-"] [class*="email"],
[class^="kaianat-"] [class*="phone"] {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* 1.7 Form rows collapse on mobile */
.kaianat-form-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
	.kaianat-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 1.8 Honeypot */
.kaianat-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* 1.9 Form-section containment at every level */
.elementor-widget-kaianat-contact-form,
.kaianat-contact,
.kaianat-form-card,
.kaianat-contact form {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}
.kaianat-contact-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
	.kaianat-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ====================================================================
   2. CANVAS + ELEMENTOR WRAPPER RESET
   ==================================================================== */
body { background: var(--kaianat-bg); }
.elementor-section, .elementor-container,
.e-con, .e-con-inner { background-color: transparent; }
.elementor-widget-container > .kaianat-section,
.elementor-widget-container > .kaianat-hero,
.elementor-widget-container > .kaianat-page-hero { width: 100%; }

/* ====================================================================
   3. TYPOGRAPHY BASELINE — Arabic line-height 1.9, Latin 1.75
   ==================================================================== */
[class^="kaianat-"], [class*=" kaianat-"] {
	font-family: var(--kaianat-font);
}
[class^="kaianat-"] h1, [class*=" kaianat-"] h1,
[class^="kaianat-"] h2, [class*=" kaianat-"] h2,
[class^="kaianat-"] h3, [class*=" kaianat-"] h3,
[class^="kaianat-"] h4, [class*=" kaianat-"] h4,
[class^="kaianat-"][class*="-title"],
[class^="kaianat-"][class*="-heading"],
[class^="kaianat-"][class*="-display"] {
	font-family: var(--kaianat-font-display);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: inherit;
}
[class^="kaianat-"] p,
[class^="kaianat-"] li,
[class^="kaianat-"][class*="-body"],
[class^="kaianat-"][class*="-desc"] {
	line-height: 1.75;
}
body.rtl [class^="kaianat-"] p,
body.rtl [class^="kaianat-"] li,
body.rtl [class^="kaianat-"][class*="-body"],
body.rtl [class^="kaianat-"][class*="-desc"],
body.kaianat-dir-rtl [class^="kaianat-"] p,
body.kaianat-dir-rtl [class^="kaianat-"] li,
body.kaianat-dir-rtl [class^="kaianat-"][class*="-body"],
body.kaianat-dir-rtl [class^="kaianat-"][class*="-desc"],
html[lang^="ar"] [class^="kaianat-"] p,
html[lang^="ar"] [class^="kaianat-"] li,
html[lang^="ar"] [class^="kaianat-"][class*="-body"],
html[lang^="ar"] [class^="kaianat-"][class*="-desc"] {
	line-height: 1.9;
}
.kaianat-tnum {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}
/* Latin runs inside Arabic sentences — phone, email, handles */
.kaianat-ltr {
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
}

/* ====================================================================
   4. DIRECTION — scoped to named wrappers only
   ==================================================================== */
body.kaianat-dir-rtl .kaianat-header,
body.kaianat-dir-rtl .kaianat-footer,
body.kaianat-dir-rtl .kaianat-section,
body.kaianat-dir-rtl .kaianat-hero,
body.kaianat-dir-rtl .kaianat-page-hero,
body.kaianat-dir-rtl .kaianat-cta,
body.kaianat-dir-rtl .kaianat-container {
	direction: rtl;
	text-align: right;
}
.kaianat-center,
.kaianat-center .kaianat-eyebrow,
.kaianat-center .kaianat-section-title,
.kaianat-center .kaianat-section-desc,
.kaianat-center h1,
.kaianat-center h2,
.kaianat-center h3,
.kaianat-center p {
	text-align: center !important;
}
.kaianat-center h1,
.kaianat-center h2,
.kaianat-center .kaianat-section-title,
.kaianat-center .kaianat-section-desc {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ====================================================================
   5. LAYOUT PRIMITIVES
   ==================================================================== */
.kaianat-section {
	position: relative;
	padding: 6rem 0;
	background: var(--kaianat-bg);
}
.kaianat-section-navy { background: var(--kaianat-navy); color: #fff; }
.kaianat-section-muted { background: var(--kaianat-muted); }
@media (min-width: 1024px) { .kaianat-section { padding: 8rem 0; } }
@media (max-width: 640px)  { .kaianat-section { padding: 4rem 0; } }

.kaianat-container {
	width: 100%;
	max-width: var(--kaianat-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	position: relative;
}
@media (min-width: 640px)  { .kaianat-container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .kaianat-container { padding-inline: 3rem; } }

.kaianat-grid { display: grid; gap: 1.5rem; }
.kaianat-grid-2 { grid-template-columns: minmax(0, 1fr); }
.kaianat-grid-3 { grid-template-columns: minmax(0, 1fr); }
.kaianat-grid-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.kaianat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kaianat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kaianat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.kaianat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kaianat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kaianat-split {
	display: grid;
	gap: 3rem;
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.kaianat-split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.kaianat-split-media { grid-column: span 6; }
	.kaianat-split-body  { grid-column: span 6; }
	.kaianat-split-reverse .kaianat-split-media { order: 2; }
	.kaianat-split-reverse .kaianat-split-body  { order: 1; }
}

/* ====================================================================
   6. SECTION-HEAD RHYTHM — doubled class beats Elementor's h1..h6 reset
   ==================================================================== */
.kaianat-section-head.kaianat-section-head { margin-bottom: 3.5rem; }
.kaianat-section-head.kaianat-section-head .kaianat-eyebrow-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
}
.kaianat-section-head.kaianat-section-head .kaianat-section-title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.8rem, 4vw, 3.2rem);
	line-height: 1.1;
	color: var(--kaianat-navy);
}
.kaianat-section-head.kaianat-section-head .kaianat-section-desc {
	margin: 0;
	max-width: 42rem;
	font-size: 1.0625rem;
	color: var(--kaianat-muted-fg);
}
.kaianat-section-head.kaianat-tone-light .kaianat-section-title { color: #fff; }
.kaianat-section-head.kaianat-tone-light .kaianat-section-desc  { color: rgba(255, 255, 255, 0.70); }
.kaianat-section-head.kaianat-align-center { text-align: center; }
.kaianat-section-head.kaianat-align-center .kaianat-eyebrow-row { justify-content: center; }
.kaianat-section-head.kaianat-align-center .kaianat-section-desc { margin-inline: auto; }

.kaianat-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; }
.kaianat-eyebrow-rule { display: block; width: 2rem; height: 1px; background: var(--kaianat-turquoise); }
.kaianat-eyebrow-text {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--kaianat-brand);
}
.kaianat-tone-light .kaianat-eyebrow-rule { background: rgba(255, 255, 255, 0.5); }
.kaianat-tone-light .kaianat-eyebrow-text { color: rgba(255, 255, 255, 0.75); }
.kaianat-section-index {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 0.875rem;
	color: var(--kaianat-index);
	font-feature-settings: "tnum" 1;
}
.kaianat-tone-light .kaianat-section-index { color: rgba(255, 255, 255, 0.4); }

.kaianat-accent { color: var(--kaianat-brand); }
.kaianat-tone-light .kaianat-accent { color: var(--kaianat-turquoise); }
.kaianat-grad-text {
	background: var(--kaianat-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.kaianat-grad-text-2 {
	background: var(--kaianat-grad-text-2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.kaianat-grad-text, .kaianat-grad-text-2 { color: var(--kaianat-turquoise); }
}

/* ====================================================================
   7. UNIVERSAL ICON CONTAINER — size and layout ONLY, never colour
   ==================================================================== */
[class^="kaianat-"][class*="-icon"],
[class*=" kaianat-"][class*="-icon"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}
[class^="kaianat-"][class*="-icon"] svg,
[class*=" kaianat-"][class*="-icon"] svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
	color: inherit;
	fill: none;
	stroke: currentColor;
}
[class^="kaianat-"][class*="-icon"] i,
[class*=" kaianat-"][class*="-icon"] i {
	font-size: 1.1rem;
	color: inherit;
	line-height: 1;
}
/* Filled social glyphs must override the helper's stroke-only attributes */
.kaianat-social-icon svg { fill: currentColor !important; stroke: none !important; }

/* Per-component icon colours — each chosen against its real background */
.kaianat-value-icon   { color: var(--kaianat-turquoise); }
.kaianat-vm-icon      { color: var(--kaianat-turquoise); }
.kaianat-contact-icon { color: var(--kaianat-brand); }
.kaianat-social-icon  { color: rgba(255, 255, 255, 0.72); }
.kaianat-alert-icon   { color: inherit; }
.kaianat-arrow-icon   { color: inherit; }
.kaianat-slider-icon  { color: inherit; }

/* Headings never inherit the theme's global colour: each context sets its own.
   The doubled class keeps this above Hello Elementor's heading rules. */
.kaianat-section-head.kaianat-section-head .kaianat-section-title,
.kaianat-timeline-year.kaianat-timeline-year,
.kaianat-company-name.kaianat-company-name,
.kaianat-subhead.kaianat-subhead { color: var(--kaianat-navy); }

.kaianat-tone-light .kaianat-section-head.kaianat-section-head .kaianat-section-title,
.kaianat-section-head.kaianat-tone-light .kaianat-section-title,
.kaianat-tone-light .kaianat-subhead.kaianat-subhead,
.kaianat-hero-title.kaianat-hero-title,
.kaianat-page-hero-title.kaianat-page-hero-title,
.kaianat-cta-title.kaianat-cta-title,
.kaianat-eco-name.kaianat-eco-name,
.kaianat-sector-title.kaianat-sector-title,
.kaianat-project-title.kaianat-project-title,
.kaianat-vm-label.kaianat-vm-label,
.kaianat-vm-body.kaianat-vm-body { color: #ffffff; }

.kaianat-hero-title .kaianat-grad-text,
.kaianat-page-hero-title .kaianat-grad-text-2,
.kaianat-cta-title .kaianat-grad-text-2 { color: transparent; }

/* ====================================================================
   8. BUTTONS
   ==================================================================== */
.kaianat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	font-family: var(--kaianat-font);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.2;
	padding: 0.875rem 1.75rem;
	border-radius: var(--kaianat-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: var(--kaianat-transition);
	white-space: nowrap;
}
a.kaianat-btn.kaianat-btn-primary,
a.kaianat-btn.kaianat-btn-primary:link,
a.kaianat-btn.kaianat-btn-primary:visited,
button.kaianat-btn.kaianat-btn-primary,
.kaianat-btn.kaianat-btn-primary[class] {
	background: var(--kaianat-brand) !important;
	background-color: var(--kaianat-brand) !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: var(--kaianat-brand) !important;
	box-shadow: var(--kaianat-shadow-brand);
	text-decoration: none !important;
}
a.kaianat-btn.kaianat-btn-primary:hover,
a.kaianat-btn.kaianat-btn-primary:focus,
button.kaianat-btn.kaianat-btn-primary:hover,
.kaianat-btn.kaianat-btn-primary[class]:hover {
	background: var(--kaianat-navy) !important;
	background-color: var(--kaianat-navy) !important;
	border-color: var(--kaianat-navy) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}
.kaianat-btn.kaianat-btn-primary *,
.kaianat-btn.kaianat-btn-primary svg,
.kaianat-btn.kaianat-btn-primary span { color: #ffffff !important; }

a.kaianat-btn.kaianat-btn-ghost,
a.kaianat-btn.kaianat-btn-ghost:link,
a.kaianat-btn.kaianat-btn-ghost:visited,
button.kaianat-btn.kaianat-btn-ghost,
.kaianat-btn.kaianat-btn-ghost[class] {
	background: transparent !important;
	background-image: none !important;
	color: var(--kaianat-navy) !important;
	border-color: rgba(10, 42, 63, 0.2) !important;
	text-decoration: none !important;
}
a.kaianat-btn.kaianat-btn-ghost:hover,
a.kaianat-btn.kaianat-btn-ghost:focus,
.kaianat-btn.kaianat-btn-ghost[class]:hover {
	border-color: var(--kaianat-brand) !important;
	color: var(--kaianat-brand) !important;
}
.kaianat-btn.kaianat-btn-ghost svg { color: inherit !important; }

a.kaianat-btn.kaianat-btn-light,
a.kaianat-btn.kaianat-btn-light:link,
a.kaianat-btn.kaianat-btn-light:visited,
button.kaianat-btn.kaianat-btn-light,
.kaianat-btn.kaianat-btn-light[class] {
	background: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	text-decoration: none !important;
}
.kaianat-btn.kaianat-btn-light[class] * { color: #ffffff !important; }
a.kaianat-btn.kaianat-btn-light:hover,
a.kaianat-btn.kaianat-btn-light:focus,
.kaianat-btn.kaianat-btn-light[class]:hover {
	background: #ffffff !important;
	color: var(--kaianat-navy) !important;
	border-color: #ffffff !important;
}
.kaianat-btn.kaianat-btn-light[class]:hover * { color: var(--kaianat-navy) !important; }

/* The white pill under each ecosystem card is a link, so the theme can
   repaint it too. */
a.kaianat-eco-cta,
a.kaianat-eco-cta:link,
a.kaianat-eco-cta:visited { color: var(--kaianat-navy) !important; text-decoration: none !important; }
.kaianat-eco-card:hover a.kaianat-eco-cta { color: var(--kaianat-navy) !important; }
.kaianat-btn-block { width: 100%; }
.kaianat-btn svg { width: 1rem; height: 1rem; }
body.kaianat-dir-rtl .kaianat-btn svg { transform: scaleX(-1); }
.kaianat-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.kaianat-btn-row-center { justify-content: center; }

.kaianat-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--kaianat-brand);
	transition: var(--kaianat-transition);
}
.kaianat-arrow-link:hover { gap: 1rem; color: var(--kaianat-navy); }
.kaianat-arrow-link-light { color: var(--kaianat-turquoise); }
.kaianat-arrow-link-light:hover { color: #ffffff; }
body.kaianat-dir-rtl .kaianat-arrow-link svg { transform: scaleX(-1); }

/* ====================================================================
   9. REVEAL ANIMATIONS

   Content is NEVER hidden by default. Earlier builds started elements at
   opacity 0 and relied on JS to reveal them — if the script was deferred,
   blocked, or rewritten by an optimiser (Rocket Loader et al), the page
   stayed blank. Now the resting state is fully visible and the entrance is a
   one-shot animation that only plays when JS adds .kaianat-revealed. No JS,
   no animation, but the text is always there.
   ==================================================================== */
@keyframes kaianat-fade-up {
	from { opacity: 0; transform: translateY(34px); }
	to   { opacity: 1; transform: none; }
}
@keyframes kaianat-mask-in {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.kaianat-reveal,
.kaianat-mask-reveal {
	opacity: 1;
	transform: none;
	clip-path: none;
}
.kaianat-reveal.kaianat-revealed {
	animation: kaianat-fade-up 0.9s var(--kaianat-ease) both;
	animation-delay: var(--kaianat-reveal-delay, 0ms);
}
.kaianat-mask-reveal.kaianat-revealed {
	animation: kaianat-mask-in 1.1s var(--kaianat-ease) both;
	animation-delay: var(--kaianat-reveal-delay, 0ms);
}

/* Editor canvas and reduced-motion: no entrance animation at all. */
.elementor-editor-active .kaianat-reveal,
.elementor-editor-active .kaianat-mask-reveal,
body.elementor-editor-preview .kaianat-reveal,
body.elementor-editor-preview .kaianat-mask-reveal {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.kaianat-reveal,
	.kaianat-mask-reveal {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		animation: none !important;
	}
}

/* ====================================================================
   10. HEADER
   ==================================================================== */
.kaianat-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--kaianat-border);
	transition: background 0.5s var(--kaianat-ease), border-color 0.5s var(--kaianat-ease);
}
.kaianat-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 72px;
}
@media (min-width: 1024px) { .kaianat-header-inner { height: 84px; } }

.kaianat-header-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}
.kaianat-header-logo img { height: 44px; width: auto; object-fit: contain; display: block; }
.kaianat-logo-word { display: flex; flex-direction: column; line-height: 1; }
.kaianat-logo-name {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
	color: var(--kaianat-navy);
}
.kaianat-logo-sub {
	margin-top: 0.25rem;
	font-size: 0.5rem;
	letter-spacing: 0.28em;
	color: var(--kaianat-muted-fg);
}

.kaianat-header-nav { display: none; align-items: center; gap: 2.25rem; list-style: none; margin: 0; padding: 0; }
.kaianat-nav-item { position: relative; }
.kaianat-nav-item > a,
.kaianat-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--kaianat-font);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--kaianat-navy);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.3s ease;
}
.kaianat-nav-item > a:hover,
.kaianat-nav-toggle:hover { color: var(--kaianat-brand); }
.kaianat-nav-item.kaianat-is-current > a { color: var(--kaianat-brand); }

.kaianat-dropdown {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 12rem;
	margin: 0.75rem 0 0;
	padding: 0.5rem;
	list-style: none;
	background: #ffffff;
	border: 1px solid var(--kaianat-border);
	border-radius: var(--kaianat-radius-md);
	box-shadow: var(--kaianat-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: var(--kaianat-transition);
	z-index: 60;
}
.kaianat-has-dropdown:hover > .kaianat-dropdown,
.kaianat-has-dropdown:focus-within > .kaianat-dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.kaianat-dropdown a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--kaianat-radius);
	font-size: 0.9375rem;
	color: var(--kaianat-navy);
	text-decoration: none;
}
.kaianat-dropdown a:hover { background: var(--kaianat-muted); color: var(--kaianat-brand); }

.kaianat-header-cta { display: none; }
.kaianat-header-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	border: 0;
	border-radius: var(--kaianat-radius-md);
	cursor: pointer;
	color: var(--kaianat-navy);
}
.kaianat-header-burger:hover,
.kaianat-header-burger:focus { background: rgba(10, 42, 63, 0.05); }
.kaianat-header-burger svg { width: 1.5rem; height: 1.5rem; }
.kaianat-header-burger-close { display: none; }
.kaianat-header.kaianat-is-open .kaianat-header-burger-open  { display: none; }
.kaianat-header.kaianat-is-open .kaianat-header-burger-close { display: inline-flex; }

.kaianat-header-mobile {
	overflow: hidden;
	max-height: 0;
	background: #ffffff;
	transition: max-height 0.5s var(--kaianat-ease);
}
.kaianat-header.kaianat-is-open .kaianat-header-mobile {
	max-height: 34rem;
	border-top: 1px solid var(--kaianat-border);
}
.kaianat-header-mobile-nav { list-style: none; margin: 0; padding: 0.5rem 1.5rem 1.5rem; }
.kaianat-header-mobile-nav a,
.kaianat-header-mobile-nav a:link,
.kaianat-header-mobile-nav a:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--kaianat-border);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--kaianat-navy) !important;
	text-decoration: none !important;
}
.kaianat-header-mobile-nav a:hover,
.kaianat-header-mobile-nav a:focus,
.kaianat-header-mobile-nav a:active { color: var(--kaianat-brand) !important; }
.kaianat-header-mobile-nav .kaianat-arrow-icon { color: var(--kaianat-brand); }
.kaianat-header-mobile-cta { margin-top: 1.25rem; width: 100%; }
.kaianat-header-mobile-sub { list-style: none; margin: 0; padding: 0 1rem; }
.kaianat-header-mobile-sub a { font-size: 0.9375rem; opacity: 0.85; }

@media (min-width: 1024px) {
	.kaianat-header-nav    { display: flex !important; }
	.kaianat-header-cta    { display: inline-flex !important; }
	.kaianat-header-burger { display: none !important; }
	.kaianat-header-mobile { display: none !important; }
}

/* ====================================================================
   11. HERO (video)
   ==================================================================== */
.kaianat-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kaianat-navy);
	isolation: isolate;
}
.kaianat-hero-media { position: absolute; inset: 0; overflow: hidden; }
.kaianat-hero-video,
.kaianat-hero-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	display: block;
}
.kaianat-hero-scrim,
.kaianat-hero-focus,
.kaianat-hero-glow { position: absolute; inset: 0; pointer-events: none; }
.kaianat-hero-scrim {
	background: linear-gradient(to top, rgba(10, 42, 63, 0.88), rgba(10, 42, 63, 0.48) 55%, rgba(10, 42, 63, 0.62));
}
.kaianat-hero-focus {
	background: radial-gradient(70% 60% at 50% 50%, rgba(10, 42, 63, 0.60), transparent 78%);
}
.kaianat-hero-glow {
	background: radial-gradient(120% 90% at 50% 30%, rgba(34, 196, 200, 0.10), transparent 62%);
}
.kaianat-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100svh;
	padding-block: 8rem;
}
.kaianat-hero-title {
	margin: 1.5rem 0 0;
	max-width: 56rem;
	color: #ffffff;
	font-size: clamp(2.4rem, 6vw, 5.2rem);
	line-height: 1.12;
}
.kaianat-hero-title-accent { display: block; margin-top: 1rem; }
.kaianat-hero-desc {
	margin: 2rem 0 0;
	max-width: 42rem;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.80);
}
.kaianat-hero-est {
	position: absolute;
	bottom: 2rem;
	inset-inline-start: 3rem;
	z-index: 2;
	display: none;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	color: rgba(255, 255, 255, 0.5);
}
.kaianat-hero-est-rule { display: block; width: 1px; height: 2.5rem; background: rgba(255, 255, 255, 0.3); }
@media (min-width: 640px) { .kaianat-hero-est { display: flex; } }
@media (max-width: 767px) {
	.kaianat-hero,
	.kaianat-hero-inner { min-height: 88svh; }
	.kaianat-hero-inner { padding-block: 5rem; }
}

/* ====================================================================
   12. PAGE HERO (inner pages)
   ==================================================================== */
.kaianat-page-hero {
	position: relative;
	min-height: 56svh;
	background: var(--kaianat-navy);
	isolation: isolate;
}
.kaianat-page-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}
.kaianat-page-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--kaianat-navy), rgba(10, 42, 63, 0.60) 50%, rgba(10, 42, 63, 0.60));
}
.kaianat-page-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 56svh;
	padding-top: 7rem;
	padding-bottom: 3rem;
}
/* Phones: the hero is a page label, not a landing screen — it only needs
   room for the eyebrow, the title and a little air under the sticky header. */
@media (max-width: 767px) {
	.kaianat-page-hero { min-height: 0; }
	.kaianat-page-hero-inner {
		min-height: 0;
		padding-top: 5.5rem;
		padding-bottom: 2rem;
	}
	.kaianat-page-hero-title { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-top: 0.9rem; }
	.kaianat-page-hero-desc { margin-top: 1rem; font-size: 0.95rem; }
}
@media (min-width: 1024px) {
	.kaianat-page-hero { min-height: 78svh; }
	.kaianat-page-hero-inner {
		min-height: 78svh;
		padding-top: 9rem;
		padding-bottom: 6rem;
	}
}
.kaianat-page-hero-title {
	margin: 1.25rem 0 0;
	max-width: 56rem;
	color: #ffffff;
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	line-height: 1.08;
}
.kaianat-page-hero-title-accent { display: block; }
.kaianat-page-hero-desc {
	margin: 1.75rem 0 0;
	max-width: 42rem;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.75);
}

/* ====================================================================
   13. ABOUT INTRO (home) — oversized editorial year
   ==================================================================== */
.kaianat-about-year {
	position: absolute;
	top: -1.5rem;
	inset-inline-start: 0;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	line-height: 1;
	font-size: 24vw;
	color: #e6eef2;
}
@media (min-width: 1024px) { .kaianat-about-year { font-size: 18vw; } }
.kaianat-figure {
	position: relative;
	overflow: hidden;
	border-radius: var(--kaianat-radius-xl);
	background: var(--kaianat-navy);
	border: 1px solid var(--kaianat-border);
	box-shadow: var(--kaianat-shadow-xl);
}
.kaianat-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaianat-figure-4x5 { aspect-ratio: 4 / 5; }
.kaianat-figure-4x3 { aspect-ratio: 16 / 11; max-height: 34rem; }
.kaianat-figure-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 42, 63, 0.55), transparent 60%);
}
.kaianat-figure-caption {
	position: absolute;
	bottom: 1rem;
	inset-inline-end: 1.25rem;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	color: #ffffff;
}
.kaianat-prose p {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	color: var(--kaianat-muted-fg);
}
.kaianat-prose p:last-child { margin-bottom: 0; }
.kaianat-tone-light .kaianat-prose p { color: rgba(255, 255, 255, 0.70); }

/* ====================================================================
   14. ECOSYSTEM CARDS (home)
   ==================================================================== */
.kaianat-ecosystem-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.20;
}
.kaianat-ecosystem-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--kaianat-navy), rgba(10, 42, 63, 0.85) 50%, var(--kaianat-navy));
}
.kaianat-eco-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 1.75rem;
	border-radius: var(--kaianat-radius-lg);
	border: 1px solid var(--kaianat-border-light);
	box-shadow: var(--kaianat-shadow-xl);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #ffffff;
	transition: transform 0.5s var(--kaianat-ease), box-shadow 0.5s var(--kaianat-ease);
}
/* Row layout — cards sit straight (no tilt). Hover lifts. */
@media (min-width: 1024px) {
	.kaianat-eco-card {
		min-height: 420px;
	}
}
.kaianat-eco-card:hover { transform: translateY(-12px) scale(1.04); }
.kaianat-eco-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--kaianat-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 1.5rem;
}
.kaianat-eco-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--kaianat-ease);
}
.kaianat-eco-card:hover .kaianat-eco-media img { transform: scale(1.1); }
.kaianat-eco-media-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 42, 63, 0.80), transparent);
}
.kaianat-eco-mark {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 0.75rem;
	padding: 0.375rem;
	border-radius: var(--kaianat-radius-md);
	background: rgba(10, 42, 63, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
}
.kaianat-eco-field {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--kaianat-turquoise);
}
.kaianat-eco-name {
	margin: 0.5rem 0 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.375rem;
	color: #ffffff;
}
.kaianat-eco-desc {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.70);
}
.kaianat-eco-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 2rem;
	padding: 0.8125rem 1.25rem;
	border-radius: var(--kaianat-radius-lg);
	background: #ffffff;
	color: var(--kaianat-navy);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	box-shadow: var(--kaianat-shadow-md);
	transition: var(--kaianat-transition);
}
.kaianat-eco-card:hover .kaianat-eco-cta { background: var(--kaianat-turquoise); color: var(--kaianat-navy); }

/* ====================================================================
   15. SECTORS (home) — two tall panels
   ==================================================================== */
.kaianat-sector-card {
	position: relative;
	display: block;
	height: 440px;
	overflow: hidden;
	border-radius: var(--kaianat-radius-md);
	text-decoration: none;
}
@media (min-width: 1024px) { .kaianat-sector-card { height: 560px; } }
.kaianat-sector-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--kaianat-ease);
}
.kaianat-sector-card:hover img { transform: scale(1.1); }
.kaianat-sector-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--kaianat-navy), rgba(10, 42, 63, 0.40) 45%, transparent);
	transition: opacity 0.5s ease;
}
.kaianat-sector-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 2rem;
}
@media (min-width: 1024px) { .kaianat-sector-body { padding: 2.5rem; } }
.kaianat-sector-index {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.40);
}
.kaianat-sector-title {
	margin: 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.875rem;
	color: #ffffff;
}
@media (min-width: 1024px) { .kaianat-sector-title { font-size: 2.25rem; } }
.kaianat-sector-desc {
	margin: 1rem 0 0;
	max-width: 28rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.70);
}
.kaianat-sector-link { margin-top: 1.5rem; }

/* ====================================================================
   16. NUMBERS
   ==================================================================== */
.kaianat-numbers-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.10;
	pointer-events: none;
}
/* Light variant — pale background, dark numbers/labels. */
.kaianat-numbers-light { background: var(--kaianat-bg); }
.kaianat-numbers-light .kaianat-numbers-mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(to right, rgba(10, 42, 63, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 42, 63, 0.05) 1px, transparent 1px);
	background-size: 80px 80px;
}
.kaianat-numbers-light .kaianat-container { position: relative; z-index: 2; }
.kaianat-numbers-light .kaianat-stat { border-top-color: var(--kaianat-border); }
.kaianat-numbers-light .kaianat-stat-value {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--kaianat-navy);
}
.kaianat-numbers-light .kaianat-stat-suffix { color: var(--kaianat-brand); }
.kaianat-numbers-light .kaianat-stat-label { color: var(--kaianat-muted-fg); }
.kaianat-numbers-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to left, var(--kaianat-navy), rgba(10, 42, 63, 0.75) 50%, rgba(10, 42, 63, 0.95));
}
.kaianat-numbers-mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background-image:
		linear-gradient(to right, #fff 1px, transparent 1px),
		linear-gradient(to bottom, #fff 1px, transparent 1px);
	background-size: 80px 80px;
}
.kaianat-stat { border-top: 1px solid var(--kaianat-border-light); padding-top: 1.5rem; }
.kaianat-stat-row { display: flex; align-items: flex-start; }
.kaianat-stat-value {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	line-height: 1;
	font-size: clamp(3.5rem, 9vw, 8rem);
	background: var(--kaianat-grad-stat);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-feature-settings: "tnum" 1;
}
.kaianat-stat-suffix {
	margin-top: 0.5rem;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: clamp(1.8rem, 4vw, 3.5rem);
	line-height: 1;
	color: var(--kaianat-turquoise);
}
.kaianat-stat-label {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.60);
}

/* ====================================================================
   17. CTA BANNER
   ==================================================================== */
.kaianat-cta {
	position: relative;
	background: var(--kaianat-navy);
	isolation: isolate;
	padding: 4rem 0;
}
@media (min-width: 1024px) { .kaianat-cta { padding: 6rem 0; } }
.kaianat-cta-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.30;
}
.kaianat-cta-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 42, 63, 0.86), rgba(10, 42, 63, 0.78) 50%, rgba(10, 42, 63, 0.94));
}
.kaianat-cta-inner { position: relative; z-index: 2; text-align: center; }
.kaianat-cta-title {
	margin: 1.25rem auto 0;
	max-width: 56rem;
	color: #ffffff;
	font-size: clamp(2rem, 5vw, 4.2rem);
	line-height: 1.1;
}
.kaianat-cta-title-accent { display: block; }
.kaianat-cta-desc {
	margin: 2rem auto 0;
	max-width: 42rem;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.70);
}

/* ====================================================================
   18. STORY + TIMELINE (about) — rebuilt Aug 2026
   ==================================================================== */
.kaianat-story { position: relative; overflow: hidden; background: var(--kaianat-bg); }
.kaianat-story-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.kaianat-story > .kaianat-container { position: relative; z-index: 2; }

.kaianat-story-head {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 1024px) {
	.kaianat-story-head { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3rem; }
	.kaianat-story-copy {
		border-inline-start: 1px solid rgba(10, 42, 63, 0.16);
		padding-inline-start: 3rem;
	}
}
.kaianat-story-title-col { text-align: start; }
.kaianat-story-index {
	display: inline-block;
	font-family: var(--kaianat-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--kaianat-brand);
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--kaianat-brand);
}
.kaianat-story-title {
	margin: 0.9rem 0 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	line-height: 1;
	font-size: clamp(2.6rem, 7vw, 5rem);
	color: var(--kaianat-navy);
}
.kaianat-story-copy p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 2;
	color: var(--kaianat-muted-fg);
}
.kaianat-story-copy p:last-child { margin-bottom: 0; }

.kaianat-story-flow { position: relative; margin-top: 3rem; }
@media (min-width: 1024px) { .kaianat-story-flow { margin-top: 4rem; } }

.kaianat-story-rail { display: none; }
@media (min-width: 900px) {
	.kaianat-story-rail {
		position: relative;
		display: grid;
		grid-template-columns: repeat(var(--kaianat-story-cols, 3), minmax(0, 1fr));
		gap: 1.5rem;
		height: 1rem;
		margin-bottom: 1.75rem;
	}
	.kaianat-story-rail-line {
		position: absolute;
		inset-inline: 10%;
		top: 50%;
		height: 1px;
		background: linear-gradient(to left, rgba(12, 123, 154, 0), rgba(12, 123, 154, 0.5) 15%, rgba(12, 123, 154, 0.5) 85%, rgba(12, 123, 154, 0));
	}
	.kaianat-story-rail-cell { display: flex; align-items: center; justify-content: center; }
	.kaianat-story-rail-dot {
		position: relative;
		width: 0.85rem;
		height: 0.85rem;
		border-radius: 9999px;
		background: var(--kaianat-brand);
		box-shadow: 0 0 0 5px rgba(12, 123, 154, 0.14);
	}
}

.kaianat-story-cards { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kaianat-story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	.kaianat-story-cards { grid-template-columns: repeat(var(--kaianat-story-cols, 3), minmax(0, 1fr)); }
}
.kaianat-story-cards > * { height: 100%; }

.kaianat-milestone {
	height: 100%;
	padding: 1.75rem;
	border-radius: var(--kaianat-radius-lg);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 18px 40px -28px rgba(10, 42, 63, 0.40);
	transition: transform 0.5s var(--kaianat-ease), box-shadow 0.5s var(--kaianat-ease);
}
.kaianat-milestone:hover { transform: translateY(-6px); box-shadow: var(--kaianat-shadow-lg); }
.kaianat-milestone-top { display: flex; align-items: flex-start; gap: 0.9rem; }
.kaianat-milestone-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: 9999px;
	background: rgba(12, 123, 154, 0.10);
	color: var(--kaianat-brand);
}
.kaianat-milestone-icon svg { width: 1.4rem; height: 1.4rem; }
.kaianat-milestone-heads { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding-top: 0.25rem; }
.kaianat-milestone-year {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.55rem;
	line-height: 1.15;
	color: var(--kaianat-navy);
}
.kaianat-milestone-label { font-size: 0.9rem; font-weight: 700; color: rgba(10, 42, 63, 0.72); }
.kaianat-milestone-num {
	margin-inline-start: auto;
	align-self: flex-start;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.3rem;
	color: var(--kaianat-brand);
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--kaianat-brand);
}
.kaianat-milestone-rule {
	display: block;
	height: 1px;
	margin: 1.35rem 0;
	background: rgba(10, 42, 63, 0.10);
}
.kaianat-milestone-desc { margin: 0; font-size: 0.95rem; line-height: 1.9; color: var(--kaianat-muted-fg); }
@media (max-width: 480px) {
	.kaianat-milestone { padding: 1.35rem; }
	.kaianat-milestone-icon { width: 2.6rem; height: 2.6rem; }
	.kaianat-milestone-year { font-size: 1.35rem; }
}

/* ====================================================================
   19. VISION / MISSION
   ==================================================================== */
.kaianat-vm-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
	pointer-events: none;
}
.kaianat-vm-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, var(--kaianat-navy), rgba(10, 42, 63, 0.85) 50%, var(--kaianat-navy));
}
.kaianat-vm-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
	max-width: 64rem;
	margin-inline: auto;
	align-items: stretch;
}
@media (min-width: 1024px) { .kaianat-vm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kaianat-vm-card {
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: 2rem;
	border-radius: var(--kaianat-radius-xl);
	border: 1px solid rgba(255, 255, 255, 0.20);
	background: linear-gradient(to bottom right, var(--kaianat-navy), var(--kaianat-navy-2) 50%, var(--kaianat-navy));
	box-shadow: 0 0 50px rgba(34, 196, 200, 0.15);
	transition: transform 0.5s var(--kaianat-ease), box-shadow 0.5s var(--kaianat-ease), border-color 0.5s var(--kaianat-ease);
}
@media (min-width: 640px) { .kaianat-vm-card { padding: 3rem; } }
.kaianat-vm-card:hover {
	transform: translateY(-8px);
	border-color: var(--kaianat-turquoise);
	box-shadow: 0 0 80px rgba(34, 196, 200, 0.35);
}
.kaianat-vm-blob {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	background: rgba(34, 196, 200, 0.15);
	filter: blur(48px);
	pointer-events: none;
}
.kaianat-vm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.kaianat-vm-head-start { display: flex; align-items: center; gap: 0.75rem; }
.kaianat-vm-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--kaianat-radius-lg);
	background: var(--kaianat-navy);
	border: 1px solid rgba(34, 196, 200, 0.40);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.kaianat-vm-icon svg { width: 1.75rem; height: 1.75rem; }
.kaianat-vm-label {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	color: #ffffff;
}
.kaianat-vm-index {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.875rem;
	color: rgba(34, 196, 200, 0.50);
}
.kaianat-vm-body {
	margin: 0;
	font-family: var(--kaianat-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.8;
	color: #ffffff;
}
@media (min-width: 640px) { .kaianat-vm-body { font-size: 1.5rem; } }

/* ====================================================================
   20. VALUES
   ==================================================================== */
.kaianat-values-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.08;
	pointer-events: none;
}
.kaianat-values-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, var(--kaianat-bg), rgba(244, 247, 249, 0.70) 50%, var(--kaianat-bg));
}
.kaianat-value-frame {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 0.75rem;
	border-radius: var(--kaianat-radius-xl);
	border: 2px solid var(--kaianat-navy);
	background: rgba(10, 42, 63, 0.05);
	box-shadow: var(--kaianat-shadow-md);
	transition: transform 0.5s var(--kaianat-ease), box-shadow 0.5s var(--kaianat-ease), border-color 0.5s var(--kaianat-ease);
}
.kaianat-value-frame:hover {
	transform: translateY(-8px);
	border-color: var(--kaianat-turquoise);
	box-shadow: var(--kaianat-shadow-xl);
}
.kaianat-value-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 1.75rem;
	border-radius: var(--kaianat-radius-lg);
	background: #ffffff;
	border: 1px solid rgba(10, 42, 63, 0.06);
	text-align: center;
}
.kaianat-value-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-inline: auto;
	border-radius: var(--kaianat-radius-lg);
	background: var(--kaianat-navy);
	border: 1px solid rgba(10, 42, 63, 0.2);
	box-shadow: var(--kaianat-shadow-md);
	transition: transform 0.3s ease;
}
.kaianat-value-icon svg { width: 1.75rem; height: 1.75rem; }
.kaianat-value-frame:hover .kaianat-value-icon { transform: scale(1.1); }
.kaianat-value-title {
	margin: 1.5rem 0 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.5rem;
}
@media (min-width: 640px) { .kaianat-value-title { font-size: 1.875rem; } }
.kaianat-value-desc { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--kaianat-muted-fg); }
.kaianat-value-index {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(10, 42, 63, 0.06);
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--kaianat-navy);
}

/* ====================================================================
   22. QUALITY / CERTIFICATES
   ==================================================================== */
.kaianat-cert-frame {
	overflow: hidden;
	padding: 1.25rem;
	border-radius: var(--kaianat-radius-md);
	border: 1px solid var(--kaianat-border);
	background: #ffffff;
	box-shadow: var(--kaianat-shadow-lg);
}
.kaianat-cert-frame + .kaianat-cert-frame { margin-top: 1.25rem; }
.kaianat-cert-frame img { width: 100%; height: auto; object-fit: contain; display: block; }
.kaianat-badge-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 2rem;
}
.kaianat-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: var(--kaianat-radius-md);
	border: 1px solid var(--kaianat-border);
	background: var(--kaianat-card);
}
.kaianat-badge-title {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 0.875rem;
	color: var(--kaianat-navy);
}
.kaianat-badge-sub { font-size: 0.6875rem; color: var(--kaianat-muted-fg); }

/* ====================================================================
   24. COMPANY BLOCKS (ecosystem page)
   ==================================================================== */
.kaianat-company-block { padding: 5rem 0; }
@media (min-width: 1024px) { .kaianat-company-block { padding: 7rem 0; } }
.kaianat-company-block-alt { background: var(--kaianat-muted); }
.kaianat-company-figure {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var(--kaianat-radius-md);
	background: var(--kaianat-navy);
}
.kaianat-company-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaianat-company-name {
	margin: 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: clamp(1.9rem, 4vw, 3rem);
	color: var(--kaianat-navy);
}
.kaianat-company-head { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.kaianat-company-field {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--kaianat-brand);
}
.kaianat-company-desc { margin: 1.5rem 0 0; max-width: 36rem; font-size: 1.0625rem; color: var(--kaianat-muted-fg); }
.kaianat-chip-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.kaianat-chip {
	padding: 0.5rem 1.25rem;
	border-radius: 9999px;
	border: 1px solid var(--kaianat-border);
	background: var(--kaianat-card);
	font-size: 0.875rem;
	color: var(--kaianat-navy);
}

/* ====================================================================
   25. PROJECTS SLIDER
   ==================================================================== */
.kaianat-slider-head {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
	align-items: flex-start;
	text-align: start;
}
.kaianat-slider-head .kaianat-eyebrow-row { justify-content: flex-start; }
.kaianat-slider-head .kaianat-section-title { text-align: start; }
@media (min-width: 640px) {
	.kaianat-slider-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		text-align: start;
	}
	.kaianat-slider-head .kaianat-eyebrow-row { justify-content: flex-start; }
}
/* Controls sit on the left edge on mobile — flex-end resolves to the left
   inside the RTL section. */
.kaianat-slider-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	justify-content: flex-end;
}
@media (min-width: 640px) { .kaianat-slider-controls { width: auto; } }
.kaianat-slider-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	border: 1px solid var(--kaianat-border);
	background: transparent;
	color: var(--kaianat-navy);
	cursor: pointer;
	transition: var(--kaianat-transition);
}
.kaianat-slider-btn:hover { background: var(--kaianat-brand); border-color: var(--kaianat-brand); color: #ffffff; }
.kaianat-slider-btn svg { width: 1.125rem; height: 1.125rem; }
.kaianat-tone-light .kaianat-slider-btn { border-color: var(--kaianat-border-light); color: #ffffff; }
.kaianat-slider-count {
	font-family: var(--kaianat-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--kaianat-muted-fg);
	font-feature-settings: "tnum" 1;
}
.kaianat-tone-light .kaianat-slider-count { color: rgba(255, 255, 255, 0.6); }

.kaianat-project-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: var(--kaianat-radius-xl);
	border: 1px solid var(--kaianat-border-light);
	background: rgba(10, 42, 63, 0.95);
	color: #ffffff;
	box-shadow: var(--kaianat-shadow-xl);
}
@media (min-width: 1024px) {
	.kaianat-project-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kaianat-project-media { position: relative; aspect-ratio: 16 / 10; background: var(--kaianat-navy); }
@media (min-width: 1024px) { .kaianat-project-media { aspect-ratio: 4 / 3; } }
.kaianat-project-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaianat-project-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: 1.75rem;
}
@media (min-width: 1024px) { .kaianat-project-body { padding: 2.5rem; } }
.kaianat-project-title { margin-top: 1rem; }
.kaianat-project-stats { margin-top: 0; }
.kaianat-project-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kaianat-project-tag {
	padding: 0.375rem 1rem;
	border-radius: var(--kaianat-radius-md);
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--kaianat-turquoise);
	backdrop-filter: blur(8px);
}
.kaianat-project-tag-alt {
	background: rgba(10, 42, 63, 0.80);
	border-color: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.80);
}
.kaianat-project-title {
	margin: 1.5rem 0 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.4;
	color: #ffffff;
}
@media (min-width: 640px) { .kaianat-project-title { font-size: 1.875rem; } }
.kaianat-project-desc { margin: 1rem 0 0; font-size: 1rem; color: rgba(255, 255, 255, 0.75); }
.kaianat-project-stats {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}
@media (min-width: 640px) { .kaianat-project-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kaianat-project-stat {
	padding: 0.875rem;
	border-radius: var(--kaianat-radius-lg);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
}
.kaianat-project-stat-wide { grid-column: span 2; }
@media (min-width: 640px) { .kaianat-project-stat-wide { grid-column: span 1; } }
.kaianat-project-stat-label { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.60); }
.kaianat-project-stat-value {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--kaianat-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--kaianat-turquoise);
}
.kaianat-project-stat-value-soft { color: var(--kaianat-turquoise-soft); }

.kaianat-slider { position: relative; width: 100%; }
.kaianat-slider-current { font-feature-settings: "tnum" 1; }
.kaianat-slider-track { position: relative; }
.kaianat-slide { display: none; }
.kaianat-slide.kaianat-is-active { display: block; }
.kaianat-slider-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding: 0.5rem 0;
	overflow-x: auto;
}
.kaianat-slider-dot {
	height: 0.625rem;
	width: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: var(--kaianat-border);
	cursor: pointer;
	transition: var(--kaianat-transition);
	flex-shrink: 0;
}
.kaianat-slider-dot.kaianat-is-active { width: 2rem; background: var(--kaianat-brand); }
.kaianat-tone-light .kaianat-slider-dot { background: rgba(255, 255, 255, 0.25); }
.kaianat-tone-light .kaianat-slider-dot.kaianat-is-active { background: var(--kaianat-turquoise); }

/* ====================================================================
   26. SERVICES CHIP GRID (inside the operations section)
   ==================================================================== */
.kaianat-service-chips {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 4rem;
}
@media (min-width: 640px)  { .kaianat-service-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kaianat-service-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kaianat-service-chip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: var(--kaianat-radius-md);
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.05);
}
.kaianat-service-chip-index {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	color: var(--kaianat-turquoise);
}
.kaianat-service-chip-label {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.90);
}

/* ====================================================================
   28. CONTACT
   ==================================================================== */
.kaianat-contact-grid { display: grid; gap: 3rem; }
.kaianat-contact-info { min-width: 0; }
.kaianat-contact-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.kaianat-contact-row { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 1.5rem; }
.kaianat-contact-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(12, 123, 154, 0.10);
}
.kaianat-contact-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--kaianat-brand);
}
.kaianat-contact-value {
	display: block;
	margin-top: 0.25rem;
	color: var(--kaianat-navy);
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.kaianat-contact-value:hover { color: var(--kaianat-brand); }

.kaianat-subhead {
	margin: 0 0 1.5rem;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--kaianat-navy);
}
@media (min-width: 640px) { .kaianat-subhead { font-size: 1.875rem; } }

.kaianat-form-card {
	padding: 1.75rem;
	border-radius: var(--kaianat-radius-xl);
	border: 1px solid var(--kaianat-border);
	background: var(--kaianat-card);
	box-shadow: var(--kaianat-shadow-md);
}
@media (min-width: 640px) { .kaianat-form-card { padding: 2.5rem; } }
.kaianat-form-field { margin-bottom: 1.25rem; }
.kaianat-form-field label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--kaianat-navy);
}
.kaianat-form-field input,
.kaianat-form-field textarea,
.kaianat-form-field select {
	width: 100%;
	max-width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--kaianat-border);
	border-radius: var(--kaianat-radius);
	font-family: var(--kaianat-font);
	font-size: 0.9375rem;
	background: var(--kaianat-bg);
	color: var(--kaianat-navy);
	transition: border-color 0.3s ease;
}
.kaianat-form-field textarea { min-height: 8rem; resize: vertical; }
.kaianat-form-field input:focus,
.kaianat-form-field textarea:focus,
.kaianat-form-field select:focus { outline: none; border-color: var(--kaianat-brand); }
.kaianat-form-alert {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--kaianat-radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}
.kaianat-form-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.kaianat-form-alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* The footer butts straight up against whatever precedes it — no gap. */
.kaianat-footer { margin-top: 0; }
.elementor-widget-kaianat-footer { margin-top: 0 !important; }
.elementor-widget-kaianat-cta + .elementor-widget-kaianat-footer,
.kaianat-cta + .kaianat-footer { margin-top: 0; }

/* ====================================================================
   29. FOOTER
   ==================================================================== */
.kaianat-footer { background: var(--kaianat-navy); color: #ffffff; }
.kaianat-footer-inner { padding: 5rem 0 2.5rem; }
.kaianat-footer-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	/* Contiguous 5/3/4 split — the old layout started the links column at
	   track 8, which left a dead gap and made the brand column read twice as
	   wide as it should. The contact column gets the extra track because the
	   email address is the longest string in the footer. */
	.kaianat-footer-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2.5rem;
	}
	.kaianat-footer-brand { grid-column: span 5; }
	.kaianat-footer-links { grid-column: span 3; }
	.kaianat-footer-contact { grid-column: span 4; }
}
@media (min-width: 640px) and (max-width: 1023px) {
	.kaianat-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
	.kaianat-footer-brand { grid-column: 1 / -1; }
}
.kaianat-footer-brand img { width: 180px; max-width: 100%; height: auto; display: block; object-fit: contain; }
@media (max-width: 767px) { .kaianat-footer-brand img { width: 140px; } }
.kaianat-footer-about { margin: 1.5rem 0 0; max-width: 30rem; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.65); }
.kaianat-footer-title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--kaianat-turquoise);
}
.kaianat-footer-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.kaianat-footer-list li { margin-bottom: 0.75rem; }
.kaianat-footer-list a,
.kaianat-footer-list a:link,
.kaianat-footer-list a:visited {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.70) !important;
	text-decoration: none !important;
	transition: color 0.3s ease;
}
.kaianat-footer-list a:hover,
.kaianat-footer-list a:focus { color: #ffffff !important; }
.kaianat-footer-social { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.5rem; }
.kaianat-social-icon {
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
	transition: var(--kaianat-transition);
}
.kaianat-social-icon:hover {
	background: var(--kaianat-turquoise);
	border-color: var(--kaianat-turquoise);
	color: var(--kaianat-navy);
}
.kaianat-social-icon svg { width: 1.0625rem; height: 1.0625rem; }
.kaianat-footer-bar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 4rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 640px) {
	.kaianat-footer-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.kaianat-footer-copy { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); }
.kaianat-footer-est { margin: 0; font-size: 0.875rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.45); }
.kaianat-agency-link,
.kaianat-agency-link:link,
.kaianat-agency-link:visited { color: rgba(255, 255, 255, 0.65) !important; text-decoration: none !important; }
.kaianat-agency-link:hover { color: var(--kaianat-turquoise) !important; }

/* ====================================================================
   32. ECOSYSTEM — "more" button row (home)
   ==================================================================== */
.kaianat-eco-more { display: flex; justify-content: center; margin-top: 3rem; }
@media (min-width: 1024px) { .kaianat-eco-more { margin-top: 3.5rem; } }

/* ====================================================================
   33. VALUES — fanned card deck (dark gradient)
   ==================================================================== */
.kaianat-values-fan {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.kaianat-fan-slot { width: 100%; }
.kaianat-fan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	border-radius: var(--kaianat-radius-xl);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: #ffffff;
	box-shadow: var(--kaianat-shadow-lg);
	overflow: hidden;
}
.kaianat-fan-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 80% at 80% 0%, rgba(34, 196, 200, 0.18), transparent 60%);
}
.kaianat-fan-index {
	position: absolute;
	top: 1.1rem;
	inset-inline-end: 1.25rem;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.45);
	z-index: 2;
}
.kaianat-fan-icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 0.9rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--kaianat-turquoise);
}
.kaianat-fan-icon svg { width: 1.5rem; height: 1.5rem; }
.kaianat-fan-body { position: relative; z-index: 2; margin-top: 1.5rem; }
.kaianat-fan-title {
	margin: 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	color: #ffffff;
}
.kaianat-fan-desc { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.85; color: rgba(255, 255, 255, 0.74); }

@media (min-width: 900px) {
	.kaianat-values-fan { flex-wrap: nowrap; gap: 0; padding-block: 3.5rem 2.5rem; }
	.kaianat-fan-slot {
		width: clamp(11rem, 19vw, 15.5rem);
		margin-inline: -1.35rem;
		z-index: var(--kaianat-fan-z, 1);
	}
	.kaianat-fan-card {
		min-height: 21rem;
		transform: rotate(var(--kaianat-fan-rot, 0deg)) translateY(var(--kaianat-fan-y, 0px));
		transform-origin: bottom center;
		transition: transform 0.55s var(--kaianat-ease), box-shadow 0.55s var(--kaianat-ease);
	}
	.kaianat-fan-slot:hover { z-index: 30; }
	.kaianat-fan-slot:hover .kaianat-fan-card {
		transform: rotate(0deg) translateY(-18px) scale(1.04);
		box-shadow: var(--kaianat-shadow-xl);
	}
}
@media (max-width: 899px) {
	.kaianat-fan-card { min-height: 0; }
}
@media (min-width: 640px) and (max-width: 899px) {
	.kaianat-fan-slot { width: calc(50% - 0.75rem); }
}

/* ====================================================================
   33b. VALUES — step cards (angled coloured tab)
   ==================================================================== */
.kaianat-steps-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 2.5rem;
}
@media (min-width: 768px) { .kaianat-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kaianat-steps-grid > * { height: 100%; }

/* Tab | (icon over title) — a two-row column beside the angled tab, so the
   icon reads as a header for the card rather than a bullet beside it. */
.kaianat-step-card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 1.1rem;
	row-gap: 0.85rem;
	height: 100%;
	min-height: 8.5rem;
	padding: 1.5rem 1.6rem 1.5rem 0;
	background: #ffffff;
	border: 1px solid rgba(10, 42, 63, 0.07);
	border-radius: var(--kaianat-radius-lg);
	box-shadow: 0 18px 40px -30px rgba(10, 42, 63, 0.45);
	overflow: hidden;
	transition: transform 0.45s var(--kaianat-ease), box-shadow 0.45s var(--kaianat-ease);
}
.kaianat-step-card:hover { transform: translateY(-6px); box-shadow: var(--kaianat-shadow-lg); }

/* Angled coloured tab — leading edge in RTL, clipped diagonally. */
.kaianat-step-tab {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	align-self: stretch;
	width: 6.5rem;
	color: #ffffff;
	-webkit-clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	padding-inline: 0.5rem 1.1rem;
}
.kaianat-dir-ltr .kaianat-step-tab {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%);
	padding-inline: 1.1rem 0.5rem;
}
.kaianat-step-word {
	font-family: var(--kaianat-font-display);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.85);
}
.kaianat-step-num {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.9rem;
	line-height: 1;
	color: #ffffff;
}
.kaianat-step-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	background: rgba(12, 123, 154, 0.10);
	color: var(--kaianat-brand);
}
.kaianat-step-icon svg { width: 1.5rem; height: 1.5rem; }
.kaianat-step-card .kaianat-step-tab  { grid-column: 1; grid-row: 1 / -1; }
.kaianat-step-card .kaianat-step-icon { grid-column: 2; grid-row: 1; align-self: end; }
.kaianat-step-card .kaianat-step-body { grid-column: 2; grid-row: 2; align-self: start; }
.kaianat-step-body { min-width: 0; }
.kaianat-step-title {
	margin: 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 1.3rem;
}
.kaianat-step-desc { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.8; color: var(--kaianat-muted-fg); }
@media (max-width: 420px) {
	.kaianat-step-tab { width: 5.25rem; }
	.kaianat-step-num { font-size: 1.55rem; }
	.kaianat-step-icon { width: 2.5rem; height: 2.5rem; }
}

/* ====================================================================
   34. QUALITY — centred certificate with scattered badges
   ==================================================================== */
.kaianat-quality-stage {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 3rem;
	align-items: center;
}
.kaianat-quality-center { display: flex; flex-direction: column; gap: 1.25rem; order: -1; }
.kaianat-quality-col { display: flex; flex-direction: column; gap: 1.25rem; }
/* Phones: both columns dissolve into the stage grid (display:contents) so all
   badges share one two-up grid and keep their authored order via `order`. */
@media (max-width: 639px) {
	.kaianat-quality-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.kaianat-quality-col { display: contents; }
	.kaianat-quality-center { grid-column: 1 / -1; }
	.kaianat-quality-stage > .kaianat-quality-col > .kaianat-reveal { order: var(--kaianat-badge-order, 0); }
	.kaianat-quality .kaianat-badge {
		height: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
		padding: 0.9rem 0.85rem;
		/* The two hand-placed nudges are a desktop composition detail — inside
		   a two-up grid they would just break the columns. */
		margin: 0 !important;
	}
	.kaianat-quality .kaianat-badge-title { font-size: 0.82rem; line-height: 1.45; }
	.kaianat-quality .kaianat-badge-sub { font-size: 0.68rem; }
	.kaianat-badge-mark svg { width: 22px; height: 22px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
	.kaianat-quality-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kaianat-quality-center { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.kaianat-quality-stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 2.5rem;
		margin-top: 3.5rem;
	}
	.kaianat-quality-center { order: 0; }
	.kaianat-quality-col-a .kaianat-badge { margin-inline-end: var(--kaianat-badge-shift, 0); }
	.kaianat-quality-col-b .kaianat-badge { margin-inline-start: var(--kaianat-badge-shift, 0); }
}
.kaianat-quality-center .kaianat-cert-frame {
	padding: 1.5rem;
	border-radius: var(--kaianat-radius-lg);
	box-shadow: var(--kaianat-shadow-lg);
}
.kaianat-quality-center .kaianat-cert-frame + .kaianat-cert-frame { margin-top: 0; }

.kaianat-quality .kaianat-badge {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.05rem 1.15rem;
	border-radius: var(--kaianat-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: var(--kaianat-grad-deep-1);
	box-shadow: 0 18px 36px -26px rgba(10, 42, 63, 0.85);
	transition: transform 0.45s var(--kaianat-ease), box-shadow 0.45s var(--kaianat-ease);
}
.kaianat-quality .kaianat-quality-col-b .kaianat-badge { background: var(--kaianat-grad-deep-2); }
.kaianat-quality .kaianat-badge:hover { transform: translateY(-5px); box-shadow: var(--kaianat-shadow-xl); }
.kaianat-badge-mark { flex: 0 0 auto; display: inline-flex; }
.kaianat-quality .kaianat-badge-title { margin: 0; font-size: 0.95rem; color: #ffffff; }
.kaianat-quality .kaianat-badge-sub { margin: 0.15rem 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.64); }

/* ====================================================================
   35. ECOSYSTEM SLIDER (ecosystem page) — rail + image stage + copy
   Three columns on desktop: the side rail (counter, vertical label, peek
   thumbnails), the image stage, and the copy with its nav buttons. On
   phones it becomes one column: image, rail, copy. Slides and panels are
   stacked in a single grid cell so switching never changes the height.
   ==================================================================== */
.kaianat-eco-rev { background: var(--kaianat-bg); }
.kaianat-eco-rev-slider { margin-top: 2.5rem; }

.kaianat-eco-rev-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}
@media (min-width: 1024px) {
	.kaianat-eco-rev-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
		gap: 2.5rem;
	}
	.kaianat-eco-rev-slider { margin-top: 3.5rem; }
}

/* --- Side rail --- */
.kaianat-eco-rev-side {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	order: 2;
}
@media (min-width: 1024px) {
	.kaianat-eco-rev-side {
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		order: 0;
	}
}
.kaianat-eco-rev-meta { display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 1024px) {
	.kaianat-eco-rev-meta { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}
.kaianat-eco-rev-count {
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	color: var(--kaianat-muted-fg);
	direction: ltr;
	unicode-bidi: isolate;
}
/* Horizontal on purpose: Arabic in a vertical writing-mode stacks the
   letters and breaks the joins — a rule + label reads far better. */
.kaianat-eco-rev-vert {
	display: none;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--kaianat-navy);
}
.kaianat-eco-rev-vert::before {
	content: "";
	display: block;
	width: 2rem;
	height: 1px;
	background: var(--kaianat-turquoise);
}
@media (min-width: 1024px) { .kaianat-eco-rev-vert { display: flex; } }

.kaianat-eco-rev-thumbs { display: flex; gap: 0.5rem; }
.kaianat-eco-rev-thumb {
	flex: 0 0 auto;
	width: 3.75rem;
	height: 4.75rem;
	padding: 0;
	border: 1px solid rgba(10, 42, 63, 0.10);
	border-radius: var(--kaianat-radius);
	background: var(--kaianat-navy);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.72;
	transition: opacity 0.35s var(--kaianat-ease), transform 0.35s var(--kaianat-ease);
}
.kaianat-eco-rev-thumb:hover,
.kaianat-eco-rev-thumb:focus-visible { opacity: 1; transform: translateY(-4px); }
.kaianat-eco-rev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaianat-eco-rev-thumb.kaianat-is-hidden { display: none; }
@media (min-width: 1024px) {
	.kaianat-eco-rev-thumb { width: 4.5rem; height: 5.5rem; }
}

/* --- Image stage --- */
.kaianat-eco-rev-stage {
	position: relative;
	display: grid;
	order: 1;
	aspect-ratio: 4 / 5;
	max-height: 24rem;
	margin-inline: auto;
	width: 100%;
	max-width: 20rem;
	border-radius: var(--kaianat-radius-xl);
	overflow: hidden;
	background: var(--kaianat-navy);
	box-shadow: 0 26px 60px -34px rgba(10, 42, 63, 0.55);
}
@media (min-width: 1024px) {
	.kaianat-eco-rev-stage { order: 0; max-height: none; max-width: none; height: 32rem; aspect-ratio: auto; }
}
.kaianat-eco-rev-slide {
	grid-area: 1 / 1;
	position: relative;
	margin: 0;
	opacity: 0;
	transform: scale(1.04);
	visibility: hidden;
	transition: opacity 0.6s var(--kaianat-ease), transform 0.8s var(--kaianat-ease), visibility 0s linear 0.6s;
}
.kaianat-eco-rev-slide.kaianat-is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition: opacity 0.6s var(--kaianat-ease), transform 0.8s var(--kaianat-ease), visibility 0s;
}
.kaianat-eco-rev-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaianat-eco-rev-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 42, 63, 0.55), rgba(10, 42, 63, 0) 55%);
}
.kaianat-eco-rev-badge {
	position: absolute;
	top: 1rem;
	inset-inline-start: 1rem;
	padding: 0.3rem 0.7rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.94);
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: 0.78rem;
	color: var(--kaianat-brand);
}

/* --- Copy --- */
.kaianat-eco-rev-copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.75rem;
	order: 3;
}
@media (min-width: 1024px) {
	.kaianat-eco-rev-copy { order: 0; padding-block: 1.5rem; }
}
.kaianat-eco-rev-panels { display: grid; }
.kaianat-eco-rev-panel {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(18px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s var(--kaianat-ease), transform 0.5s var(--kaianat-ease), visibility 0s linear 0.5s;
}
.kaianat-eco-rev-panel.kaianat-is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.5s var(--kaianat-ease), transform 0.5s var(--kaianat-ease), visibility 0s;
}
.kaianat-eco-rev-field {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--kaianat-brand);
}
.kaianat-eco-rev-name {
	margin: 0.5rem 0 0;
	font-family: var(--kaianat-font-display);
	font-weight: 900;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1.25;
	color: var(--kaianat-navy);
}
.kaianat-eco-rev-quote {
	margin: 1.1rem 0 0;
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	line-height: 1.85;
	font-weight: 500;
	color: var(--kaianat-navy);
}
.kaianat-eco-rev-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.kaianat-eco-rev-tag {
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	background: rgba(12, 123, 154, 0.08);
	border: 1px solid rgba(12, 123, 154, 0.14);
	font-size: 0.78rem;
	color: var(--kaianat-navy);
}
.kaianat-eco-rev-actions { margin-top: 1.5rem; }

.kaianat-eco-rev-nav { display: flex; align-items: center; gap: 0.6rem; }
.kaianat-eco-rev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-radius: 9999px;
	border: 1px solid rgba(10, 42, 63, 0.25);
	background: transparent;
	color: var(--kaianat-navy);
	cursor: pointer;
	transition: background 0.3s var(--kaianat-ease), color 0.3s var(--kaianat-ease), transform 0.3s var(--kaianat-ease);
}
.kaianat-eco-rev-btn:hover { transform: translateY(-3px); }
.kaianat-eco-rev-btn-solid {
	background: var(--kaianat-brand);
	border-color: var(--kaianat-brand);
	color: #ffffff;
}
.kaianat-eco-rev-btn-solid:hover { background: var(--kaianat-navy); border-color: var(--kaianat-navy); }

/* The editor shows every panel stacked otherwise — pin it to the first. */
.elementor-editor-active .kaianat-eco-rev-panel,
body.elementor-editor-preview .kaianat-eco-rev-panel,
.elementor-editor-active .kaianat-eco-rev-slide,
body.elementor-editor-preview .kaianat-eco-rev-slide { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	.kaianat-eco-rev-slide,
	.kaianat-eco-rev-panel,
	.kaianat-eco-rev-thumb,
	.kaianat-eco-rev-btn { transition: none !important; }
}

/* ====================================================================
   30. MOBILE COLLAPSE SAFETY NET
   ==================================================================== */
@media (max-width: 767px) {
	.kaianat-section img,
	.kaianat-section video,
	.kaianat-section iframe { max-width: 100%; height: auto; }
	.kaianat-badge-grid { grid-template-columns: minmax(0, 1fr); }
	.kaianat-about-year { display: none; }
}

/* ====================================================================
   31. COVER IMAGES — FINAL OVERRIDE
   Last block in the file, !important throughout. Anything that must fill
   its frame is listed here so no theme, optimiser or lazy-load plugin can
   collapse it back to intrinsic height. If an image ever renders half-shown
   with empty colour beneath it, its class belongs in this list.
   ==================================================================== */
.kaianat-hero-video,
.kaianat-hero-poster,
.kaianat-page-hero-bg,
.kaianat-cta-bg,
.kaianat-numbers-bg,
.kaianat-vm-bg,
.kaianat-values-bg,
.kaianat-story-bg,
.kaianat-ecosystem-bg,
.kaianat-figure img,
.kaianat-eco-media img,
.kaianat-sector-card img,
.kaianat-project-media img,
.kaianat-company-figure img,
.kaianat-eco-rev-slide img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
}
/* Certificates and the map are documents, not scenery — they must show whole. */
.kaianat-cert-frame img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
}