/*
Theme Name: Hello Elementor Child — CanImage
Theme URI: https://canimage.in/
Description: CanImage brand child theme — fonts, design tokens, Elementor integration.
Author: CanImage
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-canimage
*/

:root {
	/* Primary */
	--ci-primary-100: #96ace1;
	--ci-primary-200: #6183d2;
	--ci-primary-300: #355dbb;
	--ci-primary-400: #264386; /* main */
	--ci-primary-500: #16264d;

	/* Secondary */
	--ci-secondary-100: #fabf9e;
	--ci-secondary-200: #f57f3e; /* main */
	--ci-secondary-300: #ee5d0c;
	--ci-secondary-400: #b9480a;
	--ci-secondary-500: #833307;

	/* Neutral */
	--ci-neutral-100: #ffffff;
	--ci-neutral-200: #e8e8e8;
	--ci-neutral-300: #d2d2d2;
	--ci-neutral-400: #bbbbbb;
	--ci-neutral-500: #a4a4a4;
	--ci-neutral-600: #8e8e8e;
	--ci-neutral-700: #777777;
	--ci-neutral-800: #606060;
	--ci-neutral-900: #4a4a4a;
	--ci-neutral-1000: #333333;

	/* Font stacks */
	--ci-font-heading: 'Clash Display', sans-serif;
	--ci-font-body: 'Satoshi', sans-serif;

	/* Shared homepage boxed-panel width */
	--ci-home-panel-max: 1760px;
}

/* ------------------------------------------------------------------
   Floating pill header (HFE template inside header#masthead).
   The pill itself (background, radius, padding) is styled in
   Elementor — only the fixed positioning lives here.
------------------------------------------------------------------- */
/* body.ehf-header outranks HFE's own `.ehf-header #masthead{position:relative}` */
body.ehf-header header#masthead {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 990;
	background: transparent;
	padding: 0 14px;
}

/* Center the pill: Elementor paints a container's background full-width,
   so the cap lives here. Keep in sync with the container's boxed width. */
header#masthead .e-con.e-parent {
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
}

body.admin-bar.ehf-header header#masthead {
	top: 42px;
}

@media (max-width: 782px) {
	body.admin-bar.ehf-header header#masthead {
		top: 56px;
	}
}

/* ------------------------------------------------------------------
   Tablet/mobile header (≤1024px)

   CLOSED: compact pill — logo left, hamburger right, full rounding,
   light shadow (the Elementor container's own styling).

   OPEN: the pill grows into one rounded card that contains the logo
   row AND the menu. Instead of HFE's separate absolutely-positioned
   dropdown, we drop the menu widget onto its own full-width row so the
   container box wraps everything — giving a single border-radius and a
   single shadow, matching the design.
------------------------------------------------------------------- */
@media (max-width: 1024px) {
	header#masthead .elementor-widget-navigation-menu {
		width: auto;
	}
	header#masthead .hfe-nav-menu__toggle {
		margin: 0;
	}

	/* CLOSED — keep the hidden nav collapsed. !important because HFE's
	   close handler stamps inline `width:auto` on the nav, which would
	   otherwise re-expand the hidden menu and shove the toggle left. */
	header#masthead .hfe-nav-menu__toggle:not(.hfe-active-menu) + nav.hfe-nav-menu__layout-horizontal {
		width: 0 !important;
		overflow: hidden;
	}

	/* OPEN — pill turns into a smooth-cornered card with one wrapping shadow. */
	header#masthead .e-con.e-parent:has(.hfe-active-menu) {
		border-radius: 28px;
		box-shadow: 0 24px 60px rgba(22, 38, 77, 0.18);
		padding-top: 18px;
		padding-bottom: 22px;
	}

	/* Force the row to wrap so the logo keeps row 1 and the menu drops to
	   its own row. Elementor only auto-wraps the container at ≤767px, so
	   the tablet range (768–1024px) needs this explicitly. */
	header#masthead .e-con.e-parent:has(.hfe-active-menu) > .e-con-inner,
	header#masthead .e-con.e-parent.e-con-full:has(.hfe-active-menu) {
		flex-wrap: wrap !important;
	}

	/* Pin the close (X) toggle to the card's top-right corner. The menu
	   widget goes full-width on its own row (flex-basis 100% + no shrink)
	   and `position:static` so the toggle's offset parent is the pill. */
	header#masthead .e-con.e-parent:has(.hfe-active-menu) .elementor-widget-navigation-menu {
		position: static !important;
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	header#masthead .e-con.e-parent:has(.hfe-active-menu) .hfe-nav-menu__toggle {
		position: absolute !important;
		top: 20px;
		right: 22px;
		margin: 0;
	}

	/* The menu list flows full-width on its own row beneath the logo. */
	header#masthead .hfe-active-menu + nav.hfe-nav-menu__layout-horizontal {
		position: static !important;
		left: auto !important;
		width: 100% !important;
		overflow: visible;
		margin-top: 6px;
		z-index: auto !important;
	}
	header#masthead .hfe-active-menu + nav .hfe-nav-menu {
		width: 100% !important;
	}

	/* Divider lines between items (not under the last), inset from edges. */
	header#masthead .hfe-active-menu + nav .hfe-nav-menu > li.menu-item {
		border-bottom: 1px solid var(--ci-primary-400);
		margin: 0 6px;
	}
	header#masthead .hfe-active-menu + nav .hfe-nav-menu > li.menu-item:last-child {
		border-bottom: 0;
	}
	header#masthead .hfe-active-menu + nav .hfe-nav-menu > li.menu-item > a.hfe-menu-item,
	/* "Our Brands" wraps its anchor in .hfe-has-submenu-container (it's a parent
	   item), so the direct-child reset above misses it — zero its indent too. */
	header#masthead .hfe-active-menu + nav .hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a.hfe-menu-item {
		padding-left: 0;
		padding-right: 0;
	}
}

/* The "Contact Us" menu item is the dropdown replacement for the header
   button (hidden on tablet/mobile, where the hamburger shows) — keep it
   out of the desktop nav. */
@media (min-width: 1025px) {
	header#masthead li#menu-item-33 {
		display: none;
	}
}

/* HFE's resize handler leaves stale inline styles (fixed px width from
   the dropdown, visibility:hidden from a closed toggle) when the viewport
   crosses back above its 1024px breakpoint — reset them on desktop. */
@media (min-width: 1025px) {
	header#masthead nav.hfe-nav-menu__layout-horizontal {
		width: auto !important;
		height: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
	}
	header#masthead .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		width: 100% !important;
		height: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* HFE's submenu icon uses Font Awesome glyph codes. If that icon font fails
   or is decoded oddly, the arrow prints as broken text. Hide the font icon
   and draw a small CSS chevron instead. */
header#masthead .hfe-nav-menu .parent-has-child .sub-arrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	font-size: 0 !important;
	line-height: 0 !important;
	vertical-align: middle;
}
header#masthead .hfe-nav-menu .parent-has-child .sub-arrow i,
header#masthead .hfe-nav-menu .parent-has-child .sub-arrow i::before {
	display: none !important;
	content: "" !important;
}
header#masthead .hfe-nav-menu .parent-has-child .sub-arrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
header#masthead .hfe-nav-menu .parent-has-child .sub-menu-active .sub-arrow::before,
header#masthead .hfe-nav-menu .parent-has-child .menu-active .sub-arrow::before {
	transform: translateY(2px) rotate(225deg);
}

