/*
 Theme Name:   Matthew Cornelison Theme
 Theme URI:    https://companysite.local
 Description:  Child theme of GeneratePress. Blank, full-width canvas with GSAP/ScrollTrigger enqueued and ready for use.
 Author:       Matthew Cornelison
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  matthew-cornelison-theme
*/

/* ==========================================================================
   Design tokens
   Palette derived from the service-card illustrations so type/UI stays
   consistent with the artwork already in /assets/img/services/.
   ========================================================================== */

:root {
	--mct-navy:   #1A2B4C;
	--mct-teal:   #2F6F6B;
	--mct-slate:  #4B5B7C;
	--mct-amber:  #A3752C;
	--mct-accent:      #1267D5;
	--mct-accent-dark: #0F52AC;
	--mct-success:     #1E7A46;

	--mct-ink:    #263238;
	--mct-muted:  #5A6672;
	--mct-bg:     #FAFAFA;
	--mct-surface:#FFFFFF;
	--mct-border: #E6E6E6;

	--mct-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	--mct-space-1: 0.5rem;
	--mct-space-2: 1rem;
	--mct-space-3: 1.5rem;
	--mct-space-4: 2.5rem;
	--mct-space-5: 4rem;
	--mct-space-6: 6rem;

	--mct-radius:   10px;
	--mct-radius-lg: 16px;

	--mct-shadow-sm: 0 1px 3px rgba(26, 43, 76, 0.08);
	--mct-shadow-md: 0 8px 24px rgba(26, 43, 76, 0.10);
	--mct-shadow-lg: 0 18px 48px rgba(26, 43, 76, 0.14);

	--mct-nav-h: 68px;

	/* Container system: different section types intentionally use different
	   maximum widths instead of one narrow width everywhere.
	   sm  - narrow centered intros / closing CTAs (short, long-form-style text)
	   md  - default; About page body sections (text + timeline/cards splits)
	   lg  - card grids: services, pricing, and the nav bar
	   xl  - hero sections (homepage + About), the widest, most visual layouts */
	--mct-container-sm: 760px;
	--mct-container-md: 1160px;
	--mct-container-lg: 1320px;
	--mct-container-xl: 1440px;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	/* Anchor targets clear the fixed nav. */
	scroll-padding-top: calc(var(--mct-nav-h) + 1rem);
}

body {
	margin: 0;
	font-family: var(--mct-font);
	color: var(--mct-ink);
	background: var(--mct-surface);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Scroll lock while the mobile menu is open. overflow:hidden alone doesn't
   reliably block background rubber-band scrolling on iOS Safari, so nav.js
   also pins the body with position:fixed (offset by the saved scroll
   position via top, restored on close) whenever this class is present. */
body.mct-nav-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--mct-navy);
	text-decoration: none;
}

h1, h2, h3 {
	color: var(--mct-navy);
	line-height: 1.15;
	margin: 0 0 var(--mct-space-2);
	letter-spacing: -0.015em;
}

p {
	margin: 0 0 var(--mct-space-2);
}

.site {
	/* Push page content below the fixed nav. */
	padding-top: var(--mct-nav-h);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.mct-container {
	width: 100%;
	max-width: var(--mct-container-md);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.mct-container--narrow {
	max-width: var(--mct-container-sm);
}

.mct-container--lg {
	max-width: var(--mct-container-lg);
}

.mct-container--xl {
	max-width: var(--mct-container-xl);
}

.mct-section {
	padding-block: clamp(3rem, 8vw, var(--mct-space-6));
}

/* Alternating section backgrounds for separation without hard rules. */
.mct-services { background: var(--mct-bg); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.mct-btn {
	display: inline-block;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 0.85rem 1.6rem;
	border-radius: var(--mct-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease,
		color 0.15s ease, box-shadow 0.15s ease;
}

.mct-btn:hover {
	transform: translateY(-2px);
}

.mct-btn--accent {
	background: var(--mct-accent);
	color: #fff;
	box-shadow: var(--mct-shadow-sm);
}

.mct-btn--accent:hover {
	background: var(--mct-accent-dark);
	box-shadow: var(--mct-shadow-md);
}

.mct-btn--outline {
	background: transparent;
	color: var(--mct-navy);
	border-color: var(--mct-navy);
}

.mct-btn--outline:hover {
	background: var(--mct-navy);
	color: #fff;
}

.mct-btn--light {
	background: #fff;
	color: var(--mct-navy);
}

.mct-btn--light:hover {
	background: var(--mct-accent);
	color: #fff;
}

/* ==========================================================================
   Nav bar
   ========================================================================== */

.mct-nav {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--mct-nav-h);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--mct-border);
	z-index: 1000;
	transition: transform 0.3s ease;
}

.mct-nav.is-hidden {
	transform: translateY(-100%);
}

.mct-nav__inner {
	max-width: var(--mct-container-xl);
	height: 100%;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mct-space-3);
}

.mct-nav__brand {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--mct-navy);
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.mct-nav__brand span {
	color: var(--mct-accent);
}

/* Desktop: .mct-nav__menu is a plain flex row holding the link list and the
   CTA button side by side (visually identical to the old flat <ul>, since
   .mct-nav__list reapplies the same flex row + gap one level down). The
   mobile drawer layout is defined entirely in the max-width:860px block
   below and overrides these to a column with a scrollable list + pinned
   CTA footer. */
.mct-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--mct-space-3);
}

