/* "Our partnership with Marketing Camp" (template-marketing-camp.php).
   Figma node 3868:27844. Typography for .mc-intro is a deliberate,
   confirmed match to .service-intro (service.css) — same eyebrow/text
   scale — reproduced here rather than shared across files since every
   template in this theme keeps its own stylesheet. */

.mc-hero {
	position: relative;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-color: var(--color-ink);
	overflow: hidden;
}

.mc-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-ink);
	mix-blend-mode: hard-light;
}

.mc-hero__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	text-align: center;
}

.mc-hero__heading {
	margin: 0;
	max-width: 44rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	line-height: 1.17;
	color: var(--color-white);
}

/* Exception to the site's global mobile h1 baseline (3.1rem, see
   base.css) — this hero also carries the logo lockup below it, and at
   3.1rem the heading (often 2 lines) plus that lockup crowded the whole
   100vh hero; smaller here leaves the lockup room to breathe. */
@media (max-width: 900px) {
	.mc-hero__heading {
		font-size: clamp(1.75rem, 9vw, 2.25rem);
	}
}

.mc-lockup {
	display: flex;
	align-items: center;
	gap: 40px;
}

.mc-lockup__word {
	display: block;
	height: 2.0625rem;
	width: auto;
}

.mc-lockup__x {
	display: block;
	height: 1.535rem;
	width: auto;
}

.mc-lockup__mc {
	display: block;
	height: 3.01875rem;
	width: auto;
}

/* No Figma mobile design for this page — sized down by eye. At the
   desktop sizes/gap, the wordmark + separator + Marketing Camp logo
   together ran close to the full mobile viewport width with very little
   breathing room either side; flex-wrap is a safety net for an even
   narrower phone, not the expected common case. Placed after the
   unconditional rules above (not grouped with .mc-lockup's own base rule)
   — a media query adds no specificity of its own, so an earlier override
   here would otherwise still lose to these same-specificity unconditional
   rules further up, which come later in source order. */
@media (max-width: 900px) {
	.mc-lockup {
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.mc-lockup__word {
		height: 1.5rem;
	}

	.mc-lockup__x {
		height: 1.1rem;
	}

	.mc-lockup__mc {
		height: 2.2rem;
	}
}

.mc-hero__arrow {
	display: block;
	width: 3.6875rem;
	height: 3.6875rem;
	flex-shrink: 0;
}

.mc-hero__arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Intro blocks ---
   "Who are Marketing Camp?" uses the larger eyebrow+text scale (matches
   .service-intro exactly); "Invanity & Marketing Camp." and "Invanity
   Answers live." use the smaller .mc-block__* scale instead — confirmed
   as two genuinely different type scales in Figma, not an inconsistency. */

.mc-intro {
	background: var(--color-white);
	padding-block: clamp(56px, 8vw, 96px);
}

.mc-intro--narrow {
	padding-block: clamp(48px, 6vw, 80px);
}

.mc-intro__inner {
	max-width: 66.75rem;
}

.mc-intro__eyebrow {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.6875rem;
	line-height: 1.3;
	color: var(--color-ink);
}

.mc-intro__text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 1.375;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

/* Matches the Strategy template's own equivalent mobile intro-copy size
   (.service-pinned__stat, service.css) — no Figma mobile design for this
   page specifically, but there's no reason for this page's own "big
   intro statement" text to read any bigger than that established size. */
@media (max-width: 900px) {
	.mc-intro__text {
		font-size: 1.75rem;
	}
}

.mc-block__heading {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.5625rem;
	line-height: 1.4;
	color: var(--color-ink);
}

.mc-block__text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.545;
	color: var(--color-ink);
}

.mc-block__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Video --- */

.mc-video {
	background: var(--color-white);
	padding-block: clamp(56px, 8vw, 96px);
}

@media (max-width: 900px) {
	.mc-video {
		padding-block: 16px;
	}
}

.mc-video__inner {
	max-width: 67.1rem;
}

.mc-video__el {
	display: block;
	width: 100%;
	aspect-ratio: 1073.8 / 618.06;
	object-fit: cover;
	background: var(--color-ink);
}

/* --- Partnership (text + fading photo stack) --- */

.mc-partnership {
	background: var(--color-white);
	padding-block: clamp(56px, 8vw, 96px);
}