/* ------------------------------------------------------------------
   Logo dropdowns — a light card listing brand sub-items stacked with
   dividers. Any parent menu item that is a "logo dropdown" (the "Our Brands"
   item, or any item given the `ci-logo-dropdown` CSS class in Appearance →
   Menus) gets the card; the theme tags it `.ci-logo-dropdown` and tags each
   child `.ci-brand-item`. When a logo is uploaded for a child (Menus → Brand
   logo) the theme adds `.ci-has-logo` and paints the logo as the row's
   background image (see functions.php); rows without a logo show the item's
   text instead. Sub-items: setup/brands-dropdown.php.
------------------------------------------------------------------- */
@media (min-width: 1025px) {
	/* The dropdown card (only for logo dropdowns, not ordinary submenus). */
	header#masthead .ci-logo-dropdown .sub-menu {
		background: #ededee !important;
		border: 0 !important;
		border-radius: 18px !important;
		box-shadow: 0 26px 60px rgba(22, 38, 77, 0.22) !important;
		padding: 16px !important;
		min-width: 340px;
		margin-top: 14px;
	}
}
/* Each brand row. The logo image is set per item as a background by the theme;
   sizing/position come from here. */
header#masthead .ci-brand-item {
	margin: 0 !important;
}
header#masthead .ci-brand-item > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 14px 22px !important;
	border-radius: 12px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 28px;
	font-family: var(--ci-font-heading) !important;
	font-weight: 700;
	font-size: 22px;
	color: var(--ci-secondary-300) !important;
	transition: background-color 0.2s ease;
}
/* When a logo image is present, hide the text label visually — it stays in
   the DOM as the accessible link name. Rows with no logo keep the text. */
header#masthead .ci-brand-item.ci-has-logo > a {
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}
header#masthead .ci-brand-item > a:hover {
	background-color: rgba(22, 38, 77, 0.05);
}
/* Divider between brand rows (every row except the last). */
header#masthead .ci-brand-item:not(:last-child) {
	border-bottom: 1px solid rgba(22, 38, 77, 0.12);
	padding-bottom: 2px;
	margin-bottom: 2px !important;
}

/* ------------------------------------------------------------------
   Home hero (#cihero1 / .ci-hero) — full-bleed background video with
   thumbnail fallback, overlaid editable text + orange L-corners.
   Built as native Elementor data in setup/home-hero.php; the visual
   layer lives here. Height: 100vh desktop/tablet, 2:3 ratio on mobile.
   `content_width:full` → children are direct children of `.e-con`
   (no `.e-con-inner` wrapper).
------------------------------------------------------------------- */
.ci-hero {
	--ci-hero-pad-x: clamp(24px, 5vw, 72px);
	--ci-hero-pad-top: clamp(120px, 14vw, 170px);
	--ci-hero-pad-bottom: clamp(40px, 5vw, 64px);
	--ci-hero-corner-size: 52px;
	--ci-hero-corner-thick: 18px;
	--ci-hero-corner-color: #F57F3E;
	--ci-hero-corner-inset: clamp(20px, 4vw, 48px);
	--ci-hero-corner-inset-top: clamp(120px, 13vw, 168px); /* below the fixed header (bottom ≈76px) */

	/* Sticky so the next section scrolls up and overlays it. home-scroll.js
	   adds .ci-hero--unpinned once the "Future" panel has scrolled past, so
	   the hero releases instead of staying stuck behind later sections. */
	position: sticky;
	top: 0;
	z-index: 0;
	overflow: hidden;
	min-height: 100vh;
	background-color: var(--ci-primary-500);
	padding: var(--ci-hero-pad-top) var(--ci-hero-pad-x) var(--ci-hero-pad-bottom);
}
/* Released after the Future panel scrolls past — returns to normal flow
   (scrolled above the viewport) so it no longer pins behind later sections. */
.ci-hero.ci-hero--unpinned {
	position: relative;
}

/* About Us: the hero is a normal (non-sticky) section. That page has no
   scroll-overlay choreography (home-scroll.js runs only on the front page),
   so the hero should flow above the content below it, not stay pinned. */
body.ci-page-about .ci-hero {
	position: relative;
}

/* The hero is a positioned (sticky) element at z-index:0, so static sections
   would paint *below* it. Lift every content section after the Future panel
   above the hero so it can never bleed over them, even mid scroll-release. */
.ci-why,
.ci-vis,
.ci-scale,
.ci-sus,
.ci-track,
.ci-cta {
	position: relative;
	z-index: 1;
}

/* Bottom legibility gradient — above the video, below the text. */
.ci-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.38));
	pointer-events: none;
	z-index: 1;
	opacity: var(--ci-hero-fg-opacity, 1);
}

/* Hero foreground (text row + corner brackets + gradient) fades out as the
   "Future" panel scrolls over it (driven by assets/js/home-scroll.js), so
   only the hero background shows in the margins around the panel. */
.ci-hero-row,
.ci-hero-corner {
	opacity: var(--ci-hero-fg-opacity, 1);
}

/* The corner-bracket HTML widget overlays the box without taking flex space. */
.ci-hero > .elementor-widget-html {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
	z-index: 3;
}

/* Content row sits above gradient + video. */
.ci-hero > .ci-hero-row {
	position: relative;
	z-index: 2;
	width: 100%;
}
.ci-hero-left {
	min-width: 0;
}
/* Keep the paragraph as a separate bottom-right column. The !important is
   needed to beat Elementor's `.elementor.elementor .e-con>.elementor-widget
   { max-width:100% }` (specificity 0,4,0), which otherwise lets the text run
   full width into the heading. */
.ci-hero-row > .ci-hero-sub {
	flex: 0 0 auto;
	align-self: flex-end;
	max-width: 520px !important;
}

/* L-shaped corner brackets. */
.ci-hero-corner {
	position: absolute;
	width: var(--ci-hero-corner-size);
	height: var(--ci-hero-corner-size);
	z-index: 3;
}
.ci-hero-corner--tl {
	top: var(--ci-hero-corner-inset-top);
	left: var(--ci-hero-corner-inset);
	border-top: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
	border-left: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
}
.ci-hero-corner--tr {
	top: var(--ci-hero-corner-inset-top);
	right: var(--ci-hero-corner-inset);
	border-top: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
	border-right: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
}
.ci-hero-corner--bl {
	bottom: var(--ci-hero-corner-inset);
	left: var(--ci-hero-corner-inset);
	border-bottom: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
	border-left: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
}
.ci-hero-corner--br {
	bottom: var(--ci-hero-corner-inset);
	right: var(--ci-hero-corner-inset);
	border-bottom: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
	border-right: var(--ci-hero-corner-thick) solid var(--ci-hero-corner-color);
}

/* Badge pill (heading widget rendered as <span>). */
.ci-hero-badge .elementor-heading-title {
	display: inline-block;
	background: rgba(245, 127, 62, 0.5); /* --ci-secondary-200 @ 85% */
	color: var(--ci-neutral-100);
	font-family: var(--ci-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(245, 127, 62, 0.5);
}

/* Main heading (h1). */
.ci-hero-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 700;
	color: var(--ci-neutral-100);
	font-size: clamp(40px, 6vw, 84px);
	line-height: 1.02;
	margin: 0;
}

