/*!
 * Monster Series — front-end styles
 * ---------------------------------------------------------------------------
 * A small, deliberate design system: tokens first, then primitives, then
 * components. Fluid type and space mean very few breakpoints are needed;
 * the ones that exist mark real layout changes, not arbitrary widths.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Colour ------------------------------------------------------------ */
	--ms-bg:            #08080a;
	--ms-surface:       #111114;
	--ms-surface-2:     #17171b;
	--ms-line:          #26262d;
	--ms-line-strong:   #3a3a44;
	--ms-text:          #ffffff;
	--ms-muted:         #9d9daa;
	--ms-accent:        #e8492b;
	--ms-accent-2:      #ff6b3d;
	--ms-accent-ink:    #ffffff;

	--ms-bg-rgb:        8, 8, 10;
	--ms-text-rgb:      255, 255, 255;
	--ms-accent-rgb:    232, 73, 43;

	/* Space -------------------------------------------------------------- */
	--ms-space-3xs: .25rem;
	--ms-space-2xs: .5rem;
	--ms-space-xs:  .75rem;
	--ms-space-sm:  1rem;
	--ms-space-md:  1.5rem;
	--ms-space-lg:  2.5rem;
	--ms-space-xl:  clamp(3rem, 6vw, 5rem);
	--ms-space-2xl: clamp(4rem, 9vw, 8rem);

	/* Layout ------------------------------------------------------------- */
	--ms-container: 1280px;
	--ms-gutter:    clamp(1.25rem, 5vw, 3.5rem);
	--ms-section-y: clamp(3.5rem, 8vw, 7.5rem);
	--ms-footer-y:  clamp(3rem, 6vw, 5rem);
	--ms-header-h:  clamp(92px, 11vw, 118px);

	/* Type --------------------------------------------------------------- */
	--ms-font-display: "Archivo Variable", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ms-font-body:    "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ms-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--ms-step-eyebrow: clamp(.75rem, .15vw + .71rem, .8125rem);
	--ms-step-body:    clamp(1rem, .2vw + .95rem, 1.0625rem);
	--ms-step-lead:    clamp(1.0625rem, .45vw + .95rem, 1.25rem);
	--ms-step-h4:      clamp(1.125rem, .5vw + 1rem, 1.375rem);
	--ms-step-h3:      clamp(1.375rem, 1.1vw + 1.05rem, 2rem);
	--ms-step-h2:      clamp(2rem, 3.4vw + 1.1rem, 3.5rem);
	--ms-step-hero:    clamp(2.375rem, 5.6vw + .55rem, 5.5rem);

	/* Effects ------------------------------------------------------------ */
	--ms-radius:      10px;
	--ms-radius-lg:   16px;
	--ms-radius-pill: 999px;
	--ms-shadow:      0 20px 60px rgba(0, 0, 0, .55);
	--ms-ease:        cubic-bezier(.22, .61, .36, 1);
	--ms-t-fast:      160ms var(--ms-ease);
	--ms-t:           260ms var(--ms-ease);
	--ms-t-slow:      700ms var(--ms-ease);
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ms-header-h) + 1rem);
}

body {
	margin: 0;
	background-color: var(--ms-bg);
	color: var(--ms-text);
	font-family: var(--ms-font-body);
	font-size: var(--ms-step-body);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip; /* Belt and braces; no component is allowed to overflow. */
}

img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; display: block; }

a { color: var(--ms-accent-2); text-decoration: none; transition: color var(--ms-t-fast); }
a:hover, a:focus { color: var(--ms-text); }

:focus-visible {
	outline: 2px solid var(--ms-accent-2);
	outline-offset: 3px;
	border-radius: 3px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ms-font-display);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.06;
	margin: 0 0 .5em;
	color: var(--ms-text);
	text-wrap: balance;
}

h1 { font-size: var(--ms-step-h2); }
h2 { font-size: var(--ms-step-h2); }
h3 { font-size: var(--ms-step-h3); }
h4 { font-size: var(--ms-step-h4); }
h5, h6 { font-size: var(--ms-step-body); letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--ms-line); margin: var(--ms-space-lg) 0; }

blockquote {
	margin: var(--ms-space-lg) 0;
	padding-left: var(--ms-space-md);
	border-left: 3px solid var(--ms-accent);
	font-size: var(--ms-step-lead);
	font-style: normal;
}

code, pre, kbd { font-family: var(--ms-font-mono); font-size: .9em; }

pre {
	background: var(--ms-surface-2);
	padding: var(--ms-space-sm) var(--ms-space-md);
	border-radius: var(--ms-radius);
	overflow-x: auto;
	border: 1px solid var(--ms-line);
}

/* Tables never push the page sideways. */
.entry-content table,
.wp-block-table { display: block; overflow-x: auto; max-width: 100%; }

table { width: 100%; border-collapse: collapse; margin-bottom: var(--ms-space-md); }
th, td { border: 1px solid var(--ms-line); padding: .65rem .85rem; text-align: left; }
th { font-weight: 700; background: var(--ms-surface-2); }

figure { margin: 0; }

::selection { background: var(--ms-accent); color: var(--ms-accent-ink); }

/* Long unbroken words (URLs) must not create horizontal scroll. */
.entry-content, .ms-card__text, .ms-slide__text, .comment-content {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.ms-container {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

.ms-section { padding-block: var(--ms-section-y); }
.ms-section + .ms-section { padding-top: 0; }
.ms-section--tight { padding-block: var(--ms-space-xl); }

.site-content { display: block; }

.ms-eyebrow {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin: 0 0 var(--ms-space-sm);
}

.ms-section__head { margin-bottom: var(--ms-space-xl); max-width: 46ch; }

/* This section's title is meant to run the full width of the section rather
   than sit in a narrow measure, so it reads on one line on desktop. */
.ms-services .ms-section__head,
.ms-services .ms-section__title { max-width: none; }
.ms-services .ms-section__title { text-wrap: balance; }
.ms-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ms-space-md);
	max-width: none;
}
.ms-section__head--split > div { max-width: 46ch; }
.ms-section__title { font-size: var(--ms-step-h2); margin: 0; }

.ms-empty {
	color: var(--ms-muted);
	border: 1px dashed var(--ms-line-strong);
	border-radius: var(--ms-radius);
	padding: var(--ms-space-lg);
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .8rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--ms-radius-pill);
	font-family: var(--ms-font-body);
	font-size: .9375rem;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--ms-t-fast), color var(--ms-t-fast),
		border-color var(--ms-t-fast), transform var(--ms-t-fast);
}

.ms-btn .ms-icon { transition: transform var(--ms-t-fast); flex: none; }
.ms-btn:hover .ms-icon { transform: translateX(3px); }

