/*
 * Chrome for the lean project template: top bar, header/nav, hero overlay,
 * content+sidebar grid, and footer. The actual content sections (intro,
 * location, masterplan, amenities, etc.) bring their own CSS from the
 * hns-*-section mu-plugins unchanged; this file only styles the wrapper
 * around them, plus the "Scrolling Main Form" sidebar widget area (its
 * own widgets — rotating headline, FluentForm, WhatsApp modal trigger —
 * carry their own styles/scripts, this just sizes and sticks the column).
 *
 * Font stack matches the sitewide Didact Gothic treatment (see
 * newspaper-child/custom-css.css --hns-font) rather than a generic system
 * stack, so this template doesn't visually diverge from the rest of the
 * site.
 */

:root {
	--hns-lean-font: 'DidactGothic-Regular', 'Didact Gothic', sans-serif;
}

/*
 * font-family here is enough on its own — normal CSS inheritance already
 * carries it to every descendant that doesn't explicitly set its own.
 * There used to also be a blanket `.hns-lean-project * { font-family:
 * inherit; }` rule, which is what broke the star-rating icons: those are
 * rendered via an icon font (specific codepoints mapped to star glyphs),
 * and force-overriding font-family on literally every descendant
 * clobbered that mapping, showing tofu boxes instead of stars. Removed —
 * nothing here needs it, and anything that deliberately sets its own
 * font-family (icon fonts foremost) needs to keep doing so.
 */
/*
 * Page-level horizontal-scroll safety net. The regular Newspaper template
 * has this same rule (on its own wrapper) sitewide; this from-scratch
 * template never inherited it. Without it, any content-section widget
 * whose own internal horizontal-scroll math goes slightly wrong — found
 * two so far: the group-buy section's testimonial carousel
 * (overflow-x:auto/scroll-snap track) and its price-comparison table
 * (table.hns-price-table has an explicit min-width:420px, wrapped in its
 * own .hns-table-scroll{overflow-x:auto} — narrower than that on an
 * actual phone (as opposed to this session's browser-automation
 * viewport, which reported 420-450px and made the table's own scroll
 * container look sufficient when it wasn't at real device widths like
 * 360-393px) — drags the whole page into horizontal scroll instead of
 * staying contained to that one widget.
 *
 * `html.hns-lean-html { overflow-x: hidden }` alone (the original version
 * of this fix) turned out not to be enough on a real phone even though it
 * measured clean in this session's own (desktop, browser-automation)
 * testing — real mobile Safari/Chrome apparently still allowed some
 * horizontal scroll/bounce past it. Reinforcing on `body` too closes
 * that gap. Still not `*` or every ancestor: overflow other than visible
 * on an ancestor of a position:sticky element normally breaks that
 * stickiness (the sticky header and sidebar both rely on it) — `html`
 * and `body` are both safe because neither is an ancestor *within the
 * normal flow* that sticky positioning calculates its containing block
 * against; anything scoped narrower than that (e.g. .hns-lean-body-grid
 * or .hns-lean-sidebar-col) would risk exactly that breakage.
 */
html.hns-lean-html {
	overflow-x: hidden;
}

.hns-lean-project {
	margin: 0;
	font-family: var(--hns-lean-font);
	color: #1b2d45;
	background: #fff;
}

/* ---------- Top utility bar ---------- */

.hns-lean-topbar {
	background: #11213a;
	color: #cdd6e4;
	font-size: 12.5px;
}

.hns-lean-topbar-inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 6px 16px;
}

.hns-lean-topbar-list {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hns-lean-topbar-list a {
	color: #cdd6e4;
	text-decoration: none;
	font-weight: 600;
}

.hns-lean-topbar-list a:hover {
	color: #fff;
}

/* ---------- Header ---------- */

.hns-lean-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #0a0a0a;
	border-bottom: 1px solid #232323;
}