.mct-nav__list {
	display: flex;
	align-items: center;
	gap: var(--mct-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mct-nav__item {
	position: relative;
}

.mct-nav__link,
.mct-nav__dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	color: var(--mct-ink);
	background: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 0.4rem 0;
	cursor: pointer;
	font-family: inherit;
	transition: color 0.15s ease;
	/* A de-styled <button> can lose the native browser behavior that blocks
	   text selection, letting a click-drag paint a text-selection highlight
	   behind the label. Nav items aren't meant to be selectable text anyway. */
	-webkit-user-select: none;
	user-select: none;
}

.mct-nav__link:hover,
.mct-nav__dropdown-toggle:hover,
.mct-nav__item--dropdown.is-open .mct-nav__dropdown-toggle {
	color: var(--mct-accent);
}

/* No default (often dark) button outline on mouse focus; keyboard users still
   get a clear accent ring so the toggle feels like the plain "Pricing" link. */
.mct-nav__link:focus,
.mct-nav__dropdown-toggle:focus {
	outline: none;
}

.mct-nav__link:focus-visible,
.mct-nav__dropdown-toggle:focus-visible {
	outline: 2px solid var(--mct-accent);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Accent underline that slides in on hover / when the dropdown is open, so it
   is clear which menu item is being selected. Desktop nav only; the mobile
   menu uses its own full-width row styling. */
@media (min-width: 861px) {
	.mct-nav__link,
	.mct-nav__dropdown-toggle {
		position: relative;
	}

	.mct-nav__link::after,
	.mct-nav__dropdown-toggle::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		border-radius: 2px;
		background: var(--mct-accent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.2s ease;
	}

	.mct-nav__link:hover::after,
	.mct-nav__dropdown-toggle:hover::after,
	.mct-nav__item--dropdown.is-open .mct-nav__dropdown-toggle::after {
		transform: scaleX(1);
	}
}

.mct-nav__caret {
	width: 0.7em;
	height: 0.7em;
	transition: transform 0.2s ease;
}

.mct-nav__item--dropdown.is-open .mct-nav__caret {
	transform: rotate(180deg);
}

.mct-nav__dropdown {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--mct-border);
	border-radius: var(--mct-radius);
	box-shadow: var(--mct-shadow-md);
	padding: 0.5rem;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.mct-nav__item--dropdown.is-open .mct-nav__dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Desktop / laptop: reveal the submenu on hover (and keyboard focus) rather
   than requiring a click. It stays open while the pointer is over the toggle
   or the panel and closes when the pointer leaves both. Mobile/tablet keep the
   click-to-open behavior handled in nav.js. */
@media (min-width: 861px) {
	.mct-nav__item--dropdown:hover .mct-nav__dropdown,
	.mct-nav__item--dropdown:focus-within .mct-nav__dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}

	.mct-nav__item--dropdown:hover .mct-nav__dropdown-toggle,
	.mct-nav__item--dropdown:focus-within .mct-nav__dropdown-toggle {
		color: var(--mct-accent);
	}

	.mct-nav__item--dropdown:hover .mct-nav__dropdown-toggle::after,
	.mct-nav__item--dropdown:focus-within .mct-nav__dropdown-toggle::after {
		transform: scaleX(1);
	}

	.mct-nav__item--dropdown:hover .mct-nav__caret,
	.mct-nav__item--dropdown:focus-within .mct-nav__caret {
		transform: rotate(180deg);
	}

	/* Invisible bridge over the gap between the toggle and the panel so the menu
	   does not close while the pointer travels down into it. */
	.mct-nav__dropdown::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.7rem;
		height: 0.7rem;
	}
}

.mct-nav__dropdown a {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: 6px;
	font-size: 0.92rem;
	color: var(--mct-ink);
	transition: background 0.12s ease, color 0.12s ease;
}

.mct-nav__dropdown a:hover {
	background: var(--mct-bg);
	color: var(--mct-navy);
}

.mct-nav__dropdown a:focus-visible {
	outline: 2px solid var(--mct-accent);
	outline-offset: -2px;
	background: var(--mct-bg);
}

.mct-nav__cta {
	padding: 0.6rem 1.15rem;
	font-size: 0.9rem;
}

/* Hamburger */
.mct-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.mct-nav__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin-inline: auto;
	background: var(--mct-navy);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.mct-nav__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mct-nav__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.mct-nav__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.mct-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 8vw, 6rem);
	background: linear-gradient(165deg, #FFFFFF 0%, #EFF5FE 58%, #E6EFFC 100%);
}

/* Extremely subtle grid, masked to a soft radial so it reads as texture behind
   the animation and fades out everywhere else. */
.mct-hero__backdrop {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(18, 103, 213, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(18, 103, 213, 0.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(115% 115% at 72% 42%, #000 28%, transparent 74%);
	mask-image: radial-gradient(115% 115% at 72% 42%, #000 28%, transparent 74%);
	pointer-events: none;
}

.mct-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 6vw, 4rem);
	align-items: center;
}

/* --- Left column --- */
.mct-hero__headline {
	font-size: clamp(2.1rem, 5.5vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: var(--mct-space-3);
}

.mct-hero__subhead {
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	color: var(--mct-muted);
	max-width: 46ch;
	margin-bottom: var(--mct-space-4);
}

.mct-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mct-space-2);
	margin-bottom: var(--mct-space-4);
}

/* --- Right column (animation) --- */
.mct-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Soft radial glow behind the animation. */
.mct-hero__glow {
	position: absolute;
	inset: 6% 2%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(18, 103, 213, 0.22), rgba(18, 103, 213, 0) 72%);
	filter: blur(34px);
	pointer-events: none;
	z-index: 0;
}

/* The 16:9 box matches the source animation so nothing is cropped or
   distorted, and the reserved aspect-ratio prevents layout shift while the
   animation loads. */
.mct-hero__lottie {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.mct-hero__lottie svg {
	display: block;
}

@media (min-width: 861px) {
	.mct-hero__grid {
		grid-template-columns: 45fr 55fr;
	}
}

/* ==========================================================================
   Services ("What I Do")
   ========================================================================== */

.mct-services__title {
	text-align: center;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin-bottom: var(--mct-space-5);
}

/* The services title is followed by a subtitle, so tighten its own gap. */
.mct-services__title {
	margin-bottom: var(--mct-space-2);
}

.mct-services__subtitle {
	text-align: center;
	max-width: 52ch;
	margin: 0 auto var(--mct-space-5);
	color: var(--mct-muted);
	font-size: clamp(1rem, 2vw, 1.15rem);
}

.mct-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mct-space-4);
}

.mct-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mct-surface);
	border: 1px solid var(--mct-border);
	border-radius: var(--mct-radius-lg);
	padding: var(--mct-space-4);
	text-align: center;
	box-shadow: var(--mct-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mct-service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mct-shadow-md);
	border-color: var(--mct-accent);
}

/* Keyboard focus lands on the stretched link; reflect it on the whole card. */
.mct-service-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--mct-shadow-md);
	border-color: var(--mct-accent);
	outline: 2px solid var(--mct-accent);
	outline-offset: 3px;
}

/* Fixed illustration area: every image is centered in an identical box and
   scaled with object-fit so the differing source aspect ratios (three are
   500x500 squares, the cleanup art is 750x500) render at a consistent height
   instead of the cleanup image sitting shorter than the rest. */
.mct-service-card__illustration-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	margin-bottom: var(--mct-space-3);
}

.mct-service-card__illustration {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 900px) {
	.mct-service-card__illustration-wrap {
		height: 190px;
	}
}

/* Title area: min-height reserves two lines so titles begin at the same
   vertical position and the accent line (pinned to the area's bottom) aligns
   across cards no matter how the title wraps. */
.mct-service-card__title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
	margin: 0 0 var(--mct-space-2);
	padding-bottom: 0.7rem;
	font-size: 1.35rem;
}

.mct-service-card__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	border-radius: 3px;
	background: var(--mct-accent);
}

.mct-service-card__title--navy::after  { background: var(--mct-navy); }
.mct-service-card__title--teal::after  { background: var(--mct-teal); }
.mct-service-card__title--slate::after { background: var(--mct-slate); }
.mct-service-card__title--amber::after { background: var(--mct-amber); }

/* Description area: min-height reserves the tallest copy (three lines) so the
   examples line below begins at the same vertical position on every card. */
.mct-service-card__desc {
	min-height: 4.8em;
	margin: 0 0 var(--mct-space-2);
	color: var(--mct-muted);
}

/* Examples line: subtle, secondary to the description. Min-height reserves two
   lines so the project link aligns along the bottom across cards. */
.mct-service-card__examples {
	min-height: 3em;
	margin: 0 0 var(--mct-space-3);
	color: var(--mct-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.mct-service-card__examples-label {
	font-weight: 600;
	color: var(--mct-ink);
}

/* Bottom link. Its ::after is stretched over the whole card so the entire
   card is clickable without nesting anchors. Pinned to the card bottom so
   links align across cards of differing height. */
.mct-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	align-self: center;
	margin-top: auto;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mct-accent);
	transition: color 0.15s ease;
}

.mct-service-card__link:hover {
	color: var(--mct-accent-dark);
}

.mct-service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mct-service-card__arrow {
	width: 1em;
	height: 1em;
	transition: transform 0.15s ease;
}

.mct-service-card:hover .mct-service-card__arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   Final CTA (dark band)
   ========================================================================== */

.mct-final-cta {
	background: var(--mct-navy);
	text-align: center;
}

.mct-final-cta__headline {
	color: #fff;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	margin-bottom: var(--mct-space-4);
}

/* ==========================================================================
   Pricing page
   ========================================================================== */

.mct-page-intro {
	text-align: center;
	/* A compact page label: this should introduce the content, not become a hero. */
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.mct-page-intro__title {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	font-weight: 700;
	margin: 0;
}


.mct-pricing__build {
	max-width: var(--mct-container-sm);
	margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
	text-align: center;
}

/* Ongoing Partnership reuses .mct-pricing__build for identical icon/title
   sizing, but its subtitle lives in the next element rather than inside this
   div, so the block's own bottom margin (meant to trail a full Initial-Build-
   style block) needs to shrink to just the title's own margin, matching the
   tight title-to-copy spacing inside Initial Build. */
.mct-pricing__build--tight {
	margin-bottom: var(--mct-space-2);
}

.mct-build__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(18, 103, 213, 0.12);
	color: var(--mct-accent);
	margin-bottom: var(--mct-space-2);
}

.mct-build__title {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.mct-build__desc {
	color: var(--mct-muted);
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--mct-space-2);
}

.mct-build__rate {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--mct-navy);
	margin: 0;
}

.mct-pricing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mct-space-4);
	align-items: stretch;
}

.mct-pricing {
	background: linear-gradient(180deg, #F7FAFE 0%, #F1F5FB 100%);
	padding-block: clamp(2.5rem, 4vw, 3.75rem);
}

.mct-pricing__intro {
	max-width: 720px;
	margin: 0 auto var(--mct-space-3);
	text-align: center;
}

.mct-pricing__intro .mct-eyebrow {
	color: var(--mct-accent);
}

.mct-pricing__intro > p:last-child {
	margin: 0;
	color: var(--mct-muted);
	/* No font-size override, matching .mct-build__desc (Initial Build's
	   subtitle) exactly rather than scaling up to 1.12rem on wide screens. */
}

.mct-pricing__journey {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	list-style: none;
	max-width: 1000px;
	margin: 0 auto var(--mct-space-4);
	padding: 0;
}

.mct-pricing__journey li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 1rem;
	border: 1px solid rgba(18, 103, 213, 0.14);
	border-radius: var(--mct-radius);
	background: rgba(255, 255, 255, 0.7);
}

.mct-pricing__journey-number {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mct-accent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.mct-pricing__journey strong,
.mct-pricing__journey span:not(.mct-pricing__journey-number) {
	display: block;
}

.mct-pricing__journey strong {
	margin-bottom: 0.12rem;
	color: var(--mct-navy);
	font-size: 0.9rem;
}

.mct-pricing__journey span:not(.mct-pricing__journey-number) {
	color: var(--mct-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

.mct-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mct-surface);
	border: 1px solid var(--mct-border);
	border-radius: var(--mct-radius-lg);
	padding: var(--mct-space-4);
	box-shadow: var(--mct-shadow-sm);
}

.mct-price-card--featured {
	border-color: var(--mct-accent);
	box-shadow: var(--mct-shadow-lg);
}

.mct-price-card__badge {
	position: absolute;
	top: -0.9rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mct-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	white-space: nowrap;
}

.mct-price-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--mct-bg);
	color: var(--mct-slate);
	margin-bottom: var(--mct-space-2);
}

.mct-price-card__icon--filled {
	background: var(--mct-accent);
	color: #fff;
}

.mct-price-card__title {
	font-size: 1.3rem;
	margin-bottom: var(--mct-space-1);
}

.mct-price-card__fit {
	min-height: 3.15em;
	margin: 0 0 var(--mct-space-3);
	color: var(--mct-muted);
	font-size: 0.84rem;
	line-height: 1.55;
}

.mct-price-card__price {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--mct-navy);
	margin-bottom: var(--mct-space-3);
	line-height: 1;
}

.mct-price-card__period {
	font-size: 1rem;
	font-weight: 500;
	color: var(--mct-muted);
}

.mct-price-card__list {
	list-style: none;
	margin: 0 0 var(--mct-space-4);
	padding: 0;
	display: grid;
	gap: 0.6rem;
	flex: 1;
}

.mct-price-card__list li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--mct-ink);
	font-size: 0.95rem;
}

.mct-price-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mct-accent);
}

.mct-price-card__cta {
	text-align: center;
	margin-top: auto;
}

.mct-pricing__reassurance {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.65rem;
	max-width: 760px;
	margin: var(--mct-space-3) auto 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(30, 122, 70, 0.2);
	border-radius: var(--mct-radius);
	background: rgba(255, 255, 255, 0.72);
	color: var(--mct-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.mct-pricing__reassurance svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.1rem;
	color: var(--mct-success);
}

.mct-pricing__reassurance p {
	margin: 0;
}

.mct-pricing__reassurance strong {
	color: var(--mct-navy);
}

/* ==========================================================================
   Specialty portfolio landing pages
   ========================================================================== */

.mct-portfolio__hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	background:
		radial-gradient(circle at 84% 22%, rgba(18, 103, 213, 0.45), transparent 28rem),
		linear-gradient(135deg, #122340 0%, var(--mct-navy) 62%, #10274d 100%);
}

.mct-portfolio__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent 76%);
	pointer-events: none;
}

.mct-portfolio__hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.mct-portfolio__hero-copy {
	max-width: 650px;
}

.mct-portfolio__hero .mct-eyebrow {
	color: #9cc6ff;
}

.mct-portfolio__hero h1 {
	color: #fff;
	font-size: clamp(2.3rem, 5.4vw, 4.3rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	margin-bottom: var(--mct-space-3);
}

.mct-portfolio__lede {
	max-width: 56ch;
	margin-bottom: var(--mct-space-4);
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1.05rem, 2vw, 1.22rem);
}

.mct-portfolio__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mct-portfolio__points li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
}

.mct-portfolio__points span {
	display: inline-grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: rgba(118, 221, 162, 0.18);
	color: #8ce4b1;
	font-size: 0.75rem;
}

.mct-portfolio__visual {
	position: relative;
	min-height: 280px;
	max-width: 500px;
	margin-inline: auto;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 28px 60px rgba(6, 17, 35, 0.35);
	backdrop-filter: blur(8px);
}

.mct-portfolio__visual-glow {
	position: absolute;
	inset: 18% 10%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(18, 103, 213, 0.45), transparent 74%);
	filter: blur(18px);
}

.mct-portfolio__visual-step {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 150px;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	background: rgba(15, 37, 72, 0.74);
	box-shadow: 0 10px 24px rgba(5, 17, 37, 0.2);
	color: #fff;
}

.mct-portfolio__visual-step span {
	color: #9cc6ff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.mct-portfolio__visual-step strong {
	font-size: 0.86rem;
}

.mct-portfolio__visual-step--1 {
	top: 15%;
	left: 7%;
}

.mct-portfolio__visual-step--2 {
	top: 42%;
	right: 7%;
}

.mct-portfolio__visual-step--3 {
	bottom: 14%;
	left: 17%;
	border-color: rgba(118, 221, 162, 0.4);
}

.mct-portfolio__visual-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: #8dbcf6;
	opacity: 0.75;
}

.mct-portfolio__coming {
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background: var(--mct-bg);
	text-align: center;
}

.mct-portfolio__coming-inner {
	max-width: 760px;
}

.mct-portfolio__coming h2 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin-bottom: var(--mct-space-2);
}

.mct-portfolio__coming p:not(.mct-eyebrow) {
	max-width: 62ch;
	margin: 0 auto var(--mct-space-4);
	color: var(--mct-muted);
	font-size: 1.05rem;
}

@media (min-width: 861px) {
	.mct-portfolio__hero-grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
	}
}

@media (max-width: 440px) {
	.mct-portfolio__visual {
		min-height: 250px;
	}

	.mct-portfolio__visual-step {
		min-width: 0;
		padding: 0.65rem;
	}

	.mct-portfolio__visual-step strong {
		font-size: 0.72rem;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 700px) {
	.mct-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mct-pricing__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mct-pricing__journey {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--mct-space-2);
	}

	.mct-pricing__journey li {
		position: relative;
		padding: 1.1rem;
	}
}

@media (min-width: 861px) {
	.mct-services__grid {
		gap: var(--mct-space-4);
	}
}