.ms-btn--primary {
	background: var(--ms-accent);
	border-color: var(--ms-accent);
	color: var(--ms-accent-ink);
}
.ms-btn--primary:hover,
.ms-btn--primary:focus { background: var(--ms-accent-2); border-color: var(--ms-accent-2); color: var(--ms-accent-ink); }

.ms-btn--ghost {
	background: transparent;
	border-color: var(--ms-line-strong);
	color: var(--ms-text);
}
.ms-btn--ghost:hover,
.ms-btn--ghost:focus { border-color: var(--ms-text); color: var(--ms-text); background: rgba(var(--ms-text-rgb), .06); }

.ms-btn--compact { min-height: 40px; padding: .5rem 1.05rem; font-size: .875rem; }

/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ms-bg);
	border-bottom: 1px solid var(--ms-line);
	transition: background-color var(--ms-t), border-color var(--ms-t), backdrop-filter var(--ms-t);
}

/* Over a hero the header floats; it solidifies as soon as the page scrolls. */
.has-hero .site-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.has-hero .site-header.is-stuck,
.site-header.is-stuck {
	background: rgba(var(--ms-bg-rgb), .88);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--ms-line);
}

.site-header.is-open {
	background: var(--ms-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.site-header__inner {
	/* Logo with the social ribbon beneath it, sharing one centre axis. The
	   navigation sits to the right of that block on desktop, and is replaced
	   by the menu button on smaller screens. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"brand  toggle"
		"social toggle";
	align-items: center;
	row-gap: .3rem;
	min-height: var(--ms-header-h);
	padding-block: .5rem;
}

.site-branding { grid-area: brand; display: flex; align-items: center; justify-content: center; min-width: 0; }

/* The logo is capped in both axes so an oversized upload can never blow up
   the header, and the aspect ratio is preserved. */
.custom-logo-link { display: block; line-height: 0; }
.custom-logo {
	width: auto;
	height: auto;
	/* Both axes are capped, so no upload can distort the header, and the
	   aspect ratio is always preserved. */
	max-height: clamp(30px, 4.4vw, 46px);
	max-width: min(58vw, 240px);
	object-fit: contain;
}

/* An SVG logo has no intrinsic pixel size; give it one so the flex row can
   measure it instead of collapsing the branding column to zero width. */
.custom-logo[src$=".svg"] { height: clamp(30px, 4.4vw, 46px); width: auto; }

.site-title {
	font-family: var(--ms-font-display);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.1;
}
.site-title a { color: var(--ms-text); }
.site-title a:hover { color: var(--ms-accent-2); }

.site-header__actions { grid-area: toggle; justify-self: end; display: flex; align-items: center; gap: var(--ms-space-2xs); flex: none; }

/* --- Primary navigation --------------------------------------------- */

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.6vw, 1.9rem);
}

.primary-menu a {
	display: inline-block;
	position: relative;
	color: var(--ms-text);
	font-size: .9375rem;
	font-weight: 500;
	padding: .4rem 0;
	white-space: nowrap;
}

.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--ms-accent-2);
	transition: width var(--ms-t);
}
.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after { width: 100%; }
.primary-menu > li.current-menu-item > a { color: var(--ms-text); }

.primary-menu li { position: relative; }

.sub-menu {
	list-style: none;
	margin: 0;
	padding: .5rem;
	min-width: 220px;
}

.primary-menu .submenu-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: .35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
}
.primary-menu .submenu-toggle__icon {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--ms-t-fast);
}
.primary-menu .submenu-toggle[aria-expanded="true"] .submenu-toggle__icon { transform: rotate(-135deg); }

.site-header__cta--inline { display: none; }

/* --- Social ribbon ---------------------------------------------------- */

.site-header__social {
	grid-area: social;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .15rem;
	background: transparent;
}

.site-header__social .ms-social-link {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(var(--ms-text-rgb), .72);
}
.site-header__social .ms-social-link:hover,
.site-header__social .ms-social-link:focus-visible {
	background: transparent;
	color: var(--ms-accent-2);
}

/* --- Menu toggle ------------------------------------------------------ */

.menu-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid var(--ms-line-strong);
	border-radius: var(--ms-radius);
	color: var(--ms-text);
	cursor: pointer;
	transition: border-color var(--ms-t-fast), background-color var(--ms-t-fast);
}
.menu-toggle:hover { border-color: var(--ms-text); }
.menu-toggle__bars { display: grid; gap: 5px; }
.menu-toggle__bars span {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--ms-t), opacity var(--ms-t-fast);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Mobile navigation panel (below 62em) ----------------------------- */

@media (max-width: 61.99em) {
	.main-navigation {
		position: fixed;
		inset: var(--ms-header-h) 0 0;
		background: var(--ms-bg);
		padding: var(--ms-space-lg) var(--ms-gutter) var(--ms-space-2xl);
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
		gap: var(--ms-space-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--ms-t), transform var(--ms-t), visibility var(--ms-t);
	}

	.main-navigation.is-open { opacity: 1; visibility: visible; transform: none; }

	.primary-menu { flex-direction: column; align-items: stretch; gap: 0; }

	.primary-menu > li { border-bottom: 1px solid var(--ms-line); }

	.primary-menu a {
		display: block;
		padding: 1rem 0;
		font-family: var(--ms-font-display);
		font-size: 1.375rem;
		font-weight: 700;
		letter-spacing: -.01em;
		white-space: normal;
	}
	.primary-menu > li > a::after { display: none; }

	.sub-menu {
		display: none;
		padding: 0 0 .75rem 1rem;
		border-left: 1px solid var(--ms-line);
		margin-bottom: .5rem;
	}
	.sub-menu.is-open { display: block; }
	.sub-menu a { font-size: 1rem; font-family: var(--ms-font-body); font-weight: 500; padding: .55rem 0; }

	.primary-menu .submenu-toggle { position: absolute; right: 0; top: .8rem; min-width: 44px; min-height: 44px; }

	.site-header__social .ms-social-link { width: 32px; height: 32px; }

	.site-header__cta--inline { display: inline-flex; align-self: flex-start; }
	.site-header__actions .site-header__cta { display: none; }

	body.ms-nav-open { overflow: hidden; }
}

@media (min-width: 62em) {
	.menu-toggle { display: none; }
	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"brand  nav actions"
			"social nav actions";
		column-gap: var(--ms-space-lg);
	}
	.main-navigation {
		grid-area: nav;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: clamp(.75rem, 1.6vw, 1.9rem);
	}
	.site-header__actions { grid-area: actions; justify-self: end; }
	.sub-menu {
		position: absolute;
		top: 100%;
		left: -.75rem;
		background: var(--ms-surface);
		border: 1px solid var(--ms-line);
		border-radius: var(--ms-radius);
		box-shadow: var(--ms-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--ms-t-fast), transform var(--ms-t-fast), visibility var(--ms-t-fast);
		z-index: 20;
	}
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu,
	.sub-menu.is-open { opacity: 1; visibility: visible; transform: none; }
	.sub-menu a { padding: .5rem .75rem; display: block; border-radius: 6px; }
	.sub-menu a:hover { background: var(--ms-surface-2); }
	.primary-menu .submenu-toggle { display: none; }
}

/* Any submenu toggle outside the primary menu (a footer or widget menu that
   does not use the theme's walker) must never render or reposition itself. */
.submenu-toggle { display: none; }
.primary-menu .submenu-toggle { display: inline-flex; }
@media (min-width: 62em) { .primary-menu .submenu-toggle { display: none; } }

/* ==========================================================================
   6. Hero carousel
   ==========================================================================
   One image per slide, used at every viewport. The browser picks the file
   from the srcset WordPress generated; object-fit: cover adapts it to the
   frame without ever distorting its aspect ratio.

   The copy block is placed freely: --ms-x / --ms-y are percentages, and the
   matching negative translate means 0% sits flush against one edge, 100%
   flush against the other and 50% dead centre. It can therefore never be
   pushed outside the frame, whatever numbers the editor chooses. */

.ms-hero {
	--ms-strip-h: 92px;
	--ms-meter-h: 2.75rem;

	position: relative;
	width: 100%;
	/* Full viewport on desktop, but never taller than a phone's usable area. */
	min-height: clamp(560px, 100svh, 1000px);
	display: grid;
	isolation: isolate;
	background: var(--ms-surface);
	overflow: hidden;
}

.ms-hero__viewport {
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	min-height: inherit;
}

.ms-slide {
	grid-area: stack;
	position: relative;
	min-height: inherit;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ms-t-slow), visibility var(--ms-t-slow);
	pointer-events: none;
}

.ms-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
.ms-slide.was-active { z-index: 1; }

/* The viewport is a grid from the first paint and every slide shares the same
   cell, so the hero occupies one slide's height before and after JavaScript.
   PHP already marks the first valid slide .is-active; the base rules above
   keep the rest hidden, so nothing stacks and there is no layout shift.
   The controls stay hidden until the script has enhanced the carousel. */
.ms-hero:not(.is-enhanced) .ms-hero__controls,
.ms-hero:not(.is-enhanced) .ms-hero__meter { display: none; }

/* --- Media ------------------------------------------------------------ */

.ms-slide__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* One image, adapted to the frame. cover preserves the aspect ratio — the
   picture is scaled, never stretched — and the frame's own overflow:hidden
   keeps it from ever widening the page. */
.ms-slide__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform: scale(1.04);
	transition: transform 9s linear;
}
.ms-slide.is-active .ms-slide__image { transform: scale(1); }

/* The scrim follows the copy block, so text stays legible wherever it is
   placed without flattening the rest of the photograph. */
.ms-slide__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: var(--ms-scrim, .55);
	background:
		radial-gradient(80% 65% at var(--ms-x, 0%) var(--ms-y, 100%),
			rgba(var(--ms-bg-rgb), .96) 0%,
			rgba(var(--ms-bg-rgb), .72) 38%,
			rgba(var(--ms-bg-rgb), 0) 78%),
		linear-gradient(180deg,
			rgba(var(--ms-bg-rgb), .72) 0%,
			rgba(var(--ms-bg-rgb), 0) 22%,
			rgba(var(--ms-bg-rgb), 0) 62%,
			rgba(var(--ms-bg-rgb), .8) 100%);
}

/* --- Free positioning stage ------------------------------------------- */

.ms-slide__stage {
	position: absolute;
	z-index: 3;
	top: calc(var(--ms-header-h) + var(--ms-space-sm));
	bottom: calc(var(--ms-strip-h) + var(--ms-meter-h) + var(--ms-space-2xs));
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - (var(--ms-gutter) * 2), var(--ms-container) - (var(--ms-gutter) * 2));
	pointer-events: none;
}

.ms-slide__copy {
	position: absolute;
	left: var(--ms-x, 0%);
	top: var(--ms-y, 100%);
	/* Mirroring the offset keeps the block inside the stage at every value:
	   0% → flush to the start edge, 50% → centred, 100% → flush to the end. */
	transform: translate(calc(-1 * var(--ms-x, 0%)), calc(-1 * var(--ms-y, 100%)));
	width: min(100%, var(--ms-w, 70%));
	text-align: var(--ms-align, left);
	pointer-events: auto;
	container-type: inline-size;
	container-name: ms-copy;
}

.ms-slide__label { color: var(--ms-label-color, var(--ms-accent-2)); margin-bottom: var(--ms-space-sm); }

.ms-slide__title {
	font-family: var(--ms-font-display);
	font-size: var(--ms-step-hero);
	font-weight: 800;
	line-height: .96;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--ms-title-color, var(--ms-text));
	margin: 0 0 var(--ms-space-md);
	max-width: 100%;
	text-wrap: balance;
	/* A headline must never be split mid-word. Instead the type scales to the
	   block the editor sized (see the container query below), so it always
	   fits whatever width and position the slide was given. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

@supports (container-type: inline-size) {
	.ms-slide__title { font-size: clamp(2.125rem, 11.5cqw, 5.5rem); }
	.ms-slide__text { font-size: clamp(1rem, 3.4cqw, 1.25rem); }
}

.ms-slide__text {
	font-size: var(--ms-step-lead);
	color: rgba(var(--ms-text-rgb), .84);
	margin: 0 0 var(--ms-space-lg);
	text-shadow: 0 1px 18px rgba(var(--ms-bg-rgb), .5);
}

.ms-slide__actions { margin: 0; }

/* Staged reveal, suppressed under reduced motion (see section 15). */
.ms-slide__label,
.ms-slide__title,
.ms-slide__text,
.ms-slide__actions {
	opacity: 0;
	transform: translateY(14px);
}
.ms-hero:not(.is-enhanced) .ms-slide__label,
.ms-hero:not(.is-enhanced) .ms-slide__title,
.ms-hero:not(.is-enhanced) .ms-slide__text,
.ms-hero:not(.is-enhanced) .ms-slide__actions { opacity: 1; transform: none; }

.ms-slide.is-active .ms-slide__label { animation: ms-rise 620ms var(--ms-ease) 80ms forwards; }
.ms-slide.is-active .ms-slide__title { animation: ms-rise 620ms var(--ms-ease) 150ms forwards; }
.ms-slide.is-active .ms-slide__text { animation: ms-rise 620ms var(--ms-ease) 240ms forwards; }
.ms-slide.is-active .ms-slide__actions { animation: ms-rise 620ms var(--ms-ease) 320ms forwards; }

@keyframes ms-rise { to { opacity: 1; transform: none; } }

/* --- Arrows ----------------------------------------------------------- */

