/*
 * martamalengo.com — site
 * Ported from the Claude Design export (Homepage.html + src/*.jsx, v2 —
 * updated brand palette and information architecture: Copywriter /
 * Personal Librarian / #StileMartaMal / Blog / Chi è Marta / Contatti).
 * Loaded on every mm_* template in place of Clearer's own stylesheet — see
 * mm_homepage_assets() in functions.php.
 *
 * Color slots keep the same G / P / A letters as the design source's MM
 * object (src/shared.jsx) rather than literal color-word names, since the
 * hue behind each letter is a brand choice that can change (it already has
 * once) while what the letter *means* — "the copy pillar", "the Personal
 * Librarian pillar", "the #StileMartaMal pillar" — stays stable.
 *
 * Baked-in defaults (were the "tweaks" panel in the design prototype):
 *   - hero shapes: "Con etichette" (labelled, linking to the three pillars)
 *   - italic accent color: #e4554b (Paccent, coral)
 *   - about-panel quote watermark: on
 */

.mm-page {
	--mm-g: #99b3ce;
	--mm-p: #0fa6ad;
	--mm-a: #8B6F1B;
	--mm-gt: #3d5a75;
	--mm-pt: #0b7d83;
	--mm-at: #725c16;
	--mm-paccent: #e4554b;
	--mm-gaccent: #efcee4;
	--mm-gbg: #eef2f7;
	--mm-pbg: #e3f6f6;
	--mm-abg: #f7f0df;
	--mm-dark: #1a1a1a;
	--mm-mid: #666666;
	--mm-light: #f7f5f2;
	--mm-white: #ffffff;
	--mm-corsivo: #e4554b;
	--mm-serif: 'Playfair Display', Georgia, serif;
	--mm-sans: 'DM Sans', system-ui, sans-serif;

	font-family: var(--mm-sans);
	background: var(--mm-light);
	color: var(--mm-dark);
	min-height: 100vh;
}

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

.mm-page a {
	text-decoration: none;
}

/* Standard WP screen-reader-text pattern — Clearer's own copy of this rule
 * isn't loaded on mm_* templates (see mm_homepage_assets in functions.php). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: #fff;
	color: #1a1a1a;
	z-index: 100000;
	clip: auto;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mm-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 28px 80px;
}

.mm-corsivo {
	font-style: italic;
	color: var(--mm-corsivo);
}

/* Fixed-hue italic emphasis used on subpage titles (not the site-wide accent) */
.mm-ink-g { font-style: italic; color: var(--mm-gt); }
.mm-ink-p { font-style: italic; color: var(--mm-pt); }
.mm-ink-a { font-style: italic; color: var(--mm-at); }

/* ── Nav ─────────────────────────────────────────────────────────────── */

.mm-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28px 0 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: 64px;
	flex-wrap: wrap;
	gap: 24px;
}

.mm-nav__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.mm-nav__wordmark {
	font-family: var(--mm-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--mm-dark);
	letter-spacing: 0.02em;
}

.mm-nav__end {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mm-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mm-nav__link {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mm-mid);
	border-bottom: 2px solid transparent;
	padding-bottom: 4px;
	display: inline-block;
	white-space: nowrap;
}

.mm-nav__link.is-active {
	color: var(--mm-dark);
	border-bottom-color: var(--mm-p);
}

.mm-nav__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 30px;
	background: var(--mm-dark);
	color: var(--mm-white);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
}

.mm-nav__contact-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mm-p);
	display: inline-block;
}

/* ── Logo mark (nav brand + footer signature) ───────────────────────────
 * --mm-logo-size is set inline per instance (26px in nav, 22px in footer);
 * every dimension below is that same ratio the prototype used at size 26. */

.mm-logo {
	display: inline-flex;
	align-items: flex-end;
	height: var(--mm-logo-size);
	gap: calc(var(--mm-logo-size) * 0.13462);
}

.mm-logo__arc {
	width: calc(var(--mm-logo-size) * 0.42308);
	height: calc(var(--mm-logo-size) * 0.92308);
	border-radius: calc(var(--mm-logo-size) * 0.21154) calc(var(--mm-logo-size) * 0.21154) 0 0;
	background: var(--mm-g);
}

.mm-logo__circle {
	width: calc(var(--mm-logo-size) * 0.5);
	height: calc(var(--mm-logo-size) * 0.5);
	border-radius: 50%;
	background: var(--mm-p);
}