.mc-partnership__inner {
	max-width: 66.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

.mc-partnership__copy {
	max-width: 28.5rem;
	flex: 1 1 20rem;
}

/* Photo 1 sits in normal flow at its natural size — it's what gives .mc-stack
   its box. Photos 2/3 are sized as a % of that box (not a fixed px crop) so
   every photo shows at its own natural aspect ratio, uncropped. */
.mc-stack {
	position: relative;
	width: 29.96rem;
	max-width: 100%;
}

.mc-stack__photo {
	box-shadow: 0 20px 45px rgba(27, 27, 27, 0.22);
}

.mc-stack__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.mc-stack__photo--1 {
	position: relative;
	transform: rotate(7.6deg);
}

.mc-stack__photo--2 {
	position: absolute;
	width: 88%;
	left: 6%;
	top: 5%;
	opacity: 0;
	transition: opacity 0.9s ease;
	transform: rotate(-12.74deg);
}

.mc-stack__photo--2.is-visible {
	opacity: 1;
}

.mc-stack__photo--3 {
	position: absolute;
	width: 96%;
	left: -3%;
	top: -6%;
	opacity: 0;
	transition: opacity 0.9s ease;
	transform: rotate(17.13deg);
}

.mc-stack__photo--3.is-visible {
	opacity: 1;
}

@media (max-width: 700px) {
	.mc-stack {
		width: 14rem;
		/* .mc-partnership__inner wraps to a single column above this
		   width — margin-inline:auto centers this fixed-width flex item
		   within it, rather than sitting flush left the way space-between
		   (desktop's own side-by-side alignment) leaves a single wrapped
		   item. */
		margin-inline: auto;
	}
}

/* --- Carousel --- */

.mc-carousel {
	background: var(--color-white);
	padding-block: clamp(56px, 8vw, 96px);
	overflow: hidden;
}

.mc-carousel__heading {
	margin: 0 0 32px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.5625rem;
	color: var(--color-ink);
}

/* The track is deliberately wider than the centred content well (see
   .mc-carousel__viewport's overflow:visible) so the slides just outside
   the focused pair peek into the side gutters, faded, matching Figma's
   own marquee-style carousel component (3968:21537) — the nav arrows
   float on top of that peek, at the same edge as the rest of the site's
   .container. .mc-carousel__stage is the actual clip boundary, full-width
   so the peek doesn't spill past the real viewport edge. */
.mc-carousel__stage {
	position: relative;
	overflow: hidden;
}

/* Keeps both nav buttons as direct, independently absolutely-positioned
   children of .mc-carousel__stage on desktop (unaffected by this wrapper
   existing at all) — see the @media (max-width: 700px) override further
   down for the mobile case, where this becomes a real flex row instead. */
.mc-carousel__nav-row {
	display: contents;
}

.mc-carousel__nav {
	position: absolute;
	top: 10.5rem;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.375rem;
	height: 3.375rem;
	padding: 0;
	border: 1px solid var(--color-ink);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background-color 0.25s ease;
	box-sizing: border-box;
}

.mc-carousel__nav:hover,
.mc-carousel__nav:focus-visible {
	background-color: var(--color-ink);
}

.mc-carousel__nav--prev {
	left: var(--gutter);
}

.mc-carousel__nav--next {
	right: var(--gutter);
}

.mc-carousel__nav img {
	display: block;
	width: 100%;
	height: 100%;
	transition: filter 0.25s ease;
}

.mc-carousel__nav:hover img,
.mc-carousel__nav:focus-visible img {
	filter: invert(1);
}

/* Source icon is a single down-pointing arrow-in-circle glyph — rotate per
   direction rather than keeping two near-identical exported assets. */
.mc-carousel__nav--prev img {
	transform: rotate(90deg);
}

.mc-carousel__nav--next img {
	transform: rotate(-90deg);
}

.mc-carousel__viewport {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
	overflow: visible;
}

.mc-carousel__track {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.5s ease;
}

.mc-carousel__slide {
	flex: 0 0 min(37rem, 82vw);
	opacity: 0.35;
	transition: opacity 0.5s ease;
}

.mc-carousel__slide.is-focused {
	opacity: 1;
}

.mc-carousel__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mc-carousel__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 591.78 / 332.88;
	object-fit: cover;
	background: var(--color-ink);
}

.mc-carousel__caption {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

/* Both now live as spans inside one shared .mc-carousel__caption-heading
   (see template-marketing-camp.php) — this reset is what used to be each
   <p>'s own margin:0, just moved up to their shared wrapper since spans
   don't carry a default margin themselves. */
.mc-carousel__caption-heading {
	margin: 0;
}

.mc-carousel__episode {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.545;
	color: var(--color-ink);
}

.mc-carousel__title {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.545;
	color: var(--color-ink);
}

.mc-carousel__arrow {
	display: block;
	width: 2.74rem;
	height: 2.74rem;
	flex-shrink: 0;
	border: 1px solid var(--color-ink);
	border-radius: 50%;
	box-sizing: border-box;
	transform: rotate(-90deg);
	transition: background-color 0.25s ease;
}

.mc-carousel__card:hover .mc-carousel__arrow,
.mc-carousel__card:focus-visible .mc-carousel__arrow {
	background-color: var(--color-ink);
}

.mc-carousel__arrow img {
	display: block;
	width: 100%;
	height: 100%;
	transition: filter 0.25s ease;
}

.mc-carousel__card:hover .mc-carousel__arrow img,
.mc-carousel__card:focus-visible .mc-carousel__arrow img {
	filter: invert(1);
}

.mc-carousel__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
}

.mc-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(27, 27, 27, 0.2);
	transition: background 0.25s ease;
}

.mc-carousel__dot.is-active {
	background: var(--color-accent);
}

/* No Figma mobile design for this page — matching the home page's own
   mobile carousel treatment (.closing-statement__nav, home.css): prev/next
   move below the viewport as a real centred row instead of overlaying the
   stage at a fixed vertical offset (10.5rem, tuned for the desktop card
   height, above), which didn't track this section's shorter mobile card
   height and left them floating over the wrong part of the image. Dots
   are redundant with real prev/next controls back in view, so they're
   dropped here rather than showing both. */
@media (max-width: 700px) {
	.mc-carousel__stage {
		display: flex;
		flex-direction: column;
	}

	.mc-carousel__viewport {
		order: 1;
	}

	.mc-carousel__nav-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
		order: 2;
		margin-top: clamp(24px, 6vw, 40px);
	}

	.mc-carousel__nav {
		position: static;
		transform: none;
	}

	.mc-carousel__dots {
		display: none;
	}
}