/* Sub paragraph (text-editor widget). */
.ci-hero-sub p {
	color: var(--ci-neutral-100);
	font-family: var(--ci-font-body);
	font-weight: 500;
	font-size: clamp(16px, 1.4vw, 22px);
	line-height: 1.45;
	text-align: right;
	margin: 0;
}

/* Mobile: 2:3 portrait, stacked + left-aligned text, smaller corners. */
@media (max-width: 767px) {
	.ci-hero {
		--ci-hero-corner-size: 36px;
		--ci-hero-corner-thick: 8px;
		--ci-hero-corner-inset: 16px;
		--ci-hero-corner-inset-top: 88px;
		--ci-hero-pad-top: clamp(96px, 24vw, 130px);
		min-height: 0;
		aspect-ratio: 2 / 3;
	}
	.ci-hero-row > .ci-hero-sub {
		align-self: flex-start;
		max-width: 100% !important;
	}
	.ci-hero-sub p {
		text-align: left;
	}
	.ci-hero-title .elementor-heading-title {
		font-size: clamp(34px, 9vw, 52px);
	}
}

/* ------------------------------------------------------------------
   Home: "We Are The Future of Communication" (#cifut01 / .ci-future)
   Blue section that scrolls up and overlays the sticky hero. Built as
   native Elementor data in setup/home-future-section.php; visuals here.
   Many rules use !important to beat Elementor's high-specificity
   container/widget defaults (e.g. `.elementor.elementor .e-con>
   .elementor-widget{max-width:100%}` = 0,4,0).
------------------------------------------------------------------- */
/* Transparent outer = the inset margins where the sticky hero shows through.
   Its padding sets the gap around the panel (top clears the fixed header). */
.ci-future {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: transparent;
	padding: clamp(92px, 12vh, 134px) clamp(16px, 5vw, 96px) clamp(40px, 7vh, 96px);
	color: var(--ci-neutral-100);
}
/* The rounded blue panel (bg + radius + padding come from Elementor data).
   flex:1 makes it fill the section height so it reads as a tall card. */
.ci-future-row {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
}

/* Two columns. */
.ci-future-row > .ci-future-media {
	flex: 0 0 46% !important;
	max-width: 46% !important;
	position: relative;
	align-self: stretch;
	min-height: clamp(360px, 56vh, 540px); /* anchors the card before the image is uploaded */
	display: flex;
	flex-direction: column;
}
.ci-future-row > .ci-future-content {
	flex: 1 1 auto !important;
	min-width: 0;
	justify-content: center;
}

/* Left image fills the panel height (rounded). */
.ci-future-img {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}
.ci-future-img > .elementor-widget-container {
	height: 100%;
}
.ci-future-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}

/* "100% Plastic-Free" card overlapping the image bottom-left. */
.ci-future-media > .ci-future-card {
	position: absolute !important;
	left: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 2vw, 28px);
	width: auto !important;
	max-width: none !important;
	background: var(--ci-neutral-100);
	border-radius: 16px;
	padding: 12px 22px 12px 12px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.ci-future-card-icon .elementor-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #d9f0de;
	color: #2e9e4f;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.ci-future-card-icon .elementor-icon svg {
	width: 20px;
	height: 20px;
	fill: #2e9e4f; /* inline-SVG check uses fill */
}
.ci-future-card-num .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 700;
	color: var(--ci-primary-500);
	font-size: 24px;
	line-height: 1.05;
}
.ci-future-card-sub .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 500;
	color: var(--ci-neutral-800);
	font-size: 13px;
	line-height: 1.2;
}

/* Right column heading + copy. */
.ci-future-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	color: var(--ci-neutral-100);
	font-size: clamp(32px, 3.4vw, 56px);
	line-height: 1.08;
	margin: 0;
}
.ci-future-text p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(15px, 1.05vw, 18px);
	line-height: 1.6;
	margin: 0;
}
.ci-future-lead p {
	font-size: clamp(16px, 1.2vw, 21px);
	color: var(--ci-neutral-100);
}
.ci-future-text .ci-orange {
	color: var(--ci-secondary-200);
	font-weight: 600;
}

/* Feature pills (static button chips). */
.ci-future-pills {
	margin-top: 10px;
}
.ci-future-pill .elementor-button {
	background-color: var(--ci-neutral-100) !important;
	color: var(--ci-primary-500) !important;
	border-radius: 12px !important;
	padding: 14px 20px !important;
	font-family: var(--ci-font-body);
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
	cursor: default;
}
.ci-future-pill .elementor-button-icon,
.ci-future-pill .elementor-button-icon svg {
	color: var(--ci-secondary-200);
	fill: var(--ci-secondary-200); /* inline-SVG icons use fill, not color */
}

/* "Know More" link-style button, bottom-right. */
.ci-future-content > .ci-future-more {
	align-self: flex-end;
	margin-top: 6px;
}
.ci-future-more .elementor-button {
	background-color: transparent !important;
	color: var(--ci-neutral-100) !important;
	padding: 6px 0 !important;
	font-family: var(--ci-font-body);
	font-weight: 600;
	font-size: 17px;
	text-decoration: underline;
	text-underline-offset: 6px;
}
.ci-future-more .elementor-button-icon {
	color: var(--ci-secondary-200);
}

/* Mobile: smaller panel margins, stack columns, card stays on the image. */
@media (max-width: 767px) {
	.ci-future {
		padding: clamp(80px, 16vh, 110px) 14px 36px;
	}
	.ci-future-row > .ci-future-media,
	.ci-future-row > .ci-future-content {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.ci-future-row > .ci-future-media {
		min-height: clamp(280px, 70vw, 420px);
	}
	.ci-future-content > .ci-future-more {
		align-self: flex-start;
	}
}

/* ------------------------------------------------------------------
   Home: "Why Brands Choose Us" (#ciwhy01 / .ci-why)
   Left = title + description; right = a fixed-height column of feature
   cards that scrolls inside itself (its height matches the left column).
   Opaque + full-height so it cleanly covers the released sticky hero.
   Cards are native Elementor data (setup/home-why-choose.php).
------------------------------------------------------------------- */
.ci-why {
	position: relative;
	z-index: 2;
	background: #ffffff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(60px, 9vh, 110px) clamp(24px, 5vw, 80px);
}
.ci-why-row {
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
}

/* Left column — title block, vertically centred against the cards. */
.ci-why-row > .ci-why-left {
	flex: 0 0 42% !important;
	max-width: 42% !important;
	justify-content: center;
	position: relative;
}
/* Brand corner bracket (top-left) + card-scroll progress bar (bottom-left).
   The progress fill (--ci-why-progress) is driven by home-scroll.js from the
   cards column's scroll position. */
.ci-why-left::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 52px;
	height: 52px;
	border-top: 18px solid #FBCCB2;
	border-left: 18px solid #FBCCB2;
}
.ci-why-left::after {
	content: "";
	position: absolute;
	bottom: 2px;
	right: 0;
	width: 52px;
	height: 52px;
	border-bottom: 18px solid #FBCCB2;
	border-right: 18px solid #FBCCB2;
}
/* Card-scroll progress bar (bottom-left) — anchored to .ci-why-left, which is
   the positioned ancestor. Inherits --ci-why-progress (set by home-scroll.js).
   Force the host static so the pseudo anchors to the column, not the widget. */