.ms-hero__controls {
	position: absolute;
	z-index: 5;
	inset-inline: var(--ms-space-sm);
	top: calc((100% - var(--ms-strip-h)) / 2);
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.ms-hero__arrow {
	pointer-events: auto;
	appearance: none;
	width: clamp(44px, 5vw, 56px);
	height: clamp(44px, 5vw, 56px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(var(--ms-text-rgb), .28);
	border-radius: 50%;
	background: rgba(var(--ms-bg-rgb), .38);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--ms-text);
	cursor: pointer;
	transition: background-color var(--ms-t-fast), border-color var(--ms-t-fast), transform var(--ms-t-fast);
}
.ms-hero__arrow:hover { background: var(--ms-accent); border-color: var(--ms-accent); }
.ms-hero__arrow--prev:hover { transform: translateX(-2px); }
.ms-hero__arrow--next:hover { transform: translateX(2px); }

/* Arrows would sit on top of freely placed copy on small screens; the strip
   and swipe cover navigation there. */
@media (max-width: 47.99em) {
	.ms-hero__controls { display: none; }
}

/* --- Counter + dots --------------------------------------------------- */

.ms-hero__meter {
	position: absolute;
	z-index: 5;
	left: var(--ms-gutter);
	bottom: calc(var(--ms-strip-h) + var(--ms-space-sm));
	display: flex;
	align-items: center;
	gap: var(--ms-space-md);
	pointer-events: auto;
}

.ms-hero__count {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .18em;
	color: rgba(var(--ms-text-rgb), .65);
	display: inline-flex;
	gap: .4em;
	flex: none;
}
.ms-hero__count-current { color: var(--ms-text); font-weight: 600; }

.ms-hero__dots { display: flex; align-items: center; gap: .125rem; margin-inline: -.35rem; }

.ms-hero__dot {
	appearance: none;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	width: 36px;
	height: 36px;              /* generous touch target … */
	display: inline-grid;
	place-items: center;
	position: relative;
}
.ms-hero__dot::before {
	content: "";
	width: 7px;                /* … around a small visual dot. */
	height: 7px;
	border-radius: 50%;
	background: rgba(var(--ms-text-rgb), .32);
	transition: background-color var(--ms-t-fast), transform var(--ms-t-fast);
}
.ms-hero__dot:hover::before { background: rgba(var(--ms-text-rgb), .6); }
.ms-hero__dot.is-active::before { background: var(--ms-accent); transform: scale(1.45); }

/* --- Bottom editorial strip ------------------------------------------ */

.ms-hero__strip {
	position: absolute;
	z-index: 5;
	inset-inline: 0;
	bottom: 0;
	border-top: 1px solid rgba(var(--ms-text-rgb), .14);
	background: linear-gradient(180deg, rgba(var(--ms-bg-rgb), .5) 0%, rgba(var(--ms-bg-rgb), .88) 100%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ms-hero__strip-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-hero__chapter {
	appearance: none;
	background: none;
	border: 0;
	border-left: 1px solid rgba(var(--ms-text-rgb), .14);
	color: var(--ms-text);
	cursor: pointer;
	text-align: left;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: .75rem;
	padding: var(--ms-space-md) var(--ms-space-sm) calc(var(--ms-space-md) + 3px);
	position: relative;
	min-height: var(--ms-strip-h);
	transition: background-color var(--ms-t-fast);
}
.ms-hero__chapter:first-child { border-left: 0; }
.ms-hero__chapter:hover { background: rgba(var(--ms-text-rgb), .06); }

.ms-hero__chapter-num {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .14em;
	color: rgba(var(--ms-text-rgb), .45);
	padding-top: .15em;
}
.ms-hero__chapter.is-active .ms-hero__chapter-num { color: var(--ms-accent-2); }

.ms-hero__chapter-body { min-width: 0; display: block; }

.ms-hero__chapter-title {
	display: block;
	font-family: var(--ms-font-display);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.25;
	color: rgba(var(--ms-text-rgb), .7);
	transition: color var(--ms-t-fast);
}
.ms-hero__chapter.is-active .ms-hero__chapter-title,
.ms-hero__chapter:hover .ms-hero__chapter-title { color: var(--ms-text); }

.ms-hero__chapter-text {
	display: block;
	margin-top: .2rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: rgba(var(--ms-text-rgb), .5);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ms-hero__chapter-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(var(--ms-text-rgb), .12);
	display: block;
}
.ms-hero__chapter-bar i { display: block; height: 100%; width: 0; background: var(--ms-accent); }
.ms-hero__chapter.is-active .ms-hero__chapter-bar i { width: 100%; }

/* Only animate the progress bar while autoplay is genuinely running. */
.ms-hero[data-playing="true"] .ms-hero__chapter.is-active .ms-hero__chapter-bar i {
	width: 0;
	animation: ms-progress 7000ms linear forwards;
}

@keyframes ms-progress { from { width: 0; } to { width: 100%; } }

.ms-hero__hint {
	position: absolute;
	z-index: 5;
	right: var(--ms-gutter);
	bottom: calc(var(--ms-strip-h) + var(--ms-space-sm));
	margin: 0;
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(var(--ms-text-rgb), .5);
	max-width: 38%;
	text-align: right;
}

/* Hero on tablet and below ------------------------------------------- */

@media (max-width: 61.99em) {
	.ms-hero { --ms-strip-h: 76px; }
	.ms-hero__chapter-text { display: none; }
	.ms-hero__chapter { padding-inline: .75rem; }
}

@media (max-width: 47.99em) {
	.ms-hero {
		--ms-strip-h: 68px;
		min-height: clamp(520px, 92svh, 860px);
	}

	/* Phones use their own X/Y pair, so a layout tuned for a wide frame is
	   never squeezed into a tall one. */
	.ms-slide__copy {
		left: var(--ms-x-m, 0%);
		top: var(--ms-y-m, 100%);
		transform: translate(calc(-1 * var(--ms-x-m, 0%)), calc(-1 * var(--ms-y-m, 100%)));
		width: 100%;
	}

	.ms-slide__scrim {
		background:
			radial-gradient(110% 55% at var(--ms-x-m, 0%) var(--ms-y-m, 100%),
				rgba(var(--ms-bg-rgb), .96) 0%,
				rgba(var(--ms-bg-rgb), .74) 45%,
				rgba(var(--ms-bg-rgb), 0) 88%),
			linear-gradient(180deg,
				rgba(var(--ms-bg-rgb), .74) 0%,
				rgba(var(--ms-bg-rgb), 0) 24%,
				rgba(var(--ms-bg-rgb), 0) 55%,
				rgba(var(--ms-bg-rgb), .88) 100%);
	}

	.ms-slide__stage { bottom: calc(var(--ms-strip-h) + var(--ms-meter-h) + var(--ms-space-2xs)); }
	.ms-hero__meter { bottom: calc(var(--ms-strip-h) + var(--ms-space-3xs)); }
	.ms-hero__hint { display: none; }

	/* The strip becomes a single-line chapter list, not a squeezed 3-column grid. */
	.ms-hero__strip-inner { grid-template-columns: 1fr; }
	.ms-hero__chapter {
		display: none;
		border-left: 0;
		min-height: 0;
		padding: var(--ms-space-sm) 0 calc(var(--ms-space-sm) + 3px);
	}
	.ms-hero__chapter.is-active { display: grid; }
	.ms-hero__chapter:hover { background: none; }
	.ms-hero__chapter-title { font-size: 1rem; color: var(--ms-text); }
	.ms-hero__chapter-bar { left: var(--ms-gutter); right: var(--ms-gutter); }
}

@media (max-width: 22.5em) {
	.ms-slide__text { display: none; } /* 360px and below: protect the CTA. */
	.ms-hero__meter { gap: var(--ms-space-sm); }
}

/* Admin-only empty state ----------------------------------------------- */

.ms-hero-empty {
	padding-block: calc(var(--ms-header-h) + var(--ms-space-2xl)) var(--ms-space-2xl);
	background:
		radial-gradient(120% 80% at 20% 0%, rgba(var(--ms-accent-rgb), .18), transparent 60%),
		var(--ms-surface);
	border-bottom: 1px solid var(--ms-line);
}
.ms-hero-empty__title { font-size: var(--ms-step-h2); text-transform: uppercase; max-width: 18ch; }
.ms-hero-empty__text { color: var(--ms-muted); max-width: 52ch; margin-bottom: var(--ms-space-lg); }

/* ==========================================================================
   7. Page hero (interior pages, archives, single)
   ========================================================================== */

.ms-page-hero {
	position: relative;
	padding-block: calc(var(--ms-header-h) + var(--ms-space-xl)) var(--ms-space-xl);
	border-bottom: 1px solid var(--ms-line);
	background:
		radial-gradient(90% 120% at 8% 0%, rgba(var(--ms-accent-rgb), .16), transparent 62%),
		var(--ms-bg);
	overflow: hidden;
}
body:not(.has-hero) .ms-page-hero { padding-top: var(--ms-space-xl); }

.ms-page-hero__title { font-size: var(--ms-step-h2); margin: 0; text-wrap: balance; max-width: 22ch; text-transform: uppercase; }
.ms-page-hero__text { color: var(--ms-muted); max-width: 58ch; margin-top: var(--ms-space-md); font-size: var(--ms-step-lead); }

/* Inline links inside the theme's paragraph fields stay legible against the
   muted body colour and are underlined, so they read as links. */
.ms-page-hero__text a,
.ms-contact__text a,
.ms-cta__text a,
.site-footer__copy a {
	color: var(--ms-accent-2);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}
.ms-page-hero__text a:hover,
.ms-contact__text a:hover,
.ms-cta__text a:hover,
.site-footer__copy a:hover { color: var(--ms-text); }
.ms-page-hero__media { margin-top: var(--ms-space-lg); border-radius: var(--ms-radius-lg); overflow: hidden; }
.ms-page-hero__media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* ==========================================================================
   8. Cards and grids
   ========================================================================== */

.ms-grid { display: grid; gap: clamp(1rem, 2.4vw, 2rem); }
.ms-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ms-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

.ms-card {
	position: relative;
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
	transition: border-color var(--ms-t), transform var(--ms-t);
}
.ms-card:hover { border-color: var(--ms-line-strong); transform: translateY(-3px); }

.ms-card__link { display: block; color: inherit; height: 100%; }
.ms-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ms-surface-2); }
.ms-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ms-t-slow); }
.ms-card:hover .ms-card__media img { transform: scale(1.04); }

