/* =========================================================================
   Etqan Al Azal — Design system
   Built with CSS logical properties so RTL and a future LTR English site
   share one stylesheet. Colours come from CSS variables that the theme
   settings inject at runtime.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
	/* Brand — overridden inline by "إعدادات اتقان العزل ← الألوان". */
	--etqan-primary: #F47B20;
	--etqan-primary-dark: #D95F00;
	--etqan-dark: #111111;
	--etqan-light: #F5F5F5;
	--etqan-white: #FFFFFF;
	--etqan-primary-rgb: 244, 123, 32;
	--etqan-dark-rgb: 17, 17, 17;

	/* Semantic surfaces — these are what components actually use, and they are
	   the only things the dark theme has to redefine. The five brand tokens
	   above stay exactly as the site owner set them in either mode. */
	--etqan-bg: #ffffff;
	--etqan-surface: #ffffff;
	--etqan-surface-alt: var(--etqan-light);
	--etqan-heading: var(--etqan-dark);
	--etqan-body: #4a4a4f;
	--etqan-muted: #6f7079;
	--etqan-line: #e6e6ea;
	--etqan-dark-soft: #1b1b1f;
	--etqan-success: #1f9d55;

	/* Animated backdrop — tinted from the brand tokens, so it follows whatever
	   primary colour the owner picks instead of hard-coding one. */
	--etqan-aurora-a: rgba(var(--etqan-primary-rgb), 0.10);
	--etqan-aurora-b: rgba(71, 166, 232, 0.09);
	--etqan-aurora-c: rgba(var(--etqan-primary-rgb), 0.06);

	/* Always-dark bands (hero, footer, dark sections) */
	--etqan-band: var(--etqan-dark);
	--etqan-band-rgb: var(--etqan-dark-rgb);

	/* Insulation scene — heat, water and the layers of the roof build-up */
	--etqan-heat: #ff6a2c;
	--etqan-heat-soft: rgba(255, 106, 44, 0.22);
	--etqan-water: #47a6e8;
	--etqan-water-soft: rgba(71, 166, 232, 0.22);
	--etqan-scene-sky: rgba(var(--etqan-dark-rgb), 0.04);
	--etqan-scene-slab: #3d3f4a;
	--etqan-scene-slab-2: #2d2f38;
	--etqan-scene-line: rgba(var(--etqan-dark-rgb), 0.18);
	--etqan-scene-coat: #eef1f6;
	--etqan-scene-ink: rgba(var(--etqan-dark-rgb), 0.55);
	--etqan-scene-cool: #4fb3a4;

	/* Typography */
	--etqan-font: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
	--etqan-fs-xs: 0.8125rem;
	--etqan-fs-sm: 0.9375rem;
	--etqan-fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--etqan-fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--etqan-fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	--etqan-fs-h3: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
	--etqan-fs-h2: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
	--etqan-fs-h1: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
	--etqan-lh-tight: 1.25;
	--etqan-lh-base: 1.85;

	/* Space */
	--etqan-gap: clamp(1rem, 0.7rem + 1vw, 1.75rem);
	--etqan-section-y: clamp(3.25rem, 2rem + 4vw, 6rem);
	--etqan-container: 1200px;
	--etqan-container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);

	/* Shape */
	--etqan-radius-sm: 10px;
	--etqan-radius: 16px;
	--etqan-radius-lg: 24px;
	--etqan-radius-pill: 999px;

	/* Elevation */
	--etqan-shadow-sm: 0 2px 8px rgba(var(--etqan-dark-rgb), 0.05);
	--etqan-shadow: 0 10px 30px -12px rgba(var(--etqan-dark-rgb), 0.16);
	--etqan-shadow-lg: 0 28px 60px -28px rgba(var(--etqan-dark-rgb), 0.3);
	--etqan-shadow-primary: 0 14px 30px -14px rgba(var(--etqan-primary-rgb), 0.65);

	/* Motion */
	--etqan-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--etqan-dur: 0.28s;

	/* Header */
	--etqan-header-h: 76px;
	--etqan-z-header: 900;
	--etqan-z-float: 940;
	--etqan-z-drawer: 980;
}

/* --------------------------------------------------------------- 2. Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* The page colour lives here, not on body, so the fixed aurora layer that
	   body draws can sit above it and still stay behind all content. */
	background: var(--etqan-bg);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: calc(var(--etqan-header-h) + 20px);
}

body {
	margin: 0;
	font-family: var(--etqan-font);
	font-size: var(--etqan-fs-base);
	line-height: var(--etqan-lh-base);
	color: var(--etqan-body);
	background: transparent;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--etqan-heading);
	font-weight: 800;
	line-height: var(--etqan-lh-tight);
}

h1 { font-size: var(--etqan-fs-h1); }
h2 { font-size: var(--etqan-fs-h2); }
h3 { font-size: var(--etqan-fs-h3); }
h4 { font-size: var(--etqan-fs-h4); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--etqan-primary-dark);
	text-decoration: none;
	transition: color var(--etqan-dur) var(--etqan-ease);
}

a:hover { color: var(--etqan-primary); }

ul, ol { padding-inline-start: 1.4em; }

figure { margin: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--etqan-line);
	margin-block: 2rem;
}

blockquote {
	margin: 1.6em 0;
	padding: 1.4rem 1.6rem;
	background: var(--etqan-surface-alt);
	border-inline-start: 4px solid var(--etqan-primary);
	border-radius: var(--etqan-radius-sm);
	font-size: var(--etqan-fs-lg);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	direction: ltr;
	unicode-bidi: embed;
}

pre {
	background: var(--etqan-dark);
	color: #f2f2f2;
	padding: 1.2rem;
	border-radius: var(--etqan-radius-sm);
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.5rem;
}

th, td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--etqan-line);
	text-align: start;
}

th { background: var(--etqan-surface-alt); color: var(--etqan-heading); }

/* ------------------------------------------------------- 3. Accessibility */

:focus-visible {
	outline: 3px solid var(--etqan-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.etqan-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 1rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--etqan-primary);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 var(--etqan-radius-sm) var(--etqan-radius-sm);
	transition: inset-block-start 0.2s var(--etqan-ease);
}

.etqan-skip-link:focus {
	inset-block-start: 0;
	color: #fff;
}

/* ------------------------------------------------------------- 4. Layout */

.etqan-container {
	width: 100%;
	max-width: var(--etqan-container);
	margin-inline: auto;
	padding-inline: var(--etqan-container-pad);
}

.etqan-container--narrow { max-width: 820px; }
.etqan-container--wide { max-width: 1400px; }

.etqan-section {
	padding-block: var(--etqan-section-y);
	position: relative;
}

.etqan-section--tight { padding-block: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.etqan-section--light { background: var(--etqan-surface-alt); }
.etqan-section--dark { background: var(--etqan-dark); color: rgba(255, 255, 255, 0.78); }
.etqan-section--dark h1,
.etqan-section--dark h2,
.etqan-section--dark h3,
.etqan-section--dark h4 { color: #fff; }

.etqan-grid {
	display: grid;
	gap: var(--etqan-gap);
	grid-template-columns: repeat(var(--etqan-cols, 3), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.etqan-grid--1 { --etqan-cols: 1; }
.etqan-grid--2 { --etqan-cols: 2; }
.etqan-grid--3 { --etqan-cols: 3; }
.etqan-grid--4 { --etqan-cols: 4; }
.etqan-grid--5 { --etqan-cols: 5; }

.etqan-split {
	display: grid;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
}

.etqan-split--sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }

/* --------------------------------------------------------- 5. Typography */

.etqan-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--etqan-fs-sm);
	font-weight: 700;
	color: var(--etqan-primary-dark);
	letter-spacing: 0.02em;
	margin-block-end: 0.75rem;
}

.etqan-eyebrow::before {
	content: "";
	inline-size: 26px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--etqan-primary);
}

.etqan-section-head {
	max-width: 720px;
	margin-block-end: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);
}

.etqan-section-head.is-center {
	margin-inline: auto;
	text-align: center;
}

.etqan-section-head.is-center .etqan-eyebrow { justify-content: center; }

.etqan-section-title { margin-block-end: 0.5rem; }

.etqan-section-sub {
	font-size: var(--etqan-fs-lg);
	color: var(--etqan-muted);
	margin: 0;
}

.etqan-section-head.is-light .etqan-section-title { color: #fff; }
.etqan-section-head.is-light .etqan-section-sub { color: rgba(255, 255, 255, 0.72); }
.etqan-section-head.is-light .etqan-eyebrow { color: var(--etqan-primary); }

.etqan-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.95rem;
	border-radius: var(--etqan-radius-pill);
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	font-size: var(--etqan-fs-sm);
	font-weight: 700;
	margin-block-end: 1rem;
}

/* ------------------------------------------------------------ 6. Buttons */

.etqan-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--etqan-radius-pill);
	font-family: inherit;
	font-size: var(--etqan-fs-base);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: transform var(--etqan-dur) var(--etqan-ease),
		box-shadow var(--etqan-dur) var(--etqan-ease),
		background-color var(--etqan-dur) var(--etqan-ease),
		color var(--etqan-dur) var(--etqan-ease),
		border-color var(--etqan-dur) var(--etqan-ease);
}

.etqan-btn:hover { transform: translateY(-2px); }
.etqan-btn:active { transform: translateY(0); }