/*
 * WP's admin bar is fixed at viewport y:0 with z-index 99999 — far above
 * this header's z-index:100. With top:0, the header sticks at the same
 * y:0 the admin bar already occupies, so its top slice renders hidden
 * behind the bar once scrolling triggers the sticky state (at page load,
 * before that point, `html{margin-top:32px}` happens to put it in the
 * right place, which is why this only shows up after scrolling — easy to
 * miss testing only the initial view). Same fix as the sidebar: offset by
 * the admin bar's height, logged-in-admin-only via the `admin-bar` body
 * class WP adds, so real visitors are unaffected.
 */
body.admin-bar .hns-lean-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .hns-lean-header {
		top: 46px;
	}
}

.hns-lean-header-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 12px 16px;
}

/*
 * Hidden by default (desktop shows the full inline nav); the mobile
 * media query below turns this on and hides .hns-lean-nav/.hns-lean-call
 * in its place.
 */
.hns-lean-hamburger {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	color: #f2f2f2;
	cursor: pointer;
}

.hns-lean-logo {
	flex-shrink: 0;
	display: block;
	line-height: 0;
}

.hns-lean-logo img {
	display: block;
	height: 42px;
	width: auto;
}

.hns-lean-nav {
	flex: 1;
	overflow: visible;
}

.hns-lean-nav-list {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hns-lean-nav-list > li {
	position: relative;
}

.hns-lean-nav-list > li > a {
	display: inline-block;
	padding: 8px 0;
	color: #f2f2f2;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.hns-lean-nav-list > li:hover > a,
.hns-lean-nav-list > li > a:focus {
	color: #ef762f;
}

/* Dropdown for items with children (replaces the old mega menu) */
.hns-lean-nav-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(20, 40, 64, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 200;
}

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

.hns-lean-nav-list .sub-menu li a {
	display: block;
	padding: 9px 18px;
	color: #344256;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.hns-lean-nav-list .sub-menu li a:hover {
	background: #fdf3ec;
	color: #ef762f;
}

.hns-lean-nav-list > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	margin-left: 6px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
}

/*
 * Icon-triggered expanding search, placed right before the Call button.
 * Submits as a normal GET request to home_url('/')?s=... — standard
 * WordPress search, so it lands on the site's existing custom search.php
 * template (see newspaper-child/child-theme-inc-search/) without needing
 * any of that logic duplicated here.
 */
.hns-lean-search {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.hns-lean-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #f2f2f2;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hns-lean-search-toggle:hover,
.hns-lean-search-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.1);
	color: #ef762f;
}

.hns-lean-search-form {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%) scaleX(0.9);
	transform-origin: right center;
	width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hns-lean-search.is-open .hns-lean-search-form {
	width: 260px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) scaleX(1);
	right: 44px;
}

.hns-lean-search-form input {
	width: 100%;
	height: 38px;
	border: 1px solid #333;
	border-radius: 8px;
	background: #171717;
	color: #f2f2f2;
	padding: 0 14px;
	font-size: 13px;
	font-family: inherit;
}

.hns-lean-search-form input::placeholder {
	color: #8a8a8a;
}

.hns-lean-search-form input:focus {
	outline: none;
	border-color: #ef762f;
}

.hns-lean-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.hns-lean-search-form {
		transition: none;
	}
}

@media (max-width: 640px) {
	.hns-lean-search.is-open .hns-lean-search-form {
		width: 180px;
		right: 40px;
	}
}

.hns-lean-call {
	flex-shrink: 0;
	background: #ef762f;
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 14px;
	border-radius: 8px;
	white-space: nowrap;
}

.hns-lean-call-label {
	font-weight: 800;
	color: #fff !important;
}

/* ---------- Hero / title overlay ---------- */

.hns-lean-hero {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	background: #11213a;
}

.hns-lean-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hns-lean-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 14, 28, 0.1) 0%, rgba(6, 14, 28, 0.55) 55%, rgba(6, 14, 28, 0.92) 100%);
}

.hns-lean-hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 16px 22px;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}

.hns-lean-breadcrumb--under-hero {
	margin-top: 16px;
}

