/*
 * Homepage middle (U3): idea banner 369:2782, video reels 371:2988, showroom 369:2784, second
 * photo band 374:3251, Kaip dirbame 374:3094. Every value is read from frame 326:1057 (nodes.json);
 * y values below are the frame's.
 *
 * Vertical rhythm: the gap to the next section is this section's bottom padding (U1 contract):
 *   idea 4415 -> reels 4559 (144), reels 5070 -> showroom 5182 (112), showroom 5685 -> band 5828
 *   (143), band 6330 -> Kaip dirbame 6474 (144), Kaip dirbame 7092 -> lighting 7236 (144).
 * Below 782 px (no mobile frame; intake reference pass) those gaps are halved.
 */

/* ---- The gold pill button (369:2779 and 369:2791, both "green 32") ----
 * 53 tall, radius 47.14, padding 11.78 / 26.51; label Geist 600 20.62/29.46 white, centred.
 * Fill: #cf9d45 under a diamond gradient (#caa13f .. #c59834 .. #caa040). CSS has no diamond
 * gradient; the rendered design reads flat #caa140 over the left 58 %, darkest #c59834 near 84 %,
 * #c79b38 at the right edge (sampled from the frame render), so that is what is drawn here.
 * Stroke 1.47 inside, white 20 % at the top fading to nothing (same as U1's consult pill).
 * The pill is the button block's wrapper; the link is the label and stretches over the pill.
 * The drawn width is a MINIMUM and the height too: a longer label the client types grows the
 * pill (and wraps inside 100 %) instead of spilling out of it. */
.dc-section .mn-hm-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	min-height: 53px;
	margin: 0;
	padding: 11.78px 26.51px;
	border-radius: 47.14px;
	background-color: var(--wp--preset--color--c-12);
	background-image: linear-gradient(90deg, #caa140 0%, #caa140 58%, #c59834 84%, #c79b38 100%);
}

.dc-section .mn-hm-button::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.47px;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.dc-section .mn-hm-button .wp-block-button__link {
	display: block;
	flex: 0 1 auto;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: 20.62px;
	line-height: 29.46px;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.dc-section .mn-hm-button .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 47.14px;
}

/* ---- Idea banner 369:2782: 1440 x 784 photo, content centred, 172 above and below ---- */

.mn-idea.dc-section {
	padding-bottom: 144px;
}

.mn-idea .mn-idea__banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 784px;
	overflow: hidden;
}

.mn-idea .mn-idea__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.mn-idea .mn-idea__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Fills over the photo (367:2761): black 20 %, then a linear gradient black -> transparent whose
 * handles convert to 334.02 deg with stops at -3.26 % and 57.17 % on the 1440 x 784 box. */
.mn-idea .mn-idea__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgb(0 0 0 / 0.2);
	background-image: linear-gradient(334.02deg, rgb(0 0 0 / 1) -3.26%, rgb(0 0 0 / 0) 57.17%);
	pointer-events: none;
}

/* The photo's 1 px inside stroke: white 20 % at the top fading to nothing at the bottom. */
.mn-idea .mn-idea__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 1px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.mn-idea .mn-idea__content {
	position: relative;
	z-index: 2;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 172px var(--mn-gutter);
	text-align: center;
}

/* The content box covers the photo; only its blocks take clicks, so the photo underneath can
 * still be selected and replaced in the editor. */
.mn-idea .mn-idea__content > * {
	pointer-events: auto;
}

/* Pill 368:2776: the box is the group (Rectangle 60: 272 x 41.85, #04448C, radius 20.92, 0.84
 * inside stroke like the button's), the label its paragraph (367:2773: Geist 600 16.74/21.76 white,
 * 27.62 / 10.04 in). */
.mn-idea .mn-idea__pill {
	position: relative;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	min-height: 41.85px;
	margin: 0;
	padding: 10.04px 27.62px;
	border-radius: 20.92px;
	background-color: var(--wp--preset--color--c-03);
}