.etqan-btn--lg { padding: 1.05rem 2rem; font-size: var(--etqan-fs-lg); }
.etqan-btn--sm { padding: 0.6rem 1.15rem; font-size: var(--etqan-fs-sm); }

.etqan-btn--primary {
	background: var(--etqan-primary);
	border-color: var(--etqan-primary);
	color: #fff;
	box-shadow: var(--etqan-shadow-primary);
}

.etqan-btn--primary:hover {
	background: var(--etqan-primary-dark);
	border-color: var(--etqan-primary-dark);
	color: #fff;
}

.etqan-btn--outline {
	background: transparent;
	border-color: var(--etqan-primary);
	color: var(--etqan-primary-dark);
}

.etqan-btn--outline:hover {
	background: var(--etqan-primary);
	color: #fff;
}

.etqan-btn--ghost {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.etqan-btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--etqan-heading);
}

.etqan-section--light .etqan-btn--ghost,
.etqan-cta--light .etqan-btn--ghost,
body:not(.etqan-dark-context) .etqan-page-hero:not(.has-bg) .etqan-btn--ghost {
	background: rgba(var(--etqan-dark-rgb), 0.04);
	border-color: rgba(var(--etqan-dark-rgb), 0.15);
	color: var(--etqan-heading);
}

.etqan-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--etqan-heading);
	box-shadow: var(--etqan-shadow);
}

.etqan-btn--light:hover { color: var(--etqan-primary-dark); }

.etqan-btn--whatsapp {
	background: #25D366;
	border-color: #25D366;
	color: #fff;
	box-shadow: 0 14px 30px -14px rgba(37, 211, 102, 0.7);
}

.etqan-btn--whatsapp:hover {
	background: #1da851;
	border-color: #1da851;
	color: #fff;
}

.etqan-btn--phone {
	background: var(--etqan-dark);
	border-color: var(--etqan-heading);
	color: #fff;
}

.etqan-btn--phone:hover { background: #000; color: #fff; }

.etqan-btn--ltr .etqan-btn__label {
	direction: ltr;
	unicode-bidi: embed;
}

.etqan-btn--block { width: 100%; }

.etqan-icon { flex: none; }

/* ------------------------------------------------------------- 7. Header */

.etqan-header {
	position: relative;
	z-index: var(--etqan-z-header);
	background: var(--etqan-surface);
	/* Without this the header has no edge against the page in dark mode —
	   surface (#17181f) and bg (#0e0f13) are too close to read as separate. */
	border-block-end: 1px solid var(--etqan-line);
}

body.has-sticky-header .etqan-header {
	position: sticky;
	inset-block-start: 0;
}

.admin-bar.has-sticky-header .etqan-header { inset-block-start: 32px; }

.etqan-topbar {
	background: var(--etqan-dark);
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--etqan-fs-sm);
}

.etqan-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 42px;
	flex-wrap: wrap;
}

.etqan-topbar__note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.etqan-topbar__note svg { color: var(--etqan-primary); }

.etqan-topbar__links {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-topbar a { color: rgba(255, 255, 255, 0.85); }
.etqan-topbar a:hover { color: var(--etqan-primary); }

.etqan-topbar .etqan-social a {
	inline-size: 30px;
	block-size: 30px;
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.85);
}

.etqan-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	min-block-size: var(--etqan-header-h);
	transition: min-block-size var(--etqan-dur) var(--etqan-ease);
}

.etqan-header.is-stuck {
	box-shadow: 0 8px 24px -18px rgba(var(--etqan-dark-rgb), 0.55);
}

.etqan-header.is-stuck .etqan-header__bar { min-block-size: 64px; }

.etqan-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
	color: var(--etqan-heading);
}

.etqan-brand img,
.etqan-brand svg.etqan-logo-mark {
	max-block-size: 52px;
	inline-size: auto;
	transition: max-block-size var(--etqan-dur) var(--etqan-ease);
}

.etqan-header.is-stuck .etqan-brand img { max-block-size: 44px; }

.etqan-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.etqan-brand__name { font-weight: 800; font-size: 1.15rem; color: var(--etqan-heading); }
.etqan-brand__tag { font-size: 0.75rem; color: var(--etqan-muted); font-weight: 600; }

.etqan-nav { margin-inline-start: auto; }

.etqan-menu {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 1.2vw, 1.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-menu > li { position: relative; }

.etqan-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 0.35rem;
	font-weight: 700;
	color: var(--etqan-heading);
	white-space: nowrap;
	position: relative;
}

.etqan-menu > li > a::after {
	content: "";
	position: absolute;
	inset-block-end: 0.15rem;
	inset-inline: 0.35rem;
	block-size: 3px;
	border-radius: 2px;
	background: var(--etqan-primary);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform var(--etqan-dur) var(--etqan-ease);
}

.etqan-menu > li > a:hover,
.etqan-menu > li.current-menu-item > a,
.etqan-menu > li.current-menu-ancestor > a,
.etqan-menu > li.current_page_item > a { color: var(--etqan-primary-dark); }

.etqan-menu > li > a:hover::after,
.etqan-menu > li.current-menu-item > a::after,
.etqan-menu > li.current-menu-ancestor > a::after,
.etqan-menu > li.current_page_item > a::after { transform: scaleX(1); }

.etqan-menu .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	min-inline-size: 230px;
	background: var(--etqan-surface);
	border-radius: var(--etqan-radius);
	box-shadow: var(--etqan-shadow);
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--etqan-dur) var(--etqan-ease), transform var(--etqan-dur) var(--etqan-ease), visibility var(--etqan-dur);
	z-index: 20;
}

.etqan-menu li:hover > .sub-menu,
.etqan-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.etqan-menu .sub-menu a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--etqan-radius-sm);
	color: var(--etqan-heading);
	font-weight: 600;
	font-size: var(--etqan-fs-sm);
}

.etqan-menu .sub-menu a:hover {
	background: var(--etqan-surface-alt);
	color: var(--etqan-primary-dark);
}

.nav-caret { opacity: 0.6; }

.etqan-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

.etqan-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 800;
	color: var(--etqan-heading);
	white-space: nowrap;
}

.etqan-header__phone span { direction: ltr; unicode-bidi: embed; }

.etqan-header__phone-icon {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	flex: none;
}

.etqan-header__phone:hover .etqan-header__phone-icon {
	background: var(--etqan-primary);
	color: #fff;
}

.etqan-burger {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	background: var(--etqan-surface);
	color: var(--etqan-heading);
	cursor: pointer;
}

/* ---------------------------------------------------- 8. Mobile drawer */

.etqan-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--etqan-z-drawer);
	visibility: hidden;
	pointer-events: none;
}

.etqan-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.etqan-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--etqan-dark-rgb), 0.55);
	opacity: 0;
	transition: opacity var(--etqan-dur) var(--etqan-ease);
	border: 0;
	inline-size: 100%;
	cursor: pointer;
}

.etqan-drawer.is-open .etqan-drawer__backdrop { opacity: 1; }

.etqan-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(340px, 88vw);
	background: var(--etqan-surface);
	box-shadow: var(--etqan-shadow-lg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--etqan-dur) var(--etqan-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

[dir="rtl"] .etqan-drawer__panel { transform: translateX(-100%); }

.etqan-drawer.is-open .etqan-drawer__panel { transform: translateX(0); }

.etqan-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-block-end: 1px solid var(--etqan-line);
}

.etqan-drawer__close {
	inline-size: 42px;
	block-size: 42px;
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	background: var(--etqan-surface);
	color: var(--etqan-heading);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.etqan-drawer__body { padding: 1rem 1.25rem 2rem; }

.etqan-drawer .etqan-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.etqan-drawer .etqan-menu > li > a {
	padding: 0.9rem 0;
	border-block-end: 1px solid var(--etqan-line);
	justify-content: space-between;
	width: 100%;
}

.etqan-drawer .etqan-menu > li > a::after { display: none; }

.etqan-drawer .etqan-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	padding: 0.25rem 0 0.6rem;
	padding-inline-start: 1rem;
	background: transparent;
	min-inline-size: 0;
}

/* Submenu expander injected by main.js inside the drawer. */
.etqan-submenu-toggle {
	position: absolute;
	inset-block-start: 0.55rem;
	inset-inline-end: 0;
	inline-size: 34px;
	block-size: 34px;
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	background: var(--etqan-surface);
	color: var(--etqan-heading);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.etqan-drawer .etqan-menu > li { position: relative; }

.etqan-drawer .etqan-menu > li.menu-item-has-children > a { padding-inline-end: 44px; }

.etqan-drawer__actions {
	display: grid;
	gap: 0.6rem;
	margin-block-start: 1.5rem;
}

.etqan-drawer__contact {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--etqan-line);
}

/* ---------------------------------------------------------------- 9. Hero */

.etqan-hero {
	position: relative;
	padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
	background: var(--etqan-dark);
	color: rgba(255, 255, 255, 0.82);
	overflow: hidden;
	isolation: isolate;
}

.etqan-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
}

.etqan-hero__bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.etqan-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(1000px 520px at 85% 8%, rgba(var(--etqan-primary-rgb), 0.32), transparent 62%),
		linear-gradient(200deg, rgba(var(--etqan-dark-rgb), 0.9) 20%, rgba(var(--etqan-dark-rgb), 0.72) 60%, rgba(var(--etqan-dark-rgb), 0.94) 100%);
}