.hns-lean-title--on-hero {
	color: #ffffff !important;
	margin: 6px 0 0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* ---------- Breadcrumb / title (no-thumbnail fallback) ---------- */

.hns-lean-main {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 16px;
}

.hns-lean-breadcrumb {
	font-size: 12px;
	color: #68758a;
	margin: 16px 0 8px;
}

.hns-lean-breadcrumb a {
	color: #68758a;
	text-decoration: none;
}

.hns-lean-breadcrumb-sep {
	margin: 0 6px;
}

.hns-lean-title {
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 20px;
	color: #11213a;
}

/* ---------- Content + sidebar grid ----------
 *
 * A genuine 2fr/1fr grid column, same principle as the site's own regular
 * (non-lean) template: .td-pb-span8/.td-pb-span4 there — verified live on
 * /ira-by-the-banks-.../.
 *
 * The sticky positioning needs TWO nested boxes, not one:
 *   - .hns-lean-sidebar-col: the grid item, left at default (stretch)
 *     alignment so it's exactly as tall as the content column. This is
 *     what reserves the space (no overlap, ever) and gives the sticky
 *     child below room to move within.
 *   - .hns-lean-sidebar-sticky: the actual position: sticky element,
 *     sized to its own (short) content.
 * Putting `position: sticky` directly on .hns-lean-sidebar-col (the first
 * attempt here) put it on a box that was ALREADY stretched to the full
 * height of the row — a sticky element with no natural height shorter
 * than its containing block has nothing to visibly "float" above, so it
 * just behaved like a normal static box and scrolled away immediately.
 * The inner wrapper is the standard fix: tall reserving parent, short
 * sticky child.
 */
.hns-lean-body-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	margin-top: 20px;
}

.hns-lean-content-col {
	min-width: 0;
}

/*
 * The actual mechanism behind the real-device horizontal-scroll report
 * (html.hns-lean-html{overflow-x:hidden} above measured clean in this
 * session's own browser-automation testing, at the viewport widths that
 * tool reported, but not on an actual phone): WPBakery/td-composer wraps
 * every content section in flex rows (.wpb_row/.vc_row, seen live as
 * class="vc_row tdi_2 wpb_row td-pb-row") and flex/grid children default
 * to min-width:auto, not 0. A wide child inside one of those rows — found:
 * the group-buy section's price-comparison table
 * (table.hns-price-table{min-width:420px}, narrower than that isn't
 * reachable on real small phones like a 360-393px-wide device even though
 * it is on the wider viewports this session's tooling reported) or its
 * testimonial carousel — can't shrink its flex-column ancestor below that
 * intrinsic content width, so the ancestor grows past the viewport
 * instead of the table's own overflow-x:auto scroll container ever
 * engaging. That extra width is what was leaking past the html-level
 * safety net above: it's real layout growth, not just visual overflow,
 * so clipping it at html only hides the scrollbar chrome, not the
 * underlying cause. min-width:0 here lets those flex items actually
 * shrink to the column width, so the table/carousel's own internal
 * overflow-x:auto is what engages, same as it was always meant to.
 * Deliberately NOT touching body's overflow for this (tried it, broke
 * the sticky header/sidebar — see git history) — this fixes the actual
 * mechanism instead of fighting its symptom from an ancestor.
 */
.hns-lean-content .wpb_row,
.hns-lean-content .vc_row,
.hns-lean-content .wpb_column,
.hns-lean-content .vc_column_container,
.hns-lean-content [class*="vc_col-"] {
	min-width: 0;
}

.hns-lean-content {
	font-size: 15px;
	line-height: 1.65;
}

.hns-lean-sidebar-col {
	min-width: 0;
	/*
	 * Positioning context for the freeze state the boundary script
	 * (single-project-lean.php) applies to .hns-lean-sidebar-sticky —
	 * position: absolute on that child anchors to this element's box.
	 */
	position: relative;
}

