/* ============================================================================
   Solution Enterprises — components
   Sab logical properties (RTL-safe). Tap targets >= 48px. Koi raw hex nahi.
   ========================================================================== */

/* ==========================================================================
   1 · Buttons — square (standing rule). Ek hi CTA label poori site par.
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: var(--tap);
	padding: var(--s-3) var(--s-6);
	border: 1.5px solid transparent;
	border-radius: var(--r-0);
	font-family: var(--f-body);
	font-size: 15.5px;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: .005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--d-1) var(--e-out),
	            color var(--d-1) var(--e-out),
	            border-color var(--d-1) var(--e-out),
	            transform var(--d-1) var(--e-out);
}
.btn:active { transform: translateY(1px); }

/* Gradient sirf upar-neeche ka halka farak hai — base rang wahi #E8821F rehta hai,
   isliye kaale text ka 8.1:1 contrast nahi girta. Glow shadow se aata hai, opacity se nahi. */
.btn--primary {
	/* background-color aur background-image DONO — gradient akela chhodna do tarah se
	   galat hai: forced-colors me text ka apna background hi nahi bachta, aur contrast
	   naapne wala tool button ko transparent samajh kar peeche wale band par naapta hai. */
	background-color: var(--c-accent);
	background-image: linear-gradient(180deg, var(--c-accent-lift), var(--c-accent) 55%, var(--c-accent-deep));
	color: var(--c-accent-ink);
	border-color: var(--c-accent-deep);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset,
	            0 6px 18px -6px rgba(232, 130, 31, .7);
}
.btn--primary:hover, .btn--primary:focus-visible {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset,
	            0 10px 26px -6px rgba(232, 130, 31, .85);
	transform: translateY(-1px);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	color: var(--c-accent-ink);
}

.btn--solid {
	background-color: var(--c-brand);
	background-image: linear-gradient(180deg, var(--c-brand-lift), var(--c-brand) 60%, var(--c-brand-deep));
	color: var(--c-on-dark);
	border-color: var(--c-brand-deep);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset,
	            0 6px 18px -6px rgba(15, 81, 50, .6);
}
.btn--solid:hover, .btn--solid:focus-visible {
	background: var(--c-brand-deep);
	border-color: var(--c-brand-deep);
	color: var(--c-on-dark);
}

.btn--ghost {
	background: rgba(255, 255, 255, .55);
	color: var(--c-ink);
	border-color: var(--c-ink);
	box-shadow: var(--glass-glow);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
	background: var(--c-ink);
	color: var(--c-bg);
}
/* .band--dark a { color: kraft } specificity me .btn--primary ko haraa deta tha —
   CTA ka text orange par cream ho jaata tha (naapa: 2.11:1). Isliye yahan wapas jodi. */
.band--dark a.btn--primary,
.band--dark a.btn--primary:hover,
.band--dark a.btn--primary:focus-visible { color: var(--c-accent-ink); }
.band--dark a.btn--solid,
.band--dark a.btn--solid:hover,
.band--dark a.btn--solid:focus-visible { color: var(--c-on-dark); }
/* Dark surface par ghost button ka background bhi DARK glass hona chahiye.
   Pehle wo .btn--ghost se translucent SAFED le raha tha aur text bhi safed tha —
   naapa gaya: 1.03:1, yani poori tarah padha hi nahi ja sakta tha. */
.band--dark .btn--ghost,
.cta-band .btn--ghost,
.site-footer .btn--ghost {
	background: rgba(255, 255, 255, .10);
	color: var(--c-on-dark);
	border-color: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset;
}
.band--dark .btn--ghost:hover, .band--dark .btn--ghost:focus-visible,
.cta-band .btn--ghost:hover,   .cta-band .btn--ghost:focus-visible,
.site-footer .btn--ghost:hover,.site-footer .btn--ghost:focus-visible { background: var(--c-on-dark); color: var(--c-ink); }
/* .cta-band bhi ek dark surface hai par uski class .band--dark nahi thi —
   isliye .btn--ghost ka ink-colour bacha reh gaya tha: #10231B on #0C1E16 = 1.05:1 (naapa). */

.btn--sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: 14px; }
.btn--block { width: 100%; }
.btn__arrow { font-size: .9em; transition: transform var(--d-1) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .btn__arrow { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }

/* ==========================================================================
   2 · Header + navigation
   ========================================================================== */
.topbar {
	background: var(--glass-dark);
	color: var(--c-on-dark-2);
	font-size: var(--t-micro);
	letter-spacing: .01em;
	border-block-end: 1px solid rgba(255, 255, 255, .08);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.topbar { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 38px;
	padding-block: var(--s-2);
}
.topbar a { color: var(--c-on-dark); text-decoration: none; }
.topbar a:hover { color: var(--c-accent); }
.topbar__facts { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.topbar__facts li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
/* Har fact ka apna icon. `flex: none` zaroori hai — warna narrow width par SVG
   squeeze ho kar bigad jaata hai. Rang accent, par sirf pehchan ke liye:
   matlab hamesha text me hai (icon aria-hidden hai). */
.topbar__ico { width: 14px; height: 14px; flex: none; color: var(--c-accent); }
@media (max-width: 860px) { .topbar__facts li:nth-child(n+3) { display: none; } }

/* Frosted sticky header.
   backdrop-filter sirf yahan jaisi SINGLE-INSTANCE cheezon par — card grid par
   kabhi nahi (60+ blur layer = scroll jank). @supports guard isliye ki jin
   browsers me blur nahi hai wahan thos-sa background mile, kaanch ka dhoka nahi. */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .90);
	border-block-end: 1px solid var(--glass-line);
	transition: box-shadow var(--d-2) var(--e-out), background var(--d-2) var(--e-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.site-header {
		background: var(--glass-bar);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
	}
}
.site-header.is-stuck {
	box-shadow: 0 1px 0 var(--glass-line), 0 10px 30px rgba(16, 35, 27, .07);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	min-height: 72px;
	padding-block: var(--s-3);
}

/* Logo — mark + wordmark. Mark ek angle-board cross-section hai (product hi identity). */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__mark { width: 38px; height: 38px; flex: none; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
	font-family: var(--f-head);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--c-ink);
}
.brand__tag {
	font-family: var(--f-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-block-start: 2px;
}

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.nav__list > li { margin: 0; position: relative; }
.nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	padding: var(--s-2) var(--s-4);
	/* <button> UA se font aur background inherit NAHI karta — dono yahan explicit.
	   Bina background ke UA ka #F0F0F0 buttonface dikhta tha (naapa: 1.00:1). */
	background: transparent;
	border: 0;
	border-block-end: 2px solid transparent;
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 550;
	line-height: 1.2;
	color: var(--c-ink);
	text-decoration: none;
	cursor: pointer;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--c-brand); border-block-end-color: var(--c-accent); }
.nav__link[aria-current="page"], .nav__item.is-current > .nav__link {
	color: var(--c-brand);
	border-block-end-color: var(--c-brand);
}
.nav__caret { width: 9px; height: 9px; transition: transform var(--d-1) var(--e-out); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Mega panel */
.mega {
	position: absolute;
	inset-block-start: calc(100% + 1px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: min(940px, calc(100vw - var(--s-8)));
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-3), var(--glass-glow);
	padding: var(--s-8);
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--s-8);
	z-index: 120;
}
.mega__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--s-8);
	min-width: 0;
}
.mega:not(:has(.mega__promo)) { grid-template-columns: minmax(0, 1fr); }
.mega[hidden] { display: none; }          /* UA [hidden] ko apne CSS se maar diya tha — yahan wapas */
.mega__col h3 {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--s-4);
	font-weight: 600;
}
/* Ek column (Gaurav, 27 Sep): har heading ke neeche 2 column the aur product ka naam
   ("Self-Adhesive Edge Board") do line me toot jaata tha. Ab ek column, naam ek line me. */
.mega__links { list-style: none; margin: 0; padding: 0; }
.mega__links li { margin: 0 0 var(--s-1); break-inside: avoid; }
.mega__links a {
	display: block;
	min-height: 40px;
	padding: var(--s-2) var(--s-3);
	color: var(--c-ink);
	text-decoration: none;
	font-size: 15px;
	border-inline-start: 2px solid transparent;
}
.mega__links a:hover, .mega__links a:focus-visible {
	background: var(--c-brand-soft);
	border-inline-start-color: var(--c-accent);
	color: var(--c-brand);
}
.mega__promo {
	background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(244, 240, 232, .9));
	border: 1px solid var(--c-kraft-soft);
	border-radius: var(--r-glass);
	box-shadow: var(--glass-glow);
	padding: var(--s-6);
}
.mega__promo p { font-size: var(--t-small); color: var(--c-muted); }
.mega__promo h4 { margin-bottom: var(--s-2); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--f-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
	min-height: 44px;
	padding-inline: var(--s-2);
	white-space: nowrap;
}
.header__phone:hover { color: var(--c-brand); }

.nav-toggle {
	display: none;
	width: var(--tap);
	height: var(--tap);
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid var(--c-line);
	cursor: pointer;
	color: var(--c-ink);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Header ka phone hata diya gaya: wahi number topbar me pehle se hai aur yahan
   ~160px kha raha tha, jisse 1280px laptop par header 84px overflow kar raha tha
   (naapa: scrollW 1364 > clientW 1280). Duplicate NAP bhi ek hi jagah rehna chahiye. */
.header__phone { display: none; }

@media (max-width: 1180px) {
	.nav-toggle { display: inline-flex; margin-inline-start: auto; }
	.header__actions .btn { display: none; }
	.nav {
		position: fixed;
		inset-block: 0 0;
		inset-inline-end: 0;
		width: min(400px, 88vw);
		background: var(--c-card);
		border-inline-start: 1px solid var(--c-line);
		box-shadow: var(--sh-3);
		padding: var(--s-16) var(--s-5) var(--s-12);
		overflow-y: auto;
		/* Drawer band hone par bhi VIEWPORT KE ANDAR rehta hai.
		   Pehle translateX(100%) se poora bahar chala jaata tha — visibility:hidden
		   se wo chhupta zaroor hai par LAYOUT me bana rehta hai, aur document ki
		   scrollWidth badha deta hai (naapa: mobile par 733 > 390 = horizontal scroll).
		   overflow-x:clip bhi use nahi rok sakta, kyunki position:fixed ka containing
		   block viewport hai. Isliye ab slide sirf 14px ka hai + opacity/visibility. */
		/* Slide VERTICAL hai, horizontal nahi: inline-axis par koi bhi transform
		   right-anchored panel ko viewport ke bahar bhej deta hai aur horizontal
		   scroll paida karta hai (naapa: 14px translate = 14px overflow).
		   Vertical translate se ye ho hi nahi sakta. */
		transform: translateY(-10px);
		opacity: 0;
		visibility: hidden;
		transition: transform var(--d-2) var(--e-out),
		            opacity var(--d-2) var(--e-out),
		            visibility 0s linear var(--d-2);
		margin: 0;
		z-index: 130;
	}
	[dir="rtl"] .nav { transform: translateY(-10px); }
	/* visibility:hidden do cheezein ek saath theek karta hai:
	   (1) a11y — band menu ke links keyboard tab-order se bahar ho jaate hain
	   (2) layout — off-screen fixed panel document ki scrollWidth nahi badhata
	       (naapa gaya tha: mobile par scrollW 733 > clientW 390) */
	.nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__link {
		width: 100%;
		justify-content: space-between;
		min-height: var(--tap);
		border-block-end: 1px solid var(--c-line-soft);
		font-size: 16px;
	}
	.mega {
		position: static;
		transform: none;
		width: 100%;
		display: block;
		border: 0;
		box-shadow: none;
		padding: var(--s-3) 0 var(--s-4);
		background: var(--c-bg-warm);
	}
	.mega__links { columns: 1; }
	.mega__promo { display: none; }
	.nav__mobile-cta { margin-block-start: var(--s-6); display: grid; gap: var(--s-3); }
}
@media (min-width: 1181px) { .nav__mobile-cta { display: none; } }
/* Mega panel ab HEADER ke beech se khulta hai, apne button ke beech se nahi. Pehle Products
   (nav ka pehla item) ka panel 1440px par -13px aur 1280px par -115px, yani screen ke baayen
   BAHAR tha (27 Sep, wrap-check.js se naapa). li static = panel ka containing block header. */
@media (min-width: 1181px) {
	.site-header__inner { position: relative; }
	.nav__list > li { position: static; }
}

.nav-scrim {
	position: fixed;
	inset: 0;
	background: rgba(12, 30, 22, .5);
	z-index: 125;
	opacity: 0;
	transition: opacity var(--d-2) var(--e-out);
}
.nav-scrim[hidden] { display: none; }
.nav-scrim.is-on { opacity: 1; }

/* ==========================================================================
   3 · Hero — asymmetric editorial. LCP text, koi animation nahi.
   ========================================================================== */
.hero {
	position: relative;
	padding-block: clamp(36px, 4.2vw, 80px) clamp(28px, 3.2vw, 60px);
	overflow: clip;
}

/* Hero ke peeche ek gehra orb — spec panel isi ke upar baithta hai, isliye kaanch
   sach me "kaanch" dikhta hai. Static gradient, koi image ya JS nahi. */
.hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -18%;
	inset-inline-end: -8%;
	width: min(70rem, 78%);
	aspect-ratio: 1 / .78;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(15, 81, 50, .22), transparent 72%),
		radial-gradient(closest-side at 62% 58%, rgba(232, 130, 31, .20), transparent 70%);
	filter: blur(8px);
}
.hero__grid { display: grid; gap: var(--s-10); align-items: start; }
/* 10 Oct: 1920px par left column 971px ho jaata tha — paragraph 820px measure par ruke, column waisa hi rahe. */
.hero__grid > div > p:not(.cluster) { max-width: var(--container-text); }
@media (min-width: 1000px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
		gap: clamp(32px, 4vw, 88px);
	}
}
/* Bahut chaude screen par spec panel ko bebunyaad na phailne do */
@media (min-width: 1700px) {
	.hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(400px, 520px); }
}
.hero__title {
	font-size: var(--t-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	margin-bottom: var(--s-5);
}
.hero__title em {
	font-style: normal;
	color: var(--c-brand);
	box-shadow: inset 0 -.14em 0 var(--c-accent-soft);
}
.hero__sub {
	font-size: clamp(17px, 1.6vw, 20px);
	color: var(--c-ink-2);
	max-width: 56ch;
	margin-bottom: var(--s-8);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.hero__note { font-size: var(--t-small); color: var(--c-muted); }

/* Hero ka spec card — competitor ke paas ye nahi. Numbers sabse pehle. */
/* Hero ka spec panel — site ka sabse "glass" element. Single instance hai,
   isliye ispar blur bhi chal sakta hai. */
.hero__card {
	position: relative;
	background: linear-gradient(165deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74));
	border: 1px solid var(--glass-line);
	border-block-start: 3px solid var(--c-accent);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	padding: clamp(20px, 2vw, 32px);
	overflow: hidden;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.hero__card {
		background: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56));
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		backdrop-filter: blur(16px) saturate(140%);
	}
}
.hero__card::before {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
	pointer-events: none;
}
.band--dark .hero__card {
	background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
	border-color: rgba(255, 255, 255, .16);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .10) inset;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.band--dark .hero__card {
		-webkit-backdrop-filter: blur(14px) saturate(130%);
		backdrop-filter: blur(14px) saturate(130%);
	}
}
.band--dark .hero__card h2 { color: var(--c-kraft); }
.band--dark .hero__card .kv dt { color: var(--c-on-dark-2); }
.band--dark .hero__card .kv dd { color: var(--c-on-dark); }
.band--dark .hero__card .kv__row { border-block-end-color: rgba(255, 255, 255, .14); }
.hero__card h2 {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--s-5);
	font-weight: 600;
}

/* ==========================================================================
   4 · Key-value list (hero card, quick facts)
   ========================================================================== */
.kv { margin: 0; }
.kv__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-block-end: 1px solid var(--c-line-soft);
}
.kv__row:last-child { border-block-end: 0; padding-block-end: 0; }
.kv dt { font-size: var(--t-small); color: var(--c-muted); margin: 0; }
.kv dd {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	text-align: end;
}

/* ==========================================================================
   5 · Trust strip — sirf asli numbers. Khaali value par component render nahi hota.
   ========================================================================== */
.trust {
	border-block: 1px solid var(--glass-line);
	background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .66));
	box-shadow: var(--glass-glow);
}
.trust__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 0; padding: 0; list-style: none;
}
.trust__item {
	margin: 0;
	padding: clamp(24px, 2.4vw, 40px) var(--s-5);
	border-inline-end: 1px solid var(--glass-line);
}
.trust__item:last-child { border-inline-end: 0; }
.trust__value {
	display: block;
	font-family: var(--f-head);
	font-size: clamp(27px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--c-brand);
	font-variant-numeric: tabular-nums;
}
.trust__label {
	display: block;
	margin-block-start: var(--s-2);
	font-size: var(--t-small);
	color: var(--c-muted);
}

/* ==========================================================================
   6 · Cards
   ========================================================================== */
/* Glass card.
   Yahan backdrop-filter JAAN-BOOJH KAR nahi hai — ye grid me 4-8 baar aata hai.
   Frost translucency + gradient se banaya gaya hai, blur se nahi. */
.card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(180deg, var(--glass-card-hi), var(--glass-card) 34%, var(--glass-card));
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	text-decoration: none;
	color: inherit;
	isolation: isolate;
	transition: border-color var(--d-2) var(--e-out),
	            box-shadow var(--d-2) var(--e-out),
	            transform var(--d-2) var(--e-out);
}
/* Upar ka 1px highlight — kaanch ka kinara isi se banta hai */
.card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--glass-edge) 22%, var(--glass-edge) 78%, transparent);
	z-index: 2;
	pointer-events: none;
}
a.card:hover, a.card:focus-visible {
	border-color: rgba(200, 154, 107, .55);
	box-shadow: 0 2px 2px rgba(16, 35, 27, .05),
	            0 14px 34px rgba(16, 35, 27, .11),
	            0 0 0 1px rgba(255, 255, 255, .6) inset,
	            0 0 34px -12px rgba(15, 81, 50, .45);
	transform: translateY(-3px);
}

/* Shine sweep — hover par ek halki roshni card ke aar-paar jaati hai.
   Sirf transform animate hota hai (layout thrash nahi), aur reduced-motion par band. */
a.card::after {
	content: "";
	position: absolute;
	inset-block: -40%;
	inset-inline-start: -60%;
	width: 42%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: translateX(-140%) skewX(-16deg);
	transition: transform 720ms var(--e-out);
}
a.card:hover::after, a.card:focus-visible::after { transform: translateX(420%) skewX(-16deg); }
@media (prefers-reduced-motion: reduce) {
	a.card::after { display: none; }
	a.card:hover, a.card:focus-visible { transform: none; }
}
.card__media {
	position: relative;
	background: var(--c-bg-warm);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	z-index: 0;
}
/* Image ke neeche ka kinara card ke frost me ghul jaaye */
.card__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 38%;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55));
	pointer-events: none;
}
/* <picture> beech me aata hai. Uspar height set na ho to andar ke img ki height:100%
   auto par gir jaati hai aur card apni natural ratio le leta hai — grid ragged ho jaata
   hai (naapa: 274x206 vs 274x183). Isliye picture ko bhi bhar do. */
.card__media picture,
.card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card__body { position: relative; z-index: 2; padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: var(--t-h3); margin-bottom: var(--s-2); }
a.card:hover .card__title { color: var(--c-brand); }
.card__text { font-size: var(--t-small); color: var(--c-muted); margin-bottom: var(--s-5); }
.card__meta {
	margin-block-start: auto;
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-accent-text);
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.card--flag { border-block-start: 3px solid var(--c-accent); }
.card--flag::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); }

/* Numbered feature tile — adjective ki jagah number */
.tile {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--glass-card-hi), var(--glass-card) 40%);
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	padding: var(--s-6);
}
.tile::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--glass-edge) 25%, var(--glass-edge) 75%, transparent);
	pointer-events: none;
}
.tile__num {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	letter-spacing: .14em;
	/* kraft sirf hairline/texture ka rang hai — text par 2.53:1 deta hai. Text = muted. */
	color: var(--c-muted);
	display: block;
	margin-bottom: var(--s-4);
}
.tile__value {
	font-family: var(--f-head);
	font-size: 26px;
	font-weight: 700;
	color: var(--c-brand);
	display: block;
	line-height: 1.1;
	margin-bottom: var(--s-2);
	font-variant-numeric: tabular-nums;
}
.tile h3 { font-size: 16.5px; margin-bottom: var(--s-2); }
.tile p { font-size: var(--t-small); color: var(--c-muted); margin: 0; }

/* ==========================================================================
   7 · Spec table — mono digits, mm+inch dual unit, mobile scroll, print-safe.
   ========================================================================== */
.spec {
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
	box-shadow: var(--sh-glass), var(--glass-glow);
	overflow: hidden;
}
.spec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-4) clamp(16px, 1.6vw, 24px);
	border-block-end: 1px solid var(--glass-line);
	background: linear-gradient(180deg, rgba(244, 240, 232, .9), rgba(244, 240, 232, .55));
}
.spec__title {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0;
	font-weight: 600;
}
.unit-toggle { display: inline-flex; border: 1px solid var(--c-line); background: var(--c-card); }
.unit-toggle button {
	min-height: 34px;
	padding: var(--s-1) var(--s-4);
	border: 0;
	background: transparent;
	font-family: var(--f-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
	cursor: pointer;
}
.unit-toggle button[aria-pressed="true"] { background: var(--c-brand); color: var(--c-on-dark); }

.spec__scroll { overflow-x: auto; }
/* 26 Oct: blog post ki core table block. <figure> par browser ka 40px side margin lagta tha — mobile par
   table text se 40px andar shuru hoti thi aur 4 column dabe hue the. Chaudi table apni patti me scroll ho. */
.wp-block-table { margin: var(--s-6) 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
@media (max-width: 600px) {
	.wp-block-table th, .wp-block-table td { padding: var(--s-2); overflow-wrap: anywhere; }
	.wp-block-table table { font-size: var(--t-small); }
}
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.spec-table th, .spec-table td {
	text-align: start;
	padding: var(--s-4) var(--s-5);
	border-block-end: 1px solid var(--c-line-soft);
	vertical-align: top;
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-block-end: 0; }
.spec-table th {
	font-weight: 600;
	color: var(--c-ink-2);
}
/* 26 Oct: width/min-width sirf ROW-label par (2-col spec table). Pehle thead ke har th par bhi lagta tha —
   3 column x 170px = 510px, 4 x 170 = 680px; 28 page par mobile table apni patti me 356px se chaudi thi. */
.spec-table tbody th {
	width: 38%;
	min-width: 170px;
}
/* Phone par: 170px label + 24px side padding se 3-4 column 356px me nahi aate (mobile-table-check).
   Padding kam, label ka min-width hata, lamba shabd (domain, code) toot sake. Desktop wahi. */
@media (max-width: 600px) {
	.spec-table th, .spec-table td { padding: var(--s-3); overflow-wrap: anywhere; }
	.spec-table tbody th { width: auto; min-width: 0; }
}
.spec-table td {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}
.spec-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-bg-warm) 55%, transparent); }
.spec__note {
	/* 10 Oct: table ke neeche ka note 1346px tak phailta tha (~200 akshar/line). Patti poori chaudi rahe
	   (table ke saath kinara mile), par text 820px measure par ruke — isliye width nahi, end-padding. */
	padding: var(--s-4) clamp(16px, 1.6vw, 24px);
	padding-inline-end: max(clamp(16px, 1.6vw, 24px), calc(100% - var(--container-text)));
	border-block-start: 1px solid var(--glass-line);
	font-size: var(--t-micro);
	color: var(--c-muted);
	background: linear-gradient(180deg, rgba(244, 240, 232, .55), rgba(244, 240, 232, .9));
}
.unit-alt { color: var(--c-muted); }

/* Comparison table — paper vs wooden ka dil */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-small); background: var(--c-card); }
.cmp th, .cmp td { padding: var(--s-4); border: 1px solid var(--c-line); text-align: start; vertical-align: top; }
.cmp thead th { background: var(--c-ink-surface); color: var(--c-on-dark); font-weight: 650; }
.cmp thead th:first-child { background: var(--c-ink-surface-2); }
.cmp td:first-child, .cmp th[scope="row"] { font-weight: 600; color: var(--c-ink-2); background: var(--c-bg-warm); }
.cmp .is-win { background: var(--c-brand-soft); }
.cmp .is-win strong { color: var(--c-brand); }
.cmp-mark { font-family: var(--f-mono); font-weight: 700; }
.cmp-mark--yes { color: var(--c-ok); }
.cmp-mark--no  { color: var(--c-err); }
/* Phone: upar ki .cmp padding ke BAAD hi aana chahiye (same specificity, baad wala jeetta hai) */
@media (max-width: 600px) { .cmp th, .cmp td { padding: var(--s-2); overflow-wrap: anywhere; } }

/* ==========================================================================
   8 · FAQ accordion — ek hi data source se schema bhi banta hai
   ========================================================================== */
.faq { border-block-start: 1px solid var(--c-line); }
.faq__item { border-block-end: 1px solid var(--c-line); }
.faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-5);
	min-height: var(--tap);
	padding: var(--s-5) 0;
	background: transparent;
	border: 0;
	font-family: var(--f-head);
	font-size: 17.5px;
	font-weight: 650;
	line-height: 1.35;
	color: var(--c-ink);
	text-align: start;
	cursor: pointer;
}
.faq__q:hover { color: var(--c-brand); }
.faq__sign { flex: none; width: 20px; height: 20px; margin-block-start: 3px; color: var(--c-accent-text); }
.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out);
}
.faq__sign { position: relative; display: inline-block; }
.faq__sign::before { inset-block-start: 9px; inset-inline-start: 2px; width: 16px; height: 2px; }
.faq__sign::after  { inset-block-start: 2px; inset-inline-start: 9px; width: 2px; height: 16px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding-block-end: var(--s-6); max-width: 70ch; color: var(--c-ink-2); }
.faq__a[hidden] { display: none; }
.faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   9 · CTA band
   ========================================================================== */
.cta-band {
	position: relative;
	color: var(--c-on-dark-2);
	background:
		radial-gradient(48rem 26rem at 10% 0%, rgba(27, 94, 63, .6), transparent 60%),
		radial-gradient(40rem 24rem at 90% 110%, rgba(232, 130, 31, .22), transparent 58%),
		var(--c-ink-surface);
	border-block: 1px solid rgba(255, 255, 255, .08);
}
.cta-band__inner {
	display: grid;
	gap: var(--s-8);
	align-items: center;
	padding-block: var(--s-16);
}
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.2fr .8fr; } }
.cta-band h2 { color: var(--c-on-dark); margin-bottom: var(--s-3); }
.cta-band p { color: var(--c-on-dark-2); margin-bottom: 0; max-width: 54ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 900px) { .cta-band__actions { justify-content: flex-end; } }

/* ==========================================================================
   10 · Badges / pills
   ========================================================================== */
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-3);
	min-height: 26px;
	font-family: var(--f-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	border: 1px solid var(--glass-line);
	background: rgba(255, 255, 255, .78);
	border-radius: 999px;
	color: var(--c-ink-2);
}
.pill--win { border-color: var(--c-ok); color: var(--c-ok-text); background: var(--c-brand-soft); }
.pill--accent { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-text); }
.pill--flat { background: transparent; }

/* Pending marker — dev par shor karta hai, live par gate roke ga */
.pending {
	display: inline-block;
	background: repeating-linear-gradient(-45deg, var(--c-accent-soft) 0 8px, transparent 8px 16px);
	border: 1px dashed var(--c-warn);
	color: var(--c-warn);
	font-family: var(--f-mono);
	font-size: 12px;
	padding: 2px 7px;
}

/* ==========================================================================
   11 · Breadcrumbs
   ========================================================================== */
.breadcrumbs { padding-block: var(--s-4); border-block-end: 1px solid var(--glass-line); }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--t-small);
}
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); color: var(--c-muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--c-kraft); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-brand); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-ink-2); }

/* ==========================================================================
   12 · Page header
   ========================================================================== */
.page-head { padding-block: clamp(28px, 3.2vw, 56px) clamp(22px, 2.4vw, 42px); border-block-end: 1px solid var(--glass-line); }
.page-head__grid { display: grid; gap: var(--s-8); }
@media (min-width: 960px) {
	/* align-items:end tha — us se H1 apne se lambe aside card ke neeche chipak jaata tha
	   aur uske upar bada khaali gap dikhta tha (screenshot me pakda). Top-align hi sahi hai. */
	.page-head__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(340px, .6fr);
		align-items: start;
		gap: clamp(32px, 4vw, 80px);
	}
}
@media (min-width: 1700px) {
	.page-head__grid { grid-template-columns: minmax(0, 1.5fr) minmax(380px, 500px); }
}
/* Jab aside hai hi nahi, grid ko do column banane ka koi matlab nahi — H1 ko
   1.4fr me nichodne se daayein aadha page khaali dikhta hai (screenshot me pakda).
   :has() na chalne wali browsers me :only-child ka max-width phir bhi sambhal leta hai. */
.page-head__grid:not(:has(> * + *)) { grid-template-columns: minmax(0, 1fr); }
.page-head__grid > :only-child { max-width: 1100px; }
.page-head h1 { margin-bottom: var(--s-4); }
.page-head__lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--c-ink-2); max-width: 62ch; margin-bottom: 0; }

/* ==========================================================================
   13 · In-page jump nav (product/resource pages)
   ========================================================================== */
.jump {
	position: sticky;
	inset-block-start: 72px;
	z-index: 40;
	background: rgba(250, 248, 244, .9);
	border-block: 1px solid var(--glass-line);
	overflow-x: auto;
	scrollbar-width: thin;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.jump {
		background: rgba(250, 248, 244, .72);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
	}
}
.jump ul { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.jump li { margin: 0; }
.jump a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding-inline: var(--s-4);
	font-family: var(--f-mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-muted);
	text-decoration: none;
	border-block-end: 2px solid transparent;
}
.jump a:hover, .jump a.is-active { color: var(--c-brand); border-block-end-color: var(--c-accent); }

/* ==========================================================================
   14 · Forms — B2B quote form
   ========================================================================== */
/* [hidden] UA stylesheet se aata hai; hamara display:grid ORIGIN ki wajah se use
   haraa deta hai (specificity ka mamla nahi). Naapa gaya tha: export fields
   639x80px [hidden] hote hue bhi poore dikh rahe the. Har aise element ka apna rule: */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
.form[hidden], .form__row[hidden], .field[hidden], .calc[hidden] { display: none; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink-2); }
.field .req { color: var(--c-err); }
.field__hint { font-size: var(--t-micro); color: var(--c-muted); }
.field input, .field select, .field textarea {
	font-family: var(--f-body);
	font-size: 16px;                 /* iOS zoom na kare */
	color: var(--c-ink);
	background: rgba(255, 255, 255, .86);
	border: 1.5px solid var(--glass-line);
	border-radius: var(--r-2);
	padding: var(--s-3) var(--s-4);
	min-height: var(--tap);
	width: 100%;
	box-shadow: 0 1px 2px rgba(16, 35, 27, .04) inset;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-kraft); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	border-color: var(--c-brand);
	outline: 3px solid var(--c-accent);
	outline-offset: 1px;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
	border-color: var(--c-err);
}
.field__error { font-size: var(--t-micro); color: var(--c-err); font-weight: 600; }
.field__error[hidden] { display: none; }

.consent { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-small); color: var(--c-muted); }
.consent input[type="checkbox"] { width: 24px; height: 24px; min-height: 24px; flex: none; margin-block-start: 1px; accent-color: var(--c-brand); }

/* Honeypot — screen-reader ke liye bhi chhupa, par display:none nahi (bots wo padhte hain) */
.hp-field {
	position: absolute !important;
	inset-inline-start: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form__status { padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); font-size: var(--t-small); }
.form__status[hidden] { display: none; }
.form__status--ok  { border-color: var(--c-ok);  background: var(--c-brand-soft); color: var(--c-ok); }
.form__status--err { border-color: var(--c-err); background: color-mix(in srgb, var(--c-err) 8%, transparent); color: var(--c-err); }

/* ==========================================================================
   15 · Calculators
   ========================================================================== */
/* minmax(0,1fr) base me: bina iske mobile par column max-content ban jaata tha aur container
   calculator ki 4-column table page ko 390px se chauda kar deti thi (27 Sep, split-shot me pakda). */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.calc__panel {
	background: linear-gradient(180deg, var(--glass-card-hi), var(--glass-card));
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	padding: clamp(20px, 2vw, 32px);
}
.calc__out {
	position: sticky;
	inset-block-start: 96px;
	background: linear-gradient(165deg, rgba(255, 255, 255, .94), rgba(244, 240, 232, .8));
	border: 1px solid var(--c-kraft-soft);
	border-block-start: 3px solid var(--c-brand);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	padding: clamp(20px, 2vw, 32px);
}
@media (max-width: 959px) { .calc__out { position: static; } }
.calc__big {
	font-family: var(--f-head);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 700;
	color: var(--c-brand);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: var(--s-2);
}
.calc__disclaimer { font-size: var(--t-micro); color: var(--c-muted); margin-block-start: var(--s-5); }

/* ==========================================================================
   16 · Callout boxes
   ========================================================================== */