.etqan-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

.etqan-hero__title {
	color: #fff;
	font-size: var(--etqan-fs-h1);
	margin-block-end: 1rem;
	text-wrap: balance;
}

.etqan-hero__title .is-accent { color: var(--etqan-primary); }

.etqan-hero__text {
	font-size: var(--etqan-fs-lg);
	color: rgba(255, 255, 255, 0.8);
	max-width: 56ch;
	margin-block-end: 1.75rem;
}

.etqan-hero .etqan-badge {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	backdrop-filter: blur(4px);
}

.etqan-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 2rem;
}

.etqan-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}

.etqan-hero__trust li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: #fff;
	font-size: var(--etqan-fs-sm);
}

.etqan-hero__trust svg { color: var(--etqan-primary); }

.etqan-hero__media {
	position: relative;
	border-radius: var(--etqan-radius-lg);
	overflow: hidden;
	box-shadow: var(--etqan-shadow-lg);
	aspect-ratio: 4 / 3.2;
}

.etqan-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.etqan-hero__card {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
	inset-inline-end: 1rem;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem;
	background: rgba(255, 255, 255, 0.96);
	border-radius: var(--etqan-radius);
	box-shadow: var(--etqan-shadow);
	color: var(--etqan-heading);
}

.etqan-hero__card-icon {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	background: rgba(var(--etqan-primary-rgb), 0.14);
	color: var(--etqan-primary-dark);
	flex: none;
}

.etqan-hero__card strong { display: block; font-size: var(--etqan-fs-base); }
.etqan-hero__card span { font-size: var(--etqan-fs-xs); color: var(--etqan-muted); }

/* ----------------------------------------------------------- 10. Trust bar */

.etqan-trustbar {
	background: var(--etqan-surface);
	border-block-end: 1px solid var(--etqan-line);
}

.etqan-trustbar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--etqan-line);
	border-radius: var(--etqan-radius);
	overflow: hidden;
	box-shadow: var(--etqan-shadow-sm);
	margin-block-start: calc(-1 * clamp(2rem, 4vw, 3.5rem));
	position: relative;
	z-index: 2;
}

.etqan-trustbar__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.25rem 1.35rem;
	background: var(--etqan-surface);
}

.etqan-trustbar__icon {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 14px;
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	flex: none;
}

.etqan-trustbar__item strong {
	display: block;
	color: var(--etqan-heading);
	font-size: var(--etqan-fs-base);
	line-height: 1.3;
}

.etqan-trustbar__item span {
	font-size: var(--etqan-fs-xs);
	color: var(--etqan-muted);
}

/* -------------------------------------------------------------- 11. Cards */

.etqan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
	overflow: hidden;
	transition: transform var(--etqan-dur) var(--etqan-ease),
		box-shadow var(--etqan-dur) var(--etqan-ease),
		border-color var(--etqan-dur) var(--etqan-ease);
	block-size: 100%;
}

.etqan-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--etqan-shadow);
	border-color: rgba(var(--etqan-primary-rgb), 0.45);
}

.etqan-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--etqan-surface-alt);
}

.etqan-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--etqan-ease);
}

.etqan-card:hover .etqan-card__media img { transform: scale(1.06); }

.etqan-card__body {
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
}

.etqan-card__icon {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 16px;
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	margin-block-start: -3.2rem;
	position: relative;
	z-index: 2;
	border: 3px solid #fff;
	box-shadow: var(--etqan-shadow-sm);
	background-clip: padding-box;
}

.etqan-card--service .etqan-card__icon { background-color: var(--etqan-primary); color: #fff; }

.etqan-card__title {
	font-size: var(--etqan-fs-h4);
	margin: 0;
}

.etqan-card__title a { color: var(--etqan-heading); }
.etqan-card:hover .etqan-card__title a { color: var(--etqan-primary-dark); }

.etqan-card__text {
	margin: 0;
	color: var(--etqan-muted);
	font-size: var(--etqan-fs-sm);
	line-height: 1.8;
}

.etqan-card__more {
	margin-block-start: auto;
	padding-block-start: 0.7rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: var(--etqan-fs-sm);
	color: var(--etqan-primary-dark);
}

.etqan-card__more svg { transition: transform var(--etqan-dur) var(--etqan-ease); }
.etqan-card:hover .etqan-card__more svg { transform: translateX(-5px); }
[dir="ltr"] .etqan-card:hover .etqan-card__more svg { transform: translateX(5px); }

.etqan-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--etqan-fs-xs);
	color: var(--etqan-muted);
}

.etqan-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* City card */

.etqan-card--city { border: 0; }

.etqan-card--city .etqan-card__link {
	display: block;
	position: relative;
	block-size: 100%;
	min-block-size: 240px;
	color: #fff;
}

.etqan-card--city .etqan-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.etqan-card--city .etqan-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(var(--etqan-dark-rgb), 0.9) 8%, rgba(var(--etqan-dark-rgb), 0.15) 65%);
	transition: background var(--etqan-dur) var(--etqan-ease);
}

.etqan-card--city:hover .etqan-card__overlay {
	background: linear-gradient(to top, rgba(var(--etqan-primary-rgb), 0.92) 5%, rgba(var(--etqan-dark-rgb), 0.35) 70%);
}

.etqan-card--city .etqan-card__body {
	position: relative;
	z-index: 2;
	justify-content: flex-end;
	block-size: 100%;
	padding: 1.35rem;
}

.etqan-card--city .etqan-card__title { color: #fff; margin: 0; }
.etqan-card--city .etqan-card__text { color: rgba(255, 255, 255, 0.85); }

.etqan-card__pin {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(3px);
	color: #fff;
	margin-block-end: 0.55rem;
}

/* ------------------------------------------------------------ 12. Features */

.etqan-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.etqan-feature {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.etqan-features--card .etqan-feature {
	flex-direction: column;
	padding: 1.6rem;
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
	transition: transform var(--etqan-dur) var(--etqan-ease), box-shadow var(--etqan-dur) var(--etqan-ease);
}

.etqan-features--card .etqan-feature:hover {
	transform: translateY(-5px);
	box-shadow: var(--etqan-shadow);
}

.etqan-feature__icon {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 16px;
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	flex: none;
}

.etqan-features--check .etqan-feature__icon {
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--etqan-primary);
	color: #fff;
}

.etqan-features--check .etqan-feature__icon svg { width: 18px; height: 18px; }

.etqan-feature__title {
	font-size: var(--etqan-fs-h4);
	margin: 0 0 0.35rem;
}

.etqan-feature__text {
	margin: 0;
	color: var(--etqan-muted);
	font-size: var(--etqan-fs-sm);
	line-height: 1.8;
}

.etqan-section--dark .etqan-features--card .etqan-feature {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.etqan-section--dark .etqan-feature__text { color: rgba(255, 255, 255, 0.7); }
.etqan-section--dark .etqan-feature__icon { background: rgba(var(--etqan-primary-rgb), 0.2); color: var(--etqan-primary); }

/* ------------------------------------------------------------- 13. Process */

.etqan-process {
	list-style: none;
	counter-reset: etqan-step;
	padding: 0;
	margin: 0;
}

.etqan-process__step {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
}

.etqan-process__step::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -1rem;
	inline-size: 1rem;
	block-size: 2px;
	background: repeating-linear-gradient(to left, var(--etqan-primary) 0 6px, transparent 6px 12px);
}

.etqan-process__step:first-child::after { display: none; }

.etqan-process__num {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--etqan-primary);
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	margin-block-end: 0.9rem;
	box-shadow: var(--etqan-shadow-primary);
}

.etqan-process__title { font-size: var(--etqan-fs-h4); margin: 0 0 0.35rem; }

.etqan-process__text {
	margin: 0;
	color: var(--etqan-muted);
	font-size: var(--etqan-fs-sm);
}

/* ----------------------------------------------------------------- 14. FAQ */

.etqan-faq {
	display: grid;
	gap: 0.85rem;
}

.etqan-faq--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.etqan-faq__item {
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
	overflow: hidden;
	transition: border-color var(--etqan-dur) var(--etqan-ease), box-shadow var(--etqan-dur) var(--etqan-ease);
}

.etqan-faq__item[open] {
	border-color: rgba(var(--etqan-primary-rgb), 0.5);
	box-shadow: var(--etqan-shadow-sm);
}

.etqan-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	cursor: pointer;
	font-weight: 700;
	color: var(--etqan-heading);
	list-style: none;
}

.etqan-faq__q::-webkit-details-marker { display: none; }

.etqan-faq__q:hover { color: var(--etqan-primary-dark); }

.etqan-faq__marker {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	flex: none;
	transition: transform var(--etqan-dur) var(--etqan-ease), background var(--etqan-dur) var(--etqan-ease);
}

.etqan-faq__item[open] .etqan-faq__marker {
	transform: rotate(180deg);
	background: var(--etqan-primary);
	color: #fff;
}

.etqan-faq__a {
	padding: 0 1.35rem 1.25rem;
	color: var(--etqan-muted);
	font-size: var(--etqan-fs-sm);
	line-height: 1.9;
}

.etqan-section--dark .etqan-faq__item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.etqan-section--dark .etqan-faq__q { color: #fff; }
.etqan-section--dark .etqan-faq__a { color: rgba(255, 255, 255, 0.72); }

/* ----------------------------------------------------------------- 15. CTA */

.etqan-cta {
	position: relative;
	border-radius: var(--etqan-radius-lg);
	padding: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
	overflow: hidden;
	isolation: isolate;
}

.etqan-cta--dark {
	background: var(--etqan-dark);
	color: rgba(255, 255, 255, 0.8);
}

.etqan-cta--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(680px 320px at 88% 0%, rgba(var(--etqan-primary-rgb), 0.35), transparent 62%);
}

.etqan-cta--primary {
	background: linear-gradient(135deg, var(--etqan-primary), var(--etqan-primary-dark));
	color: rgba(255, 255, 255, 0.92);
}

.etqan-cta--light {
	background: var(--etqan-surface-alt);
	border: 1px solid var(--etqan-line);
}

.etqan-cta--split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	background: var(--etqan-dark);
	color: rgba(255, 255, 255, 0.8);
	padding: 0;
}

.etqan-cta--split .etqan-cta__media { block-size: 100%; min-block-size: 280px; }

.etqan-cta--split .etqan-cta__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.etqan-cta--split .etqan-cta__body { padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); }

.etqan-cta__title {
	color: #fff;
	font-size: var(--etqan-fs-h2);
	margin-block-end: 0.6rem;
	text-wrap: balance;
}

.etqan-cta--light .etqan-cta__title { color: var(--etqan-heading); }
.etqan-cta--light .etqan-cta__text { color: var(--etqan-muted); }

.etqan-cta__text {
	font-size: var(--etqan-fs-lg);
	margin-block-end: 1.6rem;
	max-width: 62ch;
}

.etqan-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.etqan-cta--primary .etqan-btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--etqan-primary-dark);
	box-shadow: var(--etqan-shadow);
}

/* -------------------------------------------------------------- 16. Forms */

.etqan-form {
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-shadow: var(--etqan-shadow);
}

.etqan-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.etqan-form__field--full { grid-column: 1 / -1; }

.etqan-form__label {
	display: block;
	font-weight: 700;
	color: var(--etqan-heading);
	font-size: var(--etqan-fs-sm);
	margin-block-end: 0.4rem;
}

.etqan-form__label .required { color: var(--etqan-primary-dark); }

.etqan-form input[type="text"],
.etqan-form input[type="tel"],
.etqan-form input[type="email"],
.etqan-form input[type="url"],
.etqan-form input[type="search"],
.etqan-form input[type="number"],
.etqan-form select,
.etqan-form textarea,
.etqan-input {
	inline-size: 100%;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: var(--etqan-fs-base);
	color: var(--etqan-heading);
	background: var(--etqan-surface);
	border: 1.5px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	transition: border-color var(--etqan-dur) var(--etqan-ease), box-shadow var(--etqan-dur) var(--etqan-ease);
}

.etqan-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1rem center;
	padding-inline-end: 1rem;
	padding-inline-start: 2.5rem;
}

[dir="ltr"] .etqan-form select { background-position: right 1rem center; padding-inline-start: 1rem; padding-inline-end: 2.5rem; }

.etqan-form textarea { resize: vertical; min-block-size: 110px; }

.etqan-form input:focus,
.etqan-form select:focus,
.etqan-form textarea:focus {
	outline: none;
	border-color: var(--etqan-primary);
	box-shadow: 0 0 0 4px rgba(var(--etqan-primary-rgb), 0.15);
}

.etqan-form__actions { margin-block-start: 1.25rem; }

.etqan-form__hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.etqan-form__note {
	margin-block-start: 0.85rem;
	font-size: var(--etqan-fs-xs);
	color: var(--etqan-muted);
}

.etqan-alert {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1rem 1.15rem;
	border-radius: var(--etqan-radius-sm);
	margin-block-end: 1.25rem;
	font-size: var(--etqan-fs-sm);
	font-weight: 600;
}

.etqan-alert--success {
	background: rgba(31, 157, 85, 0.1);
	color: #14713c;
	border: 1px solid rgba(31, 157, 85, 0.3);
}

.etqan-alert--error {
	background: rgba(214, 46, 46, 0.08);
	color: #a51f1f;
	border: 1px solid rgba(214, 46, 46, 0.25);
}

/* Search form */

.etqan-search {
	display: flex;
	gap: 0.5rem;
}

.etqan-search input[type="search"] {
	flex: 1;
	padding: 0.8rem 1rem;
	border: 1.5px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	font-family: inherit;
	font-size: var(--etqan-fs-base);
}

.etqan-search button {
	flex: none;
	padding-inline: 1.2rem;
	border: 0;
	border-radius: var(--etqan-radius-sm);
	background: var(--etqan-primary);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.etqan-search button:hover { background: var(--etqan-primary-dark); }

/* ------------------------------------------------------- 17. Contact info */

.etqan-contact-info {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.etqan-contact-info--cards { gap: 1rem; }

.etqan-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.etqan-contact-info--cards .etqan-contact-info__item {
	padding: 1.15rem 1.25rem;
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
	transition: box-shadow var(--etqan-dur) var(--etqan-ease), transform var(--etqan-dur) var(--etqan-ease);
}

.etqan-contact-info--cards .etqan-contact-info__item:hover {
	box-shadow: var(--etqan-shadow);
	transform: translateY(-3px);
}

.etqan-contact-info__icon {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 14px;
	background: rgba(var(--etqan-primary-rgb), 0.12);
	color: var(--etqan-primary-dark);
	flex: none;
}

.etqan-contact-info__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.etqan-contact-info__label {
	font-size: var(--etqan-fs-xs);
	color: var(--etqan-muted);
	font-weight: 600;
}

.etqan-contact-info__value {
	font-weight: 700;
	color: var(--etqan-heading);
	word-break: break-word;
}

a.etqan-contact-info__value:hover { color: var(--etqan-primary-dark); }

.etqan-footer .etqan-contact-info__value,
.etqan-section--dark .etqan-contact-info__value { color: #fff; }

.etqan-footer .etqan-contact-info__icon,
.etqan-section--dark .etqan-contact-info__icon {
	background: rgba(var(--etqan-primary-rgb), 0.18);
	color: var(--etqan-primary);
}

/* ----------------------------------------------------------- 18. Social */

.etqan-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-social a {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	border: 1px solid var(--etqan-line);
	color: var(--etqan-heading);
	transition: all var(--etqan-dur) var(--etqan-ease);
}

.etqan-social a:hover {
	background: var(--etqan-primary);
	border-color: var(--etqan-primary);
	color: #fff;
	transform: translateY(-3px);
}

.etqan-footer .etqan-social a {
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------------------------- 19. Gallery */

.etqan-gallery__item {
	display: block;
	padding: 0;
	border: 0;
	border-radius: var(--etqan-radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--etqan-surface-alt);
	aspect-ratio: 4 / 3;
	position: relative;
}

.etqan-gallery__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--etqan-ease);
}

.etqan-gallery__item:hover .etqan-gallery__img { transform: scale(1.07); }

.etqan-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-inline-size: min(1100px, 94vw);
	max-block-size: 92vh;
}

.etqan-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }

.etqan-lightbox img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 84vh;
	object-fit: contain;
	border-radius: var(--etqan-radius);
}

.etqan-lightbox__close {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	inline-size: 42px;
	block-size: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--etqan-heading);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.etqan-lightbox__caption {
	color: #fff;
	text-align: center;
	margin-block-start: 0.75rem;
	font-size: var(--etqan-fs-sm);
}

/* ---------------------------------------------------------- 20. Page hero */

.etqan-page-hero {
	position: relative;
	padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
	background: var(--etqan-surface-alt);
	overflow: hidden;
	isolation: isolate;
}

.etqan-page-hero.has-bg {
	background-color: var(--etqan-heading);
	color: rgba(255, 255, 255, 0.82);
}

.etqan-page-hero.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--etqan-hero-bg);
	background-size: cover;
	background-position: center;
}

.etqan-page-hero.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--etqan-dark-rgb), 0.82), rgba(var(--etqan-dark-rgb), 0.9));
}

.etqan-page-hero.has-bg .etqan-page-hero__title { color: #fff; }
.etqan-page-hero.has-bg .etqan-page-hero__sub { color: rgba(255, 255, 255, 0.78); }

.etqan-page-hero__title { margin-block-end: 0.6rem; text-wrap: balance; }

.etqan-page-hero__sub {
	font-size: var(--etqan-fs-lg);
	color: var(--etqan-muted);
	max-width: 68ch;
	margin: 0;
}

.etqan-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-block-start: 1.5rem;
}

.etqan-breadcrumbs { margin-block-end: 1rem; font-size: var(--etqan-fs-sm); }

.etqan-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.etqan-breadcrumbs a { color: var(--etqan-muted); }
.etqan-breadcrumbs a:hover { color: var(--etqan-primary-dark); }
.etqan-breadcrumbs [aria-current] { color: var(--etqan-heading); font-weight: 700; }
.etqan-breadcrumbs__sep { color: var(--etqan-line); display: inline-flex; }