/*
 * No max-height, no overflow-y, no scrollbar: chasing the right
 * calc(100vh - Npx) buffer across real-world browser chrome variance
 * (bookmarks bars, extensions, admin bar, etc.) kept almost-but-not-quite
 * working — the actual fix is to make the sticky content itself short
 * enough that it fits comfortably in ordinary viewports without needing
 * to reserve/scroll at all. The compacting rules below (rolling-text
 * widget, FluentForm fields, WhatsApp button) cut this box from ~700px
 * to roughly 480-520px, which clears every viewport height tested in
 * this session, admin bar included, with real margin to spare.
 */
.hns-lean-sidebar-sticky {
	position: sticky;
	top: 90px;
	/*
	 * hns_leadgen_output()'s own markup explicitly sets z-index:100 (its
	 * code comment: "above the theme's fixed sidebar form" — written for
	 * the regular template's sidebar). Near the bottom of the post, this
	 * sticky sidebar and the leadgen block occupy the same screen area as
	 * the page scrolls, and without an explicit z-index here the sidebar
	 * has the default (auto), losing that stacking fight and rendering
	 * underneath leadgen. 150 keeps it on top unconditionally.
	 */
	z-index: 150;
}

@media (min-width: 901px) {
	body.admin-bar .hns-lean-sidebar-sticky {
		top: 122px;
	}
}

@media (max-width: 900px) {
	.hns-lean-body-grid {
		grid-template-columns: 1fr;
	}
	.hns-lean-sidebar-sticky {
		position: static;
	}
}

/*
 * Compact mode for the "Scrolling Main Form" widgets specifically inside
 * the lean sidebar. These are the site's real, shared FluentForm markup
 * (.ff-el-group / .ff-el-input--label / .ff-el-form-control) — nothing
 * about the form's fields, validation, or submission changes, only the
 * vertical spacing/sizing around them, scoped to this container so nothing
 * elsewhere on the site (the regular Newspaper template's own sidebar,
 * or the ad-microsite Pages) is affected.
 */
.hns-lean-sidebar-sticky .rollingText {
	margin: 0;
	padding: 0;
}

.hns-lean-sidebar-sticky .rt-lead {
	font-size: 15px;
}

.hns-lean-sidebar-sticky .rt-detail {
	font-size: 12px;
}

.hns-lean-sidebar-sticky .ff-el-group {
	margin-bottom: 8px !important;
}

.hns-lean-sidebar-sticky .ff-el-input--label {
	margin-bottom: 2px !important;
}

.hns-lean-sidebar-sticky .ff-el-input--label label {
	font-size: 11px !important;
	line-height: 1.2 !important;
}

.hns-lean-sidebar-sticky .ff-el-form-control {
	height: 34px !important;
	padding: 4px 10px !important;
	font-size: 12.5px !important;
}

.hns-lean-sidebar-sticky select.ff-el-form-control {
	height: 34px !important;
}

.hns-lean-sidebar-sticky .ff-btn-submit {
	padding: 8px 16px !important;
	font-size: 13px !important;
}

.hns-lean-sidebar-sticky .ff_modal_btn {
	padding: 8px 14px !important;
	font-size: 12.5px !important;
}

/* ---------- Footer ----------
 *
 * Deliberately bookends the header: same near-black surface, same orange
 * accent, so the page reads as one committed brand frame (dark header →
 * light content → dark footer) instead of a light template stapled onto
 * a dark nav. Text colors are chosen against #0a0a0a specifically —
 * --hns-footer-text hits ~11:1, --hns-footer-muted ~7:1, both well past
 * the 4.5:1 body-text floor; nothing here is the washed-out-gray-on-tint
 * failure mode.
 */

/*
 * bg1.jpg is a near-white lifestyle photo (a couple + agent, shot mostly
 * against blank white) — not the dark surface the original text colors
 * (light gray/white, orange headings tuned for a near-black background)
 * were designed against. Swapping to a light image without updating text
 * would make most of this footer unreadable, so the whole color set below
 * flips to dark-on-light: headings/links darkened for contrast, the RERA
 * badge inverted to a light tint with dark text, the divider line
 * darkened. bg-color is a light fallback in case the image fails to load.
 * top-center positioning favors the image's blank upper portion behind
 * the text-heavy columns, rather than cropping into the people lower down.
 */