.mn-idea .mn-idea__pill-text {
	position: relative;
	margin: 0;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: 16.74px;
	line-height: 21.76px;
	letter-spacing: 0;
	text-align: center;
}

.mn-idea .mn-idea__pill::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 0.84px;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* Heading 367:2769: Geist 500 83/96 white, 882 wide, 16.15 under the pill. Its drawn text box is
 * 208 tall (two 96 px lines + 16), so the box keeps those 16 px. */
.mn-idea .mn-idea__title {
	max-width: 882px;
	margin: 16.15px 0 0;
	padding-bottom: 16px;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-19);
	line-height: 96px;
	letter-spacing: 0;
}

/* Line 367:2771: Geist 500 24/30 white, 483 wide, 16 under the heading's box (32 under its lines). */
.mn-idea .mn-idea__text {
	max-width: 483px;
	margin: 16px 0 0;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-09);
	line-height: 30px;
	letter-spacing: 0;
}

.mn-idea .mn-idea__actions {
	align-self: stretch;
	justify-content: center;
	gap: 0;
	margin: 45px 0 0;
}

.mn-idea .mn-idea__button {
	min-width: 389.87px;
}

/* ---- Video reels 371:2988: five portrait tiles, 1357 wide at 1440 (42 px each side) ----
 * 241 x 429.1 | 262.29 x 467 | 287 x 511 | 262.29 x 467 | 241 x 429.1, radius 20, centred on one
 * line, 15.86 between them. Widths are shares of the 1357 row so the row scales below 1397 px.
 *
 * V2 (boss, 2026-10-13: use every reel, rotating carousel-style): each tile is a core/video (the
 * client's reel with its poster) plus the drawn play icon. reels.js shows five at a time in the
 * drawn sizes by POSITION (data-slot 1-5, the middle one larger), plays the middle one muted while
 * the row is in view (never under reduced motion), turns the row when it ends, and stops after one
 * full cycle; a press on a playing reel pauses it, a press on any other tile brings it to the middle
 * and plays it muted (R6b: sound only through the speaker button on the playing tile, no reel ever
 * has the browser's controls).
 * Below 782 px every tile is a swipe card (shared carousel) and the first one in place plays.
 * Without JavaScript: the tiles in DOM order, the first five in the drawn sizes, the rest small,
 * each showing its poster and no drawn icon; nothing plays. */
.mn-reels.dc-section {
	padding-bottom: 112px;
}

.mn-reels .mn-reels__track {
	box-sizing: border-box;
	width: min(1357px, 100% - 2 * var(--mn-gutter));
	margin: 0 auto;
	align-items: center;
	column-gap: 1.1684%;
}

.mn-reels .mn-reel {
	position: relative;
	flex: 0 0 auto;
	width: 17.7598%;
	aspect-ratio: 241 / 429.1;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--wp--preset--color--c-02);
}

.mn-reels .mn-reel:nth-child(2),
.mn-reels .mn-reel:nth-child(4) {
	width: 19.3286%;
	aspect-ratio: 262.29 / 467;
}

.mn-reels .mn-reel:nth-child(3) {
	width: 21.1496%;
	aspect-ratio: 287 / 511;
}

/* the video (a reel and its poster) fills the tile */
.mn-reels .mn-reel .wp-block-video {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}

.mn-reels .mn-reel .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

/* Play icon (370:2877 81, 370:2871 88, 370:2864 97): one drawn glyph, centred, 33.6-33.8 % of
 * its tile; black 40 % disc, white triangle, colours inside the SVG. reels.js makes it the tile's
 * play control (its name is the image's alt); without the script it only shows, and the video's
 * own controls play the reel. */
.mn-reels .mn-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 33.61%;
	margin: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border-radius: 50%;
	transition: opacity 0.2s ease;
}