.note {
	border: 1px solid var(--glass-line);
	border-inline-start: 3px solid var(--c-brand);
	border-radius: var(--r-glass);
	background: linear-gradient(180deg, var(--glass-card-hi), var(--glass-card));
	box-shadow: var(--sh-1), var(--glass-glow);
	padding: var(--s-5) var(--s-6);
	font-size: var(--t-small);
}
.note h3, .note h4 { margin-bottom: var(--s-2); font-size: 16px; }
.note--warn   { border-inline-start-color: var(--c-warn); background: var(--c-accent-soft); }
.note--accent { border-inline-start-color: var(--c-accent); }
.note p:last-child { margin-bottom: 0; }
/* 10 Oct: note ka box section ke saath poora chauda rehta hai, text measure 820px (padhne ki seema). */
.note > p, .note > ul, .spec__scroll > p, .section > .wrap > p:not(.cluster) { max-width: var(--container-text); }

/* ==========================================================================
   17 · Footer
   ========================================================================== */
.site-footer {
	position: relative;
	color: var(--c-on-dark-2);
	font-size: var(--t-small);
	background:
		radial-gradient(56rem 28rem at 18% 0%, rgba(27, 94, 63, .45), transparent 62%),
		radial-gradient(44rem 26rem at 88% 20%, rgba(200, 154, 107, .12), transparent 58%),
		var(--c-ink-surface);
	border-block-start: 1px solid rgba(255, 255, 255, .10);
}
.site-footer a { color: var(--c-on-dark); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--c-accent); text-decoration: underline; }
.footer__top { display: grid; gap: var(--s-10); padding-block: var(--s-16); }
/* 5 column (Export jud gaya, 27 Sep). 900-1199 par 3 column, taaki koi column 150px me na sikude. */
@media (min-width: 900px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer__top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } }
.footer__col h3 {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-kraft);
	margin-bottom: var(--s-5);
	font-weight: 600;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0; }
.footer__col li a { display: inline-block; min-height: 32px; padding-block: var(--s-1); }
.footer__nap { font-style: normal; line-height: 1.7; }
.footer__nap strong { color: var(--c-on-dark); }
.footer__reg {
	margin-block-start: var(--s-5);
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	line-height: 1.9;
	color: var(--c-on-dark-2);
}
.footer__bottom {
	border-block-start: 1px solid rgba(255, 255, 255, .12);
	padding-block: var(--s-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-6);
	align-items: center;
	justify-content: space-between;
	font-size: var(--t-micro);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
/* Standalone links — inline-in-a-sentence wali WCAG chhoot inhe nahi milti,
   isliye 24px ki poori tap height chahiye (naapa gaya tha: 15px). */
.footer__legal a,
.footer__bottom a,
.topbar a,
.footer__nap a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; }

/* Dev-only pending board */
.dev-pending {
	background: var(--c-warn);
	color: var(--c-on-dark);
	padding: var(--s-4) 0;
	font-size: var(--t-micro);
	font-family: var(--f-mono);
}
.dev-pending ul { margin: var(--s-2) 0 0; padding-inline-start: var(--s-5); }
.dev-pending li { margin-bottom: 2px; }

/* ==========================================================================
   18 · Mobile sticky bar + WhatsApp float
   ========================================================================== */
.mobile-bar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: rgba(255, 255, 255, .93);
	border-block-start: 1px solid var(--glass-line);
	padding-block-end: env(safe-area-inset-bottom, 0);
	box-shadow: 0 -2px 20px rgba(16, 35, 27, .12);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.mobile-bar {
		background: rgba(255, 255, 255, .78);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
	}
}
.mobile-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 58px;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-ink);
	text-decoration: none;
	border-inline-end: 1px solid var(--c-line-soft);
}
.mobile-bar a:last-child { border-inline-end: 0; background: var(--c-accent); color: var(--c-accent-ink); }
.mobile-bar svg { width: 19px; height: 19px; }
@media (min-width: 1181px) { .mobile-bar { display: none; } }
@media (max-width: 1180px) { body { padding-block-end: 58px; } }

/* ==========================================================================
   19 · Misc
   ========================================================================== */

.media-frame { background: var(--c-bg-warm); border: 1px solid var(--c-line); overflow: hidden; }
.media-frame img { width: 100%; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-weight: 600;
	text-decoration: none;
	min-height: 32px;
}
.link-arrow:hover { text-decoration: underline; }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.anchor-offset { scroll-margin-block-start: 130px; }

.verified-line {
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	color: var(--c-muted);
	border-block-start: 1px solid var(--c-line);
	padding-block-start: var(--s-4);
	margin-block-start: var(--s-8);
}

/* ==========================================================================
   20 · Media band — full-bleed context image
   ========================================================================== */
.media-band { margin: 0; }
.media-band__frame {
	position: relative;
	aspect-ratio: var(--band-ratio, 1600 / 560);
	overflow: hidden;
	background: var(--c-bg-warm);
	border-block: 1px solid var(--c-line);
}
.media-band__frame picture,
.media-band__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.media-band__cap {
	max-width: var(--container-text);   /* 10 Oct: lamba caption 1348px tak phailta tha */
	margin: var(--s-4) 0 0;
	font-size: var(--t-micro);
	color: var(--c-muted);
	font-family: var(--f-mono);
}
@media (max-width: 720px) {
	.media-band__frame { aspect-ratio: 4 / 3; }
}