.etqan-page-hero.has-bg .etqan-breadcrumbs a { color: rgba(255, 255, 255, 0.7); }
.etqan-page-hero.has-bg .etqan-breadcrumbs [aria-current] { color: #fff; }

/* -------------------------------------------------------- 21. Foam feature */

.etqan-foam {
	position: relative;
	overflow: hidden;
}

.etqan-foam__media {
	position: relative;
	border-radius: var(--etqan-radius-lg);
	overflow: hidden;
	box-shadow: var(--etqan-shadow-lg);
}

.etqan-foam__media img { inline-size: 100%; }

.etqan-foam__badge {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	padding: 0.55rem 1.1rem;
	border-radius: var(--etqan-radius-pill);
	background: var(--etqan-primary);
	color: #fff;
	font-weight: 800;
	font-size: var(--etqan-fs-sm);
	box-shadow: var(--etqan-shadow);
}

.etqan-foam__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
	display: grid;
	gap: 0.75rem;
}

.etqan-foam__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-weight: 600;
	color: var(--etqan-heading);
}

.etqan-foam__list svg {
	flex: none;
	color: #fff;
	background: var(--etqan-primary);
	border-radius: 50%;
	padding: 4px;
	inline-size: 26px;
	block-size: 26px;
	margin-block-start: 3px;
}

.etqan-section--dark .etqan-foam__list li { color: rgba(255, 255, 255, 0.88); }

/* ------------------------------------------------- 22. Scroll story (layers) */

.etqan-story {
	position: relative;
	background: var(--etqan-dark);
	color: rgba(255, 255, 255, 0.78);
	overflow: hidden;
}

.etqan-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.etqan-story__visual {
	position: sticky;
	inset-block-start: calc(var(--etqan-header-h) + 2rem);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}

.etqan-story__svg { inline-size: 100%; block-size: auto; }

.etqan-story__steps { display: grid; gap: clamp(2rem, 8vh, 6rem); }

.etqan-story__step {
	padding: 1.5rem 1.6rem;
	border-radius: var(--etqan-radius);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	opacity: 0.45;
	transform: translateY(12px);
	transition: opacity 0.5s var(--etqan-ease), transform 0.5s var(--etqan-ease), border-color 0.5s var(--etqan-ease);
}

.etqan-story__step.is-active {
	opacity: 1;
	transform: translateY(0);
	border-color: rgba(var(--etqan-primary-rgb), 0.6);
	background: rgba(var(--etqan-primary-rgb), 0.08);
}

.etqan-story__step h3 { color: #fff; margin-block-end: 0.4rem; }
.etqan-story__step p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: var(--etqan-fs-sm); }

.etqan-story__num {
	display: inline-grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: rgba(var(--etqan-primary-rgb), 0.2);
	color: var(--etqan-primary);
	font-weight: 800;
	font-size: 0.9rem;
	margin-block-end: 0.75rem;
}

.etqan-story__step.is-active .etqan-story__num { background: var(--etqan-primary); color: #fff; }

.etqan-story-layer {
	transition: opacity 0.6s var(--etqan-ease), transform 0.6s var(--etqan-ease);
	transform-origin: center;
}

.etqan-story-layer.is-hidden { opacity: 0.12; }

.etqan-story__heat {
	transition: opacity 0.6s var(--etqan-ease), transform 0.8s var(--etqan-ease);
}

/* ------------------------------------------------------------- 23. Footer */

.etqan-footer {
	background: var(--etqan-dark);
	color: rgba(255, 255, 255, 0.7);
	padding-block-start: clamp(3rem, 2rem + 3vw, 4.5rem);
	position: relative;
}

.etqan-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 4px;
	background: linear-gradient(90deg, var(--etqan-primary), var(--etqan-primary-dark));
}

.etqan-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block-end: 2.5rem;
}

.etqan-footer__col-title,
.etqan-footer .footer-col__title {
	color: #fff;
	font-size: var(--etqan-fs-h4);
	margin-block-end: 1.1rem;
	position: relative;
	padding-block-end: 0.65rem;
}

.etqan-footer__col-title::after,
.etqan-footer .footer-col__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 40px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--etqan-primary);
}

.etqan-footer__about { font-size: var(--etqan-fs-sm); line-height: 1.9; margin-block-end: 1.25rem; }

.etqan-footer__brand { margin-block-end: 1rem; display: inline-flex; }
.etqan-footer__brand img { max-block-size: 56px; inline-size: auto; }

.etqan-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.etqan-footer__list a {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--etqan-fs-sm);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	transition: transform var(--etqan-dur) var(--etqan-ease), color var(--etqan-dur) var(--etqan-ease);
}

.etqan-footer__list a::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--etqan-primary);
	flex: none;
	opacity: 0.6;
}

.etqan-footer__list a:hover {
	color: #fff;
	transform: translateX(-4px);
}

[dir="ltr"] .etqan-footer__list a:hover { transform: translateX(4px); }

.etqan-footer__map { margin-block-start: 1.25rem; }
.etqan-footer__map .etqan-map { --etqan-map-h: 180px; }

.etqan-footer__bottom {
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: var(--etqan-fs-sm);
}

.etqan-footer__bottom p { margin: 0; }

.etqan-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-footer__menu a { color: rgba(255, 255, 255, 0.7); }
.etqan-footer__menu a:hover { color: var(--etqan-primary); }

/* --------------------------------------------------- 24. Floating buttons */

.etqan-floating {
	position: fixed;
	inset-block-end: 1.1rem;
	z-index: var(--etqan-z-float);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.etqan-floating--left { inset-inline-start: 1.1rem; }
.etqan-floating--right { inset-inline-end: 1.1rem; }

.etqan-floating__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	inline-size: 56px;
	block-size: 56px;
	padding: 0;
	justify-content: center;
	border-radius: var(--etqan-radius-pill);
	color: #fff;
	box-shadow: 0 12px 26px -10px rgba(var(--etqan-dark-rgb), 0.5);
	transition: transform var(--etqan-dur) var(--etqan-ease), box-shadow var(--etqan-dur) var(--etqan-ease), inline-size var(--etqan-dur) var(--etqan-ease);
}

.etqan-floating__btn:hover { transform: scale(1.06); color: #fff; }

.etqan-floating__btn--wa { background: var(--etqan-float-wa, #25D366); }
.etqan-floating__btn--phone { background: var(--etqan-float-phone, var(--etqan-primary)); }

.etqan-floating__label { display: none; font-weight: 700; font-size: var(--etqan-fs-sm); }

.etqan-floating.has-labels .etqan-floating__btn {
	inline-size: auto;
	padding-inline: 1.1rem;
}

.etqan-floating.has-labels .etqan-floating__label { display: inline; }

.etqan-floating__btn--wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
	animation: etqan-pulse 2.6s infinite;
	pointer-events: none;
}

.etqan-floating__btn { position: relative; }

@keyframes etqan-pulse {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
	70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ------------------------------------------------------------- 25. Map */

.etqan-map {
	position: relative;
	border-radius: var(--etqan-radius);
	overflow: hidden;
	background: var(--etqan-surface-alt);
	block-size: var(--etqan-map-h, 380px);
	border: 1px solid var(--etqan-line);
}

.etqan-map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.15);
}

/* --------------------------------------------------- 26. Blog & single */

.etqan-entry { max-width: 100%; }

.etqan-entry__header { margin-block-end: 1.75rem; }

.etqan-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	font-size: var(--etqan-fs-sm);
	color: var(--etqan-muted);
	margin-block-end: 1rem;
}

.etqan-entry__thumb {
	border-radius: var(--etqan-radius-lg);
	overflow: hidden;
	margin-block-end: 2rem;
	box-shadow: var(--etqan-shadow);
}

.etqan-entry__content > * { margin-block-end: 1.3em; }
.etqan-entry__content h2 { margin-block-start: 2em; }
.etqan-entry__content h3 { margin-block-start: 1.6em; }
.etqan-entry__content img { border-radius: var(--etqan-radius); }
.etqan-entry__content ul,
.etqan-entry__content ol { padding-inline-start: 1.5em; }
.etqan-entry__content li { margin-block-end: 0.5em; }

.etqan-entry__footer {
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--etqan-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.etqan-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.etqan-tags a {
	padding: 0.3rem 0.8rem;
	border-radius: var(--etqan-radius-pill);
	background: var(--etqan-surface-alt);
	font-size: var(--etqan-fs-xs);
	color: var(--etqan-heading);
	font-weight: 600;
}

.etqan-tags a:hover { background: var(--etqan-primary); color: #fff; }

.etqan-sidebar { display: grid; gap: 1.25rem; align-content: start; }

.etqan-sidebar .widget,
.etqan-widget {
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
	padding: 1.4rem;
}

.etqan-sidebar .widget-title {
	font-size: var(--etqan-fs-h4);
	margin-block-end: 1rem;
	padding-block-end: 0.6rem;
	border-block-end: 2px solid var(--etqan-surface-alt);
}

.etqan-sidebar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.etqan-sidebar li a { color: var(--etqan-heading); font-size: var(--etqan-fs-sm); }
.etqan-sidebar li a:hover { color: var(--etqan-primary-dark); }

.etqan-pagination { margin-block-start: 2.5rem; }

.etqan-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-inline-size: 44px;
	block-size: 44px;
	padding-inline: 0.85rem;
	justify-content: center;
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	color: var(--etqan-heading);
	font-weight: 700;
	background: var(--etqan-surface);
}

.etqan-pagination .page-numbers:hover,
.etqan-pagination .page-numbers.current {
	background: var(--etqan-primary);
	border-color: var(--etqan-primary);
	color: #fff;
}

/* Comments */

.etqan-comments { margin-block-start: 3rem; }

.etqan-comments .comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	gap: 1rem;
}

