/**
 * Zilla Capital — phone & tablet layout fixes.
 *
 * Loaded after every page's own inline <style> blocks (see functions.php →
 * zc_enqueue_mobile_css), so equal-specificity rules here win without
 * needing !important everywhere.
 *
 * EVERY rule lives inside a max-width media query (1024px or below):
 * desktop and laptop layouts are untouched by this file.
 *
 *   ≤ 1024px   phones + tablets   — things that break at any touch size
 *   ≤ 767px    phones
 *   768–1024px tablets only
 */

/* ==========================================================================
   Phones + tablets
   ========================================================================== */
@media (max-width: 1024px) {

	/* Stop the page being dragged sideways on touch screens. `hidden` alone
	   does not stop it in iOS Safari; `clip` does, and doesn't create a
	   scroll box. */
	html,
	body {
		overflow-x: clip;
	}

	/* WPBakery rows carry -15px side margins meant to be absorbed by a
	   container. On the dashboard templates they sit straight in the content
	   wrapper, so every page was 30px wider than the screen and its content
	   touched (or was cut at) the edges. */
	.page-template-zsm-pages .wpb-content-wrapper .vc_row {
		margin-left: 0;
		margin-right: 0;
	}

	/* …and drop the matching column padding, so what was visible before
	   (full-bleed backgrounds, edge-to-edge bands) stays exactly where it was. */
	.page-template-zsm-pages .wpb-content-wrapper > .vc_row > .wpb_column > .vc_column-inner {
		padding-left: 0;
		padding-right: 0;
	}

	/* Media never wider than the screen. */
	.page-template-zsm-pages img,
	.page-template-zsm-pages video,
	.page-template-zsm-pages iframe {
		max-width: 100%;
	}

	/* Home: the mandates slider arrows hung 10px off both screen edges. */
	.page-template-zsm-pageshome-php #prevBtn.slider-btn {
		left: 6px !important;
	}

	.page-template-zsm-pageshome-php #nextBtn.slider-btn {
		left: auto !important;
		right: 6px !important;
	}

	/* Private Equity: both sliders' arrows sat at left:-70px — entirely
	   off-screen, so visitors could not move the sliders at all. */
	.page-template-zsm-pagesprivate-equity-php #prev.arrow,
	.page-template-zsm-pagesprivate-equity-php #zilaPrev.zilaArrow,
	.page-template-zsm-pagesprivate-equity-php #next.arrow,
	.page-template-zsm-pagesprivate-equity-php #zilaNext.zilaArrow {
		width: 40px !important;
		height: 40px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(16, 38, 73, 0.85) !important;
		color: #fff !important;
		z-index: 5;
	}

	.page-template-zsm-pagesprivate-equity-php #prev.arrow,
	.page-template-zsm-pagesprivate-equity-php #zilaPrev.zilaArrow {
		left: 4px !important;
		right: auto !important;
	}

	.page-template-zsm-pagesprivate-equity-php #next.arrow,
	.page-template-zsm-pagesprivate-equity-php #zilaNext.zilaArrow {
		right: 4px !important;
		left: auto !important;
	}

	/* Private Equity: the OneHayah logo and text are positioned over a
	   decorative shape on desktop; below desktop they stack — logo centred,
	   then the paragraph (on tablets the logo vanished off its shape). */
	.onehayah-section {
		flex-direction: column !important;
		align-items: center !important;
		height: auto !important;
		gap: 16px;
	}

	.onehayah-image {
		width: 100% !important;
		max-width: 640px !important;
		aspect-ratio: auto !important;
		background: none !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.onehayah-logo,
	.onehayah-text {
		position: static !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		animation: none !important;
		opacity: 1 !important;
	}

	.onehayah-logo {
		width: 130px !important;
		height: auto !important;
	}

	.onehayah-text {
		max-width: 100% !important;
		font-size: 15px !important;
		text-align: left !important;
	}
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 767px) {

	/* Section titles: on desktop a huge faded "watermark" word sits behind the
	   title. Scaled down to a phone it is only a little bigger than the title
	   and reads as a misprint ("OU OUR PEOPLE LE"), so it is hidden here and the
	   title below takes its place in the flow. */
	.wowo-text .back,
	.fowo-text .back {
		display: none;
	}

	/* With the watermark gone the title sits in normal flow, so a title that
	   wraps to two lines pushes content down instead of overlapping it. */
	.wowo-text .front,
	.fowo-text .front {
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		margin: 0 auto;
		width: 100%;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
		padding: 0 16px;
		box-sizing: border-box;
		/* Pages shrank these to 7–11px on phones; one readable size everywhere. */
		font-size: 16px !important;
		letter-spacing: 2px;
		line-height: 1.3;
	}

	/* Body copy and links set below 12px on desktop-first CSS → 13px minimum.
	   (The service-card sliders on Home / Investment Banking / Private Equity
	   keep their original 11px design — restored at the client's request.) */
	.services-section .service-card p,
	.strategy-info .strategy-text p,
	.zilla-news-content .zilla-cat,
	.timeline-item .content .text {
		font-size: 13px !important;
		line-height: 1.5;
	}

	/* "Read more" links were 15px tall — give them a proper tap area. */
	.zilla-news-content .zilla-readmore,
	.rsn-readmore {
		display: inline-block;
		padding: 10px 0;
	}

	/* Media pagination: 28px-wide page numbers → 40px squares. */
	.page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}

	/* Footer social icons: the row of five spilled past both edges on
	   360px phones. */
	footer .social-media,
	.footer-bottom-area .social-media {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center !important;
		gap: 14px 22px;
		padding-left: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	footer .social-media li,
	.footer-bottom-area .social-media li {
		margin: 0 !important;
	}

	/* Footer: links were 19px tall — comfortable 40px tap rows instead. */
	footer li > a,
	.footer-bottom-area li > a {
		display: inline-block;
		padding: 9px 0;
	}
}