.ci-why-sub {
	position: static;
}
.ci-why-sub::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 4px;
	width: clamp(180px, 22vw, 300px);
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		var(--ci-secondary-300) var(--ci-why-progress, 14%),
		var(--ci-neutral-300) var(--ci-why-progress, 14%));
}
.ci-why-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	color: var(--ci-primary-400);
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1.06;
	margin: 0;
}
.ci-why-sub p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #264386;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.6;
	margin: 0;
}

/* Right column — the scroll viewport (height = left height via stretch). */
.ci-why-row > .ci-why-cards {
	flex: 1 1 auto !important;
	min-width: 0;
	height: clamp(480px, 72vh, 660px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--ci-secondary-200) transparent;
}
.ci-why-cards::-webkit-scrollbar {
	width: 6px;
}
.ci-why-cards::-webkit-scrollbar-thumb {
	background: var(--ci-secondary-200);
	border-radius: 999px;
}

/* Feature card. */
.ci-why-card {
	background: #f1f3f8;
	border-radius: 20px;
	padding: clamp(22px, 2vw, 34px) clamp(22px, 2vw, 36px);
	flex: 0 0 auto !important;
}
.ci-why-icon .elementor-icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 18px rgba(22, 38, 77, 0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ci-why-icon .elementor-icon svg {
	width: 26px;
	height: 26px;
	fill: var(--ci-secondary-200);
}
.ci-why-card-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	color: var(--ci-primary-400);
	font-size: clamp(18px, 1.4vw, 23px);
	line-height: 1.2;
	margin: 0;
}
.ci-why-card-text p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #264386;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.6;
	margin: 0;
}

/* Mobile: stack; cards flow naturally (no inner scroll) and the page scrolls. */
@media (max-width: 767px) {
	.ci-why {
		padding: clamp(56px, 12vh, 90px) 16px;
	}
	.ci-why-row > .ci-why-left,
	.ci-why-row > .ci-why-cards {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.ci-why-row > .ci-why-cards {
		height: auto;
		overflow: visible;
		padding-right: 0;
	}
	.ci-why-left::before,
	.ci-why-left::after,
	.ci-why-sub::after {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Home: "Complete Visibility. Total Accountability." (#civis01 / .ci-vis)
   White rounded panel: left text/callout/link, right a dark monitoring
   card with heatmap image + badges + 3 stat cards. Native Elementor data
   (setup/home-visibility.php); panel/card bg+radius+padding from data.
------------------------------------------------------------------- */
.ci-vis {
	padding: clamp(56px, 8vh, 100px) clamp(20px, 5vw, 80px);
}
/* Two separate cards on the light section background. */
.ci-vis-row {
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
	align-items: stretch !important;
}
.ci-vis-row > .ci-vis-left {
	flex: 1 1 49% !important;
	min-width: 0;
}
.ci-vis-row > .ci-vis-right {
	flex: 1 1 51% !important;
	min-width: 0;
	align-self: stretch;
}
/* Left — white card with peach corner brackets (top-left + bottom-right). */
.ci-vis-left {
	position: relative;
	background: #ffffff;
	border-radius: 0px 8px 0 8px;
	box-shadow: 0 20px 60px rgba(22, 38, 77, 0.045);
	overflow: hidden;
	padding: clamp(72px, 6vw, 96px) clamp(42px, 4vw, 64px) clamp(56px, 5vw, 82px) !important;
}
/* CSS fallback/primary corner brackets, matching the Why Brands Choose Us
   left-side treatment. This survives even if the Elementor HTML widget is
   removed while editing the section. */
.ci-vis-left::before,
.ci-vis-left::after {
	content: "";
	position: absolute;
	width: 52px;
	height: 52px;
	pointer-events: none;
	z-index: 2;
}
.ci-vis-left::before {
	top: 0;
	left: 0;
	border-top: 18px solid #FBCCB2;
	border-left: 18px solid #FBCCB2;
}
.ci-vis-left::after {
	right: 0;
	bottom: 0;
	border-right: 18px solid #FBCCB2;
	border-bottom: 18px solid #FBCCB2;
}
/* Elementor wraps the corner spans in a positioned HTML widget. Stretch that
   wrapper over the whole card so the corners anchor to the card edges. */
.ci-vis-left > .elementor-widget-html {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	z-index: 2;
}
.ci-vis-left > :not(.elementor-widget-html) {
	position: relative;
	z-index: 1;
}
.ci-vis-corner {
	position: absolute;
	display: none;
	width: 48px;
	height: 48px;
	pointer-events: none;
	z-index: 3;
}
.ci-vis-corner--tl {
	top: 0;
	left: 0;
	border-top: 18px solid #ee5d0ca6;
	border-left: 18px solid #ee5d0ca6;
}
.ci-vis-corner--br {
	bottom: 0;
	right: 0;
	border-bottom: 18px solid #ee5d0ca6;
	border-right: 18px solid #ee5d0ca6;
}
/* Right — white shell around a dark monitoring panel. */
.ci-vis-right {
	--ci-vis-shell-pad: clamp(24px, 2vw, 32px);
	--ci-vis-map-pad: clamp(22px, 1.8vw, 30px);
	--ci-vis-stat-inset: clamp(16px, 1.35vw, 25px);
	--ci-vis-stat-height: clamp(92px, 7vw, 118px);
	--ci-vis-sync-gap: clamp(8px, 1vw, 14px);
	position: relative !important;
	display: block !important;
	background: #ffffff !important;
	background-image: none !important;
	border-radius: 8px !important;
	box-shadow: 0 20px 60px rgba(22, 38, 77, 0.045);
	padding: var(--ci-vis-shell-pad) !important;
	overflow: hidden;
	aspect-ratio: auto;
	box-sizing: border-box;
	height: auto !important;
}

/* Left column. */
.ci-vis-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-primary-400);
	font-size: clamp(38px, 4vw, 58px);
	line-height: 0.98;
	letter-spacing: -0.01em;
	margin: 0;
}
.ci-vis-text p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #264386;
	font-size: clamp(16px, 1.25vw, 20px);
	line-height: 1.55;
	margin: 0;
}
.ci-vis-callout {
	width: 100%;
	background: #eef3fc;
	border-left: 4px solid var(--ci-primary-500);
	border-radius: 0 8px 8px 0;
	padding: 16px 22px !important;
}
.ci-vis-callout-text p {
	font-family: var(--ci-font-body);
	font-weight: 600;
	color: #264386;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.5;
	margin: 0;
}
.ci-vis-link .elementor-button {
	background: transparent !important;
	color: var(--ci-secondary-300) !important;
	padding: 4px 0 !important;
	font-family: var(--ci-font-body);
	font-weight: 600;
	font-size: clamp(15px, 1.1vw, 18px);
	text-decoration: underline;
	text-underline-offset: 5px;
}
.ci-vis-link .elementor-button-icon,
.ci-vis-link .elementor-button-icon svg {
	color: var(--ci-secondary-300);
	fill: var(--ci-secondary-300);
}

/* Right column — dark monitoring card. */
.ci-vis-map {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	background-color: #0b111d !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	border-radius: 16px !important;
	overflow: hidden;
	box-sizing: border-box;
}
.ci-vis-badge .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 600;
	font-size: clamp(13px, 1.05vw, 17px);
	color: #ffffff;
	border-radius: 7px;
	padding: 10px 22px;
	display: inline-block;
	white-space: nowrap;
}
.ci-vis-badge {
	position: absolute;
	z-index: 2;
}
.ci-vis-badge--units {
	top: 10px;
	right: 10px;
}
.ci-vis-badge--units .elementor-heading-title {
	background: #2c4a86;
}
.ci-vis-badge--sync {
	left: calc(var(--ci-vis-shell-pad) + var(--ci-vis-stat-inset));
	bottom: calc(var(--ci-vis-shell-pad) + var(--ci-vis-stat-inset) + var(--ci-vis-stat-height) + var(--ci-vis-sync-gap));
}
.ci-vis-badge--sync .elementor-heading-title {
	background: var(--ci-secondary-300);
}