.etqan-comments .comment-list ol.children {
	list-style: none;
	padding-inline-start: 1.5rem;
	margin-block-start: 1rem;
	display: grid;
	gap: 1rem;
}

.etqan-comments .comment-body {
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
	padding: 1.25rem;
}

.etqan-comments .comment-meta { display: flex; gap: 0.7rem; align-items: center; margin-block-end: 0.6rem; }
.etqan-comments .avatar { border-radius: 50%; }

.comment-form { display: grid; gap: 1rem; }
.comment-form p { margin: 0; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	inline-size: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid var(--etqan-line);
	border-radius: var(--etqan-radius-sm);
	font-family: inherit;
	font-size: var(--etqan-fs-base);
}

.comment-form .submit {
	display: inline-flex;
	padding: 0.85rem 1.8rem;
	border: 0;
	border-radius: var(--etqan-radius-pill);
	background: var(--etqan-primary);
	color: #fff;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	justify-self: start;
}

.comment-form .submit:hover { background: var(--etqan-primary-dark); }

/* --------------------------------------------------------------- 27. 404 */

.etqan-404 {
	text-align: center;
	padding-block: clamp(3rem, 2rem + 5vw, 7rem);
}

.etqan-404__code {
	font-size: clamp(5rem, 3rem + 14vw, 12rem);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	background: linear-gradient(135deg, var(--etqan-primary), var(--etqan-primary-dark));
	-webkit-background-clip: text;
	background-clip: text;
	margin-block-end: 0.5rem;
}

.etqan-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-block-start: 1.75rem;
}

.etqan-404__links {
	margin-block-start: 3rem;
	text-align: start;
}

/* ------------------------------------------------------- 28. Stats / misc */

.etqan-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-stat {
	text-align: center;
	padding: 1.35rem 1rem;
	background: var(--etqan-surface);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius);
}

.etqan-stat__num {
	display: block;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	font-weight: 800;
	color: var(--etqan-primary-dark);
	line-height: 1.2;
}

.etqan-stat__label { font-size: var(--etqan-fs-sm); color: var(--etqan-muted); }

.etqan-section--dark .etqan-stat {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.etqan-section--dark .etqan-stat__num { color: var(--etqan-primary); }
.etqan-section--dark .etqan-stat__label { color: rgba(255, 255, 255, 0.7); }

.etqan-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etqan-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border-radius: var(--etqan-radius-pill);
	background: var(--etqan-surface-alt);
	border: 1px solid var(--etqan-line);
	font-size: var(--etqan-fs-sm);
	font-weight: 600;
	color: var(--etqan-heading);
}

.etqan-section--dark .etqan-chips li {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

.etqan-placeholder-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background: var(--etqan-surface-alt);
}

.etqan-no-results {
	text-align: center;
	padding: 3rem 1rem;
	background: var(--etqan-surface-alt);
	border-radius: var(--etqan-radius);
}

/* Reveal-on-scroll (progressive enhancement, JS adds .is-in) */

.etqan-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--etqan-ease), transform 0.6s var(--etqan-ease);
}

.etqan-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- 29. Responsive */

@media (max-width: 1100px) {
	.etqan-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.etqan-footer__col--contact { grid-column: 1 / -1; }
	.etqan-grid--4 { --etqan-cols: 3; }
	.etqan-grid--5 { --etqan-cols: 3; }
}

@media (max-width: 992px) {
	.etqan-nav,
	.etqan-header__actions .etqan-header__phone,
	.etqan-header__actions .etqan-btn { display: none; }

	.etqan-header__actions .etqan-btn--icon { display: inline-flex; }
	.etqan-burger { display: inline-flex; }
	.etqan-nav { margin-inline-start: 0; }

	.etqan-hero__inner { grid-template-columns: 1fr; }
	.etqan-hero__media { order: -1; aspect-ratio: 16 / 10; }

	.etqan-split { grid-template-columns: 1fr; }
	.etqan-split--sidebar { grid-template-columns: 1fr; }

	.etqan-story__inner { grid-template-columns: 1fr; }
	.etqan-story__visual { position: relative; inset-block-start: auto; max-inline-size: 460px; margin-inline: auto; }

	.etqan-cta--split { grid-template-columns: 1fr; }
	.etqan-cta--split .etqan-cta__media { min-block-size: 220px; }

	.etqan-grid--3,
	.etqan-grid--4,
	.etqan-grid--5 { --etqan-cols: 2; }

	.etqan-faq--cols-2 { grid-template-columns: 1fr; }

	.etqan-process__step::after { display: none; }
}

@media (max-width: 768px) {
	.etqan-footer__grid { grid-template-columns: 1fr 1fr; }
	.etqan-footer__col--about { grid-column: 1 / -1; }
	.etqan-topbar__inner { justify-content: center; text-align: center; }
	.etqan-topbar__note { font-size: var(--etqan-fs-xs); }
}

@media (max-width: 640px) {
	:root { --etqan-header-h: 66px; }

	.etqan-grid--2,
	.etqan-grid--3,
	.etqan-grid--4,
	.etqan-grid--5 { --etqan-cols: 1; }

	.etqan-form__grid { grid-template-columns: 1fr; }

	.etqan-footer__grid { grid-template-columns: 1fr; }

	.etqan-hero__actions .etqan-btn,
	.etqan-cta__actions .etqan-btn,
	.etqan-page-hero__actions .etqan-btn { flex: 1 1 100%; }

	.etqan-floating.has-labels .etqan-floating__label { display: none; }
	.etqan-floating.has-labels .etqan-floating__btn { inline-size: 52px; padding-inline: 0; }
	.etqan-floating__btn { inline-size: 52px; block-size: 52px; }

	.etqan-trustbar__grid { margin-block-start: 0; }

	.etqan-entry__footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
	:root { --etqan-container-pad: 0.9rem; }
	.etqan-card__body { padding: 1.15rem; }
}

/* Tablet-only: keep the topbar readable */
@media (min-width: 641px) and (max-width: 992px) {
	.etqan-trustbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------ 30. Reduced motion */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.etqan-reveal { opacity: 1; transform: none; }
	.etqan-story__step { opacity: 1; transform: none; }
	.etqan-story-layer.is-hidden { opacity: 1; }
	.etqan-card:hover,
	.etqan-btn:hover,
	.etqan-feature:hover { transform: none; }
}

/* ------------------------------------------------------------ 31. Print */

@media print {
	.etqan-header,
	.etqan-footer,
	.etqan-floating,
	.etqan-drawer,
	.etqan-cta,
	.etqan-form { display: none !important; }

	/* The drifting backdrop is screen decoration — never put it on paper. */
	body::before,
	body::after { display: none !important; }

	html { background: #fff; }
	body { color: #000; background: #fff; }
}

/* --------------------------------------------------- 32. Overflow guards */

/* Wide content inside editor output must scroll in its own box, never the page. */
.etqan-entry__content table,
.etqan-entry__content .wp-block-table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.etqan-entry__content a,
.etqan-card__text,
.etqan-feature__text,
.etqan-faq__a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.etqan-entry__content iframe,
.etqan-entry__content embed,
.etqan-entry__content object,
.etqan-entry__content video {
	max-inline-size: 100%;
}

/* Long unbroken words in headings must not push the layout sideways. */
.etqan-hero__title,
.etqan-page-hero__title,
.etqan-section-title,
.etqan-card__title {
	overflow-wrap: break-word;
}

/* ------------------------------------------- 33. Header breathing room */

/*
 * Between the desktop layout and the mobile drawer there is a band where the
 * logo + full menu + phone + two buttons no longer fit on one line. Instead of
 * letting the row overflow the viewport, drop the least critical items first —
 * each one remains reachable in the drawer and in the floating buttons.
 */

.etqan-header__actions { flex-shrink: 0; }

/* The header carries more in one row than a content section does, so it gets a
   slightly wider track than the 1200px content container. */
.etqan-header__bar,
.etqan-topbar__inner { max-width: 1360px; }

/* The phone block is the first to go: it is already in the top bar and in the
 * floating call button, so nothing is lost. */
@media (max-width: 1400px) {
	.etqan-header__phone { display: none; }
}

/* Small laptops and tablets: the WhatsApp button follows (still in the drawer
 * and in the floating buttons), leaving logo + menu + the primary CTA. */
@media (max-width: 1200px) {
	.etqan-header__actions .etqan-btn--whatsapp { display: none; }
	/* The strapline under the logo costs ~200px of row width and is repeated in
	   the hero, so it steps aside before the menu has to. */
	.etqan-brand__tag { display: none; }
	/* Last-resort safety: an unusually long menu wraps to a second line
	   instead of pushing the row past the edge of the viewport. */
	.etqan-nav { min-width: 0; }
	.etqan-menu { flex-wrap: wrap; }
}

/* =========================================================================
   34. Dark theme
   -------------------------------------------------------------------------
   Only the semantic tokens are redefined — the five brand colours the owner
   picks in the theme settings stay identical in both modes, so the identity
   never drifts. Three selectors so the toggle wins over the OS preference:
     :root                          -> light (default)
     prefers-color-scheme: dark     -> dark, unless the visitor chose light
     [data-theme="dark"]            -> dark, whatever the OS says
   ========================================================================= */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--etqan-bg: #0e0f13;
		--etqan-surface: #17181f;
		--etqan-surface-alt: #101117;
		--etqan-heading: #f2f3f7;
		--etqan-body: #b6b8c4;
		--etqan-muted: #8b8e9c;
		--etqan-line: #282a34;
		--etqan-band: #0a0b0e;
		--etqan-band-rgb: 10, 11, 14;
		--etqan-scene-sky: rgba(255, 255, 255, 0.03);
		--etqan-scene-slab: #383a45;
		--etqan-scene-slab-2: #24262e;
		--etqan-scene-line: rgba(255, 255, 255, 0.16);
		--etqan-scene-coat: #cfd5e0;
		--etqan-scene-ink: rgba(255, 255, 255, 0.55);
		--etqan-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
		--etqan-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.7);
		--etqan-shadow-lg: 0 30px 64px -28px rgba(0, 0, 0, 0.85);
		--etqan-aurora-a: rgba(var(--etqan-primary-rgb), 0.20);
		--etqan-aurora-b: rgba(71, 166, 232, 0.16);
		--etqan-aurora-c: rgba(var(--etqan-primary-rgb), 0.11);
	}
}

:root[data-theme="dark"] {
	--etqan-bg: #0e0f13;
	--etqan-surface: #17181f;
	--etqan-surface-alt: #101117;
	--etqan-heading: #f2f3f7;
	--etqan-body: #b6b8c4;
	--etqan-muted: #8b8e9c;
	--etqan-line: #282a34;
	--etqan-band: #0a0b0e;
	--etqan-band-rgb: 10, 11, 14;
	--etqan-scene-sky: rgba(255, 255, 255, 0.03);
	--etqan-scene-slab: #383a45;
	--etqan-scene-slab-2: #24262e;
	--etqan-scene-line: rgba(255, 255, 255, 0.16);
	--etqan-scene-coat: #cfd5e0;
	--etqan-scene-ink: rgba(255, 255, 255, 0.55);
	--etqan-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
	--etqan-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.7);
	--etqan-shadow-lg: 0 30px 64px -28px rgba(0, 0, 0, 0.85);
	--etqan-aurora-a: rgba(var(--etqan-primary-rgb), 0.20);
	--etqan-aurora-b: rgba(71, 166, 232, 0.16);
	--etqan-aurora-c: rgba(var(--etqan-primary-rgb), 0.11);
}

/* The always-dark bands follow the darker band token so they still read as a
   distinct layer once the whole page is dark. */
.etqan-hero,
.etqan-footer,
.etqan-section--dark,
.etqan-cta--dark,
.etqan-topbar { background-color: var(--etqan-band); }

.etqan-story { background-color: var(--etqan-band); }

/* Elements that are deliberately white chips on top of a dark band keep dark
   text in both modes. */
.etqan-btn--light,
.etqan-btn--ghost:hover,
.etqan-lightbox__close { color: var(--etqan-dark); }

/* Header + drawer pick up the surface token, and the border needs to be
   visible against a dark page. */
:root[data-theme="dark"] .etqan-header.is-stuck,
:root:not([data-theme="light"]) .etqan-header.is-stuck {
	box-shadow: 0 8px 26px -18px rgba(0, 0, 0, 0.9);
}

/* Google Maps is a light iframe — soften it so it does not glare. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .etqan-map iframe { filter: grayscale(0.3) brightness(0.85) contrast(1.05); }
}

:root[data-theme="dark"] .etqan-map iframe { filter: grayscale(0.3) brightness(0.85) contrast(1.05); }

/* ---------------------------------------------------------- Theme toggle */

.etqan-theme-toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	flex: none;
	padding: 0;
	border: 1px solid var(--etqan-line);
	border-radius: 50%;
	background: var(--etqan-surface);
	color: var(--etqan-heading);
	cursor: pointer;
	position: relative;
	transition: background-color var(--etqan-dur) var(--etqan-ease),
		color var(--etqan-dur) var(--etqan-ease),
		border-color var(--etqan-dur) var(--etqan-ease),
		transform var(--etqan-dur) var(--etqan-ease);
}

.etqan-theme-toggle:hover {
	border-color: var(--etqan-primary);
	color: var(--etqan-primary-dark);
	transform: translateY(-2px);
}

.etqan-theme-toggle svg { grid-area: 1 / 1; transition: opacity var(--etqan-dur) var(--etqan-ease), transform 0.45s var(--etqan-ease); }

/* Show the icon for the mode you would switch TO. */
.etqan-theme-toggle .etqan-icon--moon { opacity: 1; transform: rotate(0) scale(1); }
.etqan-theme-toggle .etqan-icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .etqan-theme-toggle .etqan-icon--moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
	:root:not([data-theme="light"]) .etqan-theme-toggle .etqan-icon--sun { opacity: 1; transform: rotate(0) scale(1); }
}

:root[data-theme="dark"] .etqan-theme-toggle .etqan-icon--moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="dark"] .etqan-theme-toggle .etqan-icon--sun { opacity: 1; transform: rotate(0) scale(1); }

.etqan-topbar .etqan-theme-toggle {
	inline-size: 32px;
	block-size: 32px;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.85);
}

.etqan-drawer__actions .etqan-theme-toggle {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--etqan-radius-pill);
	padding: 0.85rem 1.6rem;
	gap: 0.55rem;
	grid-auto-flow: column;
	font-weight: 700;
	font-family: inherit;
	font-size: var(--etqan-fs-base);
}

.etqan-drawer__actions .etqan-theme-toggle svg { grid-area: auto; }
.etqan-theme-toggle__label { display: none; }
.etqan-drawer__actions .etqan-theme-toggle .etqan-theme-toggle__label { display: inline; }

/* =========================================================================
   35. The insulation scene (hero illustration)
   -------------------------------------------------------------------------
   Everything animates with transform / opacity only, so it runs on the
   compositor and never triggers layout. The whole thing is one inline SVG.
   ========================================================================= */

.etqan-scene {
	position: relative;
	inline-size: 100%;
	max-inline-size: 620px;
	margin-inline: auto;
}

/* The scene as it appears beside the "من نحن" copy: framed on its own
   surface so it reads as an illustration panel rather than a loose graphic. */
.etqan-about-visual {
	padding: clamp(1rem, 0.5rem + 2vw, 2rem);
	border: 1px solid var(--etqan-line);
	border-radius: var(--etqan-radius-lg);
	background: var(--etqan-surface-alt);
	box-shadow: var(--etqan-shadow-sm);
}

.etqan-about-visual .etqan-scene { max-inline-size: none; }

.etqan-scene__svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	overflow: visible;
}

/* ------------------------------------------------------- build-up entrance */

.etqan-layer {
	transform-origin: 50% 100%;
	animation: etqan-layer-in 0.7s var(--etqan-ease) both;
}

.etqan-layer--slab     { animation-delay: 0.05s; }
.etqan-layer--primer   { animation-delay: 0.20s; }
.etqan-layer--foam     { animation-delay: 0.35s; }
.etqan-layer--membrane { animation-delay: 0.50s; }
.etqan-layer--coat     { animation-delay: 0.65s; }

@keyframes etqan-layer-in {
	from { opacity: 0; transform: translateY(16px) scaleY(0.6); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- the foam itself */

.etqan-foam-glow {
	filter: url(#etqanFoamGlow);
	animation: etqan-foam-breathe 5.5s var(--etqan-ease) 1.2s infinite;
	transform-origin: 50% 50%;
}

@keyframes etqan-foam-breathe {
	0%, 100% { opacity: 0.92; }
	50%      { opacity: 1; }
}

.etqan-bubble {
	transform-origin: center;
	animation: etqan-bubble 6s ease-in-out infinite;
}

.etqan-bubble--2 { animation-delay: 0.5s; }
.etqan-bubble--3 { animation-delay: 1.1s; }
.etqan-bubble--4 { animation-delay: 1.7s; }
.etqan-bubble--5 { animation-delay: 2.3s; }
.etqan-bubble--6 { animation-delay: 2.9s; }
.etqan-bubble--7 { animation-delay: 3.5s; }
.etqan-bubble--8 { animation-delay: 4.1s; }

@keyframes etqan-bubble {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.26; }
	50%      { transform: translateY(-2.5px) scale(1.08); opacity: 0.4; }
}

/* --------------------------------------------------------------- the sun */

.etqan-scene__sun {
	transform-origin: 482px 74px;
	animation: etqan-sun 7s ease-in-out infinite;
}

@keyframes etqan-sun {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.05); }
}

/* ----------------------------------------------- heat: falls, then stops */

.etqan-ray {
	opacity: 0;
	transform-origin: center top;
	animation: etqan-ray 3.4s var(--etqan-ease) infinite;
}

.etqan-ray--1 { animation-delay: 0s; }
.etqan-ray--2 { animation-delay: 0.34s; }
.etqan-ray--3 { animation-delay: 0.68s; }
.etqan-ray--4 { animation-delay: 1.02s; }
.etqan-ray--5 { animation-delay: 1.36s; }

@keyframes etqan-ray {
	0%   { opacity: 0; transform: translateY(-92px) scaleY(0.5); }
	22%  { opacity: 0.95; }
	55%  { opacity: 1; transform: translateY(70px) scaleY(1); }
	72%  { opacity: 0; transform: translateY(70px) scaleY(0.72); }
	100% { opacity: 0; transform: translateY(70px) scaleY(0.72); }
}