.mn-reels .mn-reel:nth-child(2) .mn-reel__play,
.mn-reels .mn-reel:nth-child(4) .mn-reel__play {
	width: 33.551%;
}

.mn-reels .mn-reel:nth-child(3) .mn-reel__play {
	width: 33.798%;
}

.mn-reels .mn-reel__play img {
	display: block;
	width: 100%;
	height: auto;
}

.mn-reels.is-ready .mn-reel {
	cursor: pointer;
}

.mn-reels.is-ready .mn-reel__play {
	pointer-events: auto;
}

/* playing: the icon steps aside, but it stays the pause control - faint under a mouse, whole with
 * keyboard focus (its ring needs it). A press on a playing reel pauses it (reels.js, R4). */
.mn-reels .mn-reel.is-playing .mn-reel__play {
	opacity: 0;
}

@media (hover: hover) {
	.mn-reels.is-ready .mn-reel.is-playing:hover .mn-reel__play {
		opacity: 0.5;
	}
}

/* as specific as the hover rule and after it, so keyboard focus wins under a resting mouse */
.mn-reels.is-ready .mn-reel.is-playing .mn-reel__play:focus-visible {
	opacity: 1;
}

/* Only reels.js can play a reel (the videos carry no browser controls, R6b), so until it has wired
 * the row (is-ready) - without JavaScript, or with the script blocked or failed - a play icon would
 * promise what the tile cannot do: it is not shown. Not in the block editor (no script runs there, and
 * the client must still be able to select the icon and edit its alt). */
.mn-reels:not(.is-ready):not(.block-editor-block-list__block) .mn-reel__play {
	display: none;
}

/* ---- Sound (R6b): the speaker button on the playing tile, the only way to sound ----
 * Not drawn: the reference pass (MADARA, a speaker on the playing tile only). Built like the drawn
 * play mark - the same black 40 % disc and white glyph, inside the SVGs - 44 px (a touch target),
 * 12 px in from the tile's bottom right corner, so it never covers the centred play mark. The two
 * icons are block content in the section's .mn-reels__sound group (their alts name the button);
 * reels.js puts a button with both into each tile, and the one that shows is the one that names it:
 * muted -> "turn sound on", sound on -> "turn sound off". Shown only while its reel plays. */
.mn-reels .mn-reels__sound:not(.block-editor-block-list__block) {
	display: none;
}

.mn-reels .mn-reel__sound {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.mn-reels.is-ready .mn-reel.is-playing .mn-reel__sound {
	display: block;
}

.mn-reels .mn-reel__sound img {
	display: block;
	width: 44px;
	height: 44px;
}

.mn-reels .mn-reel__sound .mn-reel__sound-mute,
.mn-reels .mn-reel__sound.is-on .mn-reel__sound-unmute {
	display: none;
}

.mn-reels .mn-reel__sound.is-on .mn-reel__sound-mute {
	display: block;
}

/* An Embed block (a video from elsewhere) placed in a tile fills it the same way. */
.mn-reels .mn-reel .wp-block-embed {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}

.mn-reels .mn-reel .wp-block-embed__wrapper {
	position: absolute;
	inset: 0;
}

.mn-reels .mn-reel .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.mn-reels .mn-reel .wp-block-embed .wp-block-embed__wrapper::before {
	display: none;
}

.mn-reels .mn-reel .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 0;
}

.mn-reels .mn-reel:has(.wp-block-embed) .mn-reel__play {
	display: none;
}

/* The rotating row (reels.js, 782 px and up): five tiles shown, sized by their place in the row. */
@media (min-width: 782px) {
	.mn-reels.is-rotating .mn-reels__track {
		overflow: visible;
		justify-content: center;
	}

	.mn-reels.is-rotating .mn-reel {
		display: none;
	}

	.mn-reels.is-rotating .mn-reel[data-slot] {
		display: block;
		width: 17.7598%;
		aspect-ratio: 241 / 429.1;
	}

	.mn-reels.is-rotating .mn-reel[data-slot="2"],
	.mn-reels.is-rotating .mn-reel[data-slot="4"] {
		width: 19.3286%;
		aspect-ratio: 262.29 / 467;
	}

	.mn-reels.is-rotating .mn-reel[data-slot="3"] {
		width: 21.1496%;
		aspect-ratio: 287 / 511;
	}

	.mn-reels.is-rotating .mn-reel[data-slot] .mn-reel__play {
		width: 33.61%;
	}

	.mn-reels.is-rotating .mn-reel[data-slot="2"] .mn-reel__play,
	.mn-reels.is-rotating .mn-reel[data-slot="4"] .mn-reel__play {
		width: 33.551%;
	}

	.mn-reels.is-rotating .mn-reel[data-slot="3"] .mn-reel__play {
		width: 33.798%;
	}
}

/* ---- above 1440: the reels as a balanced full-width band (R7b; assortment.css explains the rule
 * for every row) ----
 * The row runs from the 48 px band margin to the 48 px margin on the right; the drawn five tiles
 * (shares of the row, above) fill it: 0.99 x drawn at 1441, 1.35 x at 1927. From 1928 reels.js
 * shows SEVEN tiles (data-mn-slots="7" on the section, when there are more than seven reels): the
 * drawn sizes continued outward one step - 221.44 | 241 | 262.29 | 287 | 262.29 | 241 | 221.44, the
 * new outer tile smaller than 241 by the drawn 241 : 262.29 step, the drawn 15.86 gap - as shares of
 * that 1831.62 px row, so 1.0 x drawn at 1928 and 1.35 x at 2560. The middle tile stays the largest
 * and plays as before (R6b item 2). Without the script, or with seven reels or fewer, the five-tile
 * row stops growing at 1.35 x (1832 px) and centres. */
@media (min-width: 1440.02px) {
	.mn-reels .mn-reels__track {
		--mn-band: 48px;
		width: min(1832px, 100% - 2 * var(--mn-band));
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reels__track {
		width: calc(100% - 2 * var(--mn-band));
		column-gap: 0.8659%;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="1"],
	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="7"] {
		width: 12.0899%;
		aspect-ratio: 241 / 429.1;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="2"],
	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="6"] {
		width: 13.1577%;
		aspect-ratio: 241 / 429.1;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="3"],
	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="5"] {
		width: 14.3201%;
		aspect-ratio: 262.29 / 467;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="4"] {
		width: 15.6692%;
		aspect-ratio: 287 / 511;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot] .mn-reel__play {
		width: 33.61%;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="3"] .mn-reel__play,
	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="5"] .mn-reel__play {
		width: 33.551%;
	}

	.mn-reels.is-rotating[data-mn-slots="7"] .mn-reel[data-slot="4"] .mn-reel__play {
		width: 33.798%;
	}
}

/* ---- Showroom 369:2784: text column 526 left, photo 561 x 503 right, inside 1176 ---- */

.mn-showroom.dc-section {
	padding-bottom: 143px;
}

.mn-showroom .mn-showroom__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	width: min(var(--mn-content), 100% - 2 * var(--mn-gutter));
	margin: 0 auto;
}

.mn-showroom .mn-showroom__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 1 526px;
	min-width: 0;
}

/* Label 369:2786: Geist 500 18/23.4 #04448C. */
.mn-showroom .mn-showroom__label {
	margin: 0;
	color: var(--wp--preset--color--c-03);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 23.4px;
	letter-spacing: 0;
}

/* Heading 369:2788: Geist 500 50/65 #CD9F3F, 12.6 under the label. */
.mn-showroom .mn-showroom__title {
	margin: 12.6px 0 0;
	color: var(--wp--preset--color--c-05);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-16);
	line-height: 65px;
	letter-spacing: 0;
}

/* Text 369:2787: Geist 500 16/24 #424242, 21 under the heading; one paragraph as drawn, its blank
 * line a <br><br> (as U1's consult text). */