/* Bottom stat cards: overlay inside the dark map, not below it. Elementor can
   wrap containers differently, so this selector is intentionally descendant
   scoped instead of direct-child scoped. */
.ci-vis-right .ci-vis-stats {
	position: absolute !important;
    left: calc(var(--ci-vis-shell-pad) + var(--ci-vis-stat-inset));
    right: calc(var(--ci-vis-shell-pad) + var(--ci-vis-stat-inset));
    bottom: calc(var(--ci-vis-shell-pad) + var(--ci-vis-stat-inset));
    z-index: 4;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 10px;
    align-content: center;
    align-items: stretch;
    justify-content: space-between;
}
.ci-vis-right .ci-vis-stat {
	flex: 1 1 0 !important;
	min-width: 0;
	box-sizing: border-box;
	background: #18253c;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: clamp(16px, 1.45vw, 22px) clamp(16px, 1.8vw, 26px) !important;
	min-height: var(--ci-vis-stat-height);
	justify-content: center;
}
.ci-vis-stat--up {
	border-color: var(--ci-secondary-300);
	box-shadow: inset 0 0 0 1px rgba(238, 93, 12, 0.35);
}
.ci-vis-stat-label .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 400;
	font-size: clamp(12px, 0.9vw, 14px);
	color: #8a99b5;
	white-space: nowrap;
}
.ci-vis-stat-value .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	font-size: clamp(22px, 2.2vw, 34px);
	color: #ffffff;
	line-height: 1.1;
}
.ci-vis-stat--ver .ci-vis-stat-value .elementor-heading-title {
	color: #34d27b;
}
.ci-vis-stat--pend .ci-vis-stat-value .elementor-heading-title {
	color: var(--ci-secondary-200);
}

/* Mobile: stack columns. */
@media (max-width: 767px) {
	.ci-vis-row > .ci-vis-left,
	.ci-vis-row > .ci-vis-right {
		flex: 1 1 100% !important;
	}
	.ci-vis-left {
		padding: 48px 24px 32px !important;
	}
	.ci-vis-corner {
		width: 34px;
		height: 34px;
	}
	.ci-vis-corner--tl,
	.ci-vis-corner--br {
		border-width: 14px;
	}
	.ci-vis-map {
		min-height: 360px;
	}
	.ci-vis-badge--sync {
		bottom: 116px;
	}
	.ci-vis-right .ci-vis-stats {
		gap: 10px !important;
	}
	.ci-vis-stat {
		padding: 12px !important;
		min-height: 82px;
	}
}

/* ------------------------------------------------------------------
   Home: "Executed at Unmatched Scale" (#cisca01 / .ci-scale)
   Two equal cards: left = background image + white heading/subtext +
   orange accent line; right = solid orange gradient + big number/label.
   Native Elementor data (setup/home-scale.php); card bg/radius from data.
------------------------------------------------------------------- */
.ci-scale {
	padding: clamp(48px, 7vh, 96px) clamp(20px, 5vw, 80px);
}
.ci-scale-row {
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
}
.ci-scale-row > .ci-scale-left,
.ci-scale-row > .ci-scale-cards {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* Left — background-image card. */
.ci-scale-left {
	position: relative;
	justify-content: flex-start;
	min-height: clamp(440px, 44vw, 580px);
	overflow: hidden;
}

/* Right — fixed-height viewport; the stat cards scroll vertically inside it. */
.ci-scale-cards {
	height: clamp(440px, 44vw, 580px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-snap-type: y mandatory;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--ci-secondary-200) transparent;
}
.ci-scale-cards::-webkit-scrollbar {
	width: 6px;
}
.ci-scale-cards::-webkit-scrollbar-thumb {
	background: var(--ci-secondary-200);
	border-radius: 999px;
}
/* Each stat card — fills most of the viewport so the next one peeks below. */
.ci-scale-card {
	flex: 0 0 auto !important;
	/* Each card fills the viewport exactly — one full card shows at a time. */
	height: clamp(440px, 44vw, 580px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: clamp(28px, 3vw, 44px);
	border-radius: 22px;
	text-align: center;
}
.ci-scale-card--orange {
	background: linear-gradient(135deg, #e89a5c, #d97f43);
}
.ci-scale-card--navy {
	background: linear-gradient(135deg, #3f5fa5, #2a4684);
}
.ci-scale-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-neutral-100);
	font-size: clamp(26px, 2.6vw, 40px);
	line-height: 1.12;
	margin: 0;
}
.ci-scale-sub p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(14px, 1vw, 17px);
	line-height: 1.5;
	margin: 0;
}
/* Decorative orange accent line, bottom-left. */
.ci-scale-left::after {
	content: "";
	position: absolute;
	left: 44px;
	bottom: 40px;
	width: clamp(120px, 16vw, 200px);
	height: 3px;
	background: var(--ci-secondary-300);
	border-radius: 999px;
}

/* Right — solid orange stat card. */
.ci-scale-num .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 700;
	color: var(--ci-neutral-100);
	font-size: clamp(38px, 4.2vw, 66px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-align: center;
	white-space: nowrap;
	margin: 0;
}
.ci-scale-num-label .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 400;
	color: var(--ci-neutral-100);
	font-size: clamp(18px, 1.9vw, 28px);
	line-height: 1.1;
	text-align: center;
	margin: 0;
}

/* Mobile: stack. */
@media (max-width: 767px) {
	.ci-scale-row > .ci-scale-left,
	.ci-scale-row > .ci-scale-cards {
		flex: 1 1 100% !important;
	}
	.ci-scale-left {
		min-height: clamp(300px, 80vw, 420px);
	}
	/* Cards flow naturally and the page scrolls (no inner scroll on mobile). */
	.ci-scale-cards {
		height: auto;
		overflow: visible;
		padding-right: 0;
		scroll-snap-type: none;
	}
	.ci-scale-card {
		height: auto;
		min-height: clamp(240px, 70vw, 340px);
	}
	.ci-scale-left::after {
		left: 24px;
		bottom: 24px;
	}
}

/* ------------------------------------------------------------------
   Home: "Sustainable Communication" (#cisus01 / .ci-sus)
   Light-green eco panel with a leaf watermark: left = badge + heading +
   copy; right = a staggered 2-column grid of 4 white stat cards.
   Native Elementor data (setup/home-sustainable.php).
------------------------------------------------------------------- */
.ci-sus {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 9vh, 110px) clamp(20px, 5vw, 80px);
}
/* Faint leaf watermark, centred near the top (assets/images/leaf.svg). */
.ci-sus::before {
	content: "";
    position: absolute;
    top: 3%;
    left: 40%;
    transform: translateX(-50%);
    width: clamp(160px, 15vw, 420px);
    height: clamp(160px, 15vw, 420px);
    background: no-repeat center / contain url(assets/images/leaf.svg);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.ci-sus-row {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
}
.ci-sus-row > .ci-sus-left {
	flex: 1 1 44% !important;
	min-width: 0;
}
.ci-sus-row > .ci-sus-cards {
	flex: 1 1 56% !important;
	min-width: 0;
}

/* Left — badge + heading + copy. */
.ci-sus-badge {
	width: auto !important;
	background: #d2eedb;
	border-radius: 999px;
	padding: 8px 16px !important;
}
.ci-sus-badge-icon .elementor-icon {
	display: inline-flex;
}
.ci-sus-badge-icon .elementor-icon svg {
	width: 16px;
	height: 16px;
	fill: #2f9e5d;
}
.ci-sus-badge-text .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 600;
	font-size: 14px;
	color: #2f9e5d;
}
.ci-sus-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-primary-400);
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1.08;
	margin: 0;
}
.ci-sus-text p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #51648f;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.6;
	margin: 0;
}
.ci-sus-text .ci-green {
	color: #2f9e5d;
	font-weight: 700;
}

