/* ==========================================================================
   ELT Home Builder
   Ek hi stylesheet, saare widgets ke liye. Har class "elth-" se shuru hoti hai
   taaki kisi theme se takraav na ho.
   ========================================================================== */

.elth {
	--elth-green: #16823c;
	--elth-green-dark: #0f6530;
	--elth-green-bright: #46d16f;
	--elth-green-soft: #eaf6ee;
	--elth-green-line: #cfe8d8;

	--elth-ink: #11324b;
	--elth-body: #5d7384;
	--elth-navy: #0b2233;

	--elth-card: #ffffff;
	--elth-line: #e6edea;
	--elth-wash: #f6faf7;

	--elth-radius: 14px;
	--elth-radius-lg: 20px;
	--elth-shadow: 0 2px 10px rgba(16, 48, 72, .06);
	--elth-shadow-lg: 0 18px 44px rgba(16, 48, 72, .12);

	--elth-wrap: 1200px;
	--elth-gap: 24px;

	box-sizing: border-box;
	display: block;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--elth-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

/* `:where()` ki specificity zero hoti hai. Pehle `.elth p` (0,1,1) tha,
   jo `.elth-phero__text` / `.elth-mt__text` jaise (0,1,0) component rules
   ko chup-chaap kha jaata tha - hero ki description ke neeche margin
   kabhi lagta hi nahi tha. Ye sirf browser ka default margin hataata hai
   aur component rules ko jeetne deta hai. */
.elth :where(p) {
	margin: 0;
}

.elth h1,
.elth h2,
.elth h3 {
	margin: 0;
	color: var(--elth-ink);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.01em;
}

/* :where() ki specificity zero hoti hai, isliye ye sirf browser ke default
   list styles hataata hai aur niche likhe component rules ko nahi kha jaata.
   Pehle `.elth ul` (0,1,1) tha - wo `.elth-mt__stats` jaise (0,1,0) rules ka
   margin/padding chup-chaap zero kar deta tha. */
.elth :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elth img {
	max-width: 100%;
	height: auto;
	display: block;
}

.elth a {
	text-decoration: none;
}

.elth-wrap {
	width: 100%;
	max-width: var(--elth-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.elth-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* --------------------------------------------------------------- headings */

.elth-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.elth-head--center {
	align-items: center;
	text-align: center;
	margin-bottom: 36px;
}

.elth-head--left {
	align-items: flex-start;
	text-align: left;
	margin-bottom: 26px;
}

.elth-head__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(22px, 2.4vw, 31px);
}

.elth-head--center .elth-head__title {
	justify-content: center;
}

.elth-head__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 22px;
	flex: none;
}

.elth-head__icon--quote {
	background: none;
	width: auto;
	height: auto;
	font-size: 32px;
	color: var(--elth-green);
}

.elth-head__sub {
	font-size: 15px;
	max-width: 70ch;
}

.elth-head--left .elth-head__sub {
	padding-left: 52px;
	margin-top: -4px;
}

.elth-head__icon--quote + span {
	line-height: 1.2;
}

.elth-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--elth-green);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.elth-eyebrow .elth-icon {
	font-size: 15px;
}

/* ---------------------------------------------------------------- buttons */

.elth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 24px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.elth-btn .elth-icon {
	font-size: 17px;
}

.elth-btn--primary {
	background: var(--elth-green);
	border-color: var(--elth-green);
	color: #fff;
}

.elth-btn--primary:hover,
.elth-btn--primary:focus-visible {
	background: var(--elth-green-dark);
	border-color: var(--elth-green-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(16, 130, 60, .28);
}

.elth-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
	backdrop-filter: blur(2px);
}

.elth-btn--ghost:hover,
.elth-btn--ghost:focus-visible {
	background: #fff;
	color: var(--elth-ink);
	border-color: #fff;
}

.elth-btn--outline {
	background: #fff;
	border-color: var(--elth-green-line);
	color: var(--elth-green);
}

.elth-btn--outline:hover,
.elth-btn--outline:focus-visible {
	background: var(--elth-green);
	border-color: var(--elth-green);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(16, 130, 60, .22);
}

.elth-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--elth-ink);
}

.elth-btn--light:hover,
.elth-btn--light:focus-visible {
	background: rgba(255, 255, 255, .88);
	color: var(--elth-ink);
	transform: translateY(-1px);
}

.elth a.elth-btn:focus-visible {
	outline: 3px solid rgba(70, 209, 111, .55);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ cards */

.elth-card {
	background: var(--elth-card);
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius);
	box-shadow: var(--elth-shadow);
}

.elth-grid {
	display: grid;
	gap: var(--elth-gap);
}

.elth-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.elth-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.elth-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ------------------------------------------------------------------ logo */

.elth-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.elth-logo__mark svg {
	width: 36px;
	height: 36px;
	display: block;
}

.elth-logo__img {
	max-height: 40px;
	width: auto;
}

.elth-logo__copy {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.elth-logo__copy strong {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: .02em;
}

.elth-logo__copy em {
	font-size: 6.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-top: 2px;
}

.elth-logo--dark {
	color: var(--elth-green);
}

.elth-logo--dark .elth-logo__copy strong {
	color: var(--elth-ink);
}

.elth-logo--dark .elth-logo__copy em {
	color: var(--elth-body);
}

.elth-logo--light {
	color: var(--elth-green-bright);
}

.elth-logo--light .elth-logo__copy strong {
	color: #fff;
}

.elth-logo--light .elth-logo__copy em {
	color: rgba(255, 255, 255, .6);
}

/* ----------------------------------------------------------------- header */

.elth-header {
	position: relative;
	z-index: 5;
}

.elth-topbar {
	background: var(--elth-navy);
	color: rgba(255, 255, 255, .8);
	font-size: 12.5px;
}

.elth-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 38px;
	flex-wrap: wrap;
}

.elth-topbar__left,
.elth-topbar__right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.elth-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, .8);
}

.elth-topbar a:hover {
	color: #fff;
}

.elth-topbar .elth-icon {
	font-size: 14px;
}

.elth-topbar__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--elth-green-bright);
}

.elth-topbar__social {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.elth-topbar__social .elth-icon {
	font-size: 15px;
}

/* ----------------------------------------------------------------- footer */

.elth-footer {
	background: var(--elth-navy);
	color: rgba(255, 255, 255, .72);
	font-size: 13.5px;
}

.elth-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto;
	gap: 34px;
	padding-top: 44px;
	padding-bottom: 36px;
	align-items: start;
}

.elth-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 30ch;
}

.elth-footer__about {
	font-size: 13px;
	line-height: 1.65;
}

.elth-footer__social {
	display: flex;
	gap: 9px;
}

.elth-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 15px;
}

.elth-footer__social a:hover {
	background: var(--elth-green);
}

.elth .elth-footer__coltitle {
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	margin-bottom: 15px;
}

.elth-footer__links,
.elth-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.elth-footer__links a {
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
}

.elth-footer__links a:hover {
	color: var(--elth-green-bright);
}

.elth-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
}

.elth-footer__contact .elth-icon {
	font-size: 16px;
	color: var(--elth-green-bright);
	margin-top: 1px;
}

.elth-footer__contact a {
	color: rgba(255, 255, 255, .72);
}

.elth-footer__contact a:hover {
	color: var(--elth-green-bright);
}

.elth-footer__aside {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	flex: none;
}

.elth-footer__aside .elth-icon {
	font-size: 26px;
	color: var(--elth-green-bright);
}

.elth-footer__aside span {
	display: flex;
	flex-direction: column;
	line-height: 1.45;
}

.elth-footer__aside em {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-style: normal;
}

.elth-footer__aside em:last-child {
	color: var(--elth-green-bright);
	border-bottom: 2px solid var(--elth-green-bright);
	align-self: flex-start;
	padding-bottom: 2px;
}

.elth-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.elth-footer__barrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 46px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
}

.elth-footer__legal {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.elth-footer__legal a {
	color: rgba(255, 255, 255, .6);
}

.elth-footer__legal a:hover {
	color: #fff;
}

.elth-footer__legal i {
	font-style: normal;
	opacity: .4;
}

/* ------------------------------------------------------------------- hero */

.elth-hero {
	position: relative;
	isolation: isolate;
	background-color: #0d2a1d;
	background-size: cover;
	background-position: center;
	padding: 64px 0 72px;
	overflow: hidden;
}

.elth-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(6, 28, 18, .92) 0%, rgba(6, 28, 18, .72) 45%, rgba(6, 28, 18, .35) 100%);
}

.elth-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: 40px;
}

.elth-hero__eyebrow {
	color: var(--elth-green-bright);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* `.elth h1` upar reset kar chuka hai, isliye yahan `.elth` ke saath
   likhna zaroori hai warna specificity me heading ink hi reh jaati hai. */
.elth .elth-hero__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: clamp(30px, 3.9vw, 46px);
	color: #fff;
	margin-bottom: 16px;
}

.elth .elth-hero__title-a {
	color: #fff;
}

.elth .elth-hero__title-b {
	color: var(--elth-green-bright);
}

.elth-hero__text {
	color: rgba(255, 255, 255, .82);
	font-size: 15.5px;
	max-width: 54ch;
	margin-bottom: 26px;
}

.elth-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 28px;
}

.elth-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.elth-hero__points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .92);
	font-size: 14px;
	font-weight: 500;
}

.elth-hero__points .elth-icon {
	font-size: 19px;
	color: var(--elth-green-bright);
}

.elth-hero__visual {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elth-hero__img {
	width: 100%;
	max-width: 430px;
	filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .45));
}

.elth-hero__script {
	position: absolute;
	top: -6px;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.04;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	z-index: 2;
	pointer-events: none;
}

.elth-hero__script span:last-child {
	border-bottom: 3px solid var(--elth-green-bright);
	padding-bottom: 2px;
}

.elth-hero__badge {
	position: absolute;
	right: -6px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 11px;
	background: #fff;
	border-radius: 12px;
	padding: 13px 18px;
	box-shadow: var(--elth-shadow-lg);
	z-index: 2;
}

.elth-hero__badge-ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 24px;
}

.elth-hero__badge-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.elth-hero__badge-copy strong {
	color: var(--elth-ink);
	font-size: 14.5px;
	font-weight: 700;
	max-width: 11ch;
}

.elth-hero__badge-copy em {
	color: var(--elth-body);
	font-size: 13px;
	font-style: normal;
}

/* ------------------------------------------------------------- logo strip */

.elth-logos {
	background: var(--elth-wash);
	padding: 26px 0;
}

.elth-logos__card {
	background: #fff;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius);
	box-shadow: var(--elth-shadow);
	padding: 18px 22px 20px;
}

.elth-logos__title {
	color: var(--elth-ink);
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 14px;
}

.elth-logos__row {
	display: flex;
	align-items: center;
	gap: 22px;
}

/* Logos apne aap chalte rehte hain. List do baar chhapti hai aur track
   -50% tak khisakta hai, isliye loop bina jhatke ke jurta hai. */
/* Viewport sirf kaatta hai - khisakte tracks hain. Dono kaam ek hi
   element par daalne se page 1374px side me scroll karne laga tha. */
.elth-logos__viewport {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	overflow: hidden;
	/* Dono kinaron par fade - logo achanak kat kar gayab nahi hota. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.elth-logos__track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	animation: elth-marquee 34s linear infinite;
}

/* Dono track apni-apni chaudai jitna khisakte hain, isliye doosra track
   theek pehle wali jagah par aa jaata hai aur loop juda hua lagta hai. */
@keyframes elth-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

.elth-logos__row:hover .elth-logos__track {
	animation-play-state: paused;
}

.elth-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	flex: 0 0 auto;
	padding: 6px 30px;
	color: var(--elth-ink);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	border-right: 1px solid var(--elth-line);
}

.elth-logos__item img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.elth-logos__aside {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 22px;
	border-left: 1px solid var(--elth-line);
	flex: none;
}

.elth-logos__aside .elth-icon {
	font-size: 25px;
	color: var(--elth-green);
}

.elth-logos__aside span {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.elth-logos__aside strong {
	color: var(--elth-ink);
	font-size: 13.5px;
}

.elth-logos__aside em {
	color: var(--elth-body);
	font-size: 12.5px;
	font-style: normal;
	max-width: 14ch;
}

/* --------------------------------------------------------------- services */

.elth-services {
	background: #fff;
	padding: 58px 0 62px;
}

.elth-service {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 28px 22px 24px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-service:hover {
	transform: translateY(-4px);
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
}

/* 66px par 3D render blob ban jaata tha - 84px par shapes padh me aate hain. */
.elth-service__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
}

.elth-service__ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Bundled icon na mile to inline SVG - khaali box kabhi nahi. */
.elth-service__ico-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 34px;
}

.elth-service__title {
	font-size: 17px;
}

.elth-service__text {
	font-size: 14px;
	flex: 1 1 auto;
}

.elth-service__btn {
	width: 100%;
	margin-top: 6px;
}

.elth-services__all {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.elth-services__all .elth-btn {
	padding: 14px 30px;
}

/* ------------------------------------------------- mission vision strategy */

.elth-mvs {
	position: relative;
	isolation: isolate;
	/* Light version dhula hua lagta tha - ab dark green band, upar white cards. */
	background-color: #0d2e1e;
	background-size: cover;
	background-position: center;
	padding: 56px 0;
	overflow: hidden;
}

/* Dark band: baayen gehra karo taaki cards alag dikhein, daayen art khula rahe. */
.elth-mvs__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(8, 34, 22, .82) 0%, rgba(8, 34, 22, .55) 56%, rgba(8, 34, 22, .18) 100%);
}

.elth-mvs__grid {
	display: flex;
	align-items: center;
	gap: 26px;
}

