.hopopup-project-single--story > .hopopup-project-single__hero { margin: 0; }
.hopopup-project-single--story .hopopup-project-single__header { margin-top: 24px; text-align: left; max-width: none; }
.hopopup-project-single--story .hopopup-project-single__text--primary { max-width: none; }
.hopopup-project-story {
	--story-viewport: var(--hopopup-story-viewport, 100vw);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--hopopup-story-gap, 64px);
	width: var(--story-viewport);
	max-width: none;
	margin-inline-start: var(--hopopup-story-offset, calc(50% - 50vw));
	padding-block: var(--hopopup-story-padding, 30px);
}
.hopopup-project-story *, .hopopup-project-story *::before, .hopopup-project-story *::after { box-sizing: border-box; }

/*
 * La hauteur choisie dans Core Style est une vraie limite du bloc.
 * Quand le contenu naturel dépasse cette limite, le JS ajoute
 * .is-height-constrained : les médias se contractent alors dans l'espace
 * disponible au lieu de pousser le bloc au-delà de la hauteur prévue.
 */
.hopopup-story-block {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	min-width: 0;
	min-height: 0;
	width: 100%;
	max-height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
}
.hopopup-story-block[hidden] { display: none !important; }
.hopopup-story-block.is-height-constrained {
	height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
}
.hopopup-story-block.hopopup-story-block--image-text-below {
	height: auto;
	max-height: none;
	overflow: visible;
}
.hopopup-story-block--narrow {
	width: min(100%, max(calc(var(--hopopup-story-width, 60) * 1vw), var(--hopopup-story-min-width, 700px)));
	padding-inline: var(--hopopup-story-gutter, 15px);
}
.hopopup-story-block--container {
	width: min(100%, var(--wp--style--global--content-size, var(--container-max-width, 1200px)));
	padding-inline: var(--hopopup-story-gutter, 15px);
}

.hopopup-story-block__media {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
	object-fit: contain;
	margin-inline: auto;
	border-radius: var(--hopopup-story-media-radius, 0px);
}

/*
 * Un bloc image en pleine largeur est un visuel immersif : il occupe
 * toujours la hauteur configurée et reste bord à bord horizontalement.
 * Le recadrage se fait au centre, sans bandes latérales.
 *
 * Cela vaut aussi pour image + texte / CTA : le média prend l'espace
 * disponible restant dans le bloc, tandis que le texte conserve sa place.
 */
.hopopup-story-block--full:is(
	.hopopup-story-block--image,
	.hopopup-story-block--image_text,
	.hopopup-story-block--image_cta
) {
	height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
	max-height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
}

.hopopup-story-block--full:is(
	.hopopup-story-block--image,
	.hopopup-story-block--image_text,
	.hopopup-story-block--image_cta
) > .hopopup-story-block__media {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 50%;
}
.hopopup-story-block--image > .hopopup-story-block__media {
	object-fit: var(--hopopup-story-image-fit, cover);
	object-position: var(--hopopup-story-image-position, 50% 50%);
	border-radius: var(--hopopup-story-image-radius, var(--hopopup-story-media-radius, 0px));
}
.hopopup-story-block--image_cta > .hopopup-story-block__media {
	object-fit: var(--hopopup-story-cta-image-fit, cover);
	object-position: var(--hopopup-story-cta-image-position, 50% 50%);
	border-radius: var(--hopopup-story-cta-image-radius, var(--hopopup-story-media-radius, 0px));
}
.hopopup-story-block.is-height-constrained > .hopopup-story-block__media {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	max-height: none;
}

/*
 * Le fond appartient au conteneur vidéo, pas à la vidéo elle-même.
 * Si la hauteur disponible impose une vidéo moins large que le bloc,
 * les bandes latérales restent donc noires.
 */
.hopopup-story-video {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
	min-height: 0;
	margin-inline: auto;
	background: var(--hopopup-story-video-background, #000);
	overflow: hidden;
	border-radius: var(--hopopup-story-video-radius, var(--hopopup-story-media-radius, 0px));
}
.hopopup-story-video > video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: var(--hopopup-story-video-fit, contain);
	border-radius: 0;
}
.hopopup-story-block.is-height-constrained > .hopopup-story-video {
	flex: 1 1 auto;
	height: 100%;
	max-height: none;
}
.hopopup-story-block.is-height-constrained > .hopopup-story-video > video {
	height: 100%;
}