.mm-logo__semicircle {
	width: calc(var(--mm-logo-size) * 0.53846);
	height: calc(var(--mm-logo-size) * 0.34615);
	border-radius: 0 0 calc(var(--mm-logo-size) * 0.26923) calc(var(--mm-logo-size) * 0.26923);
	background: var(--mm-a);
	align-self: flex-end;
	margin-bottom: calc(var(--mm-logo-size) * 0.03846);
}

.mm-logo__dot {
	width: calc(var(--mm-logo-size) * 0.19231);
	height: calc(var(--mm-logo-size) * 0.19231);
	border-radius: 50%;
	background: var(--mm-dark);
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.mm-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 100px;
}

.mm-hero__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-mid);
	margin-bottom: 20px;
}

.mm-hero__title {
	font-family: var(--mm-serif);
	font-size: 58px;
	line-height: 1.08;
	font-weight: 700;
	margin-bottom: 24px;
	color: var(--mm-dark);
}

.mm-hero__desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--mm-mid);
	max-width: 420px;
	margin-bottom: 36px;
}

.mm-hero__figure {
	display: flex;
	justify-content: center;
}

.mm-btn {
	display: inline-block;
	padding: 14px 32px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 40px;
}

.mm-btn--dark {
	background: var(--mm-dark);
	color: var(--mm-white);
}

/* ── Hero composition (arc / circle / semicircle / dot) ─────────────────
 * Fixed 440x440 box, positioned exactly as in the prototype. */

.mm-bigm {
	position: relative;
	width: 440px;
	height: 440px;
	max-width: 100%;
}

.mm-bigm__arc {
	position: absolute;
	left: 40px;
	top: 0;
	width: 230px;
	height: 320px;
	background: var(--mm-g);
	border-radius: 115px 115px 0 0;
	overflow: hidden;
}

.mm-bigm__quote {
	position: absolute;
	left: 50%;
	top: 74px;
	transform: translateX(-50%);
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 230px;
	line-height: 0.5;
	color: var(--mm-light);
	user-select: none;
}

.mm-bigm__circle {
	position: absolute;
	left: 0;
	top: 250px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: var(--mm-p);
	overflow: hidden;
}

.mm-bigm__books {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 9px;
}

.mm-bigm__book {
	width: 15px;
	border-radius: 7px 7px 0 0;
	background: var(--mm-light);
	transform-origin: bottom center;
}

.mm-bigm__book--1 { height: 112px; opacity: 0.85; }
.mm-bigm__book--2 { height: 138px; opacity: 1; }
.mm-bigm__book--3 { height: 96px; opacity: 0.85; transform: rotate(7deg) translateY(4px); }
.mm-bigm__book--4 { height: 126px; opacity: 0.85; }

.mm-bigm__semicircle {
	position: absolute;
	left: 226px;
	top: 286px;
	width: 214px;
	height: 154px;
	background: var(--mm-a);
	border-radius: 0 0 107px 107px;
	overflow: hidden;
}

.mm-bigm__stripe {
	position: absolute;
	top: 20px;
	bottom: 14px;
	width: 10px;
	background: var(--mm-light);
	opacity: 0.85;
	border-radius: 5px;
}

.mm-bigm__stripe--1 { left: 30px; }
.mm-bigm__stripe--2 { left: 56px; }
.mm-bigm__stripe--3 { left: 82px; }

.mm-bigm__button {
	position: absolute;
	right: 30px;
	bottom: 26px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid var(--mm-light);
}

.mm-bigm__dot {
	position: absolute;
	left: 316px;
	top: 208px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mm-dark);
}

.mm-bigm__stem {
	position: absolute;
	left: 296px;
	top: 120px;
	width: 2px;
	height: 76px;
	background: var(--mm-dark);
	opacity: 0.25;
}

.mm-bigm__chip {
	position: absolute;
	padding: 7px 16px;
	border-radius: 20px;
	background: var(--mm-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-dark);
	white-space: nowrap;
}

.mm-bigm__chip--copy { left: 96px; top: 262px; }
.mm-bigm__chip--books { left: 24px; top: 328px; }
.mm-bigm__chip--archive { left: 268px; top: 336px; }

/* ── Section divider ─────────────────────────────────────────────────── */

.mm-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 48px;
}

.mm-divider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mm-dark);
	flex-shrink: 0;
}

.mm-divider__label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-mid);
	font-weight: 500;
	white-space: nowrap;
}

.mm-divider__rule {
	flex: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.1);
}

.mm-divider__quote {
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 15px;
	color: rgba(0, 0, 0, 0.3);
}