.elth-mvs__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	flex: 1 1 auto;
}

.elth-mvs__card {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 18px 20px;
	background: #fff;
	border-color: transparent;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.elth-mvs__ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 27px;
	margin-top: 2px;
}

.elth-mvs__copy h3 {
	font-size: 16px;
	margin-bottom: 5px;
}

.elth-mvs__copy p {
	font-size: 13px;
	line-height: 1.55;
}

.elth-mvs__script {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.08;
	/* Band ab dark hai - navy text gayab ho jaata. */
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
	max-width: 190px;
}

/* ------------------------------------------------------------------ stats */

.elth-stats {
	background: #fff;
	padding: 52px 0 46px;
}

.elth-stats__list {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0;
}

.elth-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 5px;
	padding: 4px 12px;
	border-right: 1px solid var(--elth-line);
}

.elth-stats__item:last-child {
	border-right: 0;
}

.elth-stats__ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 26px;
	margin-bottom: 2px;
}

.elth-stats__value {
	color: var(--elth-ink);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 800;
	line-height: 1.15;
	white-space: nowrap;
}

.elth-stats__label {
	font-size: 12.5px;
	line-height: 1.35;
}

/* --------------------------------------------------------------- features */

.elth-features {
	background: var(--elth-wash);
	padding: 52px 0 58px;
}

.elth-feature {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 22px 18px 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.elth-feature.is-featured {
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
	transform: translateY(-8px);
}

.elth-feature:hover {
	transform: translateY(-6px);
	box-shadow: var(--elth-shadow-lg);
}

.elth-feature__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 22px;
}

.elth-feature__title {
	font-size: 15.5px;
}

.elth-feature__text {
	font-size: 13.5px;
}

/* -------------------------------------------------- documents (own section) */

.elth-docsec {
	background: #fff;
	padding: 58px 0 64px;
}

.elth-docsec__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.elth-docsec__card {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas:
		"num ico body"
		"num ico tag";
	align-items: center;
	column-gap: 14px;
	row-gap: 6px;
	padding: 16px 18px;
	position: relative;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.elth-docsec__card::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 3px;
	background: var(--elth-green);
	opacity: .22;
	transition: opacity .18s ease, width .18s ease;
}

.elth-docsec__card:hover {
	border-color: var(--elth-green-line);
	box-shadow: var(--elth-shadow-lg);
	transform: translateY(-2px);
}

.elth-docsec__card:hover::before {
	opacity: 1;
	width: 5px;
}

.elth-docsec__num {
	grid-area: num;
	align-self: start;
	color: var(--elth-green);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	opacity: .55;
	padding-top: 2px;
}

.elth-docsec__ico {
	grid-area: ico;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 20px;
	flex: none;
}

.elth-docsec__body {
	grid-area: body;
	min-width: 0;
}

.elth-docsec__title {
	font-size: 14.5px;
	line-height: 1.3;
}

.elth-docsec__text {
	font-size: 13px;
	line-height: 1.5;
	margin-top: 3px;
}

.elth-docsec__tag {
	grid-area: tag;
	justify-self: start;
	background: var(--elth-green-soft);
	color: var(--elth-green-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
}

.elth-docsec__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 26px;
	padding: 18px 22px;
	background: var(--elth-wash);
	border: 1px dashed var(--elth-green-line);
	border-radius: var(--elth-radius);
}

.elth-docsec__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.55;
	max-width: 80ch;
}

.elth-docsec__note .elth-icon {
	font-size: 18px;
	color: var(--elth-green);
	margin-top: 1px;
}

.elth-docsec__foot .elth-btn {
	flex: none;
}

/* ------------------------------------------------- why choose (own section) */

.elth-whysec {
	background: var(--elth-wash);
	padding: 58px 0 64px;
}

.elth-whysec__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.elth-whysec__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 26px 16px 28px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-whysec__card:hover {
	transform: translateY(-5px);
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
}

.elth-whysec__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 26px;
}

.elth-whysec__title {
	font-size: 15px;
	line-height: 1.3;
}

.elth-whysec__text {
	font-size: 13px;
	line-height: 1.55;
}

/* ----------------------------------------------------------- testimonials */

.elth-quotes {
	background: var(--elth-wash);
	padding: 52px 0 60px;
}

.elth-quotes__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 8px;
}

.elth-quotes__tools {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
	margin-top: 6px;
}

/* ------------------------------------------------------------ slider nav */

.elth-nav-arrows {
	display: flex;
	gap: 8px;
}

.elth .is-static .elth-nav-arrows {
	display: none;
}

.elth-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--elth-green-line);
	background: #fff;
	color: var(--elth-green);
	font-size: 18px;
	cursor: pointer;
	padding: 0;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}

.elth-arrow:hover:not(:disabled) {
	background: var(--elth-green);
	border-color: var(--elth-green);
	color: #fff;
}

.elth-arrow:disabled {
	opacity: .35;
	cursor: default;
}

.elth-arrow[data-elth-prev] .elth-icon {
	transform: rotate(180deg);
}

/* Testimonials har screen par slider hai - desktop par teen card dikhte
   hain aur baaki arrow ya swipe se aate hain. */
.elth-quotes__grid {
	display: flex;
	gap: var(--elth-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-inline: -4px;
	padding: 4px;
}

.elth-quotes__grid::-webkit-scrollbar {
	display: none;
}

.elth-quotes__grid > .elth-quote {
	flex: 0 0 calc((100% - var(--elth-gap) * 2) / 3);
	scroll-snap-align: start;
}

.elth-quotes__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--elth-green);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	margin-top: 8px;
}

.elth-quotes__more:hover {
	color: var(--elth-green-dark);
	text-decoration: underline;
}

.elth-quote {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
}

.elth-quote__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.elth-quote__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 auto;
}

.elth-quote__text {
	font-size: 13.5px;
	line-height: 1.6;
}

.elth-quote__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.elth-quote__who {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.elth-quote__who strong {
	color: var(--elth-ink);
	font-size: 13.5px;
}

.elth-quote__who em {
	color: var(--elth-body);
	font-size: 12px;
	font-style: normal;
}

.elth-quote__stars {
	display: inline-flex;
	gap: 1px;
	color: #f5b73d;
	font-size: 13px;
	flex: none;
}

/* -------------------------------------------------------------- closing CTA */

.elth-cta {
	position: relative;
	isolation: isolate;
	background-color: #0c2a1c;
	background-size: cover;
	background-position: center;
	padding: 40px 0;
	overflow: hidden;
}

.elth-cta__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(8, 30, 20, .93) 0%, rgba(8, 30, 20, .78) 60%, rgba(8, 30, 20, .55) 100%);
}

.elth-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 30px;
}

.elth .elth-cta__title {
	color: #fff;
	font-size: clamp(20px, 2.2vw, 27px);
	margin-bottom: 8px;
	/* Reference me do line: "Let's Build a Cleaner," / "Greener Tomorrow Together". */
	max-width: 24ch;
}

.elth .elth-cta__hl {
	color: var(--elth-green-bright);
}

.elth-cta__text {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	max-width: 48ch;
}

.elth-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.elth-cta__badge {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-left: 26px;
	border-left: 1px solid rgba(255, 255, 255, .22);
}

.elth-cta__badge-ico {
	display: inline-flex;
	color: var(--elth-green-bright);
	font-size: 28px;
}

.elth-cta__badge-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.32;
}

.elth-cta__badge-copy em {
	color: #fff;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
}

/* ==========================================================================
   Inner pages (About)
   ========================================================================== */

/* Eyebrow jiske aage ek chhoti green line hai. */
.elth-rule {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--elth-green);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.elth-rule::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--elth-green);
	border-radius: 2px;
}

/* ------------------------------------------------------------- page hero */

.elth-phero {
	position: relative;
	isolation: isolate;
	background-color: #0b2a1c;
	background-size: cover;
	background-position: center right;
	padding: 52px 0 58px;
	overflow: hidden;
}

.elth-phero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, rgba(6, 28, 18, .95) 0%, rgba(6, 28, 18, .86) 38%, rgba(6, 28, 18, .32) 72%, rgba(6, 28, 18, .1) 100%);
}

/* Hero ka saara content ek column me - daayin taraf image ke liye jagah
   khaali rahe. Pehle chips poori chaudai le lete the aur haath/globe se
   takra rahe the.
   Fixed 560px bhi kaafi nahi tha: ~1000px par wo poori chaudai ka 60% ban
   jaata hai aur image ke subject tak pahunch jaata hai. Isliye percentage
   bhi - jo chhota ho wahi lagta hai. */
.elth-phero__inner > * {
	max-width: min(560px, 50%);
}

/* Hero ke upar-daayen handwritten line. */
.elth-phero__script {
	position: absolute;
	top: 30px;
	right: 40px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 29px;
	font-weight: 700;
	line-height: 1.06;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
	pointer-events: none;
}

.elth-phero__script span:last-child {
	border-bottom: 3px solid var(--elth-green-bright);
	padding-bottom: 2px;
}

/* Image ke aas-paas tairte EPR badges. Hero ke daayin aadhe hisse me
   rehte hain taaki text ke upar kabhi na aayein. */
/* Upar se jagah chhodi hai: handwritten text bhi top-right me baithta hai,
   aur `tr` slot ka badge uske upar chadh jaata tha. */
.elth-phero__orbit {
	position: absolute;
	inset: 96px 0 0 50%;
	z-index: 1;
	pointer-events: none;
}

.elth-orb {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 15px 8px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .26);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
	animation: elth-float 6s ease-in-out infinite;
}

.elth-orb__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--elth-green);
	font-size: 19px;
	flex: none;
}

.elth-orb__ico img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.elth-orb__label {
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* Har badge thodi alag der par tairta hai, warna sab ek saath hilte hain. */
.elth-orb--tl { top: 12%;   left: 2%;   animation-delay: 0s; }
.elth-orb--tr { top: 7%;    right: 9%;  animation-delay: -1.5s; }
.elth-orb--ml { top: 46%;   left: -4%;  animation-delay: -3s; }
.elth-orb--mr { top: 50%;   right: 6%;  animation-delay: -4.5s; }
/* left 1% text column ke bilkul kinare par aa jaata tha - 8% par safe. */
.elth-orb--bl { bottom: 14%; left: 8%;  animation-delay: -2.2s; }
.elth-orb--br { bottom: 9%;  right: 10%; animation-delay: -3.8s; }

@keyframes elth-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

.elth-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 14px;
}

.elth-crumbs a {
	color: rgba(255, 255, 255, .78);
}

.elth-crumbs a:hover {
	color: var(--elth-green-bright);
}

.elth-crumbs em {
	font-style: normal;
	color: #fff;
}

.elth .elth-phero__title {
	color: #fff;
	font-size: clamp(30px, 3.6vw, 44px);
	margin-bottom: 10px;
}

.elth .elth-phero__title span {
	color: var(--elth-green-bright);
}

.elth-phero__sub {
	color: #fff;
	font-size: clamp(16px, 1.6vw, 19px);
	font-weight: 600;
	line-height: 1.35;
	max-width: 30ch;
	margin-bottom: 14px;
}

.elth-phero__text {
	color: rgba(255, 255, 255, .78);
	font-size: 14.5px;
	max-width: 52ch;
	margin-bottom: 24px;
}

/* Pehle yahan sirf ek button tha, isliye koi flex/gap nahi tha - doosra
   button aate hi dono chipak gaye the. */
.elth-phero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* EPR categories ek nazar me - banner ko generic hone se bachati hain.
   Column ke andar hi wrap hoti hain, image tak nahi pahunchti.

   `.elth` ke saath likhna zaroori hai: upar wala reset `.elth ul { margin:0;
   padding:0 }` (0,1,1) is se zyada specific hai aur spacing kha jaata tha. */
.elth .elth-phero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.elth-phero__chips li > * {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .88);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	backdrop-filter: blur(2px);
	transition: background-color .18s ease, border-color .18s ease;
}

.elth-phero__chips .elth-icon {
	font-size: 14px;
	color: var(--elth-green-bright);
}

.elth-phero__chips a:hover {
	background: rgba(255, 255, 255, .16);
	border-color: var(--elth-green-bright);
}

/* ---------------------------------------------------------- image + text */

.elth-mt {
	padding: 58px 0 64px;
}

.elth-mt--white {
	background: #fff;
}

.elth-mt--wash {
	background: var(--elth-wash);
}

.elth-mt__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 48px;
	align-items: center;
}

.elth-mt--img-left .elth-mt__copy {
	order: 2;
}

.elth-mt--img-left .elth-mt__media {
	order: 1;
}

.elth-mt__title {
	font-size: clamp(22px, 2.3vw, 30px);
	margin-bottom: 14px;
	max-width: 20ch;
}

.elth-mt__text {
	font-size: 14.5px;
	margin-bottom: 14px;
}

.elth-mt__actions {
	margin-top: 22px;
}

.elth-mt__media {
	position: relative;
}

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

.elth-mt__img {
	width: 100%;
	display: block;
}

/* Brand photo me nahi chhapa - upar asli text hai, isliye hamesha crisp. */
.elth-mt__brand {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 28px rgba(16, 48, 72, .18);
	white-space: nowrap;
}

.elth-mt__brand--center {
	top: 50%;
	margin-top: -22px;
}

.elth-mt__brand--top {
	top: 16%;
}

.elth-mt__brand--bottom {
	left: 22px;
	bottom: 20px;
	transform: none;
}

.elth-mt__brand-mark svg {
	width: 34px;
	height: 34px;
	display: block;
	color: var(--elth-green);
}

.elth-mt__brand-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.elth-mt__brand-copy strong {
	color: var(--elth-ink);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: .01em;
}