.ms-card__body { padding: var(--ms-space-md); }
.ms-card__title { font-size: var(--ms-step-h4); margin: 0 0 .5rem; }
.ms-card__text { color: var(--ms-muted); font-size: .9375rem; margin: 0 0 var(--ms-space-sm); }
.ms-card__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ms-accent-2);
}
.ms-card__link:hover .ms-card__more .ms-icon { transform: translateX(3px); }
.ms-card__more .ms-icon { transition: transform var(--ms-t-fast); }

/* ==========================================================================
   9. Front page sections
   ========================================================================== */

/* --- Latest news: one lead + a stacked list --------------------------- */

.ms-news__layout {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}

.ms-news__link { display: grid; gap: var(--ms-space-md); color: inherit; }

.ms-news__media { overflow: hidden; border-radius: var(--ms-radius-lg); background: var(--ms-surface-2); }
.ms-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ms-t-slow); }
.ms-news__link:hover .ms-news__media img { transform: scale(1.03); }

.ms-news__lead .ms-news__media { aspect-ratio: 16 / 9; }
.ms-news__item .ms-news__media { aspect-ratio: 4 / 3; }

.ms-news__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin: 0 0 .6rem;
}
.ms-news__cat { color: var(--ms-accent-2); }

.ms-news__title { font-size: var(--ms-step-h4); margin: 0; transition: color var(--ms-t-fast); }
.ms-news__link:hover .ms-news__title { color: var(--ms-accent-2); }
.ms-news__lead .ms-news__title { font-size: var(--ms-step-h3); }
.ms-news__excerpt { color: var(--ms-muted); margin: .75rem 0 0; max-width: 56ch; }

@media (min-width: 48em) {
	.ms-news__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-news__lead { grid-column: 1 / -1; }
	.ms-news__lead .ms-news__link { grid-template-columns: 1fr; }
}

@media (min-width: 62em) {
	.ms-news__layout { grid-template-columns: 1.35fr 1fr; align-items: start; }
	.ms-news__lead { grid-column: 1; grid-row: span 3; }
	.ms-news__item .ms-news__link {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		align-items: center;
		gap: var(--ms-space-md);
		padding-bottom: var(--ms-space-md);
		border-bottom: 1px solid var(--ms-line);
	}
	.ms-news__item:last-child .ms-news__link { border-bottom: 0; padding-bottom: 0; }
}

/* --- Services --------------------------------------------------------- */

.ms-service {
	border-top: 1px solid var(--ms-line);
	padding-top: var(--ms-space-md);
}

/* With artwork the picture leads instead of the rule, and the cards in a row
   stay aligned because every image keeps the same ratio. */
.ms-service--has-image {
	border-top: 0;
	padding-top: 0;
	display: flex;
	flex-direction: column;
}

.ms-service__media {
	margin: 0 0 var(--ms-space-md);
	border-radius: var(--ms-radius);
	overflow: hidden;
	background: var(--ms-surface-2);
}

.ms-service__image {
	width: 100%;
	height: auto;
	/* Portrait, but a third shorter than a full 9:16 frame. */
	aspect-ratio: 27 / 32;
	object-fit: cover;
	display: block;
	transition: transform var(--ms-t-slow);
}
.ms-service--has-image:hover .ms-service__image { transform: scale(1.03); }
.ms-service__num {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .16em;
	color: var(--ms-accent-2);
	display: block;
	margin-bottom: var(--ms-space-sm);
}
.ms-service__title { font-size: var(--ms-step-h4); margin: 0 0 .6rem; }
.ms-service__text { color: var(--ms-muted); margin: 0; }

/* --- About ------------------------------------------------------------ */

.ms-about__inner { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.ms-about__media { border-radius: var(--ms-radius-lg); overflow: hidden; background: var(--ms-surface-2); }
.ms-about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ms-about__text { color: var(--ms-muted); font-size: var(--ms-step-lead); }

.ms-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
	gap: var(--ms-space-md);
	margin: var(--ms-space-lg) 0 0;
	padding: 0;
}
.ms-stats__item { border-top: 1px solid var(--ms-line); padding-top: var(--ms-space-sm); }
.ms-stats__value {
	font-family: var(--ms-font-display);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	margin: 0;
}
.ms-stats__label { margin: .4rem 0 0; font-size: .875rem; color: var(--ms-muted); }

@media (min-width: 56em) {
	.ms-about__inner { grid-template-columns: 5fr 6fr; }
}

/* --- Partners --------------------------------------------------------- */

.ms-partners { padding-block: var(--ms-space-xl); border-block: 1px solid var(--ms-line); }
.ms-partners__inner { display: grid; gap: var(--ms-space-lg); }
.ms-partners__title { margin: 0; }
.ms-partners__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(45%, 8rem), 1fr));
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.ms-partners__item { display: flex; align-items: center; justify-content: center; }
.ms-partners__logo {
	max-height: 44px;
	width: auto;
	object-fit: contain;
	opacity: .55;
	filter: grayscale(1);
	transition: opacity var(--ms-t-fast), filter var(--ms-t-fast);
}
.ms-partners__item:hover .ms-partners__logo { opacity: 1; filter: none; }

@media (min-width: 62em) {
	.ms-partners__inner { grid-template-columns: auto 1fr; align-items: center; gap: var(--ms-space-xl); }
}

/* --- Contact ---------------------------------------------------------- */

.ms-contact__inner { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
.ms-contact__text { color: var(--ms-muted); font-size: var(--ms-step-lead); }

/* One column: no empty half is reserved, and the copy keeps a readable
   measure instead of stretching across the full container. */
.ms-contact--one .ms-contact__inner { grid-template-columns: minmax(0, 1fr); }
.ms-contact--one .ms-contact__copy { max-width: 62ch; }
.ms-contact--one .ms-contact-list { max-width: 46ch; }

/* Two columns only where there is a form to fill the second one. Below the
   breakpoint both variants stack cleanly. */
@media (min-width: 56em) {
	.ms-contact--two .ms-contact__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --- Closing CTA ------------------------------------------------------ */

.ms-cta { position: relative; isolation: isolate; }
.ms-cta__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: var(--ms-space-sm);
	padding-block: var(--ms-space-2xl);
	border-radius: var(--ms-radius-lg);
}
.ms-cta:not(.ms-cta--image) .ms-cta__inner {
	background:
		radial-gradient(90% 130% at 50% 0%, rgba(var(--ms-accent-rgb), .2), transparent 62%),
		var(--ms-surface);
	border: 1px solid var(--ms-line);
	padding-inline: var(--ms-gutter);
}
.ms-cta__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ms-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.ms-cta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(var(--ms-bg-rgb), .74); }
.ms-cta__title { font-size: var(--ms-step-h2); margin: 0; max-width: 20ch; text-transform: uppercase; }
.ms-cta__text { color: rgba(var(--ms-text-rgb), .78); max-width: 54ch; font-size: var(--ms-step-lead); margin: 0; }
.ms-cta__form { width: min(100%, 34rem); margin-top: var(--ms-space-md); text-align: left; }
.ms-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ms-space-sm); justify-content: center; margin-top: var(--ms-space-md); }

/* Social icons inside the front page CTA section (#comunidad) only. */
.ms-social--cta {
	justify-content: center;
	margin-top: 24px;
}

/* --- Gutenberg home content ------------------------------------------- */

/* The editable area sits directly below the hero. It prints nothing at all
   when the Home page is empty, so there is no rule here that could leave a
   blank band behind. */
.ms-home-blocks { padding-bottom: 0; }
.ms-home-blocks + .ms-section { padding-top: var(--ms-section-y); }

.ms-home-blocks__inner {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

/* Wide and full alignments break out of the measure without ever widening
   the page: 100vw plus a negative margin, and the body clips overflow. */
.ms-home-blocks__inner > .alignwide {
	width: min(100%, var(--ms-container));
	max-width: none;
	margin-inline: auto;
}

.ms-home-blocks__inner > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.ms-home-blocks__inner > .alignfull > .wp-block-cover__inner-container,
.ms-home-blocks__inner > .alignfull > .wp-block-group__inner-container {
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

/* Cards in one row share a height instead of ragging at the bottom. */
.ms-block-cards { align-items: stretch; }
.ms-block-cards > .wp-block-column { display: flex; flex-direction: column; }
.ms-block-cards > .wp-block-column > figure { margin-bottom: var(--ms-space-sm); }
.ms-block-cards > .wp-block-column > figure img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Columns stack rather than squeeze on tablets and phones. */
@media (max-width: 47.99em) {
	.ms-home-blocks__inner .wp-block-columns { flex-wrap: wrap; }
	.ms-home-blocks__inner .wp-block-column { flex-basis: 100% !important; }
}

/* ==========================================================================
   10. Blog, archives, single
   ========================================================================== */

.site-main { display: block; }
.site-main--front { padding: 0; }

.ms-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 62em) {
	body:not(.no-sidebar) .ms-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.entry-content > * + * { margin-top: var(--ms-space-md); }
.entry-content h2 { margin-top: var(--ms-space-xl); }
.entry-content h3 { margin-top: var(--ms-space-lg); }
.entry-content img { border-radius: var(--ms-radius); }
.entry-content ul, .entry-content ol { color: rgba(var(--ms-text-rgb), .88); }
.entry-content li + li { margin-top: .35rem; }
.entry-content a { text-decoration: underline; text-underline-offset: .18em; }

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin-bottom: var(--ms-space-sm);
}
.entry-meta .sep { opacity: .5; }

.post-thumbnail { margin: 0 0 var(--ms-space-lg); border-radius: var(--ms-radius-lg); overflow: hidden; }
.post-thumbnail img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.entry-title { font-size: var(--ms-step-h3); margin: 0 0 .5rem; }
.entry-title a { color: var(--ms-text); }
.entry-title a:hover { color: var(--ms-accent-2); }

.single .entry-title, .page .entry-title { font-size: var(--ms-step-h2); }

.entry-footer { margin-top: var(--ms-space-lg); padding-top: var(--ms-space-md); border-top: 1px solid var(--ms-line); color: var(--ms-muted); font-size: .9375rem; }
.entry-footer a { color: var(--ms-accent-2); }

.pagination { margin-top: var(--ms-space-xl); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .75rem;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	color: var(--ms-text);
	font-size: .9375rem;
}
.pagination .page-numbers:hover { border-color: var(--ms-line-strong); }
.pagination .page-numbers.current { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-accent-ink); }

.post-navigation { margin-top: var(--ms-space-xl); border-top: 1px solid var(--ms-line); padding-top: var(--ms-space-lg); }
.post-navigation .nav-links { display: grid; gap: var(--ms-space-md); }
@media (min-width: 48em) { .post-navigation .nav-links { grid-template-columns: 1fr 1fr; } }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { color: var(--ms-text); font-family: var(--ms-font-display); font-weight: 700; }
.post-navigation a:hover { color: var(--ms-accent-2); }

/* Sidebar and widgets --------------------------------------------------- */

.widget-area { display: grid; gap: var(--ms-space-lg); align-content: start; }
.widget { border: 1px solid var(--ms-line); border-radius: var(--ms-radius-lg); padding: var(--ms-space-md); background: var(--ms-surface); }
.widget-title { font-size: var(--ms-step-h4); margin: 0 0 var(--ms-space-sm); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li + li { margin-top: .5rem; }
.widget a { color: var(--ms-text); }
.widget a:hover { color: var(--ms-accent-2); }

/* Comments -------------------------------------------------------------- */

.comments-area { margin-top: var(--ms-space-2xl); }
.comment-list { list-style: none; margin: 0 0 var(--ms-space-xl); padding: 0; }
.comment-list li { margin-bottom: var(--ms-space-md); }
.comment-list .children { list-style: none; padding-left: var(--ms-space-md); border-left: 1px solid var(--ms-line); margin-top: var(--ms-space-md); }
.comment-body { background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: var(--ms-space-md); }

/* Forms ----------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"], input[type="date"],
select, textarea {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	background: var(--ms-surface-2);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	color: var(--ms-text);
	font: inherit;
	font-size: 1rem; /* 16px keeps iOS from zooming on focus. */
	transition: border-color var(--ms-t-fast);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ms-accent-2); outline: none; }
::placeholder { color: rgba(var(--ms-text-rgb), .38); }
label { display: inline-block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 500; }

input[type="submit"], button[type="submit"], .wp-block-search__button {
	width: auto;
	min-height: 48px;
	padding: .8rem 1.6rem;
	background: var(--ms-accent);
	border: 1px solid var(--ms-accent);
	border-radius: var(--ms-radius-pill);
	color: var(--ms-accent-ink);
	font-family: var(--ms-font-body);
	font-weight: 650;
	font-size: .9375rem;
	cursor: pointer;
	transition: background-color var(--ms-t-fast);
}
input[type="submit"]:hover, button[type="submit"]:hover, .wp-block-search__button:hover { background: var(--ms-accent-2); border-color: var(--ms-accent-2); }

.search-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.search-form label { flex: 1 1 12rem; margin: 0; }

/* Third-party form plugins inherit the theme's field styling. */
.ms-form-shell, .ms-form { max-width: 100%; }
.ms-form-shell .forminator-ui, .ms-form .forminator-ui { max-width: 100%; }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
	margin-top: var(--ms-space-2xl);
	border-top: 1px solid var(--ms-line);
	background: var(--ms-surface);
	padding-block: var(--ms-footer-y) calc(var(--ms-footer-y) * .55);
}

.ms-footer-compact .site-footer { margin-top: var(--ms-space-xl); }
.ms-footer-compact .site-footer__grid { gap: clamp(1.5rem, 3.5vw, 2.25rem); }
.ms-footer-compact .site-footer__bar { margin-top: var(--ms-space-lg); }

.site-footer__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Four columns only when there is genuinely room for them; between tablet and
   small laptop two columns keep the address on one line per field. */
@media (min-width: 75em) {
	.site-footer__grid {
		/* The contact column is sized from the text it must hold: 25 characters
		   on one line, plus the icon column and its gap. The other columns give
		   way before this one does. */
		grid-template-columns:
			minmax(0, .9fr)
			minmax(0, .6fr)
			minmax(0, .6fr)
			minmax(calc(25ch + 4rem), 2.1fr);
	}
}

/* The same guarantee inside the row, so the text cell itself cannot be
   squeezed below 25 characters whatever the column does. */
.site-footer__contact .ms-contact-list li > :last-child { min-width: 25ch; }

.site-footer .site-title { margin-bottom: var(--ms-space-sm); }
.site-footer__blurb { color: var(--ms-muted); max-width: 40ch; font-size: .9375rem; }
.site-footer__title {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-step-eyebrow);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin: 0 0 var(--ms-space-sm);
}

.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-menu a { color: rgba(var(--ms-text-rgb), .82); font-size: .9375rem; }
.footer-menu a:hover { color: var(--ms-accent-2); }

.ms-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ms-contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .9375rem; color: var(--ms-muted); }

/* Each address field is its own line, so the address never depends on where
   the browser happens to wrap a long string. */
.ms-address { display: block; }
.ms-address__line {
	display: block;
	/* If a line is still long enough to wrap, wrap it kindly rather than
	   leaving a single word stranded. */
	text-wrap: pretty;
}
.ms-address__line + .ms-address__line { margin-top: .1rem; }
.ms-contact-list .ms-icon { color: var(--ms-accent-2); margin-top: .2rem; }
.ms-contact-list a { color: rgba(var(--ms-text-rgb), .85); }
.ms-contact-list a:hover { color: var(--ms-accent-2); }

.ms-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--ms-space-md); }
.ms-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	color: var(--ms-text);
	transition: border-color var(--ms-t-fast), color var(--ms-t-fast), background-color var(--ms-t-fast);
}
.ms-social-link:hover { border-color: var(--ms-accent); background: var(--ms-accent); color: var(--ms-accent-ink); }

.site-footer__widgets { display: grid; gap: var(--ms-space-lg); margin-top: var(--ms-space-xl); }
@media (min-width: 48em) { .site-footer__widgets { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } }

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-space-sm);
	margin-top: var(--ms-space-xl);
	padding-top: var(--ms-space-md);
	border-top: 1px solid var(--ms-line);
	font-size: .875rem;
	color: var(--ms-muted);
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a { color: var(--ms-muted); text-decoration: underline; text-underline-offset: .18em; }
.site-footer__bar a:hover { color: var(--ms-text); }

/* ==========================================================================
   12. Gutenberg alignment support
   ========================================================================== */

.entry-content > .alignwide {
	width: min(100%, 1240px);
	max-width: none;
	margin-inline: auto;
}

.entry-content > .alignfull {
	/* Break out of the container without ever causing horizontal scroll. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.entry-content > .alignfull > img,
.entry-content > .alignfull > figure > img { width: 100%; border-radius: 0; }

.alignleft { float: left; margin: .3rem var(--ms-space-md) var(--ms-space-sm) 0; }
.alignright { float: right; margin: .3rem 0 var(--ms-space-sm) var(--ms-space-md); }
.aligncenter { margin-inline: auto; display: block; }

@media (max-width: 40em) {
	.alignleft, .alignright { float: none; margin-inline: 0; }
}

.wp-block-embed__wrapper, .wp-block-embed iframe, .wp-block-video video { max-width: 100%; }
.wp-block-image img { height: auto; }
.wp-block-columns { gap: var(--ms-space-md); }
.wp-block-button__link { border-radius: var(--ms-radius-pill); }
.wp-block-gallery { margin-bottom: var(--ms-space-md); }
.wp-block-cover { border-radius: var(--ms-radius-lg); overflow: hidden; }

.wp-caption, figcaption, .wp-element-caption { color: var(--ms-muted); font-size: .875rem; margin-top: .5rem; }

/* WordPress admin bar keeps the sticky header clear of itself. */
.admin-bar .site-header { top: 32px; }
.admin-bar .main-navigation { top: calc(var(--ms-header-h) + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
	.admin-bar .main-navigation { top: calc(var(--ms-header-h) + 46px); }
}

/* ==========================================================================
   13. Utilities
   ========================================================================== */

.ms-icon { flex: none; vertical-align: middle; }
.ms-placeholder { width: 100%; height: 100%; object-fit: cover; }

.skip-link:focus { z-index: 999; }

.sticky .entry-title::after {
	content: "★";
	color: var(--ms-accent);
	margin-left: .4rem;
	font-size: .7em;
	vertical-align: super;
}

.page-links { margin-top: var(--ms-space-md); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }


/* ==========================================================================
   16. Interior templates (blog, single, page, search, 404, auditions)
   ========================================================================== */

.ms-page-hero--compact {
	background: none;
	border: 0;
	padding: 0 0 var(--ms-space-xl);
	margin-bottom: var(--ms-space-lg);
	border-bottom: 1px solid var(--ms-line);
	overflow: visible;
}
body:not(.has-hero) .ms-page-hero--compact { padding-top: var(--ms-space-xl); }

/* The removed header also carried the page's top spacing. This restores that
   one value, and applies only to the pages whose header is suppressed. */
.ms-page-no-hero .site-main { padding-top: var(--ms-space-xl); }
.ms-page-hero--compact .ms-page-hero__title { max-width: 24ch; }
.ms-page-hero__search { margin-top: var(--ms-space-md); max-width: 32rem; }

.ms-layout__main { min-width: 0; }
.ms-layout__aside { min-width: 0; }

.ms-entry { max-width: 100%; }
.ms-entry__head { margin-bottom: var(--ms-space-lg); }
.ms-entry__title { font-size: var(--ms-step-h2); margin: 0 0 var(--ms-space-sm); text-wrap: balance; }
.ms-entry__banner {
	margin: 0 0 var(--ms-space-lg);
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
	background: var(--ms-surface-2);
}
.ms-entry__banner img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.ms-entry__footer {
	margin-top: var(--ms-space-lg);
	padding-top: var(--ms-space-md);
	border-top: 1px solid var(--ms-line);
	font-size: .9375rem;
}
.ms-tags { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.ms-tags a {
	display: inline-block;
	padding: .4rem .8rem;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	font-size: .875rem;
	color: var(--ms-muted);
}
.ms-tags a:hover { border-color: var(--ms-accent); color: var(--ms-text); }

.ms-post-nav {
	margin-top: var(--ms-space-xl);
	padding-top: var(--ms-space-lg);
	border-top: 1px solid var(--ms-line);
	display: grid;
	gap: var(--ms-space-md);
}
@media (min-width: 48em) { .ms-post-nav { grid-template-columns: 1fr 1fr; } }
.ms-post-nav__next { text-align: right; }
.ms-post-nav a {
	display: block;
	color: var(--ms-text);
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: var(--ms-step-h4);
	line-height: 1.2;
}
.ms-post-nav a:hover { color: var(--ms-accent-2); }
.ms-post-nav span { display: block; }

.ms-aside__title, .ms-comments__title {
	font-size: var(--ms-step-h4);
	margin: 0 0 var(--ms-space-md);
}

.ms-comments { margin-top: var(--ms-space-2xl); padding-top: var(--ms-space-lg); border-top: 1px solid var(--ms-line); }
.ms-comments__list { list-style: none; margin: 0 0 var(--ms-space-xl); padding: 0; }
.ms-comments__closed { color: var(--ms-muted); }

.ms-search-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.ms-search-form__field { flex: 1 1 12rem; min-width: 0; }
.ms-search-form__submit { flex: none; }

.ms-empty-state {
	border: 1px dashed var(--ms-line-strong);
	border-radius: var(--ms-radius-lg);
	padding: var(--ms-space-xl);
	text-align: center;
}
.ms-empty-state__title { font-size: var(--ms-step-h3); margin: 0 0 var(--ms-space-sm); }

.ms-404 { display: grid; place-items: center; min-height: 60svh; padding-block: var(--ms-space-2xl); }
.ms-404__inner { text-align: center; max-width: 46rem; }
.ms-404__text { color: var(--ms-muted); font-size: var(--ms-step-lead); margin-bottom: var(--ms-space-lg); }
.ms-404__search { max-width: 30rem; margin: var(--ms-space-lg) auto 0; }

.site-main--auditions .ms-page-hero { margin-bottom: 0; }
.ms-auditions__grid { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 62em) { .ms-auditions__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.ms-auditions__grid--single { grid-template-columns: minmax(0, 1fr) !important; }
.ms-auditions__aside {
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	padding: var(--ms-space-md);
}
.ms-form-shell { min-width: 0; }

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
	.site-header, .site-footer, .menu-toggle, .ms-hero__controls,
	.ms-hero__meter, .ms-hero__strip, .widget-area { display: none !important; }
	body { background: #fff; color: #000; }
	a { color: #000; }
}

/* ==========================================================================
   15. Reduced motion
   ==========================================================================
   Placed last so it wins without !important on the rules that matter.
   Animation is removed; nothing that depends on an animation to become
   visible is left hidden. */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.ms-slide__label,
	.ms-slide__title,
	.ms-slide__text,
	.ms-slide__actions {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	.ms-slide__image { transform: none; }

	.ms-hero[data-playing="true"] .ms-hero__chapter.is-active .ms-hero__chapter-bar i {
		width: 100%;
		animation: none !important;
	}
}

/* ==========================================================================
   17. Contrast fix
   ========================================================================== */

.ms-service__num { color: #ff6b3d; }