/* ==========================================================================
   Page-specific fixes
   ========================================================================== */
@media (max-width: 767px) {

	/* ── About: a desktop-only nudge (-180px) pulled the intro paragraph
	   up on top of the "ABOUT ZILLA CAPITAL" title on phones ─────────── */
	body.page-template-zsm-pagesabout-php .vc_custom_1769282025583 {
		margin-top: 0 !important;
	}

	/* ── Asset Management ─────────────────────────────────────────────── */
	/* A column kept its desktop 100px left margin and ran off-screen. */
	body.page-template-zsm-pagesasset-management-php .vc_custom_1764793710191 {
		margin-left: 0 !important;
	}

	/* Carousel arrows were 18×18px. */
	.page-template-zsm-pagesasset-management-php .slider-arrows .arrow {
		width: 40px !important;
		height: 40px !important;
		font-size: 18px !important;
		line-height: 40px !important;
	}

	/* ── Research: the two boxes slide in sideways (±60px) as they
	   appear, which pushed them past the screen edge — fade only ────── */
	.zilla-isolated .section-box,
	.zilla-isolated .section-box.left,
	.zilla-isolated .section-box.right {
		transform: none !important;
		max-width: 100% !important;
	}

	.zilla-isolated .bg-text,
	.research-heading .research-bg-text {
		visibility: hidden;
	}

	/* Hero banners: the watermark is a ::before — same misprint look. */
	.page-template-zsm-pagescontact-php .custom-header::before,
	.page-template-zsm-pagesprivate-equity-php .custom-header::before,
	.page-template-zsm-pagesasset-management-php .hero-content::before {
		content: none !important;
	}

	/* ── Private Equity ───────────────────────────────────────────────── */
	/* Consultation form: one full-width column instead of two squeezed ones.
	   Its inline min-width:320px was wider than the card on a phone. */
	#zsm-pe-consult {
		min-width: 0 !important;
		flex-basis: 100% !important;
	}

	#zsm-pe-consult form,
	#zsm-pe-consult form > div:not([aria-hidden]) {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	#zsm-pe-consult input,
	#zsm-pe-consult textarea,
	#zsm-pe-consult button,
	#zsm-pe-consult form > div:not([aria-hidden]) {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex-basis: auto !important;
		box-sizing: border-box;
	}

	#zsm-pe-consult button {
		align-self: stretch !important;
		min-height: 46px;
	}

	#zsm-pe-consult textarea {
		min-height: 120px;
	}

	/* ── Asset Management ─────────────────────────────────────────────── */
	.page-template-zsm-pagesasset-management-php .cta-wrapper h1 {
		white-space: normal !important;
		font-size: 22px !important;
		line-height: 1.25 !important;
	}

	.page-template-zsm-pagesasset-management-php .wrapper > .bar {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	/* ── About: "What we offer" cards had a fixed 230px height, so longer
	   text spilled under the next card's icon ───────────────────────── */
	body.page-template-zsm-pagesabout-php .service-card {
		height: auto !important;
		min-height: 230px;
		padding-bottom: 24px !important;
	}

	/* Each card's 90px icon sticks 45px above the card, but the cards were
	   only 10px apart, so every icon covered the card above. */
	body.page-template-zsm-pagesabout-php .services-section {
		gap: 64px !important;
		padding-top: 64px !important;
	}

	/* ── Learning Academy: year filter wrapped with "2025" alone on a
	   second row — four equal buttons in one row ────────────────────── */
	.page-template-zsm-pageslearning-academy-php .tabs-inner {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.page-template-zsm-pageslearning-academy-php .tabs-inner .tab-btn {
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		min-height: 40px;
	}
}

/* ==========================================================================
   Our People  (zsm-pages/our-people.php)
   ========================================================================== */
@media (max-width: 767px) {

	/* ── Section tabs: a swipeable bar at the top ─────────────────────────
	   WPBakery turns the tabs into an accordion on phones, which buried
	   every section after the first at the very bottom of the page, in
	   white text on a pale background. */
	.page-template-zsm-pagesour-people-php .vc_tta-tabs-container {
		display: block !important;
		margin: 0 0 18px !important;
		max-width: 100%;
		overflow: hidden;
	}

	/* The page row around the tabs is overflow:hidden — a scroll box the
	   browser will still scroll sideways to bring a focused tab into view.
	   clip cannot be scrolled at all. */
	.page-template-zsm-pagesour-people-php .wpb-content-wrapper > .vc_row {
		overflow-x: clip !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-tabs-list {
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		/* !important: WPBakery's own tabs CSS forces overflow:visible, which
		   let the 612px-wide bar spill into the page row — tapping a tab then
		   scrolled the whole page sideways. */
		overflow-x: auto !important;
		overflow-y: hidden !important;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding: 0 16px;
		scrollbar-width: none;
		padding: 4px 16px 8px !important;
		margin: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-tabs-list::-webkit-scrollbar {
		display: none;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-tab {
		display: block !important;
		flex: 0 0 auto;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-tab > a {
		display: block;
		white-space: nowrap;
		padding: 11px 18px !important;
		border-radius: 999px !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
	}

	/* The accordion headings are replaced by the tab bar. */
	.page-template-zsm-pagesour-people-php .vc_tta-panel-heading {
		display: none !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-panel:not(.vc_active) {
		display: none !important;
	}

	/* ── Two cards per row ─────────────────────────────────────────────── */
	.page-template-zsm-pagesour-people-php .vc_tta-panel.vc_active .vc_tta-panel-body {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
		padding: 0 16px !important;
		border: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-panel-body::before,
	.page-template-zsm-pagesour-people-php .vc_tta-panel-body::after {
		content: none !important;
		display: none !important;
	}

	/* Anything that is not a row of cards spans both columns. */
	.page-template-zsm-pagesour-people-php .vc_tta-panel-body > * {
		grid-column: 1 / -1;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Rows of cards dissolve, so every card flows into the one 2-column grid
	   (a row of 3 would otherwise leave a hole after its third card). */
	.page-template-zsm-pagesour-people-php .vc_tta-panel-body > .zsmp-people-row {
		display: contents;
	}

	/* Sub-group wrappers dissolve too, so their cards join the same grid. */
	.page-template-zsm-pagesour-people-php .zsmp-group {
		display: contents;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group > * {
		grid-column: 1 / -1;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group > .zsmp-people-row {
		display: contents;
	}

	/* Sub-group buttons (e.g. Investment Banking / Core Services) at the top
	   of a tab — tap one to show only that group. */
	.page-template-zsm-pagesour-people-php .zsmp-subnav {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin: 2px 0 6px;
	}

	.page-template-zsm-pagesour-people-php .zsmp-subnav button {
		min-height: 40px;
		padding: 8px 16px;
		border: 1.5px solid #102649;
		border-radius: 999px;
		background: #fff;
		color: #102649;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		cursor: pointer;
	}

	.page-template-zsm-pagesour-people-php .zsmp-subnav button.is-active {
		background: #102649;
		color: #fff;
	}

	/* A group shown on its own doesn't need a gap above its label. */
	.page-template-zsm-pagesour-people-php .zsmp-subnav ~ .zsmp-group:not([hidden]) .zsmp-group-row {
		margin-top: 14px !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row::before,
	.page-template-zsm-pagesour-people-php .zsmp-people-row::after {
		content: none !important;
		display: none !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row > .zsmp-spacer {
		display: none !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row > .wpb_column {
		grid-column: auto;
		width: auto !important;
		float: none !important;
		min-width: 0;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row .vc_column-inner,
	.page-template-zsm-pagesour-people-php .zsmp-people-row .wpb_wrapper,
	.page-template-zsm-pagesour-people-php .zsmp-people-row .wpb_content_element {
		padding: 0 !important;
		margin: 0 !important;
		height: 100%;
	}

	/* Dashboard "grid" layout variant: also two per row on phones. */
	.page-template-zsm-pagesour-people-php .zsmp-people-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px 12px !important;
		max-width: none !important;
		padding: 0 !important;
		margin-top: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-cell,
	.page-template-zsm-pagesour-people-php .zsmp-cell.is-big {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* ── The card ──────────────────────────────────────────────────────── */
	.page-template-zsm-pagesour-people-php .popup-item {
		margin: 0 !important;
		width: 100% !important;
		height: 100%;
	}

	.page-template-zsm-pagesour-people-php .profile-card {
		max-width: none !important;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
	}

	.page-template-zsm-pagesour-people-php .profile-card:hover {
		transform: none;
	}

	.page-template-zsm-pagesour-people-php .profile-card > img {
		aspect-ratio: 4 / 5 !important;
		height: auto !important;
		object-position: top center;
		flex: 0 0 auto;
	}

	.page-template-zsm-pagesour-people-php .card-info {
		flex: 1 1 auto;
		padding: 10px 10px 12px;
		min-height: 0;
	}

	.page-template-zsm-pagesour-people-php .card-info h3 {
		font-size: 15px;
		line-height: 1.25;
	}

	.page-template-zsm-pagesour-people-php .card-info p {
		font-size: 12px;
		line-height: 1.35;
		margin-top: 3px;
	}

	/* ── Spacing: desktop's 100–200px gaps, phone-sized ────────────────── */
	.page-template-zsm-pagesour-people-php .zsmp-group-row {
		margin-top: 22px !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group-row > .wpb_column:empty,
	.page-template-zsm-pagesour-people-php .zsmp-group-row > .wpb_column:not(:has(.vc_btn3)) {
		display: none;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group-row .vc_btn3-container {
		margin: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-bottom-space {
		padding-bottom: 36px !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-showall-wrap {
		margin-top: 8px;
	}

	/* Bio pop-up: a readable sheet with a reachable close button. */
	.popup-modal .popup-card {
		padding: 22px 18px 18px;
	}

	.popup-modal .close-popup {
		top: 8px;
		right: 10px;
		width: 44px;
		height: 44px;
		font-size: 30px;
		line-height: 44px;
	}

	.popup-modal .popup-text {
		font-size: 16px;
		text-align: left;
	}
}

/* Small phones (≤ 380px): the Asset Management governance circle is a fixed
   350px diagram with its labels positioned inside it, a few px wider than the
   screen — scale it down rather than re-flowing it. */
@media (max-width: 380px) {
	.page-template-zsm-pagesasset-management-php .circle-wrapper {
		transform: scale(0.94);
		transform-origin: center top;
	}
}

/* Very small phones (≤ 340px, e.g. iPhone SE 1st gen): keep two columns but
   tighten the gutters. */
@media (max-width: 340px) {
	.page-template-zsm-pagesour-people-php .vc_tta-panel.vc_active .vc_tta-panel-body {
		gap: 12px 8px;
		padding: 0 10px !important;
	}
}

/* ==========================================================================
   Tablets only (768–1024px) — WPBakery switches to its desktop grid here,
   but the desktop sizes don't fit.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

	/* ── Our People: five tiny 95px cards per row → three readable ones.
	   Same approach as phones: rows dissolve into one grid. ─────────── */
	.page-template-zsm-pagesour-people-php .vc_tta-panel.vc_active .vc_tta-panel-body {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px 18px;
		padding: 0 32px !important;
		max-width: 820px;
		margin: 0 auto;
		border: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-panel-body::before,
	.page-template-zsm-pagesour-people-php .vc_tta-panel-body::after,
	.page-template-zsm-pagesour-people-php .zsmp-people-row::before,
	.page-template-zsm-pagesour-people-php .zsmp-people-row::after {
		content: none !important;
		display: none !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-panel-body > * {
		grid-column: 1 / -1;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .vc_tta-panel-body > .zsmp-people-row,
	.page-template-zsm-pagesour-people-php .zsmp-group,
	.page-template-zsm-pagesour-people-php .zsmp-group > .zsmp-people-row {
		display: contents;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row > .zsmp-spacer {
		display: none !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row > .wpb_column {
		grid-column: auto;
		width: auto !important;
		float: none !important;
		min-width: 0;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-row .vc_column-inner,
	.page-template-zsm-pagesour-people-php .zsmp-people-row .wpb_wrapper,
	.page-template-zsm-pagesour-people-php .zsmp-people-row .wpb_content_element {
		padding: 0 !important;
		margin: 0 !important;
		height: 100%;
	}

	.page-template-zsm-pagesour-people-php .zsmp-people-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 22px 18px !important;
		max-width: none !important;
		padding: 0 !important;
		margin-top: 0 !important;
	}

	.page-template-zsm-pagesour-people-php .popup-item {
		margin: 0 !important;
		width: 100% !important;
		height: 100%;
	}

	.page-template-zsm-pagesour-people-php .profile-card {
		max-width: none !important;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.page-template-zsm-pagesour-people-php .profile-card > img {
		aspect-ratio: 4 / 5 !important;
		height: auto !important;
		object-position: top center;
	}

	.page-template-zsm-pagesour-people-php .card-info {
		flex: 1 1 auto;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group-row {
		margin-top: 36px !important;
	}

	.page-template-zsm-pagesour-people-php .zsmp-group-row > .wpb_column:not(:has(.vc_btn3)) {
		display: none;
	}

	.page-template-zsm-pagesour-people-php .zsmp-bottom-space {
		padding-bottom: 60px !important;
	}

	/* The first row's 100px desktop top margin. */
	.page-template-zsm-pagesour-people-php .vc_tta-panel-body > .zsmp-people-row:first-child,
	.page-template-zsm-pagesour-people-php .vc_tta-panels-container {
		margin-top: 12px !important;
	}

	/* ── Home: the three stat boxes (897px wide in total) sat in one
	   non-wrapping row inside 748px, so two hung off the sides. ─────── */
	.page-template-zsm-pageshome-php .stats-section {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 24px 32px;
	}

	.page-template-zsm-pageshome-php .stats-section .stat-box {
		flex: 0 1 auto !important;
		max-width: 100%;
	}

	/* ── Asset Management: the 450px governance circle sat in a half-width
	   column and ran off the right edge — stack the two columns. ────── */
	.page-template-zsm-pagesasset-management-php .vc_row:has(.circle-wrapper) > .wpb_column {
		width: 100% !important;
		float: none !important;
	}

	.page-template-zsm-pagesasset-management-php .circle-wrapper {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 100%;
	}

	/* The selected product's info box floated on top of the icon row —
	   place it underneath instead. */
	.page-template-zsm-pagesasset-management-php .strategy-section {
		flex-direction: column !important;
		align-items: center !important;
	}

	.page-template-zsm-pagesasset-management-php .strategy-section > .strategy-icons {
		order: 1;
		width: 100%;
	}

	.page-template-zsm-pagesasset-management-php .strategy-section > #info-box {
		order: 2;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: min(560px, calc(100% - 48px)) !important;
		margin: 24px auto 0 !important;
	}

	/* Stacked, the risk list's desktop 100px left margin pushed it off-screen. */
	body.page-template-zsm-pagesasset-management-php .vc_custom_1764793710191 {
		margin-left: 0 !important;
	}

	/* ── Asset Management: 160px icons in 130px columns overlapped. ──── */
	.page-template-zsm-pagesasset-management-php .strategy-item .strategy-icon {
		width: 96px !important;
		height: 96px !important;
		max-width: 100%;
	}

	.page-template-zsm-pagesasset-management-php .strategy-item .strategy-icon img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain;
	}
}