.elth-mt__brand-copy em {
	color: var(--elth-body);
	font-size: 8px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-top: 3px;
}

/* Stats bar image ke neeche aadhi bahar nikli hui. */
.elth-mt__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: #fff;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius);
	box-shadow: var(--elth-shadow-lg);
	margin: -46px 18px 0;
	position: relative;
}

.elth-mt__stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	padding: 14px 8px 16px;
	border-right: 1px solid var(--elth-line);
}

.elth-mt__stats li:last-child {
	border-right: 0;
}

.elth-mt__stat-ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 21px;
}

.elth-mt__stats strong {
	color: var(--elth-ink);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
}

.elth-mt__stats em {
	color: var(--elth-body);
	font-size: 11.5px;
	font-style: normal;
	line-height: 1.3;
}

/* ---------------------------------------------------------------- purpose */

.elth-purpose {
	background: #eef6f0;
	padding: 56px 0 62px;
}

.elth-purpose__grid {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: 40px;
	align-items: start;
}

.elth-purpose__title {
	font-size: clamp(21px, 2.2vw, 28px);
	margin-bottom: 14px;
	max-width: 18ch;
}

.elth-purpose__text {
	font-size: 14.5px;
}

.elth-purpose__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.elth-purpose__card {
	padding: 22px 20px 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.elth-purpose__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--elth-shadow-lg);
}

.elth-purpose__ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 28px;
	margin-bottom: 10px;
}

.elth-purpose__card h3 {
	font-size: 16.5px;
	margin-bottom: 8px;
}

.elth-purpose__card p {
	font-size: 13.5px;
	line-height: 1.55;
}

.elth-purpose__bullets {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.elth-purpose__bullets li {
	position: relative;
	padding-left: 15px;
	font-size: 13.5px;
	line-height: 1.5;
}

.elth-purpose__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--elth-green);
}

/* -------------------------------------------------------------- expertise */

.elth-exp {
	background: #fff;
	padding: 56px 0 62px;
}

.elth-exp__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.elth-exp__tile {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-exp__tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
}

.elth-exp__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 22px 12px 24px;
	height: 100%;
}

.elth-exp__ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 30px;
}

.elth-exp__label {
	color: var(--elth-ink);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
}

/* ------------------------------------------------------------ pan india */

.elth-india {
	background: var(--elth-wash);
	padding: 54px 0 60px;
}

.elth-india__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
	gap: 36px;
	align-items: center;
}

.elth-india__title {
	font-size: clamp(21px, 2.2vw, 28px);
	margin-bottom: 12px;
	max-width: 16ch;
}

.elth-india__text {
	font-size: 14.5px;
}

.elth-india__actions {
	margin-top: 20px;
}

.elth-india__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.elth-india__visual img {
	width: 100%;
	max-width: 330px;
}

/* Map na ho to iski jagah ye badge - jaan boojh kar, kyunki India ka map
   sirf official boundaries ke saath hi lagna chahiye. */
.elth-india__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 30px 26px 32px;
	background: #fff;
	border: 1px dashed var(--elth-green-line);
	border-radius: var(--elth-radius-lg);
	max-width: 270px;
}

.elth-india__badge-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 26px;
	margin-bottom: 4px;
}

.elth-india__badge strong {
	color: var(--elth-ink);
	font-size: 22px;
	font-weight: 800;
}

.elth-india__badge em {
	color: var(--elth-body);
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.4;
}

.elth-india__points {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.elth-india__points li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	color: var(--elth-ink);
	line-height: 1.45;
}

.elth-india__pico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 19px;
	flex: none;
	margin-top: 1px;
}

/* ------------------------------------------------------- trust strip */

.elth-trust {
	background: var(--elth-wash);
	padding: 18px 0;
	border-bottom: 1px solid var(--elth-line);
}

.elth .elth-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.elth-trust__list li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 6px 14px;
	border-right: 1px solid var(--elth-line);
}

.elth-trust__list li:last-child {
	border-right: 0;
}

.elth-trust__ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 23px;
	flex: none;
}

.elth-trust__text {
	color: var(--elth-ink);
	font-size: 14px;
	font-weight: 600;
}

/* ----------------------------------------------------------- process */

.elth-proc {
	position: relative;
	isolation: isolate;
	background-color: #0c2a1c;
	background-size: cover;
	background-position: center;
	padding: 52px 0 58px;
	overflow: hidden;
}

.elth-proc__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, rgba(7, 30, 20, .94) 0%, rgba(7, 30, 20, .84) 52%, rgba(7, 30, 20, .62) 100%);
}

.elth-rule--light {
	color: var(--elth-green-bright);
}

.elth-rule--light::before {
	background: var(--elth-green-bright);
}

.elth-proc__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 28px;
}

.elth .elth-proc__title {
	color: #fff;
	font-size: clamp(21px, 2.2vw, 29px);
	margin-bottom: 8px;
}

.elth-proc__sub {
	color: rgba(255, 255, 255, .8);
	font-size: 14.5px;
	max-width: 52ch;
}

.elth-proc__script {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
	max-width: 180px;
}

.elth .elth-proc__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	counter-reset: none;
}

.elth-proc__step {
	position: relative;
	padding: 20px 18px 22px;
	background: #fff;
	border-color: transparent;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

/* Cards ke beech chevron - aakhri ke baad nahi. */
.elth-proc__step::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -12px;
	width: 10px;
	height: 10px;
	border-top: 2px solid rgba(255, 255, 255, .55);
	border-right: 2px solid rgba(255, 255, 255, .55);
	transform: translateY(-50%) rotate(45deg);
}

.elth-proc__step:last-child::after {
	display: none;
}

.elth-proc__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--elth-green);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 12px;
}

.elth-proc__ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 21px;
	margin-left: 10px;
	vertical-align: middle;
}

.elth-proc__step h3 {
	font-size: 15.5px;
	margin-bottom: 6px;
}

.elth-proc__step p {
	font-size: 13px;
	line-height: 1.5;
}

/* --------------------------------------------------------------- faq */

.elth-faq {
	background: var(--elth-wash);
	padding: 56px 0 64px;
}

.elth-faq__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 32px;
}

.elth .elth-faq__title {
	font-size: clamp(22px, 2.3vw, 31px);
	margin: 8px auto 10px;
}

.elth .elth-faq__sub {
	font-size: 14.5px;
	max-width: 62ch;
	margin: 0 auto;
}

/* Accordion beech me, chaudai bandhi hui - poori screen par line bahut
   lambi ho jaati hai aur padhne me bure lagti hai. */
.elth .elth-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 880px;
	margin: 0 auto;
}

.elth-faq__list details {
	background: #fff;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius);
	box-shadow: var(--elth-shadow);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.elth-faq__list details:hover {
	border-color: var(--elth-green-line);
	transform: translateY(-2px);
}

.elth-faq__list details[open] {
	border-color: var(--elth-green-line);
	box-shadow: var(--elth-shadow-lg);
}

.elth-faq__list summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	color: var(--elth-ink);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
}

.elth-faq__list summary::-webkit-details-marker {
	display: none;
}

/* Number ab green chip me - plain text se zyada saaf. */
.elth-faq__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--elth-green-soft);
	color: var(--elth-green-dark);
	font-size: 13px;
	font-weight: 800;
	flex: none;
	transition: background-color .18s ease, color .18s ease;
}

.elth-faq__list details[open] .elth-faq__n {
	background: var(--elth-green);
	color: #fff;
}

.elth-faq__q {
	flex: 1 1 auto;
}

/* Plus se minus - CSS hi se, koi JS nahi. */
.elth-faq__mark {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1.5px solid var(--elth-green-line);
	flex: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.elth-faq__list details[open] .elth-faq__mark {
	background: var(--elth-green);
	border-color: var(--elth-green);
}

.elth-faq__mark::before,
.elth-faq__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background: var(--elth-green);
	border-radius: 2px;
	transition: transform .2s ease, background-color .18s ease;
}

.elth-faq__mark::after {
	transform: rotate(90deg);
}

.elth-faq__list details[open] .elth-faq__mark::before,
.elth-faq__list details[open] .elth-faq__mark::after {
	background: #fff;
}

.elth-faq__list details[open] .elth-faq__mark::after {
	transform: rotate(0deg);
}

.elth .elth-faq__a {
	padding: 0 24px 22px 68px;
	font-size: 14px;
	line-height: 1.65;
}

/* Neeche ek CTA patti. */
.elth-faq__ask {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	max-width: 880px;
	margin: 26px auto 0;
	padding: 20px 26px;
	background: #fff;
	border: 1px dashed var(--elth-green-line);
	border-radius: var(--elth-radius);
}

.elth-faq__ask-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 22px;
	flex: none;
}

.elth-faq__ask strong {
	color: var(--elth-ink);
	font-size: 15px;
	margin-right: 4px;
}

/* ==========================================================================
   Service detail page
   ========================================================================== */

/* Hero ke buttons ke neeche tick wali line. */
.elth .elth-phero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 22px;
}

.elth-phero__points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .92);
	font-size: 14px;
	font-weight: 500;
}

.elth-phero__points .elth-icon {
	font-size: 19px;
	color: var(--elth-green-bright);
}

/* Image par handwritten quote card. */
.elth-mt__quote {
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 22px 26px 24px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(6px);
	box-shadow: 0 14px 34px rgba(16, 48, 72, .2);
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--elth-ink);
	max-width: 240px;
}

.elth-mt__quote-mark {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 26px;
	margin-bottom: 4px;
}

/* -------------------------------------------------------- who needs this */

.elth-aud {
	position: relative;
	overflow: hidden;
	padding: 56px 0 62px;
}

.elth-aud--mint {
	background:
		radial-gradient(900px 420px at 88% 18%, rgba(70, 209, 111, .16), transparent 70%),
		#eef6f0;
}

.elth-aud--white {
	background:
		radial-gradient(900px 420px at 88% 18%, rgba(70, 209, 111, .12), transparent 70%),
		#fff;
}

.elth-aud__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
	gap: 42px;
	align-items: center;
}

.elth-aud__head {
	margin-bottom: 30px;
}

/* Tiles wale layout me neeche side-image jaisi koi cheez nahi hoti, isliye
   section ki niche wali jagah kam - warna cards ke baad bada khaali hissa
   bach jaata hai. */
.elth-aud--noimg.elth-aud--tiles {
	padding-bottom: 46px;
}

.elth .elth-aud__title {
	font-size: clamp(22px, 2.3vw, 30px);
	margin-bottom: 10px;
	max-width: 24ch;
}

.elth .elth-aud__sub {
	font-size: 14.5px;
	max-width: 56ch;
}

.elth-aud__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Bina side image ke poori chaudai mil jaati hai. */
.elth-aud--noimg .elth-aud__grid {
	grid-template-columns: minmax(0, 1fr);
}

.elth-aud--noimg .elth-aud__head {
	text-align: center;
}

.elth-aud--noimg .elth-aud__head .elth-rule {
	justify-content: center;
}

/* Compound selector (space ke bina): .elth aur .elth-aud--noimg dono EK HI
   section par hain. Space daalne par descendant maanga jaata tha, rule lagta
   hi nahi tha, aur heading "centre" hone ke bajaye baayein chipki rehti thi. */
/* Poori chaudai wale (bina side-image) layout me heading ek hi line me aaye.
   24ch ki limit sirf us variant ke liye hai jahan side me image hoti hai aur
   column patla rehta hai. */
.elth.elth-aud--noimg .elth-aud__title {
	max-width: none;
}

.elth.elth-aud--noimg .elth-aud__title,
.elth.elth-aud--noimg .elth-aud__sub {
	margin-inline: auto;
}

/* 5+ cards: patli tiles ek row me, icon upar. */
.elth-aud--tiles .elth-aud__cards {
	grid-template-columns: repeat(var(--elth-aud-cols, 4), minmax(0, 1fr));
	gap: 12px;
}

/*
 * Tile me icon upar aur label uske neeche. Label ko flex:1 + centre diya
 * hai taaki ek-line aur teen-line dono labels card ke beech me baithein -
 * warna chhote label wale cards ke neeche badi khaali jagah bachti thi aur
 * row tedhi lagti thi.
 */
.elth-aud--tiles .elth-aud__card {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 24px 14px 26px;
}

.elth-aud--tiles .elth-aud__label {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
}

.elth-aud--tiles .elth-aud__card::before {
	inset: 0 0 auto 0;
	width: auto;
	height: 3px;
}

.elth-aud--tiles .elth-aud__card:hover::before {
	width: auto;
	height: 5px;
}

.elth-aud--tiles .elth-aud__ico {
	width: 54px;
	height: 54px;
	font-size: 26px;
}

.elth-aud--tiles .elth-aud__label {
	font-size: 13.5px;
}

/* Card ab icon ke saath ek row me - pehle sab centred the aur khaali
   lagte the. Baayin taraf green accent hover par chaudi hoti hai. */
.elth-aud__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 20px 22px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-aud__card::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 3px;
	background: var(--elth-green);
	opacity: .25;
	transition: opacity .2s ease, width .2s ease;
}

.elth-aud__card:hover {
	transform: translateY(-5px);
	/* Halki hari aabha - mint background par saada shadow gum ho jaata hai. */
	box-shadow: 0 18px 38px rgba(22, 130, 60, .16);
	border-color: var(--elth-green-line);
}

.elth-aud__card:hover .elth-aud__ico {
	transform: scale(1.06);
}

.elth-aud__card:hover::before {
	opacity: 1;
	width: 5px;
}

.elth-aud__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--elth-green-soft) 0%, #d8eede 100%);
	color: var(--elth-green);
	font-size: 27px;
	flex: none;
	box-shadow: inset 0 0 0 1px rgba(22, 130, 60, .1);
	transition: transform .22s ease;
}