.mn-showroom .mn-showroom__text {
	margin: 21px 0 0;
	color: var(--wp--preset--color--c-02);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 24px;
	letter-spacing: 0;
}

.mn-showroom .mn-showroom__actions {
	align-self: stretch;
	gap: 0;
	margin: 30px 0 0;
}

/* 266 wide; the drawn label (221) sits 22.5 in, inside the auto-layout's 26.51 padding. */
.mn-showroom .mn-showroom__button {
	min-width: 266px;
	padding-inline: 22.5px;
}

/* Photo 369:2794: 561 x 503, radius 20 (its top fill is the photo with the logo on it). */
.mn-showroom .mn-showroom__photo {
	flex: 0 1 561px;
	min-width: 0;
	aspect-ratio: 561 / 503;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

.mn-showroom .mn-showroom__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 20px;
}

/* ---- Photo band 374:3251: full width, 1440 x 502 at 1440, scales with the width ---- */

.mn-band2.dc-section {
	padding-bottom: 144px;
}

.mn-band2 .mn-band2__photo {
	aspect-ratio: 1440 / 502;
	margin: 0;
	overflow: hidden;
}

.mn-band2 .mn-band2__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* ---- Kaip dirbame 374:3094: heading, then four white cards 2 x 2 ----
 * Heading 371:2886 Geist 500 50/65 #CD9F3F centred; cards 52 below it. Grid 1198.3 wide, centred
 * (x 120.85 at 1440), columns 11.7 apart, rows 11. Card 593.3 x 245, white, radius 15: title at
 * 45 / 35 in (Geist 500 28/36.4 #424242, 355.12 wide), text 17.2 under it (Geist 400 16.8/25.2
 * #424242, 333 wide), photo 159 x 183 radius 15 at 34 from the top and 33.3 from the right. */
.mn-how.dc-section {
	padding-bottom: 144px;
}

.mn-how .mn-how__title {
	margin: 0;
	padding-inline: var(--mn-gutter);
	text-align: center;
	color: var(--wp--preset--color--c-05);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-16);
	line-height: 65px;
	letter-spacing: 0;
}

.mn-how .mn-how__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 11.7px;
	row-gap: 11px;
	width: min(1198.3px, 100% - 2 * var(--mn-gutter));
	margin: 52px auto 0;
}

.mn-how .mn-how__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 159px;
	column-gap: 0.88px;
	align-items: start;
	box-sizing: border-box;
	min-height: 245px;
	margin: 0;
	padding: 34px 33.3px 28px 45px;
	border-radius: 15px;
	background-color: var(--wp--preset--color--c-01);
}

.mn-how .mn-how__body {
	padding-top: 1px;
}

.mn-how .mn-how__card-title {
	margin: 0;
	color: var(--wp--preset--color--c-02);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-12);
	line-height: 36.4px;
	letter-spacing: 0;
}

.mn-how .mn-how__text {
	max-width: 333px;
	margin: 17.2px 0 0;
	color: var(--wp--preset--color--c-02);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: 16.8px;
	line-height: 25.2px;
	letter-spacing: 0;
}

.mn-how .mn-how__photo {
	width: 159px;
	aspect-ratio: 159 / 183;
	margin: 0;
	border-radius: 15px;
	overflow: hidden;
}

.mn-how .mn-how__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 15px;
}

/* ---- Narrower than the frame (no frame drawn; intake reference pass) ---- */

/* Below 1100 px two cards side by side would squeeze the text column under 286 px, and the
 * showroom heading's drawn first line (468 px at 50 px) would wrap: cards go to one column of the
 * drawn card width, the showroom stacks with the text first. */
@media (max-width: 1099.98px) {
	.mn-how .mn-how__grid {
		grid-template-columns: minmax(0, 593.3px);
		justify-content: center;
	}

	.mn-showroom .mn-showroom__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.mn-showroom .mn-showroom__copy {
		flex: 0 0 auto;
	}

	.mn-showroom .mn-showroom__photo {
		flex: 0 0 auto;
		width: 100%;
		max-width: 561px;
	}
}

/* Below 1024 px the 83 px banner heading's second line (777 px) no longer fits: 64/74 (s17). */
@media (max-width: 1023.98px) {
	.mn-idea .mn-idea__title {
		font-size: var(--wp--preset--font-size--s-17);
		line-height: 74px;
	}
}

@media (max-width: 781.98px) {
	.mn-idea.dc-section,
	.mn-showroom.dc-section,
	.mn-band2.dc-section,
	.mn-how.dc-section {
		padding-bottom: 72px;
	}

	.mn-reels.dc-section {
		padding-bottom: 56px;
	}

	.mn-idea .mn-idea__banner {
		min-height: 0;
	}

	.mn-idea .mn-idea__content {
		padding-block: 80px;
	}

	.mn-idea .mn-idea__title {
		padding-bottom: 0;
		font-size: 40px;
		line-height: 46px;
	}

	.mn-idea .mn-idea__text {
		margin-top: 20px;
		font-size: var(--wp--preset--font-size--s-05);
		line-height: 26px;
	}

	.mn-idea .mn-idea__actions {
		align-self: stretch;
		margin-top: 32px;
	}

	.mn-idea .mn-idea__button {
		width: 100%;
		min-width: 0;
		max-width: 389.87px;
	}

	/* Reels: swipe cards, one size, the next tile peeking in (shared carousel). */
	.mn-reels .mn-reels__track {
		width: 100%;
		padding-inline: var(--mn-gutter);
		scroll-padding-inline: var(--mn-gutter);
		column-gap: 16px;
	}

	.mn-reels .mn-reel,
	.mn-reels .mn-reel:nth-child(2),
	.mn-reels .mn-reel:nth-child(3),
	.mn-reels .mn-reel:nth-child(4) {
		width: min(64vw, 287px);
		aspect-ratio: 287 / 511;
	}

	.mn-reels .mn-reel .mn-reel__play,
	.mn-reels .mn-reel:nth-child(2) .mn-reel__play,
	.mn-reels .mn-reel:nth-child(4) .mn-reel__play {
		width: 33.798%;
	}

	.mn-showroom .mn-showroom__title,
	.mn-how .mn-how__title {
		font-size: var(--wp--preset--font-size--s-13);
		line-height: 46px;
	}

	.mn-showroom .mn-showroom__inner {
		gap: 32px;
	}

	.mn-how .mn-how__grid {
		margin-top: 32px;
	}
}

/* Cards narrower than 600 px: title beside the photo, text under both, full width. */
@media (max-width: 599.98px) {
	.mn-how .mn-how__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mn-how .mn-how__card {
		grid-template-columns: minmax(0, 1fr) clamp(72px, 30%, 110px);
		grid-template-areas: "title photo";
		column-gap: 14px;
		min-height: 0;
		padding: 24px 20px;
	}

	.mn-how .mn-how__body {
		display: contents;
	}

	.mn-how .mn-how__card-title {
		grid-area: title;
		align-self: center;
		font-size: var(--wp--preset--font-size--s-05);
		line-height: 26px;
	}

	/* The drawn line break in card 01's title is hidden here; the markup keeps the drawn space
	 * before it ("o ne <br>tik"), so the words stay apart. Keep that space when editing. */
	.mn-how .mn-how__card-title br {
		display: none;
	}

	.mn-how .mn-how__photo {
		grid-area: photo;
		width: 100%;
	}

	/* Every text paragraph spans both columns on its own row under the title and photo, so a
	 * paragraph the client adds flows under the one before it (a named area would stack them all in
	 * one cell: 75.6 px overlap at 390, R2). */
	.mn-how .mn-how__text {
		grid-column: 1 / -1;
		max-width: none;
		margin-top: 16px;
	}
}