/* Product page ka lead image */
.page-media { margin-block: var(--s-10) 0; }
.page-media .media-frame { aspect-ratio: 16 / 7; position: relative; }
.page-media picture, .page-media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 720px) { .page-media .media-frame { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   21 · Tap targets jo naap ke baad nikle
   Table cell ke andar ka link ek vaakya ke beech ka link nahi hai — wo apne aap me
   ek control hai, isliye 24px chahiye. Naapa gaya tha: 17px.
   ========================================================================== */
.spec-table a,
.cmp a,
.mega__promo a,
.footer__col li a,
.jump a,
/* Jis <li> ka POORA content ek link hai, wo definition se ek standalone control hai —
   vaakya ke beech ka link nahi. Isliye use bhi 24px chahiye. */
li > a:only-child { display: inline-flex; align-items: center; min-height: 24px; }


/* ==========================================================================
   22 · Glass pass — asli backdrop-filter har surface par
   ==========================================================================
   Pehle sirf single-instance cheezon (header, topbar, mega, jump, mobile bar) par
   blur tha; card/table/form gradient se "frost jaisa" dikhte the. Gaurav ko har
   jagah asli glass chahiye, aur honeycomb background ke peeche se jhalakna hi
   is design ka point hai — isliye ab surfaces par bhi blur hai.

   Purana dar (60+ blur layer = scroll jank) andaaza nahi rehne diya, NAAPA gaya —
   `_local/scroll-perf.js`, blur ON vs OFF ke control ke saath, 3 second ke scroll me FPS:
       desktop (cpu x1)  ON 58.6 fps · OFF 60.3 fps  -> kharcha 3%
       mobile  (cpu x6)  ON 60.2 fps · OFF 60.1 fps  -> kharcha 0%
   (Pehli koshish me sirf frame-time naapa tha — wo vsync par capped hai aur dono
   taraf 16.8ms dikha raha tha, yaani jhootha green. Faisla FPS se hota hai.)
   Surface count badhe to wahi script DOBARA chalao — blur muft nahi hai.

   Do baatein jaan-boojh kar:
   - blur `.card` par hai, `.card__body` par nahi. Nested blur layers multiply hote hain.
   - `.band--warm` / `.band--dark` ke andar ke card ka blur kuch naya nahi dikhata
     (band ka apna rang flat hai) — par ye galat nahi hai, sirf bekaar nahi hai;
     alag selector likhne se cascade me ek aur exception ban jaata. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.card,
	.tile,
	.cmp,
	.calc__panel,
	.note,
	.form__status {
		-webkit-backdrop-filter: blur(12px) saturate(145%);
		backdrop-filter: blur(12px) saturate(145%);
	}
	/* Pill aur unit-toggle chhote hain aur ek row me kai aate hain — halka blur. */
	.pill,
	.unit-toggle {
		-webkit-backdrop-filter: blur(8px) saturate(135%);
		backdrop-filter: blur(8px) saturate(135%);
	}
}

/* Table aur calc ke apne flat background ko glass se badla — warna blur ke upar
   opaque parat baith jaati hai aur blur dikhta hi nahi. */
.cmp { background: var(--glass-card); }
.unit-toggle { background: var(--glass-card); }

/* ==========================================================================
   23 · Compactness — mobile
   ==========================================================================
   Naap (`_local/section-metrics.js`, 390x844): homepage 17.3 screen lambi thi.
   Section padding kam karne se sirf 17.1 hui — kyunki mobile par lambai padding
   se nahi, CARD STACK se aati hai. Har card 519px tha: 267px image (4/3) + 250px body.

   Isliye mobile par:
   - image 4/3 -> 16/9 (267 -> 201px). `object-fit: cover` pehle se hai, isliye ye
     CROP hai, khichaav nahi. `aspect-ratio` box par hi rehta hai, to CLS nahi badhta.
   - body/tile padding 24 -> 20px
   - hero ke do blocks ke beech 40 -> 28px

   Desktop ko haath nahi lagaya — wahan 3 card ek row me hain, lambai problem nahi. */
@media (max-width: 640px) {
	.card__media { aspect-ratio: 16 / 9; }
	.card__body  { padding: var(--s-5); }
	.tile        { padding: var(--s-5); }
	.hero__grid  { gap: var(--s-6); }
}

/* ==========================================================================
   24 · Longform — prose + sticky aside
   ==========================================================================
   `.prose` 820px par capped hai aur wo THEEK hai — lambi line padhi nahi jaati.
   Galti ye thi ki bachi hui jagah khali chhod di gayi: 1920px par content sirf 43%
   chaudai le raha tha (`_local/width-use.js` ne 15 page par pakda). Ab bachi jagah me
   page ka apna index + contact card baithta hai.

   Breakpoint 1100px par hai, 960 par nahi: 820px prose + 320px aside + gap ko
   itni jagah chahiye hi. Iske neeche aside prose ke BAAD aata hai (source order
   pehle se wahi hai, isliye screen reader ka kram bhi sahi rehta hai). */
/* `minmax(0, 1fr)` BASE me hona zaroori hai. Bina iske grid column ki chaudai
   max-content ban jaati hai aur andar ki chaudi table poore page ko chauda kar
   deti hai — mobile par 4 blog post par 405-547px scroll width aa gayi thi
   (390 hona chahiye tha). Grid ka default `auto` hi is bug ki jad hai. */
.longform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-10); align-items: start; }

@media (min-width: 1100px) {
	.longform {
		grid-template-columns: minmax(0, var(--container-text)) minmax(280px, 340px);
		gap: clamp(40px, 4vw, 88px);
		/* Block ko wrap ke beech me rakho. Bina iske 1920px par prose+aside baayen
		   chipak jaate the aur daayen ~430px khali — wahi "aadha page khali" wali
		   shikayat, bas thodi chhoti. Naap: `_local/width-use.js`. */
		max-width: calc(var(--container-text) + 340px + clamp(40px, 4vw, 88px));
		margin-inline: auto;
	}
	.longform__aside {
		position: sticky;
		/* header ki height + saans. Sticky ko overflow:visible ancestors chahiye —
		   .wrap/.section dono par koi overflow set nahi hai, naap kar dekh liya. */
		inset-block-start: 96px;
		display: grid;
		gap: var(--s-5);
	}
}
@media (max-width: 1099px) {
	/* Chhoti screen par index bekaar hai — wahan scroll hi seedha hai.
	   Contact card rehta hai. */
	.lf-toc { display: none; }
	.longform__aside { max-width: var(--container-text); }
}

.lf-toc {
	background: linear-gradient(180deg, var(--glass-card-hi), var(--glass-card));
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	padding: var(--s-5) var(--s-6);
}
.lf-toc__h {
	font-family: var(--f-mono);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.75px;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--s-3);
}
.lf-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lf-toc li { margin: 0; }
.lf-toc a {
	display: block;
	padding-block: var(--s-2);
	font-size: var(--t-small);
	line-height: 1.4;
	color: var(--c-ink-2);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	padding-inline-start: var(--s-3);
	transition: color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.lf-toc a:hover,
.lf-toc a:focus-visible { color: var(--c-brand); border-inline-start-color: var(--c-accent); }

.lf-ask {
	background: linear-gradient(180deg, var(--glass-card-hi), var(--glass-card));
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	box-shadow: var(--sh-glass), var(--glass-glow);
	padding: var(--s-6);
}
.lf-ask__h { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.lf-ask__p { font-size: var(--t-small); color: var(--c-muted); margin-bottom: var(--s-5); }
.lf-ask__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.lf-ask__list li { margin: 0; }
.lf-ask__list a { font-size: var(--t-small); display: inline-flex; align-items: center; min-height: 24px; }
.lf-ask__meta {
	margin: var(--s-4) 0 0;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--c-muted);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.lf-toc, .lf-ask {
		-webkit-backdrop-filter: blur(12px) saturate(145%);
		backdrop-filter: blur(12px) saturate(145%);
	}
}

/* ==========================================================================
   25 · 320px — sabse chhota phone jo abhi bhi chalta hai
   ==========================================================================
   Naap (`_local/device-fit.js`, 21 page x 10 device): 320px par HAR page 6px
   chauda tha (scrollW 326 vs 320). 360px se upar sab theek tha, isliye ye sirf
   is ek width ka masla hai.

   Ganit: header ka content box 288px (320 - 16 - 16 gutter). Usme
   brand 238 + gap 24 + menu button 48 = 310. 22px zyada.

   Brand ki tagline (`PAPER PROTECTIVE PACKAGING`, mono + .16em letter-spacing)
   akeli 188px le rahi thi. Wo iss width par kaat di — brand ka naam reh jaata hai,
   aur tagline har doosre page par footer/about me hai hi. Gap bhi 24 -> 12.
   Naap ke baad: 320px par scrollW == clientW. */
@media (max-width: 359px) {
	.brand__tag { display: none; }
	.site-header__inner { gap: var(--s-3); }
	.topbar__facts { gap: var(--s-3); }
}

/* Topbar ka phone + email — inme bhi icon hai (pehle sirf ek middot separator tha).
   `inline-flex` + `min-height:24px` isliye ki tap target WCAG 2.5.8 se neeche na jaaye. */
.topbar__contact { margin: 0; display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.topbar__contact a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 24px; }

/* --- Follow us -------------------------------------------------------------
   Client ke profiles na hone par ye markup render hi nahi hota, isliye yahan
   koi "empty state" nahi hai — khali strip dikhane se behtar block ka na hona.
   Tap target 24px se neeche nahi ja sakta (WCAG 2.5.8): icon 16px + padding. */
.social { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.social li { margin: 0; }
.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: var(--s-2);
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out),
	            background-color var(--d-1) var(--e-out);
}
.social__ico { width: 16px; height: 16px; display: block; }
.social__text { font-size: var(--t-small); padding-inline: var(--s-1); }