.elth-aud__label {
	color: var(--elth-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

.elth-aud__visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

/* Globe ke peeche halka halo - pehle wo upar se kat raha tha. */
.elth-aud__halo {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 250px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 68%);
}

.elth-aud__halo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.elth-aud__script {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--elth-green-dark);
}

/* ------------------------------------------------------- numbered row */

.elth-steps {
	padding: 50px 0 56px;
}

.elth-steps--white {
	background: #fff;
}

.elth-steps--wash {
	background: var(--elth-wash);
}

.elth .elth-steps__title {
	font-size: clamp(21px, 2.2vw, 29px);
	margin-bottom: 10px;
	/* Heading center me, aur poori chaudai mile taaki ek line me aa jaye. */
	text-align: center;
	margin-inline: auto;
	max-width: 46ch;
}

.elth .elth-steps__sub {
	font-size: 14.5px;
	margin-bottom: 8px;
	text-align: center;
	margin-inline: auto;
	max-width: 76ch;
}

.elth .elth-steps__row {
	display: grid;
	grid-template-columns: repeat(var(--elth-steps, 4), minmax(0, 1fr));
	gap: 14px;
	margin-top: 32px;
}

/* Pehle ye sirf divider-separated text tha - sasta lagta tha. Ab har item
   apna card hai, number badge aur hover ke saath. */
.elth-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 20px 26px;
	background: #fff;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius);
	box-shadow: var(--elth-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-steps__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
}

/* Cards ke beech chevron. */
.elth-steps__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -11px;
	z-index: 1;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--elth-green);
	border-right: 2px solid var(--elth-green);
	transform: translateY(-50%) rotate(45deg);
	opacity: .5;
}

.elth-steps__item:last-child::after {
	display: none;
}

.elth-steps__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.elth-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--elth-green);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	flex: none;
	box-shadow: 0 6px 16px rgba(16, 130, 60, .3);
}

.elth-steps__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 22px;
	flex: none;
}

/* Glossy render apne aap me poora icon hai - uske peeche tinted chip
   nahi chahiye, warna do boxes ek dusre par dikhte hain. */
.elth-steps__ico--img {
	background: none;
	width: 52px;
	height: 52px;
}

.elth-steps__ico--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.elth-steps__name {
	font-size: 15.5px;
	line-height: 1.3;
	margin-bottom: 7px;
}

.elth-steps__text {
	font-size: 13px;
	line-height: 1.55;
}

/* 6-7 steps ek hi row me daalne par har box patla ho jaata tha. Ab flex
   wrap: ek row me chaar, bache hue neeche beech me. */
.elth.elth-steps--compact .elth-steps__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.elth-steps--compact .elth-steps__item {
	flex: 0 1 calc((100% - 3 * 14px) / 4);
	min-width: 190px;
	align-items: center;
	text-align: center;
	/* Upar jagah chhodi hai - number badge wahan baithta hai. */
	padding: 34px 18px 26px;
	margin-top: 18px;
	overflow: visible;
	background: linear-gradient(180deg, #fff 0%, var(--elth-wash) 100%);
}

/* Upar patli green line - hover par poori chaudi. */
.elth-steps--compact .elth-steps__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--elth-green);
	opacity: .35;
	transition: width .22s ease, opacity .22s ease;
}

.elth-steps--compact .elth-steps__item:hover::before {
	width: 100%;
	opacity: 1;
}

/* Wrap hone par chevron galat jagah dikhta hai. */
.elth-steps--compact .elth-steps__item::after {
	display: none;
}

.elth-steps--compact .elth-steps__top {
	flex-direction: column;
	gap: 0;
	margin-bottom: 12px;
}

/* Number card ke upari kinare par aadha bahar. */
.elth-steps--compact .elth-steps__num {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 36px;
	font-size: 12.5px;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(16, 130, 60, .32);
}

.elth-steps--compact .elth-steps__ico {
	width: 52px;
	height: 52px;
	font-size: 27px;
	border-radius: 50%;
}

.elth-steps--compact .elth-steps__ico--img {
	width: 60px;
	height: 60px;
}

.elth-steps--compact .elth-steps__name {
	font-size: 14px;
}

.elth-steps--compact .elth-steps__text {
	font-size: 12.5px;
}

/* ------------------------------------------ text + points on image */

.elth-chal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	align-items: stretch;
}

.elth-chal__copy {
	background: var(--elth-wash);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 44px 36px 48px 20px;
}

.elth-chal__inner {
	max-width: 440px;
}

.elth-chal__title {
	font-size: clamp(21px, 2.1vw, 27px);
	margin-bottom: 12px;
	max-width: 18ch;
}

.elth-chal__text {
	font-size: 14px;
}

.elth-chal__actions {
	margin-top: 22px;
}

.elth-chal__media {
	position: relative;
	isolation: isolate;
	background-color: #0d2232;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	min-height: 300px;
	padding: 36px 34px;
}

.elth-chal__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(10, 28, 40, .35) 0%, rgba(10, 28, 40, .72) 46%, rgba(10, 28, 40, .88) 100%);
}

.elth .elth-chal__points {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-left: auto;
	max-width: 400px;
}

.elth-chal__points li {
	display: flex;
	align-items: center;
	gap: 13px;
	color: #fff;
	font-size: 13.5px;
	line-height: 1.4;
}

.elth-chal__pico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 18px;
	flex: none;
	backdrop-filter: blur(4px);
}

/* ------------------------------------------------------------ categories */

.elth-cats {
	background: #fff;
	padding: 50px 0 56px;
}

.elth .elth-cats__title {
	font-size: clamp(21px, 2.2vw, 29px);
	margin-bottom: 10px;
	text-align: center;
}

.elth .elth-cats__sub {
	font-size: 14px;
	max-width: 86ch;
	margin: 0 auto 28px;
	text-align: center;
}

.elth .elth-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.elth-cats__card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-cats__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
}

.elth-cats__thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 10px;
	background: var(--elth-wash);
	flex: none;
	overflow: hidden;
}

.elth-cats__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elth-cats__kicker {
	display: block;
	color: var(--elth-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	margin-bottom: 2px;
}

.elth-cats__name {
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 5px;
}

.elth-cats__text {
	font-size: 12.5px;
	line-height: 1.5;
}

/* --------------------------------------------------- checklist columns */

.elth-cols {
	padding: 50px 0 56px;
}

.elth-cols--white {
	background: #fff;
}

.elth-cols--wash {
	background: var(--elth-wash);
}

.elth .elth-cols__title {
	font-size: clamp(21px, 2.2vw, 29px);
	text-align: center;
	margin: 0 auto 30px;
	max-width: 46ch;
}

.elth-cols__grid {
	display: grid;
	grid-template-columns: repeat(var(--elth-cols, 3), minmax(0, 1fr));
	gap: 18px;
}

.elth-cols__col {
	padding: 24px 22px 26px;
	background: #fff;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius);
	box-shadow: var(--elth-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elth-cols--white .elth-cols__col {
	background: var(--elth-wash);
}

.elth-cols__col:hover {
	transform: translateY(-3px);
	box-shadow: var(--elth-shadow-lg);
	border-color: var(--elth-green-line);
}

.elth .elth-cols__name {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 16px;
	line-height: 1.3;
	margin-bottom: 12px;
}

.elth-cols__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 19px;
	flex: none;
}

.elth .elth-cols__intro {
	font-size: 13.5px;
	line-height: 1.55;
	margin-bottom: 12px;
}

.elth .elth-cols__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.elth-cols__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--elth-ink);
}

.elth-cols__list .elth-icon {
	font-size: 17px;
	color: var(--elth-green);
	flex: none;
	margin-top: 1px;
}

/* ------------------------------------------------------------ form popup */

/*
 * Button ke andar icon px me. .elth-icon normally 1em ka hota hai aur bahut
 * saare themes button ka font-size reset kar dete hain - icon simat jaata
 * hai. (SVG par width/height attribute bhi hai, par CSS usse jeet jaati
 * hai, isliye CSS me bhi likhna zaroori hai.)
 */
.elth button > .elth-icon {
	width: 20px;
	height: 20px;
}

/* Sirf screen reader ke liye. Apna naam - theme ka screen-reader-text har
   theme me ho, ye maan lena theek nahi. */
.elth .elth-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.elth-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.elth-modal[hidden] {
	display: none;
}

.elth-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(9, 32, 20, .6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .22s ease;
}

.elth-modal.is-open .elth-modal__veil {
	opacity: 1;
}

.elth-modal__box {
	position: relative;
	width: min(560px, 100%);
	max-height: 100%;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(9, 32, 20, .35);
	/* hidden hi rakhna hai - warna iframe gol kone se bahar nikalta hai.
	   Close button andar (top/right 10px) hai, isliye katta nahi. */
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .22s ease, transform .22s cubic-bezier(.22, .7, .3, 1);
}

.elth-modal.is-open .elth-modal__box {
	opacity: 1;
	transform: none;
}

/* Cross form ke upar daayin kone me tairta hai - alag patti nahi banati,
   taaki form poori unchai le. button.xxx isliye ki theme ke button rules
   (rang, naap) na jeetein. */
.elth button.elth-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-width: 38px;
	max-width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--elth-line);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 2px 12px rgba(9, 32, 20, .2);
	color: var(--elth-ink);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.elth button.elth-modal__close:hover,
.elth button.elth-modal__close:focus-visible {
	color: var(--elth-green);
	border-color: var(--elth-green);
	background: var(--elth-green-soft);
}

/* Itna ki form poora samaye par neeche khaali jagah na bache. */
.elth-modal__frame {
	display: block;
	width: 100%;
	height: min(600px, 86vh);
	border: 0;
}

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

@media (max-width: 1100px) {

	.elth-cols__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth-aud--tiles .elth-aud__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.elth-grid--5,
	.elth-whysec__grid,
	.elth-exp__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 1100px se neeche image ka subject text ke paas aa jaata hai, isliye
	   veil yahin se gehri kar do - 960 tak intezaar nahi karna. */
	.elth-phero__veil,
	.elth-hero__veil {
		background: linear-gradient(100deg, rgba(6, 28, 18, .95) 0%, rgba(6, 28, 18, .9) 46%, rgba(6, 28, 18, .72) 72%, rgba(6, 28, 18, .6) 100%);
	}

	.elth-india__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth .elth-proc__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth.elth-steps--compact .elth-steps__item {
		flex-basis: calc((100% - 2 * 14px) / 3);
	}

	.elth .elth-cats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth-aud__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Ek column ban gaya - globe aur quote ko bagal-bagal rakho, warna
	   section bahut lamba ho jaata hai. */
	.elth-aud__visual {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 30px;
	}

	.elth-aud__halo {
		max-width: 190px;
	}

	/* Do column me chevron galat jagah dikhta hai. */
	.elth-proc__step::after {
		display: none;
	}

	.elth-faq__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.elth-india__visual {
		order: 3;
		grid-column: 1 / -1;
	}

	.elth-stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 26px;
	}

	.elth-stats__item:nth-child(4n) {
		border-right: 0;
	}

	.elth-mvs__grid {
		flex-direction: column;
		align-items: stretch;
	}

	.elth-mvs__script {
		align-items: center;
		text-align: center;
		max-width: none;
	}
}

@media (max-width: 1040px) {

	.elth-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth-footer__col--brand {
		grid-column: 1 / -1;
		max-width: none;
	}

	.elth-footer__aside {
		grid-column: 1 / -1;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
}

@media (max-width: 960px) {

	.elth-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-whysec__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.elth-proc__top {
		flex-direction: column;
	}

	.elth-proc__script {
		align-items: flex-start;
		text-align: left;
		max-width: none;
	}

	/* FAQ ki image upar poori chaudai me, text neeche. */
	.elth-faq__grid,
	.elth-chal__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-chal__copy {
		justify-content: flex-start;
		padding: 36px 20px 40px;
	}

	.elth-chal__inner {
		max-width: none;
	}

	.elth .elth-chal__points {
		margin-left: 0;
		max-width: none;
	}

	.elth .elth-aud__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-aud__visual {
		flex-direction: column;
	}

	.elth-mt__quote {
		position: static;
		transform: none;
		max-width: none;
		margin-top: -30px;
		margin-inline: 20px;
	}

	.elth-faq__media {
		min-height: 200px;
	}

	.elth-faq__body {
		max-width: none;
		padding-inline: 20px;
	}

	.elth-mt__grid,
	.elth-purpose__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* Chhoti screen par image hero ke peeche chali jaati hai, isliye
	   content ko column me baandhne ki zarurat nahi. */
	.elth-phero__inner > * {
		max-width: none;
	}

	/* Veil side-to-side gradient hai - mobile par uska halka daayan sira
	   theek text ke neeche aa jaata tha aur haath/globe chips me se jhaank
	   rahe the. Yahan poori band par ek jaisi gehri veil. */
	.elth-phero__veil,
	.elth-hero__veil {
		background: linear-gradient(180deg, rgba(6, 28, 18, .93) 0%, rgba(6, 28, 18, .88) 55%, rgba(6, 28, 18, .94) 100%);
	}

	.elth-phero {
		background-position: center;
	}

	/* Phone par image hero ke peeche texture ban jaati hai - uske upar
	   tairte badges sirf bhid banate hain. */
	.elth-phero__orbit {
		display: none;
	}

	/* Phone par upar-daayen handwritten text heading se takrata hai. */
	.elth-phero__script {
		position: static;
		align-items: flex-start;
		text-align: left;
		font-size: 24px;
		margin-bottom: 18px;
	}

	/* Stack hone par image ka order CSS se nahi, markup se hi theek hai. */
	.elth-mt--img-left .elth-mt__copy,
	.elth-mt--img-left .elth-mt__media {
		order: 0;
	}

	.elth-hero {
		padding: 48px 0 56px;
	}

	.elth-hero__visual {
		min-height: 0;
		margin-top: 8px;
	}

	.elth-hero__script {
		position: static;
		align-items: center;
		margin-bottom: 12px;
	}

	.elth-hero__badge {
		position: static;
		align-self: center;
		margin-top: 16px;
	}

	.elth-hero__visual {
		flex-direction: column;
	}

	.elth-docsec__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-docsec__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Services ab 3 ya 4 column ka ho sakta hai - dono 960 par 2 ho jaate. */
	.elth-grid--4,
	.elth-services__grid.elth-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth-quotes__grid > .elth-quote {
		flex-basis: calc((100% - var(--elth-gap)) / 2);
	}

	.elth-mvs__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-cta__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.elth-cta__badge {
		padding-left: 0;
		border-left: 0;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, .22);
	}

	.elth-logos__row {
		flex-direction: column;
		align-items: stretch;
	}

	.elth-logos__aside {
		padding-left: 0;
		border-left: 0;
		padding-top: 14px;
		border-top: 1px solid var(--elth-line);
		justify-content: center;
	}

	.elth-logos__item {
		flex: 0 0 25%;
	}

	.elth-quotes__top {
		flex-direction: column;
	}
}