/* ── Motifs (card icons) ─────────────────────────────────────────────── */

.mm-motif--quote {
	width: 52px;
	height: 68px;
	border-radius: 26px 26px 0 0;
	background: var(--mm-g);
	overflow: hidden;
	position: relative;
	margin-bottom: 26px;
}

.mm-motif__mark {
	position: absolute;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 56px;
	line-height: 0.5;
	color: var(--mm-light);
	user-select: none;
}

.mm-motif--books {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--mm-p);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3.5px;
	margin-bottom: 32px;
}

.mm-motif__bar {
	width: 6px;
	background: var(--mm-light);
	border-radius: 3px 3px 0 0;
	transform-origin: bottom center;
}

.mm-motif__bar--1 { height: 34px; opacity: 0.85; }
.mm-motif__bar--2 { height: 44px; opacity: 1; }
.mm-motif__bar--3 { height: 29px; opacity: 0.85; transform: rotate(7deg) translateY(1px); }
.mm-motif__bar--4 { height: 40px; opacity: 0.85; }

.mm-motif--lines {
	width: 68px;
	height: 46px;
	border-radius: 0 0 34px 34px;
	background: var(--mm-p);
	position: relative;
	margin-bottom: 48px;
	margin-top: 22px;
}

.mm-motif__line {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 1.5px;
	background: var(--mm-light);
	opacity: 0.9;
}

.mm-motif__line--1 { top: 10px; }
.mm-motif__line--2 { top: 19px; }
.mm-motif__line--3 { top: 28px; }

.mm-motif__label {
	position: absolute;
	left: 12px;
	top: -8px;
	width: 18px;
	height: 4px;
	border-radius: 2px;
	background: var(--mm-paccent);
}

.mm-motif--tag {
	position: relative;
	width: 60px;
	height: 60px;
	margin-bottom: 34px;
}

.mm-motif__tag-body {
	position: absolute;
	inset: 6px;
	background: var(--mm-a);
	border-radius: 14px;
	transform: rotate(45deg);
}

.mm-motif__tag-hole {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mm-light);
	transform: translate(-26px, -26px);
}

/* ── Three cards ─────────────────────────────────────────────────────── */

.mm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 100px;
}

.mm-card {
	background: var(--mm-white);
	border-radius: 28px;
	padding: 36px 28px 32px;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.mm-card:hover {
	transform: translateY(-5px);
}

.mm-card__role {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-mid);
	margin-bottom: 10px;
	font-weight: 500;
}

.mm-card__title {
	font-family: var(--mm-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 14px;
	color: var(--mm-dark);
}

.mm-card__desc {
	font-size: 14px;
	line-height: 1.65;
	color: var(--mm-mid);
	flex: 1;
	margin-bottom: 24px;
}

.mm-card__cta {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-dark);
}

.mm-card__cta--green { color: var(--mm-gt); }
.mm-card__cta--pink { color: var(--mm-pt); }
.mm-card__cta--amber { color: var(--mm-at); }

/* ── About / "Chi sono" dark panel ───────────────────────────────────── */

.mm-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	background: var(--mm-dark);
	border-radius: 140px 32px 32px 32px;
	padding: 64px 60px 56px 76px;
	margin-bottom: 80px;
	position: relative;
	overflow: hidden;
}

.mm-about__watermark {
	position: absolute;
	right: 36px;
	top: 90px;
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 220px;
	line-height: 0.5;
	color: rgba(255, 255, 255, 0.05);
	user-select: none;
	pointer-events: none;
}

.mm-about__eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 18px;
	font-weight: 500;
}

.mm-about__title {
	font-family: var(--mm-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 20px;
	color: var(--mm-white);
}

.mm-about__desc {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
}

.mm-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	position: relative;
	z-index: 1;
}

.mm-stat {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	padding: 22px 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.mm-stat__num {
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 40px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1;
	margin-bottom: 6px;
}

.mm-stat__num.mm-accent-green { color: var(--mm-g); }
.mm-stat__num.mm-accent-pink { color: var(--mm-p); }
.mm-stat__num.mm-accent-coral { color: var(--mm-paccent); }
.mm-stat__num.mm-accent-amber { color: var(--mm-a); }

.mm-stat__label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.4;
}

/* ── Skills ──────────────────────────────────────────────────────────── */

.mm-skills {
	margin-bottom: 80px;
}

.mm-skills__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mm-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 20px;
	border-radius: 40px;
	font-size: 13px;
	font-weight: 400;
	background: var(--mm-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--mm-dark);
}