/* Right — staggered 2-column card grid. */
.ci-sus-cards {
	width: 100%;
}
.ci-sus-cards > .ci-sus-col {
	flex: 1 1 0 !important;
	min-width: 0;
}
.ci-sus-cards > .ci-sus-col--b {
	margin-top: -52px; /* stagger the right column upward */
}
.ci-sus-card {
	min-height: clamp(210px, 22vw, 250px);
	box-shadow: 0 16px 36px rgba(31, 90, 50, 0.08);
}
.ci-sus-icon .elementor-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #dcf3e2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ci-sus-icon .elementor-icon svg {
	width: 24px;
	height: 24px;
	fill: #2f9e5d;
}
.ci-sus-card-value .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 700;
	color: var(--ci-primary-400);
	font-size: clamp(24px, 2vw, 32px);
	line-height: 1.05;
}
.ci-sus-card-label .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #6b7a90;
	font-size: clamp(14px, 1vw, 16px);
}

/* Mobile: stack everything; cards become a simple column. */
@media (max-width: 767px) {
	.ci-sus-row > .ci-sus-left,
	.ci-sus-row > .ci-sus-cards {
		flex: 1 1 100% !important;
	}
	.ci-sus-cards > .ci-sus-col--b {
		margin-top: 0;
	}
	.ci-sus::before {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Home: "Track Every Installation" (#citrk01 / .ci-track)
   Left = orange card (heading + copy + 3 feature rows + app badges);
   right = an editable background image framed by four orange L-corner
   brackets. Native Elementor data (setup/home-track.php).
------------------------------------------------------------------- */
.ci-track {
	padding: clamp(48px, 7vh, 96px) clamp(20px, 5vw, 80px);
}
.ci-track-row {
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
}
.ci-track-row > .ci-track-left {
	flex: 1 1 50% !important;
	min-width: 0;
}
.ci-track-row > .ci-track-right {
	flex: 1 1 50% !important;
	min-width: 0;
	position: relative;
	min-height: clamp(360px, 42vw, 600px);
	border-radius: 6px;
}

/* Left — orange card. */
.ci-track-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-neutral-100);
	font-size: clamp(30px, 3vw, 48px);
	line-height: 1.12;
	margin: 0;
}
.ci-track-text p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.6;
	margin: 0;
}

/* Feature rows. */
.ci-track-feats {
	width: 100%;
}
.ci-track-feat-icon .elementor-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.ci-track-feat-icon .elementor-icon svg {
	width: 22px;
	height: 22px;
	fill: var(--ci-primary-400);
}
.ci-track-feat-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	color: var(--ci-neutral-100);
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.2;
	margin: 0;
}
.ci-track-feat-desc p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.4;
	margin: 0;
}

/* "Download The App Now" + black store badges. */
.ci-track-dl .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 700;
	color: var(--ci-neutral-100);
	font-size: clamp(15px, 1.1vw, 17px);
	margin-top: 4px;
}
.ci-track-badge {
	width: auto !important;
	cursor: pointer;
	align-items: center !important;
	gap: 12px !important;
	padding: 10px 22px 10px 16px !important;
}
/* Vertically centre the brand icon against the two-line text. */
.ci-track-badge-icon {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.ci-track-badge-icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.ci-track-badge-icon .elementor-icon svg {
	width: 34px;
	height: 34px;
	fill: #ffffff;
}
.ci-track-badge-text {
	width: auto !important;
	justify-content: center;
}
.ci-track-badge-small .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #ffffff;
	font-size: 12px;
	line-height: 1.25;
}
.ci-track-badge-big .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	color: #ffffff;
	font-size: 18px;
	line-height: 1.2;
}

/* Right — image framed by L-corners. */
.ci-track-right > .elementor-widget-html {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 2;
}
.ci-track-corner {
	position: absolute;
	width: 52px;
	height: 52px;
	z-index: 2;
}
.ci-track-corner--tl {
	top: 12px;
	left: 12px;
	border-top: 18px solid #F57F3E;
	border-left: 18px solid #F57F3E;
}
.ci-track-corner--tr {
	top: 12px;
	right: 12px;
	border-top: 18px solid #F57F3E;
	border-right: 18px solid #F57F3E;
}
.ci-track-corner--bl {
	bottom: 12px;
	left: 12px;
	border-bottom: 18px solid #F57F3E;
	border-left: 18px solid #F57F3E;
}
.ci-track-corner--br {
	bottom: 12px;
	right: 12px;
	border-bottom: 18px solid #F57F3E;
	border-right: 18px solid #F57F3E;
}

/* Mobile: stack. */
@media (max-width: 767px) {
	.ci-track-row > .ci-track-left,
	.ci-track-row > .ci-track-right {
		flex: 1 1 100% !important;
	}
	.ci-track-row > .ci-track-right {
		min-height: clamp(320px, 90vw, 480px);
	}
}

/* ------------------------------------------------------------------
   Home: "Scale Your Brand Across Rural India" CTA (#cicta01 / .ci-cta)
   Blue rounded banner: left = heading + subtext; right = inner panel
   with an orange button + three check features. Elementor data
   (setup/home-cta.php).
------------------------------------------------------------------- */
.ci-cta {
	padding: clamp(40px, 6vh, 80px) clamp(20px, 5vw, 80px);
}
.ci-cta-banner {
	width: 100%;
	max-width: var(--ci-home-panel-max);
	margin: 0 auto;
}
.ci-cta-banner > .ci-cta-left {
	flex: 1 1 auto !important;
	min-width: 0;
}
.ci-cta-banner > .ci-cta-panel {
	flex: 0 1 auto !important;
}
.ci-cta-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-neutral-100);
	font-size: clamp(30px, 3.2vw, 52px);
	line-height: 1.1;
	margin: 0;
}
.ci-cta-sub p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: #DBEAFE;
	font-size: clamp(15px, 1.2vw, 19px);
	line-height: 1.5;
	margin: 0;
}

/* Orange CTA button. */
.ci-cta-btn .elementor-button {
	background: var(--ci-secondary-200) !important;
	color: var(--ci-neutral-100) !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	font-family: var(--ci-font-body);
	font-weight: 600;
	font-size: clamp(15px, 1.1vw, 17px);
}
.ci-cta-btn .elementor-button-icon svg {
	fill: var(--ci-neutral-100);
	width: 15px;
	height: 15px;
}