@media (max-width: 720px) {

	.elth-cols__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-aud--tiles .elth-aud__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	/* Phone par cards column me ghus kar bekaar ho jaate the - ek shabd
	   per line tak. Ab teeno card-grid swipe slider ban jaate hain:
	   ek card dikhta hai, agla jhaankta hai, baaki swipe par aate hain. */
	.elth-services__grid,
	.elth-features__grid {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* Scrollbar chhupi rehti hai - swipe phir bhi chalta hai.
		   Dikhne wali bar bhaddi lag rahi thi. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Wrap ke kinare tak le jao taaki swipe poori chaudai me chale. */
		margin-inline: -20px;
		padding: 4px 20px 14px;
	}

	.elth-services__grid > li,
	.elth-features__grid > li,
	.elth-quotes__grid > li {
		/* 78% par card patla lagta tha aur text toot-ta tha.
		   min() se bade phone par card zyada chaudha nahi hota. */
		flex: 0 0 min(88%, 320px);
		scroll-snap-align: center;
	}

	.elth-services__grid > li,
	.elth-features__grid > li {
		padding-inline: 20px;
	}

	/* Quotes ka apna slider base me hi hai - phone par bas wahi edge bleed
	   de do jo baaki sliders ka hai. */
	.elth-quotes__grid {
		margin-inline: -20px;
		padding: 4px 20px 14px;
	}

	.elth-quotes__tools {
		width: 100%;
		justify-content: space-between;
	}

	.elth-service__btn {
		white-space: nowrap;
	}

	.elth-services__grid::-webkit-scrollbar,
	.elth-features__grid::-webkit-scrollbar {
		display: none;
	}

	/* Marquee phone par bhi wahi hai, bas card ke kinare tak full width
	   aur thoda tez. */
	.elth-logos__card {
		padding-inline: 0;
	}

	.elth-logos__title {
		padding-inline: 18px;
	}

	.elth-logos__viewport {
		animation-duration: 24s;
	}

	.elth-logos__item {
		padding: 6px 22px;
		font-size: 15px;
	}

	.elth-logos__aside {
		margin-inline: 18px;
	}

	.elth-stats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth-stats__item {
		border-right: 0;
	}

	.elth-head--left .elth-head__sub {
		padding-left: 0;
	}

	/* Phone par hero ghut raha tha - har hisse ko saans dene ki jagah. */
	.elth-phero {
		padding: 38px 0 44px;
	}

	.elth-crumbs {
		margin-bottom: 18px;
	}

	.elth .elth-phero__title {
		margin-bottom: 14px;
	}

	.elth-phero__sub {
		max-width: none;
		margin-bottom: 16px;
	}

	.elth-phero__text {
		margin-bottom: 26px;
	}

	.elth .elth-phero__chips {
		margin-top: 28px;
		padding-top: 24px;
		/* row-gap zyada: do line ke chips chipke hue lag rahe the. */
		gap: 10px 8px;
	}

	.elth-phero__chips li > * {
		padding: 8px 14px;
		font-size: 12.5px;
	}

	.elth-whysec__grid,
	.elth-exp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth .elth-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 12px;
	}

	.elth-trust__list li:nth-child(2n) {
		border-right: 0;
	}

	.elth .elth-proc__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth .elth-steps__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elth.elth-steps--compact .elth-steps__item {
		flex-basis: calc((100% - 14px) / 2);
		min-width: 0;
	}

	.elth .elth-cats__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-purpose__cards,
	.elth-india__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-mt__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-inline: 0;
	}

	.elth-mt__stats li:nth-child(2n) {
		border-right: 0;
	}

	.elth-mt__stats li:nth-child(-n+2) {
		border-bottom: 1px solid var(--elth-line);
	}

	.elth-docsec__card {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"ico body"
			"ico tag";
	}

	.elth-docsec__num {
		display: none;
	}

	.elth-feature.is-featured {
		transform: none;
	}

	.elth-hero__actions .elth-btn,
	.elth-cta__actions .elth-btn {
		flex: 1 1 auto;
	}

	.elth-topbar__row {
		justify-content: center;
		row-gap: 4px;
		padding-block: 7px;
	}

	.elth-topbar__left,
	.elth-topbar__right {
		gap: 14px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.elth-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.elth-footer__barrow {
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.elth * {
		transition: none !important;
	}

	/* Auto-scroll band karo, par logos phir bhi dikhne chahiye - isliye
	   animation hatate hi viewport ko normal scroller bana dete hain. */
	.elth-logos__viewport {
		animation: none;
		width: auto;
		overflow-x: auto;
	}

	.elth-orb {
		animation: none;
	}

	.elth-feature.is-featured,
	.elth-service:hover,
	.elth-feature:hover {
		transform: none;
	}
}

/* ==========================================================================
   E-Waste page
   Niche sab kuch sirf tab lagta hai jab naye optional controls bhare hon -
   plastic/battery/about pages ka markup inme se kisi se nahi guzarta.
   ========================================================================== */

/* ------------------------------------------- who needs: sub-line + note */

.elth-aud__text {
	color: var(--elth-body);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
}

.elth-aud--tiles .elth-aud__text {
	text-align: center;
}

/* Do-line wale tile me label ko stretch nahi karna - warna title aur
   sub-line ke beech khaali jagah aa jaati hai. */
.elth-aud--tiles .elth-aud__card--two .elth-aud__label {
	flex: 0 0 auto;
}

.elth-aud--note .elth-aud__grid {
	grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
	/* Note box cards ke saath neeche se line me baithe, heading ke saath
	   nahi - warna uske neeche badi khaali jagah bachti hai. */
	align-items: end;
}

.elth-aud--note .elth-aud__visual {
	align-items: stretch;
}

.elth-aud__note {
	display: flex;
	gap: 10px;
	padding: 18px 20px;
	border-radius: var(--elth-radius);
	border: 1px solid var(--elth-green-line);
	background: rgba(255, 255, 255, .72);
}

.elth-aud__note p {
	font-size: 12.5px;
	line-height: 1.55;
}

.elth-aud__note p + p {
	margin-top: 8px;
}

.elth-aud__note-ico {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 20px;
	flex: none;
	margin-top: 1px;
}

/* ------------------------------------- media+text: baaju wala quote card */

.elth-mt--aside .elth-mt__grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, .66fr);
	gap: 30px;
}

/* Aside teesra child hai; `--img-left` copy/media ko order deta hai, to
   ise bhi order dena padta hai warna wo sabse pehle chala jaata hai. */
.elth-mt--aside .elth-mt__aside {
	order: 3;
}

/*
 * Image daayein ho to beech me quote card achha baithta hai - copy, quote,
 * image. (`--img-left` wala pehle se theek hai: image, copy, quote.)
 *
 * Column ki chaudai jagah se tay hoti hai, item se nahi - sirf `order`
 * badalne par photo sabse patli (.66fr) column me chali jaati thi aur
 * uspar baitha quote card use dhak leta tha. Isliye template bhi ulta.
 */
.elth-mt--aside.elth-mt--img-right .elth-mt__grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .66fr) minmax(0, 1.15fr);
}

.elth-mt--aside.elth-mt--img-right .elth-mt__copy {
	order: 1;
}

.elth-mt--aside.elth-mt--img-right .elth-mt__aside {
	order: 2;
}

.elth-mt--aside.elth-mt--img-right .elth-mt__media {
	order: 3;
}

.elth-mt__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 24px 24px 30px;
	border-radius: var(--elth-radius-lg);
	border: 1px solid var(--elth-green-line);
	background: linear-gradient(180deg, #f4faf6 0%, #e9f5ee 100%);
	overflow: hidden;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.18;
	color: var(--elth-ink);
}

.elth-mt__aside-mark {
	display: inline-flex;
	color: var(--elth-green);
	font-size: 26px;
	margin-bottom: 6px;
}

.elth-mt__aside-leaf {
	position: absolute;
	right: -8px;
	bottom: -12px;
	display: inline-flex;
	color: rgba(22, 130, 60, .2);
	font-size: 62px;
}

/* Teen column me image ka frame patla ho jaata hai - uspar baithe quote
   card ko bhi chhota karna padta hai. */
.elth-mt--aside .elth-mt__quote {
	right: 14px;
	max-width: 180px;
	padding: 16px 18px 18px;
	font-size: 20px;
}

/* ------------------------------------------ categories: note aur icon */

.elth .elth-cats__note {
	display: block;
	max-width: 86ch;
	margin: 0 auto 22px;
	font-size: 12.5px;
	text-align: center;
}

.elth-cats__note strong {
	color: var(--elth-green-dark);
}

.elth-cats__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 24px;
	flex: none;
}

/* ------------------------------------------------ columns: intro line */

.elth .elth-cols__sub {
	max-width: 80ch;
	margin: 0 auto 28px;
	font-size: 14px;
	text-align: center;
}

.elth-cols--hassub .elth-cols__title {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------- impact */

.elth-impact {
	padding: 52px 0 58px;
}

.elth-impact--white {
	background: #fff;
}

.elth-impact--wash {
	background: var(--elth-wash);
}

.elth-impact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 34px;
	align-items: stretch;
}

.elth-impact--nomedia .elth-impact__grid {
	grid-template-columns: minmax(0, 1fr);
}

.elth .elth-impact__title {
	max-width: 22ch;
	margin-bottom: 26px;
	font-size: clamp(21px, 2.2vw, 29px);
}

.elth-impact__cols {
	display: grid;
	grid-template-columns: repeat(var(--elth-impact-cols, 4), minmax(0, 1fr));
}

/* Columns ke beech patli line - reference me alag cards nahi hain. */
.elth-impact__col {
	padding: 0 18px;
	border-left: 1px solid var(--elth-line);
}

.elth-impact__col:first-child {
	padding-left: 0;
	border-left: 0;
}

.elth-impact__ico {
	display: inline-flex;
	margin-bottom: 12px;
	color: var(--elth-green);
	font-size: 30px;
}

.elth .elth-impact__name {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.3;
}

.elth-impact__text {
	font-size: 13px;
	line-height: 1.55;
}

.elth-impact__media {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 320px;
	padding: 26px 26px 20px;
	border-radius: var(--elth-radius-lg);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--elth-shadow-lg);
}

.elth-impact__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(5, 24, 14, .8) 0%, rgba(5, 24, 14, .3) 46%, rgba(5, 24, 14, .9) 100%);
}

.elth-impact__script {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.elth-impact__script span:last-child {
	padding-bottom: 2px;
	border-bottom: 3px solid var(--elth-green-bright);
}

.elth-impact__badges {
	display: flex;
	gap: 10px;
}

.elth-impact__badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
}

.elth-impact__bico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	font-size: 15px;
	flex: none;
}

.elth-impact__bcopy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.elth-impact__bcopy strong {
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

.elth-impact__bcopy em {
	color: rgba(255, 255, 255, .72);
	font-style: normal;
	font-size: 10px;
	line-height: 1.3;
}

/* ---------------------------------------------------------------- risks */

/*
 * Jaan-boojh kar amber. Page ka baaki sab hara hai, aur "na karne par kya
 * hoga" wale box ko alag dikhna chahiye.
 */
.elth-risks {
	background: #fff;
	padding: 6px 0 56px;
}

.elth-risks__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 20px;
	align-items: end;
	padding: 26px 28px 28px;
	border-radius: var(--elth-radius-lg);
	border: 1px solid #f3d9a8;
	background: linear-gradient(180deg, #fff8ec 0%, #fdf1dd 100%);
	overflow: hidden;
}

.elth-risks__panel--noimg {
	grid-template-columns: minmax(0, 1fr);
}

.elth .elth-risks__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: #b4600c;
	font-size: clamp(18px, 1.9vw, 23px);
}

.elth-risks__warn {
	display: inline-flex;
	color: #e2740f;
	font-size: 26px;
}

.elth-risks__text {
	max-width: 70ch;
	margin-bottom: 14px;
	font-size: 13.5px;
}

.elth-risks__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.elth-risks__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--elth-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.elth-risks__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: #e2740f;
	color: #fff;
	font-size: 12px;
	flex: none;
}

.elth-risks__art {
	display: block;
	align-self: end;
}

.elth-risks__art img {
	display: block;
	width: 100%;
}

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