.hns-lean-footer {
	position: relative;
	margin-top: 40px;
	border-top: 4px solid #ef762f;
	background-color: #f7f5f2;
	background-image: url('https://www.homznspace.com/wp-content/uploads/2016/09/bg1.jpg');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	box-shadow: 0px -20px 18px -10px rgb(195 137 93 / 45%);
	--hns-footer-text: #2b2b2b;
	--hns-footer-muted: #5a5a5a;
}

.hns-lean-footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 44px 16px 20px;
}

.hns-lean-footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 28px;
}

@media (max-width: 800px) {
	.hns-lean-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.hns-lean-footer-heading {
	font-size: 14px;
	font-weight: 800;
	color: #c2410c;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hns-lean-footer-nav-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hns-lean-footer-builders-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
}

.hns-lean-footer-nav-list a {
	color: var(--hns-footer-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: color 0.15s ease;
}

.hns-lean-footer-nav-list a:hover {
	color: #c2410c;
}

.hns-lean-footer-legal {
	margin-bottom: 14px;
}

.hns-lean-footer-legal .hns-lean-footer-nav-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

.hns-lean-footer-rera {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	color: #9a3412;
	background: rgba(239, 118, 47, 0.12);
	border: 1px solid rgba(239, 118, 47, 0.4);
	border-radius: 999px;
	padding: 7px 14px;
	margin: 4px 0 0;
	line-height: 1.4;
}

.hns-lean-social-row {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.hns-lean-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.hns-lean-social:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.hns-lean-social {
		transition: none;
	}
	.hns-lean-social:hover {
		transform: none;
	}
}

.hns-lean-social--fb { background: #1877f2; }
.hns-lean-social--ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.hns-lean-social--li { background: #0a66c2; }
.hns-lean-social--yt { background: #ff0000; }

.hns-lean-footer-call {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	background: #f35e0a;
	color: #fff !important;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	padding: 13px 22px;
	border-radius: 10px;
	border-bottom: 3px solid #b8420a;
	box-shadow: 0 4px 0 #b8420a, 0 6px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.hns-lean-footer-call:hover {
	background: #ff7a2e;
	color: #fff !important;
}

.hns-lean-footer-call:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 #b8420a, 0 2px 4px rgba(0, 0, 0, 0.25);
}

/*
 * .hns-lean-footer-whatsapp is now rendered as a <button class="ff_modal_btn
 * hns-lean-footer-whatsapp"> by FluentFormPro's FormModal (form 41 — the
 * same WhatsApp preform the sidebar's "Prefer WhatsApp?" trigger opens),
 * not a plain anchor, so this overrides FluentForm's own button reset
 * (border/background/font) rather than styling from scratch.
 */
button.hns-lean-footer-whatsapp.ff_modal_btn {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	background: #25d366;
	color: #fff !important;
	font-weight: 800;
	font-size: 15px;
	font-family: var(--hns-lean-font);
	text-decoration: none;
	padding: 13px 22px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease;
}

button.hns-lean-footer-whatsapp.ff_modal_btn:hover {
	background: #2fe374;
	color: #fff !important;
}

.hns-lean-footer-copy {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--hns-footer-muted);
	font-size: 12px;
}

/* ---------- Author box (E-E-A-T) ---------- */

.hns-lean-author-box {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 32px 0 0;
	padding: 20px;
	background: #f7f8fa;
	border: 1px solid #e3e7ee;
	border-radius: 12px;
}

.hns-lean-author-avatar {
	flex-shrink: 0;
	border-radius: 50%;
	width: 72px;
	height: 72px;
}

.hns-lean-author-label {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8a8a8a;
}

.hns-lean-author-name {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
	color: #1b2d45;
}

.hns-lean-author-bio {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #344256;
}

@media (max-width: 640px) {
	.hns-lean-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/*
 * Mobile header rework (<= 900px, matching the breakpoint .hns-lean-nav
 * already used to hide itself at). Previously the topbar wrapped into a
 * cramped multi-row stack (About Us / Careers / NRI Corner / Contact Us /
 * phone, each too wide to share a line at phone widths) and the header
 * menu simply vanished with nothing replacing it — the menu was
 * genuinely unreachable on a phone. Fix: hide the topbar outright below
 * 900px (its links move into the hamburger drawer instead — see
 * .hns-lean-mobile-nav below), and turn the header into three fixed
 * zones — hamburger / logo / search — using an explicit 3-column grid
 * rather than the desktop flex row, so the logo is genuinely centered
 * regardless of how much space the hamburger and search icons each take.
 */
@media (max-width: 900px) {
	.hns-lean-topbar {
		display: none;
	}

	.hns-lean-header-inner {
		display: grid;
		grid-template-columns: 40px 1fr 40px;
		align-items: center;
		gap: 10px;
	}

	.hns-lean-hamburger {
		display: flex;
	}

	.hns-lean-logo {
		grid-column: 2;
		justify-self: center;
	}

	.hns-lean-logo img {
		height: 32px;
	}

	.hns-lean-nav,
	.hns-lean-call {
		display: none; /* replaced by the hamburger drawer below */
	}

	.hns-lean-search {
		grid-column: 3;
		justify-self: end;
	}

	.hns-lean-title,
	.hns-lean-title--on-hero {
		font-size: 22px;
	}

	.hns-lean-hero {
		height: 320px;
	}

	/*
	 * The site's fixed-position floating widgets (WhatsApp launcher, chat
	 * bubble, Group Buy side tab, this template's own search toggle) all
	 * anchor to viewport corners regardless of what container is
	 * underneath — on a narrow phone viewport their footprint reaches
	 * much further into the content column than on desktop, where the
	 * 1440px-wide container leaves them room. Now that the breadcrumb has
	 * moved out of the hero (see .hns-lean-breadcrumb--under-hero), only
	 * the H1 remains here, so this needs to be a modest safety margin
	 * rather than the wide reserve breadcrumb+title both needed stacked
	 * together — box-sizing:border-box keeps it from ever pushing the
	 * overlay wider than its 0/0 left/right anchors regardless of how
	 * much padding this ends up being.
	 */
	.hns-lean-hero-overlay {
		box-sizing: border-box;
		padding-left: 40px;
		padding-right: 40px;
	}
}

/*
 * ---------- Off-canvas mobile nav (hamburger drawer) ----------
 *
 * Positioned via `left`, not `transform: translateX()`. A `position:fixed`
 * element hidden off-screen via transform can still contribute to the
 * page's horizontal scrollable range on iOS Safari — its pre-transform
 * layout box (here, sitting at left:0/320px wide) apparently still counts
 * for scroll-range purposes on that engine even though the transform
 * visually moves the painted pixels elsewhere, which is exactly what a
 * real-device screenshot caught: swiping right revealed blank white
 * space where this drawer's untransformed box would have been, with a
 * horizontal scrollbar to match. Confirmed in this session's own
 * (desktop/automation) testing that this class of bug doesn't reproduce
 * there at all — this needed an actual phone to catch. Animating `left`
 * instead changes the real layout position, so there's no phantom
 * pre-transform box left behind for Safari to miscount.
 */
.hns-lean-mobile-nav {
	position: fixed;
	top: 0;
	bottom: 0;
	left: -100%;
	width: min(320px, 84vw);
	background: #0a0a0a;
	/*
	 * 100001/100000, not 10000/9999: a real-device check (Android, via a
	 * peer session's ADB bridge) found the site's floating "Group Buy" tab
	 * widget still rendering on top of the dimmed backdrop while the
	 * drawer was open — its own z-index wasn't in this file to check
	 * against directly, but the site's video-modal elsewhere on the page
	 * uses z-index:100000, so that widget is plausibly in the same
	 * range. Going higher than any known value on the page is simpler and
	 * more robust than chasing the exact number.
	 */
	z-index: 100001;
	overflow-y: auto;
	transition: left 0.2s ease;
}

.hns-lean-mobile-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(6, 14, 28, 0.6);
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}

body.hns-lean-mobile-nav-open {
	overflow: hidden; /* prevent background scroll while the drawer is open */
}

body.hns-lean-mobile-nav-open .hns-lean-mobile-nav {
	left: 0;
}

body.hns-lean-mobile-nav-open .hns-lean-mobile-nav-backdrop {
	opacity: 1;
	visibility: visible;
}

.hns-lean-mobile-nav-inner {
	padding: 24px 20px;
}

.hns-lean-mobile-nav-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.hns-lean-mobile-nav-list > li {
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hns-lean-mobile-nav-list > li > a {
	display: block;
	padding: 13px 2px;
	color: #f2f2f2;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Room for the accordion toggle button on items that have one */
.hns-lean-mobile-nav-list > li.menu-item-has-children > a {
	padding-right: 44px;
}

.hns-lean-mobile-nav-list > li > a:hover,
.hns-lean-mobile-nav-list > li > a:focus {
	color: #ef762f;
}

/*
 * Accordion toggle for items with a submenu (Top Localities, Cities,
 * etc.) — injected by JS as a sibling of the <a>, not part of it, so the
 * link itself still navigates normally on tap; only this chevron
 * expands/collapses. Positioned to fill the same row height as the link
 * so it's a full-height tap target, not just the icon's own small box.
 */
.hns-lean-mobile-nav-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #b9c2d0;
	cursor: pointer;
}

.hns-lean-mobile-nav-toggle svg {
	transition: transform 0.2s ease;
}

.hns-lean-mobile-nav-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/*
 * Collapsed by default — the toggle's aria-expanded/rotation is the
 * "this is a dropdown" indicator even while closed, so the collapsed
 * state doesn't look like a dead end.
 */
.hns-lean-mobile-nav-list > li:not(.is-open) > .sub-menu {
	display: none;
}

/* Sub-menu items (depth 2, header-menu only) shown inline, indented, when the parent li.is-open */
.hns-lean-mobile-nav-list .sub-menu {
	list-style: none;
	margin: 0 0 8px;
	padding: 0 0 0 16px;
}

.hns-lean-mobile-nav-list .sub-menu a {
	display: block;
	padding: 10px 2px;
	color: #b9c2d0;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: none;
}

.hns-lean-mobile-nav-utility {
	margin-top: 8px;
}

.hns-lean-mobile-nav-list--utility > li > a {
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	color: #cdd6e4;
}

@media (min-width: 901px) {
	.hns-lean-mobile-nav,
	.hns-lean-mobile-nav-backdrop {
		display: none; /* desktop never needs the drawer; belt-and-braces alongside the hamburger's own display:none */
	}
}

/*
 * Widening the container to 1440px shrank the outer gutter enough that,
 * on ordinary desktop widths (not just narrow ones), the WhatsApp button
 * (fixed, ~8-79px from the left edge) and the chat bubble / group-buy tab
 * (fixed, within ~95px of the right edge) started overlapping body text —
 * the original Newspaper template never hit this because its own content
 * column sits inside a ~200px+ gutter at typical widths. Fixed-position
 * elements anchor to the viewport, not to this container, so the safe
 * margin has to come from padding that doesn't shrink as the container
 * approaches viewport width, not from centering-gutter math that vanishes
 * on common laptop resolutions (1366px etc.). 96px covers every fixed
 * widget's measured reach with room to spare; mobile keeps the tighter
 * 16px since the two-column grid (and these widgets' desktop footprint)
 * isn't in play there anyway.
 *
 * This block is deliberately placed at the END of the file: it has the
 * same specificity (single class selectors) as the unconditional
 * `padding: 0 16px` rules declared earlier for these same selectors, so
 * with equal specificity the LATER rule wins the cascade regardless of
 * the @media condition being true. Putting it first (as originally
 * written) meant the later unconditional rule silently overrode it.
 */
@media (min-width: 901px) {
	.hns-lean-topbar-inner,
	.hns-lean-header-inner,
	.hns-lean-hero-overlay,
	.hns-lean-main,
	.hns-lean-footer-inner {
		padding-left: 96px;
		padding-right: 96px;
	}
}