.etqan-deflect {
	opacity: 0;
	animation: etqan-deflect 3.4s var(--etqan-ease) infinite;
}

.etqan-deflect--1 { animation-delay: 0.55s; }
.etqan-deflect--2 { animation-delay: 1.23s; }
.etqan-deflect--3 { animation-delay: 1.91s; }

@keyframes etqan-deflect {
	0%, 48% { opacity: 0; transform: translateY(6px) scaleX(0.6); }
	62%     { opacity: 0.85; transform: translateY(0) scaleX(1); }
	86%     { opacity: 0; transform: translateY(-8px) scaleX(1.15); }
	100%    { opacity: 0; }
}

.etqan-scene__deflect { opacity: 1; }

/* --------------------------------------------- water: falls, then breaks */

.etqan-drop {
	opacity: 0;
	animation: etqan-drop 3.1s cubic-bezier(0.4, 0, 0.7, 1) infinite;
}

.etqan-drop--1 { animation-delay: 0.2s; }
.etqan-drop--2 { animation-delay: 0.95s; }
.etqan-drop--3 { animation-delay: 0.55s; }
.etqan-drop--4 { animation-delay: 1.5s; }
.etqan-drop--5 { animation-delay: 1.15s; }

@keyframes etqan-drop {
	0%   { opacity: 0; transform: translateY(-70px) scaleY(0.8); }
	15%  { opacity: 0.95; }
	62%  { opacity: 1; transform: translateY(186px) scaleY(1.25); }
	68%  { opacity: 0; transform: translateY(186px) scaleY(0.3); }
	100% { opacity: 0; transform: translateY(186px) scaleY(0.3); }
}

.etqan-splash {
	opacity: 0;
	transform-origin: center bottom;
	animation: etqan-splash 3.1s var(--etqan-ease) infinite;
}

.etqan-splash--1 { animation-delay: 0.2s; }
.etqan-splash--2 { animation-delay: 0.95s; }
.etqan-splash--3 { animation-delay: 0.55s; }
.etqan-splash--4 { animation-delay: 1.5s; }
.etqan-splash--5 { animation-delay: 1.15s; }

@keyframes etqan-splash {
	0%, 58% { opacity: 0; transform: scale(0.4); }
	68%     { opacity: 0.9; transform: scale(1); }
	88%     { opacity: 0; transform: scale(1.5); }
	100%    { opacity: 0; }
}

/* -------------------------------------------------- the protected room */

.etqan-scene__cool { animation: etqan-cool 6s ease-in-out 1.4s infinite; }

@keyframes etqan-cool {
	0%, 100% { opacity: 0.8; }
	50%      { opacity: 1; }
}

/* ------------------------------------------------------------- legend */

.etqan-scene__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.4rem;
	list-style: none;
	margin: 0.85rem 0 0;
	padding: 0;
	font-size: var(--etqan-fs-xs);
	font-weight: 700;
}

.etqan-scene__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.72);
}

.etqan-scene__dot {
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	flex: none;
}

.etqan-scene__legend-item.is-heat  .etqan-scene__dot { background: var(--etqan-heat); }
.etqan-scene__legend-item.is-water .etqan-scene__dot { background: var(--etqan-water); }
.etqan-scene__legend-item.is-foam  .etqan-scene__dot { background: var(--etqan-primary); }

/* ------------------------------------------------------------ responsive */

/* On phones the scene keeps its meaning but sheds detail: fewer rays, fewer
   drops, and no blur filter (the most expensive part on mobile GPUs). */
@media (max-width: 640px) {
	.etqan-scene { max-inline-size: 460px; }

	.etqan-ray--2,
	.etqan-ray--4,
	.etqan-drop--2,
	.etqan-drop--4,
	.etqan-splash--2,
	.etqan-splash--4,
	.etqan-deflect--2 { display: none; }

	.etqan-bubble--2,
	.etqan-bubble--4,
	.etqan-bubble--6,
	.etqan-bubble--8 { animation: none; }

	.etqan-foam-glow { filter: none; }

	.etqan-scene__legend { gap: 0.4rem 0.9rem; }
}

/* Stops the loop while the scene is scrolled out of view or the tab is
   hidden — set by a tiny IntersectionObserver in main.js. */
.etqan-scene[data-paused="true"] * { animation-play-state: paused !important; }

/* -------------------------------------------------- reduced motion: still */

/*
 * The scene is not decoration, it is the explanation. So rather than removing
 * it we freeze it on the frame that carries the whole message: heat and water
 * arrested at the surface, everything below protected.
 */
@media (prefers-reduced-motion: reduce) {
	.etqan-layer,
	.etqan-foam-glow,
	.etqan-bubble,
	.etqan-scene__sun,
	.etqan-scene__cool,
	.etqan-ray,
	.etqan-drop,
	.etqan-splash,
	.etqan-deflect {
		animation: none !important;
	}

	.etqan-layer { opacity: 1; transform: none; }
	.etqan-ray   { opacity: 0.95; transform: translateY(70px); }
	.etqan-drop  { opacity: 0.95; transform: translateY(178px); }
	.etqan-splash,
	.etqan-deflect { opacity: 0.7; }
}

/* The scene variant of the hero media: no crop, no fixed ratio, no card
   overlapping the illustration. */
.etqan-hero__media--scene {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	aspect-ratio: auto;
	overflow: visible;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.etqan-hero__media--scene .etqan-hero__card {
	position: static;
	margin-block-start: 1.1rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	backdrop-filter: blur(6px);
	box-shadow: none;
}

.etqan-hero__media--scene .etqan-hero__card span { color: rgba(255, 255, 255, 0.72); }
.etqan-hero__media--scene .etqan-hero__card strong { color: #fff; }

.etqan-hero__media--scene .etqan-hero__card-icon {
	background: rgba(var(--etqan-primary-rgb), 0.22);
	color: var(--etqan-primary);
}

/* -------------------------------------------------- 34. Animated backdrop */

/*
 * Two fixed gradient layers drifting against each other, so the page sits on a
 * slowly moving field instead of one flat colour. They are painted on body's
 * pseudo-elements — no extra markup, nothing to maintain in PHP.
 *
 * Only `transform` is animated, so the whole thing runs on the compositor and
 * never triggers layout or paint. `inset` is negative so the blobs can drift
 * without ever revealing a hard edge at the viewport border.
 *
 * Sections with their own background (--light, --dark, hero, footer) still
 * cover it: the movement shows through the plain sections between them, which
 * keeps long-form text on a steady surface.
 */

body::before,
body::after {
	content: "";
	position: fixed;
	inset: -20vmax;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
}

body::before {
	background-image:
		radial-gradient(38vmax 38vmax at 18% 22%, var(--etqan-aurora-a), transparent 60%),
		radial-gradient(32vmax 32vmax at 82% 14%, var(--etqan-aurora-b), transparent 62%);
	animation: etqan-aurora-a 34s var(--etqan-ease) infinite alternate;
}

body::after {
	background-image:
		radial-gradient(34vmax 34vmax at 74% 76%, var(--etqan-aurora-c), transparent 60%),
		radial-gradient(28vmax 28vmax at 26% 86%, var(--etqan-aurora-b), transparent 64%);
	animation: etqan-aurora-b 46s var(--etqan-ease) infinite alternate;
}

@keyframes etqan-aurora-a {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(3vmax, 2vmax, 0) scale(1.08); }
	100% { transform: translate3d(-2vmax, 4vmax, 0) scale(1.03); }
}

@keyframes etqan-aurora-b {
	0%   { transform: translate3d(0, 0, 0) scale(1.05); }
	50%  { transform: translate3d(-3vmax, -2vmax, 0) scale(1); }
	100% { transform: translate3d(2vmax, -4vmax, 0) scale(1.08); }
}

/* The plain "light" band goes slightly translucent so the drift reads through
   it too, rather than stamping an opaque slab over the middle of the page. */
.etqan-section--light {
	background: var(--etqan-surface-alt);
	background: color-mix(in srgb, var(--etqan-surface-alt) 80%, transparent);
}

/* Motion is decoration here: hold the layers still, keep the colour. */
@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after { animation: none; }
}

/* ------------------------------------------------ 35. Header over backdrop */

/*
 * The header is the one bar that stays put while the backdrop drifts under it,
 * so it goes translucent and blurs what passes behind. Safe to nest: the mobile
 * drawer is printed from footer.php, outside <header>, so the containing block
 * that backdrop-filter creates never traps a fixed child. Submenus are absolute
 * and were already contained by the header's own `position: relative`.
 *
 * Opaque stays the fallback — where backdrop-filter is unsupported the header
 * keeps the solid surface colour rather than turning into unreadable glass.
 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.etqan-header {
		background: color-mix(in srgb, var(--etqan-surface) 72%, transparent);
		-webkit-backdrop-filter: saturate(150%) blur(16px);
		backdrop-filter: saturate(150%) blur(16px);
	}

	/* Once stuck it carries the whole page below it — tighten the glass so the
	   nav never has to compete with a headline scrolling underneath. */
	.etqan-header.is-stuck {
		background: color-mix(in srgb, var(--etqan-surface) 86%, transparent);
	}
}

/* The dark header sits on a dark page, so its edge needs to be a touch
   brighter than the shared line token to stay visible. */
:root[data-theme="dark"] .etqan-header {
	border-block-end-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .etqan-header {
		border-block-end-color: rgba(255, 255, 255, 0.09);
	}
}