@media (max-width: 960px) {

	.elth-impact__grid,
	.elth-mt--aside .elth-mt__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Teen column tootne par aside apne aap aakhir me chala jaata hai -
	   order 3 pehle se laga hai, bas media/copy ko reset karna hai. */
	.elth-mt--aside.elth-mt--img-left .elth-mt__media,
	.elth-mt--aside.elth-mt--img-left .elth-mt__copy,
	.elth-mt--aside .elth-mt__aside {
		order: 0;
	}

	.elth-aud--note .elth-aud__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.elth-risks__panel {
		grid-template-columns: minmax(0, 1fr) 180px;
	}
}

@media (max-width: 720px) {

	.elth-impact__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 0;
	}

	.elth-impact__col:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.elth-risks__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-risks__art {
		max-width: 180px;
		margin-inline: auto;
	}
}

/* ------------------------------------- compact steps: ek row me N cards */

/*
 * `--compact` ka default 4-per-row wrap hai. E-Waste ke 7-step aur 5-step
 * rows reference me ek hi line me hain, isliye ye opt-in modifier.
 */
.elth-steps--fit .elth-steps__item {
	flex: 0 1 calc((100% - (var(--elth-steps-fit, 4) - 1) * 14px) / var(--elth-steps-fit, 4));
	min-width: 0;
	padding-inline: 12px;
}

/* Ek hi row me hain to chevron sahi jagah par aata hai - wapas on. */
.elth-steps--fit .elth-steps__item::after {
	display: block;
	right: -12px;
}

.elth-steps--fit .elth-steps__item:last-child::after {
	display: none;
}

.elth-steps--fit .elth-steps__name {
	font-size: 12.5px;
}

.elth-steps--fit .elth-steps__text {
	font-size: 11.5px;
	line-height: 1.5;
}

@media (max-width: 1100px) {

	/*
	 * 7 cards 1100px se neeche padhe hi nahi jaate - wapas 4 ke wrap par.
	 * Selector me `.elth` bhi hai: upar `.elth.elth-steps--compact
	 * .elth-steps__item` 3-per-row ka flex-basis deta hai, aur usse jeetne
	 * ke liye utni hi specificity chahiye.
	 */
	.elth.elth-steps--fit .elth-steps__item {
		flex: 0 1 calc((100% - 3 * 14px) / 4);
		min-width: 0;
	}

	.elth-steps--fit .elth-steps__item::after {
		display: none;
	}

	/* 4 patle column 1100px par shabd todne lagte hain. */
	.elth-impact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth-impact__media {
		min-height: 260px;
	}
}

/*
 * Note wale layout me main column 2.6fr hai - 24ch ki limit se heading
 * bekaar me do line me toot jaati thi.
 */
.elth.elth-aud--note .elth-aud__title {
	max-width: none;
}

/* -------------------------------------------- 8+ tiles ek hi row me */

/*
 * `--elth-aud-cols` ab 10 tak jaata hai. Itni patli tiles me 13.5px ka
 * label aur 54px ka icon fit nahi hote, isliye 8 se zyada par sab thoda
 * chhota. 7 tak kuch nahi badalta - battery ka documents section waisa
 * hi rehta hai.
 */
.elth-aud--tiles-thin .elth-aud__cards {
	gap: 8px;
}

.elth-aud--tiles-thin .elth-aud__card {
	padding: 16px 8px 18px;
	gap: 9px;
}

.elth-aud--tiles-thin .elth-aud__ico {
	width: 42px;
	height: 42px;
	font-size: 21px;
}

.elth-aud--tiles-thin .elth-aud__label {
	font-size: 11.5px;
	line-height: 1.3;
}

@media (max-width: 1100px) {

	/* Itni patli tiles 1100px par padhi nahi jaati - paanch ke do row. */
	.elth-aud--tiles-thin .elth-aud__cards {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {

	/*
	 * Specificity (0,3,0) chahiye: upar 720px par `.elth-aud--tiles
	 * .elth-aud__cards` 2 column deta hai, par mera 1100px wala 5-column
	 * rule file me baad me hai aur barabar specificity par jeet jaata tha.
	 *
	 * Compound selector (space ke bina): `.elth` aur `.elth-aud--tiles-thin`
	 * dono EK HI section par hain. Space daalne par descendant maanga jaata
	 * hai aur rule lagta hi nahi - phone par tiles 5 ki row me hi rehti thi.
	 */
	.elth.elth-aud--tiles-thin .elth-aud__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ----------------------------------- compact steps: phone par 2 ki row */

/*
 * `--fit` ka 1100px wala 4-per-row rule file me 720px wale compact rule ke
 * BAAD aata hai aur barabar specificity par jeet jaata tha - phone par 7
 * aur 9 step wale rows 70px ke patle cards ban jaate the aur har shabd
 * toot-ta tha. Isliye yahan 720px par unhe wapas compact wale 2-per-row
 * par le aaya hai.
 */
@media (max-width: 720px) {

	.elth.elth-steps--fit .elth-steps__item {
		flex: 0 1 calc((100% - 14px) / 2);
		min-width: 0;
		padding-inline: 14px;
	}

	/* Fit mode me font chhota kiya tha - phone par wapas normal. */
	.elth-steps--fit .elth-steps__name {
		font-size: 14px;
	}

	.elth-steps--fit .elth-steps__text {
		font-size: 12.5px;
	}
}

@media (max-width: 420px) {

	/* 2 ki row bhi tang padti hai - sabse chhoti screen par ek hi column. */
	.elth.elth-steps--compact .elth-steps__item,
	.elth.elth-steps--fit .elth-steps__item {
		flex: 0 1 100%;
	}

	/*
	 * Bina compact wale steps bhi: 720px par do column milte hain, jo
	 * phone par 161px ke patle ribbon ban jaate hain - ek card me 14 line
	 * text. Ek hi column me padhne layak rehta hai.
	 */
	.elth .elth-steps__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Timeline steps
   Ek rail, uspar numbered nodes, aur copy baari-baari upar-neeche. Nau step
   ek row me cards ki tarah rakho to har card 120px ka ho jaata hai aur har
   shabd toot-ta hai; zig-zag me har item ko dugni chaudai mil jaati hai.
   ========================================================================== */

.elth.elth-steps--timeline .elth-steps__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--elth-steps, 5), minmax(0, 1fr));
	grid-template-rows: 1fr auto 1fr;
	column-gap: 6px;
	margin-top: 6px;
}

/* Rail - kinaron par fade taaki wo kahin se shuru hoti na lage. */
.elth-steps--timeline .elth-steps__row::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, transparent 0%, var(--elth-green-line) 7%, var(--elth-green-line) 93%, transparent 100%);
}

.elth.elth-steps--timeline .elth-steps__item {
	grid-row: 1 / 4;
	display: grid;
	grid-template-rows: 1fr 76px 1fr;
	align-items: center;
	justify-items: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	transform: none;
}

/* Cards wali saari sajavat timeline me nahi chahiye. */
.elth-steps--timeline .elth-steps__item::before,
.elth-steps--timeline .elth-steps__item::after {
	display: none;
}

/* Node: rail par baitha safed circle, number uske kone par. */
.elth.elth-steps--timeline .elth-steps__top {
	position: relative;
	z-index: 1;
	grid-row: 2;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0;
	border-radius: 50%;
	border: 2px solid var(--elth-green-line);
	background: #fff;
	box-shadow: 0 6px 18px rgba(16, 48, 72, .14);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.elth.elth-steps--timeline .elth-steps__num {
	position: absolute;
	top: -7px;
	right: -9px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--elth-green);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0;
}

.elth.elth-steps--timeline .elth-steps__ico {
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--elth-green);
	font-size: 25px;
}

.elth-steps--timeline .elth-steps__ico--img img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/* Copy - visham item upar, sam item neeche. */
.elth-steps--timeline .elth-steps__copy {
	position: relative;
	grid-row: 1;
	align-self: end;
	max-width: 190px;
	padding: 0 4px 16px;
	text-align: center;
}

.elth-steps--timeline .elth-steps__item:nth-child(even) .elth-steps__copy {
	grid-row: 3;
	align-self: start;
	padding: 16px 4px 0;
}

/* Copy se node tak patli line. */
.elth-steps--timeline .elth-steps__copy::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 12px;
	background: var(--elth-green-line);
}

.elth-steps--timeline .elth-steps__item:nth-child(even) .elth-steps__copy::after {
	top: 0;
	bottom: auto;
}

.elth .elth-steps--timeline .elth-steps__name,
.elth.elth-steps--timeline .elth-steps__name {
	margin-bottom: 5px;
	font-size: 13px;
	line-height: 1.3;
}

.elth.elth-steps--timeline .elth-steps__text {
	font-size: 11.5px;
	line-height: 1.5;
}

.elth-steps--timeline .elth-steps__item:hover .elth-steps__top {
	transform: translateY(-3px);
	border-color: var(--elth-green);
	box-shadow: 0 12px 26px rgba(22, 130, 60, .24);
}

@media (max-width: 900px) {

	/* Rail khadi ho jaati hai aur sab copy uske daayin taraf. */
	.elth.elth-steps--timeline .elth-steps__row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 14px;
	}

	.elth-steps--timeline .elth-steps__row::before {
		inset: 10px auto 10px 29px;
		width: 2px;
		height: auto;
		transform: none;
		background: linear-gradient(180deg, transparent 0%, var(--elth-green-line) 6%, var(--elth-green-line) 94%, transparent 100%);
	}

	.elth.elth-steps--timeline .elth-steps__item {
		grid-row: auto;
		grid-template-rows: none;
		grid-template-columns: 58px minmax(0, 1fr);
		column-gap: 18px;
		justify-items: start;
	}

	.elth.elth-steps--timeline .elth-steps__top {
		grid-row: 1;
		grid-column: 1;
	}

	/*
	 * `justify-items: start` item par hai, isliye copy apni content ki
	 * chaudai le leti thi - har step alag chaudai ka dikhta tha. 100%
	 * dene par sab ek seedh me aa jaate hain.
	 */
	.elth-steps--timeline .elth-steps__copy,
	.elth-steps--timeline .elth-steps__item:nth-child(even) .elth-steps__copy {
		grid-row: 1;
		grid-column: 2;
		align-self: center;
		width: 100%;
		max-width: none;
		padding: 2px 0;
		text-align: left;
	}

	.elth-steps--timeline .elth-steps__copy::after {
		display: none;
	}

	.elth.elth-steps--timeline .elth-steps__name {
		font-size: 14px;
	}

	.elth.elth-steps--timeline .elth-steps__text {
		font-size: 12.5px;
	}
}

/* ==========================================================================
   Documents checklist panel
   Das alag-alag bordered boxes ek row me bhari lagte the. Ab ek hi uthaa
   hua panel, uske andar do column ki numbered list.
   ========================================================================== */

.elth.elth-aud--list .elth-aud__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 10px;
	padding: 10px 10px 12px;
	border-radius: var(--elth-radius-lg);
	border: 1px solid var(--elth-green-line);
	background: linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
	box-shadow: var(--elth-shadow-lg);
	counter-reset: elth-doc;
}

.elth.elth-aud--list .elth-aud__card {
	counter-increment: elth-doc;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 14px;
	border: 0;
	border-bottom: 1px solid var(--elth-line);
	border-radius: 10px;
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* Har column ki aakhri do rows ke neeche line nahi chahiye. */
.elth-aud--list .elth-aud__card:nth-last-child(-n+2) {
	border-bottom: 0;
}

/* Base me ye ek absolute green patti hai - yahan wo number ban jaati hai. */
.elth.elth-aud--list .elth-aud__card::before {
	content: counter(elth-doc, decimal-leading-zero);
	position: static;
	width: auto;
	height: auto;
	inset: auto;
	flex: none;
	min-width: 18px;
	background: none;
	opacity: 1;
	color: var(--elth-green);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
}

.elth.elth-aud--list .elth-aud__ico {
	width: 38px;
	height: 38px;
	font-size: 19px;
}

.elth.elth-aud--list .elth-aud__label {
	flex: 1 1 auto;
	font-size: 13.5px;
	text-align: left;
}

.elth.elth-aud--list .elth-aud__card:hover {
	transform: none;
	box-shadow: none;
	background: rgba(22, 130, 60, .055);
}

@media (max-width: 720px) {

	.elth.elth-aud--list .elth-aud__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Ek column me sirf aakhri row ke neeche line nahi. */
	.elth-aud--list .elth-aud__card:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--elth-line);
	}

	.elth-aud--list .elth-aud__card:last-child {
		border-bottom: 0;
	}
}

/* ==========================================================================
   Audience: feature cards
   Patli tiles tabhi chalti hain jab label chhota ho. ELV jaisi list me
   "Bulk Consumers (100+ vehicles, incl. State Transport Undertakings)"
   patle column me ek lamba ribbon ban jaata tha. Ye variant teen chaude
   card deta hai - upar square icon tile, neeche title aur sub-line.
   ========================================================================== */

.elth.elth-aud--cards-grid .elth-aud__cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.elth.elth-aud--cards-grid .elth-aud__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 20px 20px 22px;
	border-radius: var(--elth-radius);
	background: linear-gradient(180deg, #fff 0%, #f8fcf9 100%);
	overflow: hidden;
}

/* Upar patli green line - hover par poori chaudi (tiles jaisi hi bhasha). */
.elth.elth-aud--cards-grid .elth-aud__card::before {
	inset: 0 auto auto 0;
	width: 44px;
	height: 3px;
	border-radius: 0 0 3px 0;
}

.elth.elth-aud--cards-grid .elth-aud__card:hover::before {
	width: 100%;
	height: 3px;
}

/* Gol ke bajaye rounded-square tile - cards me zyada solid lagta hai. */
.elth.elth-aud--cards-grid .elth-aud__ico {
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 12px;
	font-size: 23px;
}

.elth.elth-aud--cards-grid .elth-aud__label {
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
}

.elth.elth-aud--cards-grid .elth-aud__text {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: left;
}

@media (max-width: 1100px) {

	.elth.elth-aud--cards-grid .elth-aud__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {

	/*
	 * Phone par do column me title do-teen line me toot-ta hai. Ek column
	 * me card chaude ho jaate hain - icon baayein, text uske baaju me.
	 */
	.elth.elth-aud--cards-grid .elth-aud__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth.elth-aud--cards-grid .elth-aud__card {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		column-gap: 16px;
		align-items: center;
		padding: 16px 18px;
	}

	.elth.elth-aud--cards-grid .elth-aud__ico {
		grid-row: 1 / 3;
		margin-bottom: 0;
	}

	.elth.elth-aud--cards-grid .elth-aud__label {
		grid-column: 2;
		align-self: end;
	}

	.elth.elth-aud--cards-grid .elth-aud__text {
		grid-column: 2;
		align-self: start;
		margin-top: 3px;
	}

	/* Sub-line na ho to title poori oonchai le le. */
	.elth.elth-aud--cards-grid .elth-aud__card:not(.elth-aud__card--two) .elth-aud__label {
		grid-row: 1 / 3;
		align-self: center;
	}
}

/* ------------------------------- media+text aside: mobile reset */

/*
 * `--img-right` wale teen-column rules (grid-template + order) file me
 * 960px wale stack rule ke BAAD aate hain aur barabar specificity par
 * jeet jaate the - phone par copy ~110px ke ribbon me simat jaati thi
 * aur quote card kat jaata tha. Yahan unse zyada specificity ke saath
 * sab wapas ek column par.
 */
@media (max-width: 960px) {

	.elth.elth-mt--aside .elth-mt__grid,
	.elth.elth-mt--aside.elth-mt--img-right .elth-mt__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elth.elth-mt--aside .elth-mt__copy,
	.elth.elth-mt--aside .elth-mt__media,
	.elth.elth-mt--aside .elth-mt__aside,
	.elth.elth-mt--aside.elth-mt--img-right .elth-mt__copy,
	.elth.elth-mt--aside.elth-mt--img-right .elth-mt__media,
	.elth.elth-mt--aside.elth-mt--img-right .elth-mt__aside {
		order: 0;
	}
}

/* ------------------------------- hero ka handwritten text: phone par neeche */

/*
 * 960px par ye `position: static` ho jaata hai, aur markup me wo wrap se
 * pehle aata hai - isliye phone par sabse upar, breadcrumb ke bhi upar
 * chipak jaata tha. Section ko flex column banakar ise aakhir me bhej
 * diya, daayein kinare par.
 */
@media (max-width: 960px) {

	.elth.elth-phero {
		display: flex;
		flex-direction: column;
	}

	.elth-phero__inner {
		order: 1;
	}

	/*
	 * `.elth` section par hai, script par nahi - isliye yahan descendant
	 * selector chahiye. Compound (.elth.elth-phero__script) likhne par
	 * rule kisi element par lagta hi nahi tha.
	 */
	.elth-phero .elth-phero__script {
		order: 2;
		align-items: flex-end;
		text-align: right;
		font-size: 22px;
		/* Daayein gutter wahi jo .elth-wrap ka hai. */
		margin: 22px 20px 0 0;
	}
}

/* ==========================================================================
   Header
   Class `elth-nav` hai, `elth-head` nahi - `elth-head` pehle se section
   headings ka class hai aur dono takra jaate.
   ========================================================================== */

.elth-nav {
	/* Upar wali contact patti ki unchai. Sticky ka offset isi par tika
	   hai, isliye yeh tay honi chahiye. */
	--elth-bar-h: 47px;
	position: relative;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--elth-line);
}

/* Sticky header, par upar wali contact patti chipakni nahi chahiye.

   `position: sticky` poore header par hi lag sakta hai - andar ke dabbe
   ko sticky karne se kuch nahi hota, kyunki sticky element apne parent
   ke bahar nahi jaa sakta, yaani header ke saath hi scroll ho jaayega.

   Isliye header ko utna HI upar khisaka dete hain jitni patti ki unchai
   hai: patti screen se bahar nikal jaati hai aur menu wali row theek
   top par aakar ruk jaati hai. */
.elth-nav.is-sticky {
	position: sticky;
	top: calc(-1 * var(--elth-bar-h));
}

/* Phone aur email ki upar wali patli patti. */
.elth-nav__bar {
	height: var(--elth-bar-h);
	box-sizing: border-box;
	border-bottom: 1px solid var(--elth-line);
	background: #f7faf8;
}

.elth-nav__bar-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
	height: 100%;
}

/* Teen barabar khaane: logo baayein, menu theek beech me, button daayein.
   Bahar ke dono khaane `1fr` hain, isliye menu page ke asli center me
   baithta hai - chahe logo aur button ki chaudai alag ho. */
.elth-nav__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 26px;
	min-height: 78px;
	padding-block: 10px;
}

/* `nav` ka apna dabba hata do, taaki uske andar ka menu aur button
   seedhe row ke grid khaane ban jaayein. Mobile wala block isse wapas
   flex kar deta hai, jahan yahi `nav` drawer ban jaata hai. */
.elth-nav__row > .elth-nav__nav {
	display: contents;
}

.elth-nav__row > .elth-nav__brand {
	justify-self: start;
}

.elth-nav__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.elth-nav__brand img {
	width: auto;
	display: block;
}

.elth-nav__wordmark {
	color: var(--elth-ink);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.elth-nav__wordmark em {
	color: var(--elth-green);
	font-style: normal;
}

/* Desktop par drawer ka chrome nahi chahiye. */
.elth-nav__top,
.elth-nav__burger,
.elth-nav__backdrop,
.elth-nav__subtoggle {
	display: none;
}

.elth-nav__nav {
	display: flex;
	align-items: center;
	gap: 26px;
	flex: 1 1 auto;
	min-width: 0;
}

.elth .elth-nav__menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline: auto;
}

.elth-nav__item {
	position: relative;
}

.elth-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 8px;
	color: var(--elth-ink);
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: color .18s ease, background-color .18s ease;
}

.elth-nav__link:hover,
.elth-nav__item:hover > .elth-nav__link {
	color: var(--elth-green);
	background: var(--elth-green-soft);
}

/* Jis page par abhi hain wo item.

   `is-ancestor` tab lagta hai jab dropdown ke andar wala page khula ho -
   tab upar wala item bhi hara ho jaata hai, par uske neeche lakeer nahi
   aati, taaki asli page aur uska parent alag-alag dikhein.

   Weight nahi badalte: bold karne se item ki chaudai badal jaati aur har
   page par menu thoda khisak jaata. */
.elth-nav__item.is-current > .elth-nav__link,
.elth-nav__item.is-ancestor > .elth-nav__link {
	color: var(--elth-green);
	background: var(--elth-green-soft);
}

.elth-nav__item.is-current > .elth-nav__link {
	position: relative;
}

.elth-nav__item.is-current > .elth-nav__link::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--elth-green);
}

.elth-nav__caret {
	display: inline-flex;
	font-size: 15px;
	transition: transform .2s ease;
}

.elth-nav__item--has-sub:hover .elth-nav__caret {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------- dropdown */

.elth .elth-nav__sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-width: 268px;
	padding: 8px;
	border-radius: var(--elth-radius);
	border: 1px solid var(--elth-green-line);
	background: #fff;
	box-shadow: 0 20px 44px rgba(16, 48, 72, .16);
	/* Band hone par screen reader se bhi chhupe - `visibility` isliye. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Header aur dropdown ke beech 6px ka gap hai - us par maus jaate hi menu
   band ho jaata tha. Ye invisible patti us gap ko pakad leti hai. */
.elth-nav__item--has-sub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 8px;
}

.elth-nav__item--has-sub:hover .elth-nav__sub,
.elth-nav__item--has-sub:focus-within .elth-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.elth-nav__sub a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	color: var(--elth-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	transition: color .16s ease, background-color .16s ease;
}

.elth-nav__sub a:hover {
	color: var(--elth-green-dark);
	background: var(--elth-green-soft);
}

/* Dropdown ke andar jo page abhi khula hai. */
.elth-nav__sub li.is-current > a {
	color: var(--elth-green-dark);
	background: var(--elth-green-soft);
	font-weight: 700;
}

.elth-nav__sub .elth-icon {
	color: var(--elth-green);
	font-size: 17px;
	flex: none;
}

/* ------------------------------------------------- phone, email, button */

.elth-nav__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
	justify-self: end;
}

.elth-nav__contact {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.elth-nav__cico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--elth-green-soft);
	color: var(--elth-green);
	font-size: 17px;
	flex: none;
	transition: background-color .18s ease, color .18s ease;
}

.elth-nav__contact:hover .elth-nav__cico {
	background: var(--elth-green);
	color: #fff;
}

.elth-nav__ccopy {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.elth-nav__ccopy strong {
	color: var(--elth-ink);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}

.elth-nav__ccopy em {
	color: var(--elth-body);
	font-style: normal;
	font-size: 11px;
	white-space: nowrap;
}

.elth-nav__actions .elth-btn {
	white-space: nowrap;
}

/* ----------------------------------------------------------- burger icon */

.elth-nav__burger {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--elth-line);
	border-radius: 10px;
	background: #fff;
	color: var(--elth-ink);
	cursor: pointer;
	flex: none;
}

/* Teen lakeerein: ek asli span, do uske pseudo-elements. */
.elth-nav__burger span[aria-hidden] {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.elth-nav__burger span[aria-hidden]::before,
.elth-nav__burger span[aria-hidden]::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.elth-nav__burger span[aria-hidden]::before {
	top: -6px;
}

.elth-nav__burger span[aria-hidden]::after {
	top: 6px;
}

/* --------------------------------------------------------- mobile drawer */

@media (max-width: 1080px) {

	/* Phone par header thoda patla.
	   Desktop wala teen-khaane ka grid yahan nahi chahiye - yahan to
	   logo, burger aur ek fixed drawer hai. */
	.elth-nav__row {
		display: flex;
		gap: 14px;
		min-height: 68px;
	}

	/* Upar wali patti chhoti: sirf number aur email, neeche ki chhoti
	   line hata di - phone par wo bas jagah khaati hai. Unchai yahan
	   bhi tay hai, kyunki sticky ka offset isi par tika hai. */
	.elth-nav {
		--elth-bar-h: 38px;
	}

	.elth-nav__bar-row {
		justify-content: center;
		gap: 18px;
	}

	.elth-nav__bar .elth-nav__cico {
		width: 26px;
		height: 26px;
	}

	.elth-nav__bar .elth-nav__ccopy strong {
		font-size: 13px;
	}

	.elth-nav__bar .elth-nav__ccopy em {
		display: none;
	}

	/* Yahan `nav` wapas asli dabba ban jaata hai - drawer isi par tika
	   hai. Selector desktop wale jitna hi bhaari rakha hai, warna
	   `display: contents` jeet jaata aur drawer khulta hi nahi. */
	.elth-nav__row > .elth-nav__nav {
		display: flex;
	}

	.elth-nav__burger {
		display: block;
		margin-left: auto;
	}

	.elth-nav__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		width: min(340px, 86vw);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 0 22px;
		background: #fff;
		box-shadow: -18px 0 50px rgba(16, 48, 72, .2);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .26s ease, visibility .26s;
	}

	.elth-nav__nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.elth-nav__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--elth-line);
	}

	.elth-nav__top-brand img {
		width: auto;
		display: block;
	}

	.elth-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 1px solid var(--elth-line);
		border-radius: 50%;
		background: #fff;
		color: var(--elth-ink);
		cursor: pointer;
		flex: none;
	}

	.elth-nav__close:hover {
		border-color: var(--elth-green);
		color: var(--elth-green);
	}

	.elth .elth-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 6px 0 0;
		padding: 0 10px;
	}

	.elth-nav__item {
		border-bottom: 1px solid var(--elth-line);
	}

	.elth-nav__item:last-child {
		border-bottom: 0;
	}

	.elth-nav__link {
		/* Submenu toggle ke liye daayein jagah. */
		padding: 14px 48px 14px 12px;
		border-radius: 0;
		font-size: 15px;
	}

	.elth-nav__caret {
		display: none;
	}

	/* Phone par hover nahi hota - submenu button se khulta hai. */
	.elth-nav__subtoggle {
		position: absolute;
		top: 7px;
		right: 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: var(--elth-green-soft);
		color: var(--elth-green);
		cursor: pointer;
		transition: transform .2s ease;
	}

	.elth-nav__subtoggle[aria-expanded="true"] {
		transform: rotate(180deg);
	}

	.elth .elth-nav__sub {
		position: static;
		min-width: 0;
		margin: 0 0 10px;
		padding: 4px 0 4px 10px;
		border: 0;
		border-left: 2px solid var(--elth-green-line);
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.elth .elth-nav__sub.is-open {
		display: flex;
	}

	/* Hover wala desktop vyavhaar yahan band - warna touch par jhilmilata hai. */
	.elth-nav__item--has-sub:hover .elth-nav__sub,
	.elth-nav__item--has-sub:focus-within .elth-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.elth-nav__item--has-sub::after {
		display: none;
	}

	.elth-nav__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin-top: 18px;
		padding: 18px 16px 0;
		border-top: 1px solid var(--elth-line);
	}

	.elth-nav__actions .elth-btn {
		justify-content: center;
	}

	.elth-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 50;
		display: block;
		background: rgba(10, 28, 20, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .26s ease, visibility .26s;
	}

	.elth-nav__backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 420px) {

	.elth-nav__ccopy strong {
		font-size: 13px;
	}
}