.mm-chip__marker {
	display: inline-block;
}

.mm-chip__marker--g {
	width: 8px;
	height: 13px;
	border-radius: 4px 4px 0 0;
	background: var(--mm-g);
}

.mm-chip__marker--p {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mm-p);
}

.mm-chip__marker--b {
	width: 12px;
	height: 8px;
	border-radius: 0 0 6px 6px;
	background: var(--mm-paccent);
}

.mm-chip__marker--a {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--mm-a);
	transform: rotate(45deg);
}

.mm-chip__marker--n {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mm-dark);
}

/* ── Footer / contact ────────────────────────────────────────────────── */

.mm-footer__contact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 40px;
}

.mm-footer__intro {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.mm-footer__portrait {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	object-fit: cover;
}

.mm-footer__portrait--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mm-light);
	border: 1px dashed rgba(0, 0, 0, 0.2);
	color: var(--mm-mid);
	font-size: 11px;
	text-align: center;
	line-height: 1.3;
	padding: 8px;
}

.mm-footer__eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mm-mid);
	margin: 0 0 8px;
	font-weight: 500;
}

.mm-footer__headline {
	font-family: var(--mm-serif);
	font-size: 38px;
	font-weight: 700;
	color: var(--mm-dark);
	margin: 0 0 8px;
}

.mm-footer__nowrap {
	white-space: nowrap;
}

.mm-footer__nowrap em {
	font-style: italic;
}

.mm-footer__dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--mm-p);
	margin-left: 5px;
}

.mm-footer__contact-line {
	font-size: 16px;
	color: var(--mm-mid);
	margin: 0;
}

.mm-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	border-radius: 40px;
	background: var(--mm-dark);
	color: var(--mm-white);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

.mm-footer__cta-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mm-p);
	display: inline-block;
}

.mm-footer__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 28px;
}

.mm-footer__links a {
	font-size: 11.5px;
	color: var(--mm-mid);
	letter-spacing: 0.04em;
}

.mm-footer__signature {
	display: flex;
	justify-content: center;
	padding-top: 28px;
}

/* ── Subpage components ──────────────────────────────────────────────── *
 * Shared across the Copywriter / Personal Librarian / #StileMartaMal /
 * Blog / Chi è Marta / Contatti templates. */

.mm-page-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 90px;
}

.mm-page-hero--wide {
	margin-bottom: 100px;
}

.mm-page-title {
	font-family: var(--mm-serif);
	font-weight: 700;
	color: var(--mm-dark);
	margin-bottom: 24px;
}

.mm-page-title--xl { font-size: 54px; line-height: 1.08; }
.mm-page-title--lg { font-size: 50px; line-height: 1.1; }
.mm-page-title--md { font-size: 48px; line-height: 1.1; }
.mm-page-title--sm { font-size: 46px; line-height: 1.15; }

.mm-page-desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--mm-mid);
	max-width: 460px;
}

.mm-page-desc + .mm-page-desc {
	margin-top: -4px;
}

.mm-page-hero__photo {
	display: flex;
	justify-content: center;
	position: relative;
}

.mm-photo-slot {
	display: block;
	background: var(--mm-light);
	border: 1px dashed rgba(0, 0, 0, 0.15);
	color: var(--mm-mid);
	font-size: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mm-photo-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mm-page-hero__motif {
	position: absolute;
}

.mm-page-hero__motif--br { right: 48px; bottom: -14px; }
.mm-page-hero__motif--bl { left: 20px; bottom: -22px; }
.mm-page-hero__motif--tr { right: 24px; top: -18px; }

/* Service cards — 4-up grid, small color tab, title, description */

.mm-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	margin-bottom: 80px;
}

.mm-service-card {
	background: var(--mm-white);
	border-radius: 22px;
	padding: 26px 22px;
}

.mm-service-card__tab {
	width: 12px;
	height: 20px;
	border-radius: 6px 6px 0 0;
	background: var(--mm-g);
	margin-bottom: 16px;
}

.mm-service-card__title {
	font-family: var(--mm-serif);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--mm-dark);
	line-height: 1.3;
}

.mm-service-card__desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--mm-mid);
	margin: 0;
}

.mm-lede {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--mm-mid);
	max-width: 700px;
	margin-bottom: 24px;
}

/* Icon cards — 2-up grid, marker + heading + description */

.mm-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 56px;
}