.social--footer { margin-block-start: var(--s-3); }
.social--footer a { border-color: rgba(255, 255, 255, .18); }
.social--footer a:hover,
.social--footer a:focus-visible { border-color: var(--c-accent); background: rgba(255, 255, 255, .10); }

/* Topbar patli hai — wahan chhote target, par 24px se neeche nahi. */
.social--bar a { min-width: 26px; min-height: 26px; padding: var(--s-1); border-color: transparent; }
.social--bar a:hover,
.social--bar a:focus-visible { color: var(--c-brand); border-color: var(--glass-line); }
.social--bar .social__ico { width: 14px; height: 14px; }

.footer__follow-h { margin-block-start: var(--s-5); }

@media (max-width: 860px) { .social--bar { display: none; } }

/* --- Figure (content ke andar image + caption) ------------------------------
   `[sepl_img]` shortcode isi markup me aata hai. Image ka apna width/height
   attribute hota hai (sepl_img file se padhta hai), isliye yahan aspect-ratio
   lagane ki zaroorat nahi — CLS pehle se guard hai. */
.figure { margin: var(--s-8) 0; }
.figure__img { display: block; }   /* [sepl_img] shortcode ka <picture> — audit ne orphan class pakdi thi */
.figure picture,
.figure img { display: block; width: 100%; height: auto; }
.figure img {
	border-radius: var(--r-glass);
	border: 1px solid var(--glass-line);
	box-shadow: var(--sh-glass);
}
.figure figcaption,
.figure__cap {
	margin-block-start: var(--s-3);
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--c-muted);
	border-inline-start: 2px solid var(--c-accent);
	padding-inline-start: var(--s-3);
}

/* =========================================================================
   Fixed-count grids (27 Sep screenshot review)
   .grid-3/.grid-4 auto-fit hain — 1440px par .grid-3 bhi 4 column ban jaata hai.
   6 item = 4+2, 8 item = 5+3: aakhri row me akele card. Jahan item ginti pakki hai
   wahan column ginti bhi pakki: 6 -> 3+3, 8 -> 4+4. Do class = auto-fit rule se upar.
   ========================================================================= */
@media (min-width: 900px) {
	.grid.grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.grid--4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.grid.grid--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Aside (340px) ke andar kv: label upar, value neeche. Side-by-side me lambi value
   ("Packaging traders, stockists and industrial suppliers") har shabd par tootti thi
   aur label 3 line me (27 Sep screenshot review). Sirf aside me — hero card waisa hi. */
.longform__aside .kv__row { display: block; }
.longform__aside .kv dd { text-align: start; margin-block-start: 2px; font-size: 14px; }

/* Balanced grids — item ginti ke hisaab se column (CSS :has quantity query, JS nahi).
   .grid-3/.grid-4 auto-fit hain, isliye 1440px par 4 item = 3+1, 5 = 4+1, 8 = 5+3 —
   aakhri row me akela card. 27 Sep ko industry, home aur export pages par screenshot
   me pakda. Mobile (<900px) par ek column hi rehta hai, wahan kuch nahi badla. */
@media (min-width: 900px) {
	.grid-3:has(> :nth-child(3):last-child), .grid-4:has(> :nth-child(3):last-child),
	.grid-3:has(> :nth-child(6):last-child), .grid-4:has(> :nth-child(6):last-child),
	.grid-3:has(> :nth-child(9):last-child), .grid-4:has(> :nth-child(9):last-child),
	.grid-3:has(> :nth-child(5):last-child), .grid-4:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.grid-3:has(> :nth-child(4):last-child), .grid-4:has(> :nth-child(4):last-child),
	.grid-3:has(> :nth-child(8):last-child), .grid-4:has(> :nth-child(8):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.grid-3:has(> :nth-child(4):last-child), .grid-4:has(> :nth-child(4):last-child),
	.grid-3:has(> :nth-child(8):last-child), .grid-4:has(> :nth-child(8):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 1400px) {
	.grid-3:has(> :nth-child(5):last-child), .grid-4:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* =========================================================================
   Gallery — asli photos natural ratio me; CSS columns = masonry, JS nahi.
   break-inside: avoid warna caption agle column me toot jaata hai.
   ========================================================================= */
.gallery { columns: 3 280px; column-gap: var(--s-6); }
.gallery__item {
	break-inside: avoid;
	margin: 0 0 var(--s-6);
	background: var(--c-card);
	border: 1px solid var(--glass-line);
	border-radius: var(--r-glass);
	overflow: hidden;
	box-shadow: var(--sh-glass);
}
.gallery__link { display: block; }
.gallery__link img { display: block; width: 100%; height: auto; }
.gallery__cap { padding: var(--s-3) var(--s-4) var(--s-4); font-size: var(--t-small); color: var(--c-muted); margin: 0; }

/* Map facade (contact) — 29 Sep. Click se pehle sirf ye box; baad me iframe usi jagah, same ratio (CLS 0). */
.map-facade {
	margin-block-start: var(--s-10);
	position: relative;
	aspect-ratio: 16 / 7;
	min-height: 280px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-2);
	overflow: hidden;
	background: var(--c-kraft-soft);
	display: grid;
	place-items: center;
	text-align: center;
}
.map-facade__inner { padding: var(--s-6); max-width: 34rem; }
.map-facade__addr { margin: 0 0 var(--s-5); color: var(--c-ink); }
.map-facade__note { margin: var(--s-4) 0 0; font-size: var(--t-small); color: var(--c-ink-2); }
.map-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .map-facade { aspect-ratio: 4 / 5; } }