/* Mobile nav */
@media (max-width: 860px) {
	.mct-nav__toggle {
		display: flex;
	}

	/* Full mobile navigation panel: fixed below the persistent top bar (which
	   stays visible throughout, carrying the brand on the left and the
	   hamburger/close control on the right), covering the rest of the
	   viewport so no page content shows through. A three-part flex column
	   (scrollable link list + pinned CTA footer) means the primary CTA never
	   requires scrolling to reach, and the list only scrolls internally if
	   its content genuinely exceeds the available height. dvh is layered
	   over vh so browsers without dvh support still get a correct height. */
	.mct-nav__menu {
		position: fixed;
		inset: var(--mct-nav-h) 0 0 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--mct-nav-h));
		height: calc(100dvh - var(--mct-nav-h));
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.mct-nav__menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.mct-nav__list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		display: block;
		list-style: none;
		margin: 0;
		padding: var(--mct-space-2) clamp(1.25rem, 5vw, 2.5rem);
	}

	.mct-nav__item {
		border-bottom: 1px solid var(--mct-border);
	}

	.mct-nav__item:first-child {
		border-top: 1px solid var(--mct-border);
	}

	.mct-nav__link,
	.mct-nav__dropdown-toggle {
		width: 100%;
		min-height: 56px;
		justify-content: space-between;
		padding: 0.85rem 0.15rem;
		font-size: 1.05rem;
	}

	/* Visible pressed state; interaction state should never rely on color
	   alone, so hover/press also gets a background fill, not just the
	   existing accent text color. */
	.mct-nav__link:hover,
	.mct-nav__dropdown-toggle:hover {
		background: var(--mct-bg);
	}

	.mct-nav__link:active,
	.mct-nav__dropdown-toggle:active {
		background: var(--mct-border);
	}

	.mct-nav__link:focus-visible,
	.mct-nav__dropdown-toggle:focus-visible {
		outline-offset: -3px;
		border-radius: 6px;
	}

	/* Accordion: collapsed to zero height rather than display:none so the
	   height change can transition smoothly. Submenu links also get
	   tabindex="-1" while collapsed (managed in nav.js) so keyboard users
	   tabbing through the list skip straight over the hidden links. */
	.mct-nav__dropdown {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--mct-border);
		min-width: 0;
		max-height: 0;
		overflow: hidden;
		margin: 0 0 0 0.9rem;
		padding: 0;
		transition: max-height 0.22s ease;
	}

	.mct-nav__item--dropdown.is-open .mct-nav__dropdown {
		/* The higher-specificity desktop rule for this same open state (used
		   to center the dropdown under its toggle) also sets a transform;
		   it must be explicitly cancelled here or it wins over the plain
		   .mct-nav__dropdown { transform: none } above and shoves the panel
		   off-screen to the left. */
		transform: none;
		max-height: 420px;
		padding: 0.35rem 0 0.85rem 0.85rem;
	}

	.mct-nav__dropdown li + li {
		margin-top: 0.2rem;
	}

	.mct-nav__dropdown a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0.5rem 0.75rem;
	}

	/* CTA footer: a flex sibling of the scrollable list (not inside it), so
	   it is always visible without needing position:sticky or scrolling. */
	.mct-nav__cta-wrap {
		flex: none;
		padding: var(--mct-space-3) clamp(1.25rem, 5vw, 2.5rem);
		padding-bottom: max(var(--mct-space-3), env(safe-area-inset-bottom));
		border-top: 1px solid var(--mct-border);
		background: #fff;
	}

	.mct-nav__cta {
		display: block;
		width: 100%;
		min-height: 52px;
		text-align: center;
		font-size: 1rem;
	}
}

/* ==========================================================================
   About Me page
   ========================================================================== */

/* Keyboard focus ring for buttons (site-wide accessibility, no visual change
   to the resting state) and About-page text links. */
.mct-btn:focus-visible,
.mct-about a:focus-visible {
	outline: 2px solid var(--mct-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.mct-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--mct-space-2);
	color: var(--mct-accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mct-eyebrow__icon {
	display: inline-flex;
	width: 15px;
	height: 15px;
}

.mct-eyebrow__icon svg {
	width: 100%;
	height: 100%;
}

/* On dark (navy) sections, e.g. the closing CTA. */
.mct-eyebrow--light {
	color: #9DC4F5;
}

/* The eyebrow is a <p>, so the per-section paragraph color rules below (e.g.
   .mct-about-hero__content p) would otherwise win on specificity and mute it.
   These context-scoped rules keep the eyebrow and its icon the accent blue. */
.mct-about .mct-eyebrow {
	color: var(--mct-accent);
}

.mct-about .mct-eyebrow--light {
	color: #9DC4F5;
}

.mct-about h2 {
	font-size: clamp(1.7rem, 3.8vw, 2.5rem);
	margin-bottom: var(--mct-space-3);
}

/* Alternating section backgrounds for rhythm. */
.mct-about-path,
.mct-about-family {
	background: var(--mct-bg);
}

/* --- Section 1: Hero --- */
.mct-about-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.mct-about-hero__title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-bottom: var(--mct-space-3);
}

.mct-about-hero__lead {
	color: var(--mct-ink);
	margin-bottom: var(--mct-space-3);
}

.mct-about-hero__content p {
	max-width: 62ch;
	color: var(--mct-muted);
}

.mct-about-hero__content .mct-btn {
	margin-top: var(--mct-space-2);
}

.mct-about-hero__img,
.mct-about-family__img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--mct-radius-lg);
	border: 1px solid var(--mct-border);
	box-shadow: var(--mct-shadow-md);
}

.mct-about-hero__img {
	aspect-ratio: 3 / 4; /* matches the source, so nothing is cropped */
}

.mct-about-family__img {
	aspect-ratio: 4 / 3; /* matches the source, so nothing is cropped */
}

/* --- Section 2: Professional background --- */
.mct-about-path__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.mct-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mct-space-4);
}

.mct-timeline__item {
	position: relative;
	/* Room for the date column (left) + the marker gutter. */
	padding-left: 6.75rem;
	min-height: 1.25rem;
}

/* Date label to the left of the marker (may be empty for unlabeled steps). */
.mct-timeline__date {
	position: absolute;
	left: 0;
	top: 1px;
	width: 4.5rem;
	text-align: right;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mct-accent);
}

.mct-timeline__item::before {
	content: "";
	position: absolute;
	left: 5.25rem;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--mct-surface);
	border: 3px solid var(--mct-accent);
	z-index: 1;
}

.mct-timeline__item::after {
	content: "";
	position: absolute;
	left: calc(5.25rem + 7px);
	top: 21px;
	bottom: calc(-1 * var(--mct-space-4));
	width: 2px;
	background: var(--mct-border);
}

.mct-timeline__item:last-child::after {
	display: none;
}

.mct-timeline__item p {
	margin: 0;
	color: var(--mct-muted);
}

/* --- Section 3: Working principles (cards + title/description split) --- */
.mct-principles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.mct-principles__intro p {
	color: var(--mct-muted);
}

.mct-principles__lead {
	color: var(--mct-ink);
}

.mct-value-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mct-space-3);
}

.mct-value-card {
	display: flex;
	flex-direction: column;
	background: var(--mct-surface);
	border: 1px solid var(--mct-border);
	border-radius: var(--mct-radius-lg);
	padding: var(--mct-space-3);
	box-shadow: var(--mct-shadow-sm);
}

.mct-value-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(18, 103, 213, 0.10);
	color: var(--mct-accent);
	margin-bottom: var(--mct-space-2);
}

.mct-value-card__icon svg {
	width: 22px;
	height: 22px;
}

.mct-value-card__title {
	font-size: 1.1rem;
	margin-bottom: var(--mct-space-1);
}

.mct-value-card__desc {
	margin: 0;
	color: var(--mct-muted);
}

/* --- Section 4: Family --- */
.mct-about-family__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.mct-about-family__content p {
	color: var(--mct-muted);
}

/* --- Section 5: Hobbies (cards + title/description split; lighter cards) --- */
.mct-hobbies__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.mct-hobbies__intro p {
	color: var(--mct-muted);
}

.mct-hobby-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mct-space-3);
}

.mct-hobby-card {
	display: flex;
	align-items: center;
	gap: var(--mct-space-3);
	padding: var(--mct-space-3);
	border-radius: var(--mct-radius);
	background: var(--mct-bg);
}

.mct-hobby-card__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--mct-surface);
	border: 1px solid var(--mct-border);
	color: var(--mct-accent);
}

.mct-hobby-card__icon svg {
	width: 22px;
	height: 22px;
}

.mct-hobby-card__title {
	font-size: 1.05rem;
	margin: 0;
}

/* --- Section 6: Closing CTA (reuses .mct-final-cta navy band) --- */
.mct-about-cta__copy {
	color: rgba(255, 255, 255, 0.85);
	max-width: 60ch;
	margin: 0 auto var(--mct-space-3);
}

.mct-about-cta__copy:last-of-type {
	margin-bottom: var(--mct-space-4);
}

.mct-about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--mct-space-3);
}

.mct-about-cta__secondary {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.15s ease;
}

.mct-about-cta__secondary:hover {
	color: var(--mct-accent);
}

/* --- About responsive --- */
@media (min-width: 700px) {
	.mct-value-grid,
	.mct-hobby-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 861px) {
	/* Fixed-width media column (clamped to the 520-560px target) rather than a
	   flexible fr ratio, so the portrait lands in range at any container width
	   while the text column absorbs the rest of the space. Top-aligned instead
	   of centered for a more editorial feel, with a slightly wider gap. */
	.mct-about-hero__grid {
		grid-template-columns: 1fr clamp(420px, 38vw, 560px);
		gap: clamp(3rem, 6vw, 4.5rem);
		align-items: start;
	}

	/* Personal section: text on the left, photo on the right. */
	.mct-about-family__grid {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.mct-about-path__grid {
		grid-template-columns: 0.8fr 1.2fr;
		align-items: start;
	}

	/* How I Work + For Fun: cards on the left, title/description on the right.
	   The intro is first in the DOM so it reads before the cards on mobile;
	   on desktop the cards are pulled to the left column with order. */
	.mct-principles__grid,
	.mct-hobbies__grid {
		grid-template-columns: 0.95fr 1.05fr;
	}

	.mct-principles__cards,
	.mct-hobbies__cards {
		order: -1;
	}
}

/* ==========================================================================
   Pricing ROI calculator
   ========================================================================== */

.mct-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mct-roi {
	background:
		radial-gradient(circle at 8% 12%, rgba(18, 103, 213, 0.07), transparent 24rem),
		var(--mct-bg);
	border-top: 1px solid var(--mct-border);
}

.mct-roi__intro {
	max-width: 760px;
	margin: 0 auto var(--mct-space-4);
	text-align: center;
}

.mct-roi__intro .mct-eyebrow {
	color: var(--mct-accent);
}

.mct-roi__intro h2 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	margin-bottom: var(--mct-space-2);
}

.mct-roi__lede {
	font-size: clamp(1.02rem, 2vw, 1.18rem);
	color: var(--mct-muted);
	margin-bottom: var(--mct-space-1);
}

.mct-roi__preset-note {
	color: var(--mct-muted);
	font-size: 0.82rem;
}

.mct-roi__presets {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.65rem;
}

.mct-roi__preset {
	appearance: none;
	padding: 0.62rem 0.95rem;
	border: 1px solid #cfd8e5;
	border-radius: 999px;
	background: var(--mct-surface);
	color: var(--mct-ink);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mct-roi__preset:hover {
	border-color: var(--mct-accent);
	color: var(--mct-accent);
	transform: translateY(-1px);
}

.mct-roi__preset[aria-pressed="true"] {
	border-color: var(--mct-accent);
	background: var(--mct-accent);
	color: #fff;
}

.mct-roi__preset--reset {
	border-style: dashed;
}

.mct-roi__preset-note {
	/* Now the last element in the form; the investment fieldset above it
	   already carries the standard field-to-field gap via its own
	   margin-bottom (no longer :last-child), so no extra margin is needed
	   here. Left-aligned to match the rest of the form. */
	margin: 0;
	text-align: left;
}

.mct-roi__calculator {
	background: var(--mct-surface);
	border: 1px solid var(--mct-border);
	border-radius: calc(var(--mct-radius-lg) + 4px);
	box-shadow: var(--mct-shadow-lg);
	overflow: hidden;
}

.mct-roi__calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.7rem, 1.5vw, 1rem);
	padding: clamp(0.7rem, 1.5vw, 1rem);
}

.mct-roi__inputs,
.mct-roi__results {
	padding: clamp(1.4rem, 4vw, 2.5rem);
}

.mct-roi__inputs {
	background: #fff;
	border-radius: var(--mct-radius-lg);
}

.mct-roi__results {
	background: linear-gradient(155deg, #142746, var(--mct-navy));
	border-radius: var(--mct-radius-lg);
	color: #fff;
}

.mct-roi__panel-heading {
	margin-bottom: var(--mct-space-4);
}

.mct-roi__panel-heading h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	margin: 0;
}

.mct-roi__results .mct-roi__panel-heading h3 {
	color: #fff;
}

.mct-roi__step {
	margin: 0 0 0.25rem;
	color: var(--mct-accent);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mct-roi__results .mct-roi__step {
	color: #9cc6ff;
}

.mct-roi__field-group {
	margin: 0 0 var(--mct-space-4);
	padding: 0;
	border: 0;
}

.mct-roi__field-group:last-child {
	margin-bottom: 0;
}

.mct-roi__field-group label,
.mct-roi__field-group legend {
	color: var(--mct-navy);
	font-size: 0.93rem;
	font-weight: 700;
}

.mct-roi__field-group label span {
	color: var(--mct-muted);
	font-size: 0.8rem;
	font-weight: 500;
}

.mct-roi__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.65rem;
}

.mct-roi__value-input,
.mct-roi__currency-input {
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: var(--mct-ink);
	font: inherit;
	font-weight: 650;
}

.mct-roi__value-input {
	width: 5.5rem;
	padding: 0.42rem 0.55rem;
	text-align: right;
}

.mct-roi__currency-input {
	display: block;
	width: 100%;
	margin-top: 0.6rem;
	padding: 0.7rem 0.8rem;
}

.mct-roi input[type="range"] {
	display: block;
	width: 100%;
	height: 24px;
	margin: 0;
	accent-color: var(--mct-accent);
	cursor: pointer;
}

.mct-roi__help {
	margin: 0.3rem 0 0;
	color: var(--mct-muted);
	font-size: 0.78rem;
}

.mct-roi__segments {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
	margin-top: 0.7rem;
}

.mct-roi__segments label {
	position: relative;
	cursor: pointer;
}

.mct-roi__segments input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mct-roi__segments span {
	display: flex;
	min-height: 62px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.55rem;
	border: 1px solid #cbd5e1;
	border-radius: 9px;
	background: #fff;
	color: var(--mct-ink);
	font-size: 0.82rem;
	font-weight: 700;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mct-roi__segments small {
	margin-top: 0.12rem;
	color: var(--mct-muted);
	font-size: 0.7rem;
	font-weight: 500;
}

.mct-roi__segments input:checked + span {
	border-color: var(--mct-accent);
	background: rgba(18, 103, 213, 0.08);
	color: var(--mct-accent-dark);
	box-shadow: inset 0 0 0 1px var(--mct-accent);
}

.mct-roi__segments input:focus-visible + span,
.mct-roi input:focus-visible,
.mct-roi button:focus-visible,
.mct-roi a:focus-visible {
	outline: 3px solid rgba(18, 103, 213, 0.35);
	outline-offset: 2px;
}

.mct-roi__custom {
	margin-top: var(--mct-space-2);
	padding: var(--mct-space-2);
	border-radius: var(--mct-radius);
	background: var(--mct-bg);
}

.mct-roi__primary {
	position: relative;
	padding: var(--mct-space-3);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--mct-radius-lg);
	background: rgba(255, 255, 255, 0.07);
	min-height: 180px;
}

.mct-roi__primary-label {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mct-roi__primary-value {
	margin: 0.25rem 0 0.5rem;
	color: #fff;
	font-size: clamp(2.25rem, 6vw, 3.35rem);
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1;
	overflow-wrap: anywhere;
	transition: color 0.18s ease;
}

.mct-roi__primary[data-state="positive"] .mct-roi__primary-value {
	color: #76dda2;
}

.mct-roi__primary[data-state="negative"] .mct-roi__primary-value {
	color: #f4c66d;
}

.mct-roi__state {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	line-height: 1.45;
}

.mct-roi__state span {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
}

.mct-roi__state span::before {
	content: "=";
	font-size: 0.7rem;
}

.mct-roi__primary[data-state="positive"] .mct-roi__state span::before {
	content: "✓";
}

.mct-roi__primary[data-state="negative"] .mct-roi__state span::before {
	content: "!";
}

.mct-roi__metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.mct-roi__metric {
	display: flex;
	min-height: 110px;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.045);
}

.mct-roi__metric:last-child {
	grid-column: 1 / -1;
}

.mct-roi__metric span,
.mct-roi__metric small {
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.69rem;
	line-height: 1.35;
}

.mct-roi__metric strong {
	margin-block: 0.35rem;
	color: #fff;
	font-size: clamp(1rem, 2.5vw, 1.35rem);
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.mct-roi__breakdown {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mct-space-3);
	padding: clamp(1.4rem, 4vw, 2.5rem);
	border-top: 1px solid var(--mct-border);
	background: #fff;
}

.mct-roi__comparison,
.mct-roi__story {
	padding: var(--mct-space-3);
	border: 1px solid var(--mct-border);
	border-radius: var(--mct-radius-lg);
	background: var(--mct-bg);
}

.mct-roi__comparison h3,
.mct-roi__story h3 {
	font-size: 1.12rem;
	margin-bottom: var(--mct-space-3);
}

.mct-roi__bar-row + .mct-roi__bar-row {
	margin-top: var(--mct-space-3);
}

.mct-roi__bar-label {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.45rem;
	font-size: 0.82rem;
}

.mct-roi__bar-label strong {
	color: var(--mct-navy);
}

.mct-roi__bar-track {
	height: 12px;
	overflow: hidden;
	border-radius: 999px;
	background: #e4e9ef;
}

.mct-roi__bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	transition: width 0.28s ease;
}

.mct-roi__bar--benefit {
	background: var(--mct-success);
}

.mct-roi__bar--investment {
	background: var(--mct-accent);
}

.mct-roi__story-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mct-roi__story-list li {
	--mct-story-indent: 1.5rem;
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--mct-space-2);
	padding: 0.55rem 0 1.1rem var(--mct-story-indent);
	border-bottom: 1px solid var(--mct-border);
	font-size: 0.82rem;
}

.mct-roi__story-list li:not(:last-child)::after {
	content: "↓";
	position: absolute;
	left: calc(var(--mct-story-indent) - 0.6rem);
	bottom: -0.75rem;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--mct-bg);
	color: var(--mct-accent);
	font-weight: 700;
	text-align: center;
}

.mct-roi__story-list li:last-child {
	padding-bottom: 0.2rem;
	border-bottom: 0;
}

.mct-roi__story-list span {
	color: var(--mct-muted);
}

.mct-roi__story-list strong {
	color: var(--mct-navy);
	text-align: right;
}

.mct-roi__story-list b {
	font-weight: inherit;
}

.mct-roi__supporting,
.mct-roi__opportunities {
	margin-top: clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.mct-roi__supporting > h3,
.mct-roi__opportunities > h3 {
	font-size: clamp(1.55rem, 3vw, 2rem);
}

.mct-roi__supporting > p {
	max-width: 58ch;
	margin: 0 auto var(--mct-space-4);
	color: var(--mct-muted);
}

.mct-roi__impact-grid,
.mct-roi__opportunity-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mct-space-3);
	text-align: left;
}

.mct-roi__impact-card,
.mct-roi__opportunity-card {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--mct-border);
	border-radius: var(--mct-radius-lg);
	background: var(--mct-surface);
	box-shadow: var(--mct-shadow-sm);
}

.mct-roi__impact-card h4,
.mct-roi__opportunity-card h4 {
	margin: 0 0 var(--mct-space-2);
	color: var(--mct-navy);
	font-size: 1.08rem;
}

.mct-roi__impact-card ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mct-roi__impact-card li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--mct-muted);
	font-size: 0.9rem;
}

.mct-roi__impact-card li span {
	flex: none;
	display: inline-flex;
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	color: var(--mct-success);
}

.mct-roi__impact-card svg,
.mct-roi__card-icon svg,
.mct-roi__callout-icon svg {
	width: 100%;
	height: 100%;
}

.mct-roi__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--mct-space-2);
	padding: 0.65rem;
	border-radius: 11px;
	background: rgba(18, 103, 213, 0.1);
	color: var(--mct-accent);
}

.mct-roi__opportunity-card > p {
	margin: 0 0 var(--mct-space-3);
	color: var(--mct-muted);
	font-size: 0.9rem;
}

.mct-roi__flow {
	padding-top: var(--mct-space-2);
	border-top: 1px solid var(--mct-border);
	color: var(--mct-ink);
	font-size: 0.78rem;
	font-weight: 600;
}

.mct-roi__flow span {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--mct-accent);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mct-roi__callout {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--mct-space-3);
	align-items: center;
	margin-top: clamp(3rem, 7vw, 5rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: calc(var(--mct-radius-lg) + 4px);
	background: var(--mct-navy);
	box-shadow: var(--mct-shadow-lg);
}

.mct-roi__callout-icon {
	display: none;
	width: 54px;
	height: 54px;
	padding: 0.8rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	color: #9cc6ff;
}

.mct-roi__callout h3 {
	margin-bottom: 0.45rem;
	color: #fff;
	font-size: clamp(1.3rem, 2.8vw, 1.75rem);
}

.mct-roi__callout p {
	max-width: 66ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.92rem;
}

.mct-roi__callout-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mct-space-2);
}

.mct-roi__callout-actions > a:not(.mct-btn) {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 620px) {
	.mct-roi__segments {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mct-roi__impact-card ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mct-roi__impact-grid,
	.mct-roi__opportunity-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mct-roi__callout-icon {
		display: inline-flex;
	}
}

@media (min-width: 861px) {
	.mct-roi__calc {
		grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
		align-items: start;
	}

	.mct-roi__results {
		position: sticky;
		top: calc(var(--mct-nav-h) + 1.25rem);
	}

	.mct-roi__breakdown {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mct-roi__opportunity-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mct-roi__callout {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.mct-roi__callout-actions {
		grid-column: auto;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

@media (max-width: 420px) {
	.mct-roi__label-row {
		align-items: flex-start;
	}

	.mct-roi__value-input {
		width: 4.8rem;
	}

	.mct-roi__metrics {
		grid-template-columns: minmax(0, 1fr);
	}

	.mct-roi__metric:last-child {
		grid-column: auto;
	}

	.mct-roi__story-list li {
		flex-direction: column;
		gap: 0.2rem;
	}

	.mct-roi__story-list strong {
		text-align: left;
	}

	.mct-roi__callout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mct-roi__callout-actions .mct-btn {
		width: 100%;
		text-align: center;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition-duration: 0.01ms !important;
	}
}