.mm-icon-card {
	background: var(--mm-white);
	border-radius: 24px;
	padding: 28px 26px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.mm-icon-card__marker {
	flex-shrink: 0;
	margin-top: 6px;
}

.mm-icon-card__marker--dot-p {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mm-p);
}

.mm-icon-card__marker--tab-coral {
	width: 14px;
	height: 9px;
	border-radius: 0 0 7px 7px;
	background: var(--mm-paccent);
	margin-top: 7px;
}

.mm-icon-card__marker--square-a {
	width: 12px;
	height: 12px;
	background: var(--mm-a);
	border-radius: 2px;
	transform: rotate(45deg);
}

.mm-icon-card__title {
	font-family: var(--mm-serif);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--mm-dark);
}

.mm-icon-card__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mm-mid);
	margin: 0;
}

/* Stacked card with a Motif on top — Personal Librarian "formazione" */

.mm-motif-card {
	background: var(--mm-white);
	border-radius: 24px;
	padding: 30px 28px;
}

.mm-motif-card__title {
	font-family: var(--mm-serif);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--mm-dark);
	line-height: 1.3;
}

.mm-motif-card__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mm-mid);
	margin: 0;
}

/* Number tiles — used on Copywriter / Personal Librarian / Chi è Marta */

.mm-numbers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-bottom: 56px;
}

.mm-number-tile {
	border-radius: 18px;
	padding: 22px 20px;
	background: var(--mm-white);
}

.mm-number-tile--g-bg { background: var(--mm-gbg); }
.mm-number-tile--p-bg { background: var(--mm-pbg); }

.mm-number-tile__num {
	font-family: var(--mm-serif);
	font-style: italic;
	font-weight: 700;
	color: var(--mm-mid);
	margin-bottom: 6px;
	line-height: 1;
	font-size: 32px;
}

.mm-number-tile__num--lg { font-size: 40px; }
.mm-number-tile__num--sm { font-size: 30px; }

.mm-number-tile__num.mm-text-g { color: var(--mm-gt); }
.mm-number-tile__num.mm-text-p { color: var(--mm-pt); }
.mm-number-tile__num.mm-accent-green { color: var(--mm-g); }
.mm-number-tile__num.mm-accent-pink { color: var(--mm-p); }
.mm-number-tile__num.mm-accent-coral { color: var(--mm-paccent); }
.mm-number-tile__num.mm-accent-amber { color: var(--mm-a); }

.mm-number-tile__label {
	font-size: 12.5px;
	color: var(--mm-mid);
	line-height: 1.4;
}

/* Quote blocks — Personal Librarian / Chi è Marta */

.mm-quote-block {
	border-radius: 32px 32px 32px 120px;
	padding: 48px 56px;
	margin-bottom: 100px;
}

.mm-quote-block--mirror {
	border-radius: 32px 32px 120px 32px;
}

.mm-quote-block--pink { background: var(--mm-pbg); }

.mm-quote-block__text {
	font-family: var(--mm-serif);
	font-style: italic;
	line-height: 1.5;
	color: var(--mm-pt);
	margin: 0;
	max-width: 640px;
	font-size: 24px;
}

.mm-quote-block__text--lg { font-size: 22px; line-height: 1.6; }

/* Gallery — portfolio / moodboard / blog covers */

.mm-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin-bottom: 56px;
}

.mm-gallery-card__photo {
	width: 100%;
	height: 200px;
	border-radius: 18px;
	margin-bottom: 12px;
}

.mm-gallery-card__tag {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-gt);
	display: block;
	margin-bottom: 4px;
}

.mm-gallery-card__caption {
	font-size: 13px;
	color: var(--mm-mid);
	margin: 0;
	line-height: 1.4;
}

/* Client pills */

.mm-clients {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mm-clients span {
	padding: 10px 22px;
	border-radius: 40px;
	font-size: 13.5px;
	background: var(--mm-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--mm-dark);
}

/* Numbered "principi" list — #StileMartaMal */

.mm-principi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 90px;
}

.mm-principi__item {
	padding: 8px 26px 0 0;
}

.mm-principi__num {
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 44px;
	font-weight: 700;
	color: var(--mm-a);
	line-height: 1;
	margin-bottom: 12px;
}

/* Community banner — #StileMartaMal */

.mm-banner {
	border-radius: 32px 32px 120px 32px;
	padding: 48px 56px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	margin-bottom: 100px;
	background: var(--mm-abg);
	flex-wrap: wrap;
}

.mm-banner__eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-at);
	margin-bottom: 12px;
	font-weight: 600;
}

.mm-banner__title {
	font-family: var(--mm-serif);
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--mm-dark);
}