/* Check features — single row on desktop. */
.ci-cta-checks {
	width: 100%;
	flex-wrap: wrap !important;
}
.ci-cta-check {
	width: auto !important;
	flex: 0 0 auto !important;
}
.ci-cta-check-icon .elementor-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ci-secondary-200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ci-cta-check-icon .elementor-icon svg {
	width: 11px;
	height: 11px;
	fill: #ffffff;
}
.ci-cta-check-text .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 500;
	color: #DBEAFE;
	font-size: clamp(14px, 1vw, 16px);
	white-space: nowrap;
}

/* Mobile: stack. */
@media (max-width: 767px) {
	.ci-cta-banner > .ci-cta-left,
	.ci-cta-banner > .ci-cta-panel {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
	.ci-cta-checks {
		flex-wrap: wrap !important;
	}
}

/* ------------------------------------------------------------------
   Common footer (HFE template, .ci-foot) — dark navy: brand + socials,
   three link columns, divider, copyright. setup/footer-template.php.
------------------------------------------------------------------- */
.ci-foot {
	--ci-foot-muted: #98a4be;
}
/* Top row: brand column wider, three link columns. */
.ci-foot-top > .ci-foot-brand {
	flex: 1.6 1 0 !important;
	min-width: 0;
	max-width: 360px;
}
.ci-foot-top > .ci-foot-col {
	flex: 1 1 0 !important;
	min-width: 0;
}
.ci-foot-logo img {
	width: clamp(180px, 16vw, 230px);
	height: auto;
	display: block;
}
.ci-foot-tagline p {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: var(--ci-foot-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}
/* Social circles. */
.ci-foot-social .elementor-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #2a3a5e;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.ci-foot-social .elementor-icon:hover {
	background: var(--ci-secondary-200);
}
.ci-foot-social .elementor-icon svg {
	width: 17px;
	height: 17px;
	fill: #ffffff;
}
/* Link columns. */
.ci-foot-col-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 600;
	color: #ffffff;
	font-size: 18px;
	margin: 0;
}
.ci-foot-links a {
	display: block;
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: var(--ci-foot-muted);
	font-size: 15px;
	line-height: 1.4;
	margin-bottom: 14px;
	text-decoration: none;
	transition: color 0.2s ease;
}
.ci-foot-links a:last-child {
	margin-bottom: 0;
}
.ci-foot-links a:hover {
	color: var(--ci-secondary-200);
}
/* Divider + copyright. */
.ci-foot-divider {
	width: 100%;
}
.ci-foot-divider .elementor-divider {
	padding-block: 0;
}
.ci-foot-copy .elementor-heading-title {
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: var(--ci-foot-muted);
	font-size: 14px;
	text-align: center;
}
/* Bottom bar: copyright left, developer credit right. Layout lives here (not
   only in Elementor's per-item CSS) so it's robust to cache regeneration. */