.hopopup-story-gallery {
	display: grid;
	grid-template-columns: repeat(var(--hopopup-story-gallery-count, 3), minmax(0, 1fr));
	align-items: center;
	gap: var(--hopopup-story-gallery-gap, 20px);
	width: 100%;
	max-height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
	min-height: 0;
}
.hopopup-story-gallery__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
	overflow: hidden;
}
.hopopup-story-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: calc(var(--hopopup-story-block-max-height, 95) * 1vh);
	object-fit: var(--hopopup-story-gallery-fit, contain);
	border-radius: var(--hopopup-story-gallery-radius, var(--hopopup-story-media-radius, 0px));
}
.hopopup-story-block.is-height-constrained > .hopopup-story-gallery {
	flex: 1 1 auto;
	height: 100%;
	max-height: none;
	grid-auto-rows: minmax(0, 1fr);
}
.hopopup-story-block.is-height-constrained .hopopup-story-gallery__image {
	height: 100%;
	max-height: 100%;
}

.hopopup-story-block__heading { width: min(100%, 1200px); margin: 0 auto 24px; padding-inline: var(--hopopup-story-gutter, 15px); font-size: var(--hopopup-story-heading-size, 24px); }
.hopopup-story-block__text {
	margin: var(--hopopup-story-text-gap, 32px) auto 0;
	padding: var(--hopopup-story-text-padding, 0px);
	color: var(--hopopup-story-text-color, inherit);
	font-size: var(--hopopup-story-text-size, 18px);
	line-height: var(--hopopup-story-text-line-height, 1.5);
	text-align: var(--hopopup-story-text-align, left);
}
.hopopup-story-block--full > .hopopup-story-block__text { width: min(calc(100% - 30px), max(calc(var(--hopopup-story-width, 60) * 1vw), var(--hopopup-story-min-width, 700px))); }
.hopopup-story-block__text > :first-child { margin-top: 0; }
.hopopup-story-block__text > :last-child { margin-bottom: 0; }
.hopopup-story-block.is-height-constrained > .hopopup-story-block__text { flex: 0 1 auto; min-height: 0; overflow: auto; }
.hopopup-story-block.is-height-constrained > .hopopup-story-block__action { flex: 0 0 auto; }
.hopopup-story-block__action { display: flex; justify-content: var(--hopopup-story-cta-align, center); margin: var(--hopopup-story-text-gap, 32px) 15px 0; }
.hopopup-story-block__cta {
	display: inline-flex; gap: .75em; align-items: center;
	width: max-content;
	max-width: none;
	white-space: nowrap;
	padding: var(--hopopup-story-cta-padding, 12px 24px);
	background: var(--hopopup-story-cta-background, #ff4d00);
	color: var(--hopopup-story-cta-color, #fff) !important;
	border-radius: var(--hopopup-story-cta-radius, 999px);
	text-decoration: none; font-weight: 600;
}
.hopopup-story-block__cta:hover { filter: brightness(.92); color: var(--hopopup-story-cta-color, #fff) !important; }
.hopopup-story-block__cta:focus-visible, .hopopup-palette .hopopup-palette__pivot:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* Capture longue d’un site dans les cadres Mac / iPhone fournis par l’agence. */
.hopopup-story-block--site-mockup {
	height: auto !important;
	max-height: none !important;
	overflow: visible;
}
.hopopup-site-showcase {
	position: relative;
	width: 100%;
	min-height: var(--hopopup-story-site-min-height, min(900px, 92vh));
	background: var(--hopopup-story-site-background, #fff);
	overflow: hidden;
	isolation: isolate;
}
.hopopup-site-showcase__inner {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding: 32px;
	width: 100%;
	min-height: inherit;
}
.hopopup-site-device {
	grid-area: 1 / 1;
	position: relative;
	min-width: 0;
}
.hopopup-site-device--desktop {
	width: min(calc(100% - 64px), var(--hopopup-story-site-device-width, 1080px));
	aspect-ratio: 4 / 3;
	margin-inline: auto;
}
.hopopup-site-device--mobile { display: none; }
.hopopup-site-device__canvas {
	position: absolute;
	width: 100%;
	aspect-ratio: 4 / 3;
	left: 0;
	top: 0;
}
.hopopup-site-device__screen {
	position: absolute;
	left: 14.1146%;
	top: 9.4444%;
	z-index: 1;
	width: 72.7083%;
	height: 54.4444%;
	overflow: hidden;
	background: #fff;
}
.hopopup-site-device__screenshot {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	transform: translate3d(0, var(--hopopup-site-scroll-y, 0px), 0);
	transition: transform 80ms linear;
	will-change: transform;
}
.hopopup-site-device__frame {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	pointer-events: none;
}
.hopopup-site-showcase__inner > .hopopup-story-block__action {
	align-items: center;
	aspect-ratio: 4 / 3;
	grid-area: 1 / 1;
	justify-content: flex-end;
	margin: 0;
	pointer-events: none;
	transform: translate(-40px, 0);
	width: min(calc(100% - 64px), var(--hopopup-story-site-device-width, 1080px));
	z-index: 3;
}
.hopopup-site-showcase__inner > .hopopup-story-block__action > a { pointer-events: auto; }

.hopopup-story-info { margin: 0; font-size: var(--hopopup-story-info-size, 16px); }
.hopopup-story-info > div { display: grid; grid-template-columns: minmax(150px, 35%) 1fr; align-items: center; gap: 20px; padding-block: var(--hopopup-story-info-padding, 20px); border-top: 1px solid var(--hopopup-story-info-border, #555); }
.hopopup-story-info dt, .hopopup-story-info dd { margin: 0; font-weight: 400; }
.hopopup-story-info__services { display: flex; flex-wrap: wrap; gap: 16px; }
.hopopup-story-info__service { position: relative; display: inline-flex; outline-offset: 4px; }
.hopopup-story-info__icon { display: grid; place-items: center; width: var(--hopopup-story-info-icon-size, 32px); aspect-ratio: 1; border-radius: 50%; background: var(--service-color, #333); color: #fff; }
.hopopup-story-info__icon img { display: block; width: 65%; height: 65%; object-fit: contain; }
.hopopup-story-info__tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #171717; color: white; border-radius: 4px; padding: 6px 10px; font-size: 13px; opacity: 0; pointer-events: none; z-index: 2; }
.hopopup-story-info__service:is(:hover, :focus) .hopopup-story-info__tooltip { opacity: 1; }
.hopopup-palette { width: 100%; max-width: min(var(--hopopup-palette-width, 1000px), var(--hopopup-story-content-max-height, calc(var(--hopopup-story-block-max-height, 95) * 1vh))); margin-inline: auto; }
.hopopup-story-block.is-height-constrained > .hopopup-palette { flex: 1 1 auto; min-height: 0; max-height: 100%; width: min(100%, var(--hopopup-story-content-max-height, 95vh)); }
.hopopup-palette__stage {
	/* Le centre du demi-cercle, la rotation et le rivet partagent le même axe. */
	--palette-cap-radius: 10cqw;
	--palette-pivot-x: 18%;
	--palette-pivot-y: 50%;
	--palette-cover-angle: -28deg;
	--palette-cover-open-angle: clamp(-36deg, calc(-26deg - 2deg * var(--palette-count)), -28deg);
	--palette-rest-span: clamp(28deg, calc(22deg + 3deg * var(--palette-count)), 37deg);
	--palette-open-span: clamp(42deg, calc(34deg + 8deg * var(--palette-count)), 74deg);
	position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; container-type: inline-size;
}
.hopopup-palette__blade, .hopopup-palette__glass {
	box-sizing: border-box;
	position: absolute; left: calc(var(--palette-pivot-x) - var(--palette-cap-radius)); top: calc(var(--palette-pivot-y) - var(--palette-cap-radius)); width: 78%; height: calc(2 * var(--palette-cap-radius));
	border-radius: var(--palette-cap-radius) 3px 3px var(--palette-cap-radius);
	transform-origin: var(--palette-cap-radius) var(--palette-cap-radius);
	transform: rotate(var(--blade-angle));
	transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 300ms;
}
.hopopup-palette__blade {
	--blade-angle: calc(var(--palette-cover-angle) + var(--palette-rest-span) / var(--palette-count) * (var(--blade-index) + 1));
	--blade-open-angle: calc(var(--palette-cover-open-angle) + var(--palette-open-span) / var(--palette-count) * (var(--blade-index) + 1));
	background: var(--blade-color); color: var(--blade-ink);
	box-shadow: inset 0 -2px 1px #0002, 0 12px 18px -12px #0008;
	border: 1px solid #ffffff24;
}
.hopopup-palette__label, .hopopup-palette__cover-title {
	position: absolute; inset: 0 5% 0 24%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
	text-align: right; font-family: var(--hopopup-font-body, Arial, sans-serif); font-size: clamp(9px, 1.8vw, 18px); font-size: clamp(8px, 2.25cqw, 23px); line-height: 1.2;
}
.hopopup-palette__label {
	--palette-label-scale: clamp(.85, calc(1.225 - .075 * var(--palette-count)), 1);
	justify-content: flex-end; padding-bottom: 1.5cqw;
	font-size: clamp(8px, calc(2.25cqw * var(--palette-label-scale)), 23px);
}
.hopopup-palette__label strong { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hopopup-palette__glass {
	--blade-angle: var(--palette-cover-angle); --blade-open-angle: var(--palette-cover-open-angle); z-index: calc(var(--palette-count) + 2); pointer-events: none;
	background: linear-gradient(118deg, #ffffff70 0%, #ffffff0a 39%, #ffffff65 40%, #ffffff12 58%, #ffffff90 100%);
	background-color: var(--hopopup-palette-glass-tint, #ffffff10);
	border: 1px solid #ffffffbd;
	backdrop-filter: blur(var(--hopopup-palette-glass-blur, 1px)) brightness(1.14) saturate(1.15);
	-webkit-backdrop-filter: blur(var(--hopopup-palette-glass-blur, 1px)) brightness(1.14) saturate(1.15);
	box-shadow: inset 0 2px 2px #fff, inset 0 -3px 4px #ffffff85, inset -3px 0 4px #ffffffb3, 0 5px 0 -1px #e1e7e980, 0 8px 0 -2px #bdc7ca66, 0 18px 22px -12px #0007;
}
.hopopup-palette__glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(162deg, transparent 55%, #fff6 57%, transparent 59%); box-shadow: inset 1px 1px 1px #ffffffc0, inset 4px 5px 6px -3px #24374240, inset 0 -1px 1px #9fe7ec; }
.hopopup-palette__cover-title { color: #171717; font-size: clamp(11px, 2.8cqw, 28px); text-shadow: 0 1px 6px #fff8; }
.hopopup-palette .hopopup-palette__cover-title > * { display: block; width: 100%; margin: 0; text-align: right; line-height: 1.15; }
.hopopup-palette .hopopup-palette__cover-title strong { font-weight: 700; }
.hopopup-palette .hopopup-palette__cover-title span { font-weight: 400; font-size: .85em; }
.hopopup-palette .hopopup-palette__cover-title .hopopup-palette__client { font-size: .7em; margin-top: .15em; }
.hopopup-palette .hopopup-palette__pivot { appearance: none; display: block; min-width: 0; min-height: 0; height: auto; padding: 0; margin: 0; border: 0; cursor: pointer; position: absolute; z-index: calc(var(--palette-count) + 3); left: var(--palette-pivot-x); top: var(--palette-pivot-y); transform: translate(-50%, -50%); width: 2.6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #e8e8e8, #b8babc); box-shadow: inset 0 1px 1px #fff, 0 1px 2px #0003; }
.hopopup-palette.is-open .hopopup-palette__blade, .hopopup-palette.is-open .hopopup-palette__glass { transform: rotate(var(--blade-open-angle)); }
@media (hover: hover) and (pointer: fine) {
	.hopopup-palette__stage:hover .hopopup-palette__blade, .hopopup-palette__stage:hover .hopopup-palette__glass { transform: rotate(var(--blade-open-angle)); }
}
@media (max-width: 768px) {
	.hopopup-story-gallery { grid-template-columns: 1fr; }
	.hopopup-story-block.is-height-constrained > .hopopup-story-gallery { grid-template-rows: repeat(var(--hopopup-story-gallery-count, 1), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.hopopup-story-info > div { grid-template-columns: minmax(110px, 40%) 1fr; gap: 12px; }
	.hopopup-palette__label { font-size: 2.5cqw; }
	.hopopup-palette__label > span:not(:nth-last-child(2)) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hopopup-palette__blade, .hopopup-palette__glass { transition: none; } }

/* Bloc image + texte : disposition et ratio sont choisis bloc par bloc. */
.hopopup-story-image-text {
	display: grid;
	grid-template-columns: 1fr;
	align-items: var(--hopopup-story-image-text-align, center);
	gap: var(--hopopup-story-image-text-gap, 32px);
	width: 100%;
	min-width: 0;
	min-height: 0;
}
.hopopup-story-image-text--below {
	display: flex;
	flex-direction: column;
}
.hopopup-story-image-text__media,
.hopopup-story-image-text__content {
	min-width: 0;
	min-height: 0;
}
.hopopup-story-image-text__media {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hopopup-story-image-text__media > .hopopup-story-block__media {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: var(--hopopup-story-image-text-fit, contain);
	object-position: 50% 50%;
	border-radius: var(--hopopup-story-image-text-radius, var(--hopopup-story-media-radius, 0px));
}
.hopopup-story-image-text__content > .hopopup-story-block__text {
	width: 100%;
	margin: 0;
}
.hopopup-story-image-text--text-right {
	grid-template-columns: minmax(0, var(--hopopup-story-image-column, 50fr)) minmax(0, var(--hopopup-story-text-column, 50fr));
}
.hopopup-story-image-text--text-left {
	grid-template-columns: minmax(0, var(--hopopup-story-text-column, 50fr)) minmax(0, var(--hopopup-story-image-column, 50fr));
}
.hopopup-story-image-text--40-60 { --hopopup-story-image-column: 40fr; --hopopup-story-text-column: 60fr; }
.hopopup-story-image-text--50-50 { --hopopup-story-image-column: 50fr; --hopopup-story-text-column: 50fr; }
.hopopup-story-image-text--60-40 { --hopopup-story-image-column: 60fr; --hopopup-story-text-column: 40fr; }
.hopopup-story-image-text--text-left .hopopup-story-image-text__content { order: 1; }
.hopopup-story-image-text--text-left .hopopup-story-image-text__media { order: 2; }
.hopopup-story-block.is-height-constrained > .hopopup-story-image-text {
	flex: 1 1 auto;
	height: 100%;
	overflow: hidden;
}
.hopopup-story-block.is-height-constrained .hopopup-story-image-text__media > .hopopup-story-block__media {
	height: 100%;
	object-fit: var(--hopopup-story-image-text-fit, contain);
}
.hopopup-story-block.is-height-constrained .hopopup-story-image-text__content {
	overflow: auto;
}
.hopopup-story-block--image-text-below .hopopup-story-image-text__content {
	overflow: visible;
}

/* Animations d'entrée : le contenu reste visible si JavaScript est désactivé. */
html.hopopup-story-animations-ready .hopopup-story-block[data-story-animation]:not(.is-story-visible) {
	opacity: 0;
	transform: translate3d(var(--hopopup-story-enter-x, 0), var(--hopopup-story-enter-y, 0), 0);
}
html.hopopup-story-animations-ready .hopopup-story-block[data-story-animation] {
	transition: opacity 720ms ease, transform 720ms cubic-bezier(.16,.72,.24,1);
	will-change: opacity, transform;
}
.hopopup-story-block[data-story-animation="fade-in-up"] { --hopopup-story-enter-y: 72px; }
.hopopup-story-block[data-story-animation="fade-in-down"] { --hopopup-story-enter-y: -72px; }
.hopopup-story-block[data-story-animation="fade-in-left"] { --hopopup-story-enter-x: -88px; }
.hopopup-story-block[data-story-animation="fade-in-right"] { --hopopup-story-enter-x: 88px; }
html.hopopup-story-animations-ready .hopopup-story-block[data-story-animation].is-story-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (max-width: 768px) {
	.hopopup-site-showcase {
		min-height: var(--hopopup-story-site-mobile-min-height, 82vh);
	}
	.hopopup-site-showcase__inner {
		padding: 24px;
	}
	.hopopup-site-device--desktop { display: none; }
	.hopopup-site-device--mobile {
		display: block;
		width: min(var(--hopopup-story-site-mobile-device-width, 86vw), 440px);
		aspect-ratio: 750 / 1395;
		margin-inline: auto;
	}
	.hopopup-site-device--mobile .hopopup-site-device__canvas {
		width: 256%;
		left: -78%;
		top: -1.8%;
	}
	.hopopup-site-device--mobile .hopopup-site-device__screen {
		left: 34.1667%;
		top: 3.9583%;
		width: 31.7708%;
		height: 92.0833%;
	}
	.hopopup-site-showcase__inner > .hopopup-story-block__action {
		aspect-ratio: 750 / 1395;
		transform: translate(12px, 8px);
		width: min(var(--hopopup-story-site-mobile-device-width, 86vw), 440px);
	}
	.hopopup-story-block--full.hopopup-story-block--mobile-banner {
		height: auto;
		max-height: none;
		overflow: visible;
	}
	.hopopup-story-block--full.hopopup-story-block--mobile-banner > .hopopup-story-block__media {
		flex: none;
		height: calc(var(--hopopup-story-mobile-banner-height, 25) * 1vh);
		max-height: none;
		object-fit: cover;
	}
	.hopopup-story-image-text--text-right,
	.hopopup-story-image-text--text-left {
		grid-template-columns: 1fr;
	}
	.hopopup-story-image-text--text-left .hopopup-story-image-text__media { order: 1; }
	.hopopup-story-image-text--text-left .hopopup-story-image-text__content { order: 2; }
}

[data-preview-device-active="mobile"] .hopopup-story-block--full.hopopup-story-block--mobile-banner {
	height: auto;
	max-height: none;
	overflow: visible;
}
[data-preview-device-active="mobile"] .hopopup-story-block--full.hopopup-story-block--mobile-banner > .hopopup-story-block__media {
	flex: none;
	height: calc(var(--hopopup-story-mobile-banner-height, 25) * 1vh);
	max-height: none;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.hopopup-site-device__screenshot { transform: none !important; transition: none !important; }
	html.hopopup-story-animations-ready .hopopup-story-block[data-story-animation] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.hopopup-projects-style-preview .hopopup-project-story { width: 100%; margin: 0; --story-viewport: 100%; }
.hopopup-projects-style-preview .hopopup-story-block--narrow { max-width: 100%; }
.hopopup-projects-style-preview .hopopup-story-block--full { height: min(calc(var(--hopopup-story-block-max-height, 95) * 1vh), 360px); }
.hopopup-projects-style-preview .hopopup-story-block--site-mockup { height: auto; }
.hopopup-projects-style-preview .hopopup-site-showcase { min-height: min(620px, 82vh); }
.hopopup-projects-style-preview .hopopup-site-device__screenshot.hopopup-projects-style-preview__placeholder { height: 220%; }
[data-preview-device-active="mobile"] .hopopup-site-device--desktop { display: none; }
[data-preview-device-active="mobile"] .hopopup-site-device--mobile { display: block; width: min(var(--hopopup-story-site-mobile-device-width, 86vw), 440px); aspect-ratio: 750 / 1395; margin-inline: auto; }
[data-preview-device-active="mobile"] .hopopup-site-device--mobile .hopopup-site-device__canvas { width: 256%; left: -78%; top: -1.8%; }
[data-preview-device-active="mobile"] .hopopup-site-device--mobile .hopopup-site-device__screen { left: 34.1667%; top: 3.9583%; width: 31.7708%; height: 92.0833%; }
[data-preview-device-active="mobile"] .hopopup-projects-style-preview .hopopup-story-block--mobile-banner { height: auto; max-height: none; }

.hopopup-palette__accessible-codes { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }