/**
 * D LUNAFAM — About Us
 * ------------------------------------------------------------------
 * page-about-us.php only. Built on design-tokens.css and the shared
 * page components in shared.css (section rhythm, buttons, text links,
 * image slots, hero, story split, final CTA); only genuinely
 * About-specific rules live here — values, craftsmanship band, and the
 * lightweight retail/wholesale panels.
 *
 * Breakpoints (matches design-tokens.css documentation):
 *   mobile: up to 479px · mobile-large: 480–767px · tablet: 768–1023px
 *   laptop: 1024–1279px · desktop: 1280px+
 */

.mmsc-about {
	overflow-x: hidden;
}

/* Same fixed-header clearance fix as the homepage (see homepage.css) —
   this template also skips OceanWP's #content-wrap, so it needs the
   same manual compensation for #site-header's legacy `position: fixed`
   Additional-CSS rule. Header itself untouched. */
/* (A 30px "fixed header clearance" used to sit here. header.css now
   offsets the body by the header's exact height at every width — 65px
   mobile top bar, 80px desktop — so the extra padding only opened a
   blank band under the header. Removed 2026-09-29.) */

.mmsc-about h2 {
	font-size: var(--mmsc-text-2xl);
}

@media (min-width: 768px) {
	.mmsc-about h2 {
		font-size: var(--mmsc-text-3xl);
	}
}

/* Story sections reuse shared.css's .mmsc-story, but with a crop point
   tuned for these specific photographs (shared.css's default is tuned
   for the homepage's brand-story image instead). */
.mmsc-about img.mmsc-story__img {
	object-position: 40% 30%;
}

.mmsc-about-lifestyle img.mmsc-story__img {
	/* Kite-run photo: 55% keeps her feet inside the 16:9 desktop frame
	   while the kite only loses its very tip. */
	object-position: 45% 55%;
}

/* About hero photo (mmsanidaz-about-hero-v2): the girl stands just right of
   centre with her hand on the curtain at ~72%. Below 1024 the frame turns
   4:5 / 1:1, and a centred crop cut that hand off — anchored at 62% it
   keeps the whole figure. At 1024+ the 21:9 frame shows the full width. */
@media (max-width: 1023px) {
	.mmsc-about-hero .mmsc-hero__img {
		object-position: 62% center;
	}
}

/* 1. Hero ------------------------------------------------------------------
   Reuses shared.css's .mmsc-hero exactly; only the eyebrow label and a
   single, restrained action are About-specific. */

.mmsc-about-hero .mmsc-hero__actions {
	justify-content: center;
}

@media (min-width: 1024px) {
	.mmsc-about-hero .mmsc-hero__actions {
		justify-content: flex-start;
	}
}

/* At laptop widths the shared hero's 620px copy column reaches into the
   photo, where the lede ran over the girl's arm and lost contrast. The
   column is narrowed and the scrim held a little longer until 1280. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mmsc-about-hero .mmsc-hero__content {
		max-width: 560px;
		padding-right: var(--mmsc-space-6);
		background: linear-gradient(100deg, rgba(248, 245, 240, 0.96) 0%, rgba(248, 245, 240, 0.9) 58%, rgba(248, 245, 240, 0) 88%);
	}

	.mmsc-about-hero .mmsc-hero__lede {
		max-width: 24em;
	}
}

/* 1b. The brand -------------------------------------------------------------
   The official ™ lockup (inc/brand.php), sized by height only so the
   artwork keeps its proportions, then the tagline and the brand / company
   line. */

.mmsc-brand-intro {
	background-color: var(--mmsc-color-surface);
	text-align: center;
}

.mmsc-brand-intro__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 150px;
	margin: 0 auto var(--mmsc-space-5);
}

.mmsc-about h2.mmsc-brand-intro__tagline {
	margin: 0 0 var(--mmsc-space-3);
	font-size: var(--mmsc-text-xl);
	letter-spacing: 0.02em;
}

.mmsc-brand-intro__text {
	max-width: 34em;
	margin: 0 auto;
	color: var(--mmsc-color-text-muted);
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
}

@media (min-width: 768px) {
	.mmsc-brand-intro__logo {
		height: 190px;
	}

	.mmsc-about h2.mmsc-brand-intro__tagline {
		font-size: var(--mmsc-text-2xl);
	}

	.mmsc-brand-intro__text {
		font-size: var(--mmsc-text-lg);
	}
}

/* 2. Our Story --------------------------------------------------------------
   Plain reuse of shared.css's .mmsc-story — no About-specific CSS needed
   beyond the object-position tuning above. */

/* 3. What We Believe ---------------------------------------------------------
   Restrained typography, not an icon-box grid: a simple stacked list on
   mobile, four columns divided by hairlines on desktop. */

.mmsc-values {
	background-color: var(--mmsc-color-surface);
}

.mmsc-values__list {
	display: flex;
	flex-direction: column;
}

.mmsc-values__item {
	padding: var(--mmsc-space-5) 0;
	border-top: 1px solid var(--mmsc-color-border);
}

.mmsc-values__item:first-child {
	border-top: none;
	padding-top: 0;
}

.mmsc-values__item h3 {
	font-size: var(--mmsc-text-xl);
	margin: 0 0 var(--mmsc-space-2);
}

.mmsc-values__item p {
	color: var(--mmsc-color-text-muted);
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
	margin: 0;
	max-width: 32em;
}

@media (min-width: 1024px) {
	.mmsc-values__list {
		flex-direction: row;
	}

	.mmsc-values__item {
		flex: 1;
		border-top: none;
		border-left: 1px solid var(--mmsc-color-border);
		padding: 0 var(--mmsc-space-5);
	}

	.mmsc-values__item:first-child {
		border-left: none;
		padding-left: 0;
	}

	.mmsc-values__item:last-child {
		padding-right: 0;
	}
}

/* 4. Craftsmanship -----------------------------------------------------------
   The most visually important section: a large, flush image band with
   the copy given its own breathing room below (not overlaid — the brief
   asks for this to read as a dedicated moment, not a repeat of the hero
   pattern). */

.mmsc-craft {
	padding-top: 0;
}

.mmsc-craft__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

@media (min-width: 480px) {
	.mmsc-craft__media {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 1024px) {
	.mmsc-craft__media {
		aspect-ratio: 21 / 9;
		min-height: 420px;
	}
}

.mmsc-craft__media .mmsc-image-slot,
.mmsc-craft__media .mmsc-image-slot__img {
	position: absolute;
	inset: 0;
}

.mmsc-craft__media img {
	object-position: 78% 55%;
}

.mmsc-craft__content {
	padding-top: var(--mmsc-space-7);
}

@media (min-width: 1024px) {
	.mmsc-craft__content {
		padding-top: var(--mmsc-space-8);
	}
}

/* 5. The D LUNAFAM Experience -------------------------------------------------
   Reuses shared.css's .mmsc-story with the --reverse modifier (image on
   the right at desktop width) so the two "image + text" sections on this
   page (Our Story above, this one) alternate rather than repeat the same
   layout twice in a row. */

/* 6. Retail + Wholesale -------------------------------------------------------
   Deliberately lighter than the homepage's photo-led split (see
   homepage.css's .mmsc-split): two plain typographic panels, since the
   goal here is just to explain the two journeys, not sell either one. */

.mmsc-paths__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mmsc-space-5);
}

@media (min-width: 768px) {
	.mmsc-paths__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--mmsc-space-6);
	}
}

.mmsc-paths__card {
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-md);
	padding: var(--mmsc-space-6) var(--mmsc-space-5);
}

.mmsc-paths__card h3 {
	font-size: var(--mmsc-text-xl);
	margin: 0 0 var(--mmsc-space-3);
}

.mmsc-paths__card p {
	color: var(--mmsc-color-text-muted);
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
	margin: 0 0 var(--mmsc-space-4);
}

/* 6b. The company behind the brand ------------------------------------------
   MMSANIDAZ LLP positioning on the left, social profiles on the right
   (the shared .mmsc-social component from footer.css, --light modifier). */

.mmsc-company {
	background-color: var(--mmsc-color-surface);
	border-top: 1px solid var(--mmsc-color-border);
}

.mmsc-company__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mmsc-space-6);
}

.mmsc-company__intro h2 {
	margin: 0 0 var(--mmsc-space-2);
	letter-spacing: 0.02em;
}

.mmsc-company__tagline {
	margin: 0 0 var(--mmsc-space-4);
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	color: var(--mmsc-color-text);
}

.mmsc-company__positioning {
	margin: 0 0 var(--mmsc-space-4);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
}

.mmsc-company__future {
	margin: 0;
	color: var(--mmsc-color-text-muted);
	font-size: var(--mmsc-text-base);
	line-height: 1.6;
}

.mmsc-company__follow {
	margin: 0 0 var(--mmsc-space-3);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-text);
}

@media (min-width: 768px) {
	.mmsc-company__grid {
		grid-template-columns: 3fr 2fr;
		align-items: center;
		gap: var(--mmsc-space-8);
	}

	.mmsc-company__aside {
		padding-left: var(--mmsc-space-6);
		border-left: 1px solid var(--mmsc-color-border);
	}
}

/* 7. Final CTA ---------------------------------------------------------------
   Plain reuse of shared.css's .mmsc-final-cta — no About-specific CSS
   needed. */