/* ==========================================================================
   Footer
   Site ka baaki hissa halka hai, isliye footer bhi halka - wahi
   `--elth-wash` jo doosre sections me use hota hai. Sapaat na lage
   isliye upar se ek narm green dhundhlka aur kinare par hairline.
   ========================================================================== */

.elth-foot {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--elth-line);
	background: var(--elth-wash);
	color: var(--elth-body);
}

/* Sabse upar ek patli hari lakeer. Page ke halke background se footer ko
   alag karti hai bina koi bhaari border lagaye - kinaron par ghul jaati
   hai, isliye kata hua nahi lagta. */
.elth-foot::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--elth-green) 22%, var(--elth-green-bright) 50%, var(--elth-green) 78%, transparent);
	opacity: .85;
	pointer-events: none;
}

/* Upar ke kinaron se andar aata halka green - flat background todta hai. */
.elth-foot::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(52% 58% at 0% 0%, rgba(22, 130, 60, .09), transparent 62%),
		radial-gradient(46% 54% at 100% 8%, rgba(70, 209, 111, .1), transparent 60%);
	pointer-events: none;
}

/* Peeche ka bada wordmark.

   Pehle yahan ek recycle triangle ka watermark tha - wo kisi bhi kone me
   rakho, adhoora kata hua hi lagta tha, jaise koi image load hone se reh
   gayi ho. Poori chaudai me faila hua wordmark uski jagah leta hai: wo
   kate bina baithta hai, aur footer ko ek base deta hai.

   Itna halka hai ki padha nahi jaata - niyat bhi yahi hai. */
.elth-foot__word {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.22em;
	z-index: 0;
	display: block;
	/* Naap aisa hai ki "EPR COMPLIANCE" jaisa do-shabd ka wordmark 1440
	   par bhi poora samaa jaaye. Pehle 190px tha aur aakhri akshar
	   kinare se kat jaata tha - jo sajavat kam, galti zyada lagta tha. */
	font-size: clamp(38px, 7.6vw, 112px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	color: rgba(17, 50, 75, .035);
	pointer-events: none;
	user-select: none;
}

.elth-foot__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 56px var(--elth-gap);
	padding-block: clamp(52px, 6.5vw, 86px) clamp(28px, 4vw, 44px);
}

/* ---------------------------------------------------------------- brand */

/* Logo JPG hai, uska background safed hai. `multiply` usse halke
   background me ghol deta hai - warna safed dabba dikhta. */
.elth-foot__logo {
	width: auto;
	display: block;
	margin-bottom: 20px;
	mix-blend-mode: multiply;
}

.elth-foot__about {
	margin: 0 0 24px;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.75;
	color: var(--elth-body);
}

/* Logo ke neeche teen chhoti points. */
.elth-foot__points {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elth-foot__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--elth-body);
}

.elth-foot__points .elth-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--elth-green);
}

/* ------------------------------------------------------- contact cards */

/* Phone, email aur office - teen alag cards, poori chaudai me.

   Pehle ye brand column ke andar ek saadi list thi: baaki footer links
   jaisi hi dikhti thi, aur daayein ka aadha footer khaali pada rehta
   tha. Cards se footer ko ek beech ki lakeer mil jaati hai aur phone/
   email dabane laayak target ban jaate hain. */
.elth-foot__cards {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding-bottom: clamp(26px, 3.5vw, 38px);
}

.elth-foot__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--elth-green-line);
	border-radius: var(--elth-radius-lg);
	background: #fff;
	box-shadow: var(--elth-shadow);
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

a.elth-foot__card:hover,
a.elth-foot__card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--elth-green);
	box-shadow: var(--elth-shadow-lg);
}

.elth-foot__cico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--elth-green);
	color: #fff;
	transition: transform .2s ease;
}

a.elth-foot__card:hover .elth-foot__cico {
	transform: scale(1.06);
}

.elth-foot__cico .elth-icon {
	width: 20px;
	height: 20px;
}

.elth-foot__ctext {
	display: block;
	min-width: 0;
}

.elth-foot__ctext em {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--elth-green);
}

.elth-foot__ctext strong {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--elth-ink);
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- social */

.elth-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elth-foot__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--elth-line);
	background: #fff;
	color: var(--elth-ink);
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.elth-foot__social a:hover {
	transform: translateY(-3px);
	border-color: transparent;
	background: var(--elth-green);
	color: #fff;
}

.elth-foot__social .elth-icon {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------- columns */

/* Do class chahiye: `.elth h1, .elth h2, .elth h3` (0,1,1) hai aur
   akela `.elth-foot__ctitle` (0,1,0) usse haar jaata hai. */
.elth-foot .elth-foot__ctitle {
	position: relative;
	margin: 0 0 22px;
	padding-bottom: 12px;
	color: var(--elth-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Title ke neeche chhoti hari lakeer - wahi nishaan jo page ke andar
   "Contact Information" jaisi headings par hai, taaki footer bhi usi
   design ka hissa lage, alag se chipkaya hua nahi. */
.elth-foot .elth-foot__ctitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--elth-green);
}

.elth-foot__links {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elth-foot__links a,
.elth-foot__links span {
	display: inline-block;
	color: var(--elth-body);
	font-size: 15px;
	text-decoration: none;
	transition: color .18s ease, transform .18s ease;
}

/* Hover par thoda sa daayein khisakta hai - chhoti si jaan. */
.elth-foot__links a:hover {
	color: var(--elth-green);
	transform: translateX(3px);
}

/* ------------------------------------------------------ neeche ki patti */

.elth-foot__bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
	padding-block: 22px;
	border-top: 1px solid var(--elth-line);
}

.elth-foot__copy {
	margin: 0;
	font-size: 14px;
	color: var(--elth-body);
}

.elth-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.elth-foot__legal a,
.elth-foot__legal span {
	color: var(--elth-body);
	font-size: 14px;
	text-decoration: none;
	transition: color .18s ease;
}

.elth-foot__legal a:hover {
	color: var(--elth-green);
}

.elth-foot__top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--elth-green-line);
	border-radius: 12px;
	background: #fff;
	color: var(--elth-green);
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.elth-foot__top .elth-icon {
	width: 18px;
	height: 18px;
	transform: rotate(-90deg);
}

.elth-foot__top:hover {
	transform: translateY(-3px);
	background: var(--elth-green);
	color: #fff;
}

/* Keyboard se chalne walon ke liye saaf nishaan. */
.elth-foot a:focus-visible,
.elth-foot__top:focus-visible {
	outline: 2px solid var(--elth-green);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

	.elth-foot__social a,
	.elth-foot__links a,
	.elth-foot__top {
		transition: none;
	}

	.elth-foot__social a:hover,
	.elth-foot__links a:hover,
	.elth-foot__top:hover {
		transform: none;
	}
}

@media (max-width: 960px) {

	.elth-foot__grid {
		grid-template-columns: 1fr 1fr;
		gap: 42px var(--elth-gap);
	}

	/* Brand poori chaudai le - uska text do columns me ghut jaata hai. */
	.elth-foot__brand {
		grid-column: 1 / -1;
	}

	/* Teen card ek line me ghut jaate hain - do kar dete hain. */
	.elth-foot__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.elth-foot__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.elth-foot__about {
		max-width: none;
	}

	.elth-foot__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.elth-foot__legal {
		margin-left: 0;
	}

	/* Phone par upar uchhalne wala button neeche daayein kone me. */
	.elth-foot__top {
		position: absolute;
		right: 0;
		bottom: 22px;
	}

	/* Phone par cards ek ke neeche ek. */
	.elth-foot__cards {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Wordmark chhota, warna wo kinare se kat jaata hai.

	   Yahan px nahi, vw - taaki har phone par fit rahe. 375px par naapa:
	   40px theek bethta hai, 44px do pixel bahar nikal jaata hai. 10.2vw
	   375 par ~38px deta hai, aur chhote phone par apne aap aur chhota. */
	.elth-foot__word {
		font-size: 10.2vw;
		letter-spacing: -.03em;
	}
}

/* ==========================================================================
   Contact
   Teen column: form, contact details, map. Phone par ek ke neeche ek.
   ========================================================================== */

.elth-con {
	padding: 74px 0 86px;
	background:
		radial-gradient(900px 420px at 12% 0%, rgba(70, 209, 111, .10), transparent 62%),
		var(--elth-wash);
}

.elth-con__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

/* ------------------------------------------------------------------ form */

/* Bahar ka halka dabba, andar safed card - screenshot wali do-parton
   wali look isi se aati hai. */
.elth-con__formwrap {
	position: relative;
	padding: 16px;
	border: 1px solid var(--elth-green-line);
	border-radius: calc(var(--elth-radius-lg) + 6px);
	background: linear-gradient(180deg, #f2f9f4 0%, #ffffff 70%);
	box-shadow: var(--elth-shadow);
	overflow: hidden;
}

/* Upar ki patli hari patti. */
.elth-con__formwrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 5px;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(90deg, var(--elth-green), var(--elth-green-bright));
}

/* Padding chaaron taraf barabar - aam taur par andar sirf form hota hai,
   koi heading nahi, to upar extra jagah ajeeb lagti hai. */
.elth-con__form {
	padding: 20px;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius-lg);
	background: var(--elth-card);
}

.elth-con__ftitle {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--elth-ink);
	text-align: center;
}

.elth-con__fnote {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--elth-body);
	text-align: center;
}

.elth-con__frame {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--elth-radius);
	background: #fff;
}

/* ----------------------------------------------------- heading + details */

/* Heading ke baad chhoti hari line - screenshot wale dash ki jagah. */
.elth-con .elth-con__htitle {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--elth-ink);
}

.elth-con__htitle span {
	flex: none;
	width: 34px;
	height: 3px;
	border-radius: 3px;
	background: var(--elth-green);
}

.elth-con__rows {
	display: grid;
	gap: 0;
}

.elth-con__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--elth-green-line);
	color: inherit;
	text-decoration: none;
}

.elth-con__row:last-child {
	border-bottom: 0;
}

a.elth-con__row:hover .elth-con__copy strong,
a.elth-con__row:focus-visible .elth-con__copy strong {
	color: var(--elth-green);
}

.elth-con__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--elth-green);
	color: #fff;
	font-size: 19px;
}

.elth-con__copy {
	display: block;
	min-width: 0;
}

.elth-con__copy strong {
	display: block;
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 700;
	color: var(--elth-ink);
	transition: color .18s ease;
}

.elth-con__copy span {
	display: block;
	font-size: 15px;
	line-height: 1.55;
	color: var(--elth-body);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- map */

.elth-con__mapbox {
	position: relative;
	border: 1px solid var(--elth-line);
	border-radius: var(--elth-radius-lg);
	background: var(--elth-card);
	box-shadow: var(--elth-shadow);
	overflow: hidden;
}

.elth-con__mapframe {
	display: block;
	width: 100%;
	height: 280px;
	border: 0;
	/* Map ke rang site ke saath mila diye - bhadke hue nahi lagte. */
	filter: saturate(.86) contrast(1.02);
}

/* Map ke upar ki patti. Overlay chip nahi - Google khud top-left par
   apna button rakhta hai aur dono ek doosre par chadh jaate hain. */
.elth-con__maphead {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 15px;
	border-bottom: 1px solid var(--elth-line);
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--elth-ink);
}

.elth-con__maphead i {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--elth-green-bright);
	box-shadow: 0 0 0 3px rgba(70, 209, 111, .24);
}

.elth-con__dir {
	margin-top: 16px;
	padding: 20px;
	border: 1px solid var(--elth-green-line);
	border-radius: var(--elth-radius-lg);
	background: var(--elth-card);
	box-shadow: var(--elth-shadow);
}

.elth-con__dir strong {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--elth-ink);
}

.elth-con .elth-con__dir p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--elth-body);
}

.elth-con__dirbtns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.elth-con__dirbtns .elth-btn {
	flex: 1 1 auto;
	justify-content: center;
}

/* `--light` safed card par safed border ke saath gayab ho jaata hai -
   yahan use hari lakeer de dete hain. Rule sirf isi card ke andar lagta
   hai, baaki jagah button waisa hi rehta hai. */
.elth-con__dirbtns .elth-btn--light {
	background: #fff;
	border-color: var(--elth-green-line);
	color: var(--elth-ink);
}

.elth-con__dirbtns .elth-btn--light:hover,
.elth-con__dirbtns .elth-btn--light:focus-visible {
	border-color: var(--elth-green);
	color: var(--elth-green);
}

/* ---------------------------------------------------------- chhoti screen */

@media (max-width: 1080px) {
	.elth-con__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Map poori chaudai me neeche - uske andar ka naksha chhota hone par
	   kuch dikhta hi nahi. */
	.elth-con__map {
		grid-column: 1 / -1;
	}

	.elth-con__mapframe {
		height: 320px;
	}
}

@media (max-width: 760px) {
	.elth-con {
		padding: 54px 0 62px;
	}

	.elth-con__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.elth-con__formwrap {
		padding: 10px;
	}

	.elth-con__form {
		padding: 14px;
	}

	.elth-con__ftitle,
	.elth-con .elth-con__htitle {
		font-size: 22px;
	}

	.elth-con__ico {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}

	.elth-con__mapframe {
		height: 260px;
	}

	.elth-con__dirbtns .elth-btn {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Drawer me "abhi is page par hain" ka nishaan
   Drawer ka link poori chaudai ka ek row hai - uske neeche choti lakeer
   ajeeb lagti hai, isliye phone par baayein taraf hari patti dikhti hai.
   ========================================================================== */

@media (max-width: 1080px) {
	.elth-nav__item.is-current > .elth-nav__link::after {
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: 3px;
		height: auto;
		border-radius: 0 3px 3px 0;
	}
}