.ci-foot-bottom {
	width: 100%;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px 12px;
}
@media (max-width: 767px) {
	.ci-foot-bottom {
		flex-direction: column !important;
		text-align: center;
	}
}
.ci-foot-credit p {
	margin: 0;
	font-family: var(--ci-font-body);
	font-weight: 400;
	color: var(--ci-foot-muted);
	font-size: 14px;
}
.ci-foot-credit a {
	color: var(--ci-foot-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.ci-foot-credit a:hover {
	color: var(--ci-secondary-300);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.ci-foot-top > .ci-foot-brand,
	.ci-foot-top > .ci-foot-col {
		flex: 1 1 100% !important;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------
   About — "Who We Are" (.ci-who). A #F8FAFC rounded panel holding two
   equal-height columns: LEFT = a copy card whose top-left & bottom-right
   corners are hugged by peach L-brackets; RIGHT = a factory image stretched
   to the left card's height with a floating "R&D / Innovation Driven" badge.
   Built in setup/about-who.php.
------------------------------------------------------------------- */
.ci-who {
	position: relative;
	background: #F8FAFC !important;
	/* Same box as the home panels: 1760px cap + clamp(20px,5vw,80px) gutter/side. */
	width: calc(100% - clamp(40px, 10vw, 160px));
	max-width: var(--ci-home-panel-max) !important;
	margin: clamp(40px, 6vw, 88px) auto !important;
	border-radius: 16px !important;
}
.ci-who-row {
	display: flex !important;
	gap: clamp(34px, 4.4vw, 72px);
	align-items: stretch !important;
}
/* LEFT — copy card. Brackets pin to its own corners; padding keeps the text
   clear of them so the L's read as a frame around the column. */
.ci-who-left {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: clamp(14px, 1.4vw, 22px);
	padding: clamp(30px, 3vw, 48px) clamp(26px, 2.4vw, 40px) !important;
}
/* RIGHT — image column. No in-flow content (image + badge are absolute), so
   it simply stretches to the left card's height. */
.ci-who-right {
	position: relative;
	flex: 1 1 48%;
	min-width: 0;
	align-self: stretch;
	/* Breathing room on the image's top / right / bottom only (left stays flush
	   to the column so the gap to the copy is unchanged; panel padding untouched). */
	--img-inset: clamp(20px, 2.2vw, 36px);
}
.ci-who-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-primary-500);
	font-size: clamp(38px, 3.5vw, 60px);
	line-height: 1.06;
	margin: 0 0 clamp(8px, 1vw, 16px);
}
.ci-who-lead .elementor-widget-container,
.ci-who-text .elementor-widget-container {
	font-family: var(--ci-font-body);
	color: var(--ci-primary-500);
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.62;
}
.ci-who-lead p { margin: 0; }
.ci-who-lead strong { font-weight: 700; color: #264386; }
.ci-who-text p { margin: 0 0 clamp(14px, 1.2vw, 18px); }
.ci-who-text p:last-child { margin-bottom: 0; }
/* Highlighted callout: peach tint, orange left rule. */
.ci-who-callout {
	background: #fff4ec !important;
	border-left: 5px solid var(--ci-secondary-200) !important;
	padding: clamp(15px, 1.3vw, 22px) clamp(20px, 2vw, 30px) !important;
	margin-top: clamp(6px, 0.9vw, 12px);
	width: 100%;
}
.ci-who-callout-text .elementor-widget-container,
.ci-who-callout-text p {
	margin: 0;
	font-family: var(--ci-font-body);
	font-weight: 700;
	color: #264386;
	font-size: clamp(16px, 1.2vw, 20px);
}
/* Right image — absolutely fills the column so its height tracks the left
   card exactly; rounded corners, no border. */
.ci-who-img {
	position: absolute;
	top: var(--img-inset);
	right: var(--img-inset);
	bottom: var(--img-inset);
	left: 0;
	margin: 0 !important;
}
.ci-who-img .elementor-widget-container,
.ci-who-img .elementor-image,
.ci-who-img figure,
.ci-who-img a {
	height: 100% !important;
	margin: 0 !important;
}
.ci-who-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	border: 0 !important;
	border-radius: 16px;
}
/* Floating R&D badge — rendered into the image widget from the theme
   (functions.php: hello_canimage_who_badge), so it can't be deleted in the
   Elementor editor. It sits inside the absolute .ci-who-img box, so its offsets
   are relative to the image's own (already inset) bottom-right corner. */
.ci-who-badge {
	position: absolute;
	right: clamp(16px, 1.3vw, 26px);
	bottom: clamp(16px, 1.3vw, 26px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border-radius: 12px;
	padding: 12px 22px 12px 14px;
	box-shadow: 0 10px 24px rgba(22, 38, 77, 0.22);
}
.ci-who-badge-ic {
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff0e8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ci-who-badge-ic svg {
	width: 24px;
	height: 24px;
}
.ci-who-badge-ic svg path {
	fill: var(--ci-secondary-200);
}
.ci-who-badge-tx {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.ci-who-badge-tx b {
	font-family: var(--ci-font-heading);
	font-weight: 200;
	color: var(--ci-primary-500);
	font-size: clamp(24px, 1.8vw, 34px);
}
.ci-who-badge-tx span {
	font-family: var(--ci-font-body);
	color: var(--ci-primary-400);
	font-size: clamp(13px, 0.95vw, 18px);
}
/* Peach L-brackets hugging the LEFT card's top-left & bottom-right corners. */
.ci-who-left::before,
.ci-who-left::after {
	content: "";
	position: absolute;
	width: clamp(38px, 3.6vw, 56px);
	height: clamp(38px, 3.6vw, 56px);
	pointer-events: none;
	z-index: 2;
	border-color: #fbccb2;
	border-style: solid;
}
.ci-who-left::before {
	top: 0;
	left: 0;
	border-width: clamp(13px, 1.3vw, 17px) 0 0 clamp(13px, 1.3vw, 17px);
}
.ci-who-left::after {
	right: 0;
	bottom: 0;
	border-width: 0 clamp(13px, 1.3vw, 17px) clamp(13px, 1.3vw, 17px) 0;
}
/* Legacy fallback span from the builder — brackets are pure CSS now. */
.ci-who-corner {
	display: none;
}
@media (max-width: 1024px) {
	.ci-who-row { flex-direction: column; align-items: stretch !important; }
	.ci-who-left {
		padding: clamp(30px, 7vw, 40px) clamp(22px, 5vw, 32px) !important;
	}
	/* Image column needs an explicit height once the absolute image can no
	   longer borrow the left card's height in a stacked layout. */
	.ci-who-right {
		align-self: stretch;
		min-height: clamp(280px, 64vw, 460px);
	}
	.ci-who-badge {
		padding: 10px 18px 10px 12px;
		gap: 12px;
	}
	.ci-who-badge-ic { width: 44px; height: 44px; }
	.ci-who-badge-ic svg { width: 21px; height: 21px; }
}
@media (max-width: 767px) {
	/* Stacked: the image is full-width, so balance the inset on both sides. */
	.ci-who-img { left: var(--img-inset); }
}

/* ------------------------------------------------------------------
   About — "Built on Technology" (.ci-tech). A #F8FAFC rounded panel (box
   width) with two equal-height columns: LEFT is a white copy card framed by
   peach L-brackets at its top-left & bottom-right corners; RIGHT is a 2x2 grid
   of white feature cards (peach-squared FA icon + title + blurb).
   Built in setup/about-tech.php.
------------------------------------------------------------------- */
.ci-tech {
	position: relative;
	background: #F8FAFC !important;
	/* Full-bleed grey band: span edge-to-edge, no rounding/centering. The side
	   padding is the box-width gutter; the inner row caps itself at box width. */
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	padding: clamp(48px, 7vh, 96px) clamp(20px, 5vw, 80px) !important;
}
.ci-tech-row {
	display: flex !important;
	/* Box width — aligns with the home / Who We Are panels. */
	width: 100%;
	max-width: var(--ci-home-panel-max) !important;
	margin: 0 auto !important;
	gap: clamp(18px, 1.8vw, 28px);
	align-items: stretch !important;
}
/* LEFT — white copy card with peach L-brackets. */
.ci-tech-left {
	position: relative;
	flex: 1 1 48%;
	min-width: 0;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: clamp(14px, 1.4vw, 20px) !important;
	background: #ffffff !important;
	border-radius: 14px !important;
	border: 1px solid #eef1f7 !important;
	box-shadow: 0 1px 2px rgba(22, 38, 77, 0.04), 0 16px 40px rgba(22, 38, 77, 0.05);
	padding: clamp(30px, 3vw, 52px) clamp(26px, 2.6vw, 44px) !important;
}
.ci-tech-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-primary-500);
	font-size: clamp(34px, 3.1vw, 54px);
	line-height: 1.08;
	margin: 0 0 clamp(6px, 0.9vw, 14px);
}
.ci-tech-lead .elementor-widget-container,
.ci-tech-text .elementor-widget-container {
	font-family: var(--ci-font-body);
	color: var(--ci-primary-500);
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.62;
}
.ci-tech-lead p,
.ci-tech-text p { margin: 0; }
/* RIGHT — 2x2 grid of feature cards; equal rows that fill the card height. */
.ci-tech-grid {
	flex: 1 1 52%;
	min-width: 0;
	align-self: stretch;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(min-content, 1fr);
	gap: clamp(16px, 1.4vw, 24px) !important;
}
.ci-tech-card {
	background: #ffffff !important;
	border-radius: 14px !important;
	border: 1px solid #eef1f7 !important;
	box-shadow: 0 1px 2px rgba(22, 38, 77, 0.04), 0 16px 40px rgba(22, 38, 77, 0.05);
	padding: clamp(20px, 1.8vw, 32px) !important;
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 1vw, 14px) !important;
}
/* Peach-squared icon. */
.ci-tech-ic { margin-bottom: clamp(6px, 1vw, 16px); }
.ci-tech-ic .elementor-icon {
	width: clamp(48px, 3.6vw, 56px);
	height: clamp(48px, 3.6vw, 56px);
	border-radius: 14px;
	background: #fff0e8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ci-tech-ic .elementor-icon svg {
	width: 46%;
	height: 46%;
	fill: var(--ci-secondary-200);
}
.ci-tech-card-title .elementor-heading-title {
	font-family: var(--ci-font-heading);
	font-weight: 500;
	color: var(--ci-primary-500);
	font-size: clamp(17px, 1.3vw, 22px);
	line-height: 1.2;
	margin: 0;
}
.ci-tech-card-desc .elementor-widget-container {
	font-family: var(--ci-font-body);
	color: #56617d;
	font-size: clamp(14px, 0.95vw, 16px);
	line-height: 1.55;
}
.ci-tech-card-desc p { margin: 0; }
/* Peach L-brackets hugging the LEFT card's top-left & bottom-right corners. */
.ci-tech-left::before,
.ci-tech-left::after {
	content: "";
	position: absolute;
	width: clamp(34px, 3.2vw, 50px);
	height: clamp(34px, 3.2vw, 50px);
	pointer-events: none;
	z-index: 2;
	border-color: #fbccb2;
	border-style: solid;
}
.ci-tech-left::before {
	top: 0;
	left: 0;
	border-width: clamp(12px, 1.2vw, 16px) 0 0 clamp(12px, 1.2vw, 16px);
}
.ci-tech-left::after {
	right: 0;
	bottom: 0;
	border-width: 0 clamp(12px, 1.2vw, 16px) clamp(12px, 1.2vw, 16px) 0;
}
@media (max-width: 1024px) {
	/* Force the stack here (Elementor only auto-stacks ≤767) so the 2-up grid
	   gets full width instead of being squeezed into a half-width column. */
	.ci-tech-row { flex-direction: column !important; align-items: stretch !important; }
	.ci-tech-left { padding: clamp(30px, 7vw, 44px) clamp(22px, 5vw, 32px) !important; }
}
@media (max-width: 600px) {
	.ci-tech-grid { grid-template-columns: 1fr; }
}