.mm-banner__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--mm-mid);
	margin: 0;
	max-width: 520px;
}

.mm-banner__cta {
	padding: 16px 36px;
	border-radius: 40px;
	background: var(--mm-dark);
	color: var(--mm-white);
	font-size: 14px;
	font-weight: 500;
	flex-shrink: 0;
}

/* Timeline — Chi è Marta capitoli */

.mm-timeline__item {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 20px;
}

.mm-timeline__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mm-timeline__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 4px;
}

.mm-timeline__connector {
	width: 2px;
	flex: 1;
	background: rgba(0, 0, 0, 0.1);
	margin-top: 4px;
}

.mm-timeline__body {
	padding-bottom: 40px;
}

.mm-timeline__title {
	font-family: var(--mm-serif);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--mm-dark);
}

.mm-timeline__desc {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--mm-mid);
	margin: 0;
	max-width: 620px;
}

/* Blog — filters + article grid */

.mm-blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.mm-blog-filter {
	padding: 9px 20px;
	border-radius: 40px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: var(--mm-white);
	color: var(--mm-mid);
	cursor: pointer;
	font-family: inherit;
}

.mm-blog-filter.is-active {
	border-color: transparent;
	background: var(--mm-dark);
	color: var(--mm-white);
}

.mm-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 100px;
}

.mm-blog-card {
	background: var(--mm-white);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mm-blog-card__photo {
	width: 100%;
	height: 180px;
}

.mm-blog-card__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mm-blog-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.mm-blog-card__cat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}

.mm-blog-card__title {
	font-family: var(--mm-serif);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--mm-dark);
	line-height: 1.3;
}

.mm-blog-card__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mm-mid);
	margin: 0 0 16px;
	flex: 1;
}

.mm-blog-card__date {
	font-size: 12px;
	color: var(--mm-mid);
}

/* Contact page */

.mm-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 64px;
	margin-bottom: 100px;
}

.mm-contact-details {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 36px;
}

.mm-contact-details__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mm-contact-details__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mm-contact-details__row span:last-child {
	font-size: 15px;
}

.mm-contact-form-panel {
	background: var(--mm-white);
	border-radius: 28px;
	padding: 40px 40px 44px;
}

.mm-contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mm-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mm-contact-form label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--mm-mid);
	margin-bottom: 8px;
	display: block;
}

.mm-contact-form input,
.mm-contact-form select,
.mm-contact-form textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 14px;
	font-family: inherit;
	color: var(--mm-dark);
	background: var(--mm-white);
}

.mm-contact-form textarea {
	resize: vertical;
}

.mm-contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 32px;
	border-radius: 40px;
	background: var(--mm-dark);
	color: var(--mm-white);
	font-size: 14px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	letter-spacing: 0.04em;
}

.mm-contact-form__submit-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mm-p);
	display: inline-block;
}

.mm-contact-sent {
	text-align: center;
	padding: 60px 20px;
}

.mm-contact-sent__dot {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mm-g);
	margin: 0 auto 20px;
}

.mm-contact-sent__title {
	font-family: var(--mm-serif);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
}

.mm-contact-sent__desc {
	font-size: 14px;
	color: var(--mm-mid);
	margin: 0;
}

.mm-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Subpage responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
	.mm-page-hero,
	.mm-contact-grid {
		grid-template-columns: 1fr;
	}

	.mm-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 560px) {
	.mm-contact-form__row {
		grid-template-columns: 1fr;
	}
}

/* ── Responsive ──────────────────────────────────────────────────────── *
 * The prototype was desktop-only (~1100px); these breakpoints are a
 * pragmatic minimum so the layout doesn't break on smaller viewports. */

@media (max-width: 900px) {
	.mm-hero {
		grid-template-columns: 1fr;
	}

	.mm-hero__figure {
		order: -1;
	}

	.mm-cards {
		grid-template-columns: 1fr;
	}

	.mm-about {
		grid-template-columns: 1fr;
		padding: 48px 28px 40px;
		border-radius: 60px 24px 24px 24px;
	}

	.mm-about__watermark {
		display: none;
	}
}

@media (max-width: 560px) {
	.mm-hero__title {
		font-size: 42px;
	}

	.mm-bigm {
		transform: scale(0.8);
		transform-origin: top center;
		margin-bottom: -88px;
	}

	.mm-footer__contact {
		justify-content: center;
		text-align: center;
	}

	.mm-footer__intro {
		justify-content: center;
	}
}