/* MMGroup — mmgroup.web.id
   Hand-written CSS, no build step. Section order below follows the page:
   tokens · base · header · hero · businesses · approach · contact · footer. */

/* ---------- tokens ---------- */

:root {
	/* Pulled from the MMGroup logo hexagons. */
	--teal:   #20b8b8;
	--sun:    #f8b810;
	--leaf:   #88c038;
	--amber:  #f09018;
	/* Not from the logo — each of these is the brand's own colour, for the
	   sections the four logo hexagon colours don't stretch to cover. */
	--violet:  #6f5ac8;   /* JVIEN'S COLLECTION */
	--azure:   #1064cc;   /* Hostdozer */
	--crimson: #c8102e;   /* Localove */
	--hqred:   #e6200f;   /* HQinternet */
	--cocoa:   #a2622e;   /* Munchalum */
	--sky:     #18b8f8;   /* Mika Homestay */

	--ink:      #10161c;
	--ink-soft: #4d5866;
	--rule:     #e4e8ed;
	--paper:    #ffffff;
	--paper-2:  #f6f8fa;
	--deep:     #0d2430;

	--wrap:   1160px;
	--gutter: 1.5rem;
	--radius: 16px;
	--shadow: 0 18px 40px -24px rgb(13 36 48 / 45%);

	--accent: var(--teal);
	/* Vivid brand colours are too light for small text on white, so every
	   section carries a darker ink alongside its accent: the accent paints
	   shapes (bullets, rule, slab), the ink paints type. */
	--accent-ink: #0f7f80;
}

/* ---------- base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6.25rem;
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	margin: 0 0 .75rem;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
}

h1 { font-size: clamp(1.5rem, 3.4vw, 2.35rem); font-weight: 800; }
h2 { font-size: clamp(1.2rem, 1.72vw, 1.5rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }

p { margin: 0 0 1rem; }

a { color: inherit; }

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

ul { margin: 0 0 1rem; padding: 0; list-style: none; }

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

.eyebrow {
	margin: 0 0 .6rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-ink);
}

.lede {
	font-size: 1.1875rem;
	color: var(--ink-soft);
	max-width: 46ch;
}

/* Goes INSIDE a .wrap, never on the same element — its narrower max-width would
   beat .wrap's and the auto side margins would then centre the whole block. */
.section-head {
	max-width: 44rem;
	margin-bottom: 3rem;
}

.btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

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

.btn-primary {
	background: var(--teal);
	border-color: var(--teal);
	color: #04252a;
}

.btn-primary:hover { background: #1aa3a3; border-color: #1aa3a3; }

.btn-ghost {
	border-color: rgb(255 255 255 / 35%);
	color: #fff;
}

.btn-ghost:hover { border-color: #fff; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: .75rem 1rem;
	background: var(--ink);
	color: #fff;
	z-index: 100;
}

.skip-link:focus { left: 0; }

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

/* ---------- header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rule);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 5.5rem;
}

.brand img { width: 270px; height: auto; }

.nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	font-weight: 500;
}

.nav a {
	text-decoration: none;
	color: var(--ink-soft);
}

.nav a:hover { color: var(--ink); }

.nav .nav-cta {
	padding: .55rem 1.25rem;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
}

.nav .nav-cta:hover { background: var(--deep); color: #fff; }

/* Checkbox-only mobile menu — the whole site ships without JavaScript. */
.nav-button { display: none; }

/* ---------- hero ---------- */

.hero {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6rem) 0;
	background:
		radial-gradient(90rem 40rem at 78% -10%, #14414f 0%, transparent 60%),
		linear-gradient(160deg, #0d2430 0%, #09323d 55%, #0d2430 100%);
	color: #fff;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Sits under the headline here, so it needs air above rather than below. */
.hero .eyebrow {
	margin: .85rem 0 .9rem;
	color: var(--sun);
}

/* The group's name is the point of the headline, so it carries the brand
   teal — and never breaks across two lines. */
.hero h1 .brand-name {
	color: var(--teal);
	white-space: nowrap;
}

/* Held to the width of the headline above it, so the paragraph never runs
   out past where "Behind eight businesses" ends. That line measures about
   11.7em, so this clamp is h1's own clamp multiplied by 11.7 — the two edges
   then stay lined up at every width, not just at full size. */
.hero .lede {
	max-width: clamp(17.55rem, 39.8vw, 27.5rem);
	font-size: 1.0625rem;
	color: rgb(255 255 255 / 78%);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

/* Capped so the artwork stops setting the hero's height — with the smaller
   headline the row would otherwise be mostly empty space. */
.hero-art {
	max-width: 20rem;
	margin-inline: auto;
}

.hero-art svg { width: 100%; height: auto; }

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 0;
	background: rgb(255 255 255 / 12%);
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.stats > div {
	background: var(--deep);
	padding: 1.5rem 1rem;
	text-align: center;
}

.stats dt {
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 60%);
}

.stats dd {
	margin: .25rem 0 0;
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

/* ---------- businesses ---------- */

.businesses { padding-block: clamp(4rem, 8vw, 6.5rem) 2rem; }

/* Two equal halves: the group mark on the left, the section copy on the right. */
.intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.intro-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--radius);
	background:
		radial-gradient(90rem 40rem at 78% -10%, #14414f 0%, transparent 60%),
		linear-gradient(160deg, #0d2430 0%, #09323d 55%, #0d2430 100%);
}

.intro-mark img {
	width: min(100%, 20rem);
	/* The wordmark is near-black; reverse it out on the dark ground. */
	filter: brightness(0) invert(1);
}

.intro .section-head {
	max-width: none;
	margin-bottom: 0;
	align-self: center;
}

/* The trailing margin is inside the centred box, so without this the copy
   reads as sitting high against the logo panel. */
.intro .section-head .lede {
	margin-bottom: 0;
	font-size: .975rem;
}

.biz {
	--accent: var(--teal);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.biz--teal    { --accent: var(--teal);    --accent-ink: #0f7f80; }
.biz--sun     { --accent: var(--sun);     --accent-ink: #a37000; }
.biz--sky     { --accent: var(--sky);     --accent-ink: #0c7fb3; }
.biz--amber   { --accent: var(--amber);   --accent-ink: #b3670a; }
.biz--violet  { --accent: var(--violet);  --accent-ink: #5b46b0; }
.biz--azure   { --accent: var(--azure);   --accent-ink: #0d55ab; }
.biz--crimson { --accent: var(--crimson); --accent-ink: #a80d26; }
.biz--hqred   { --accent: var(--hqred);   --accent-ink: #c4180a; }
.biz--cocoa   { --accent: var(--cocoa);   --accent-ink: #7a4620; }

.biz--tint { background: var(--paper-2); }

.biz-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* The image stays pinned to the top of the row; the copy hangs from the
   bottom, so both columns finish on the same line. */
.biz-body { align-self: end; }

.biz--flip .biz-media { order: 2; }

.biz-media {
	position: relative;
	border-radius: var(--radius);
}

/* Accent slab peeking out behind the photo. */
.biz-media::before {
	content: "";
	position: absolute;
	inset: 1.5rem -1.25rem -1.25rem 1.5rem;
	border-radius: var(--radius);
	background: var(--accent);
	opacity: .18;
}

.biz--flip .biz-media::before { inset: 1.5rem 1.5rem -1.25rem -1.25rem; }

/* An illustration on a transparent ground, not a photo: sit it on a tinted
   panel and show it whole instead of cropping it to fill. */
.biz-media--art .biz-media-link img {
	padding: 1.5rem;
	/* cover, not contain: both artworks carry their own margins, so filling the
	   panel reads better than a small square floating in it. (This matched by
	   accident before, through equal specificity and source order.) */
	object-fit: cover;
	background: color-mix(in srgb, var(--accent) 12%, var(--paper));
	box-shadow: none;
	border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--paper));
}

.biz-media-link img {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* Each section's own brand colour, with a leading bullet. */
.intro .eyebrow,
.approach .eyebrow,
.biz .eyebrow {
	display: flex;
	align-items: center;
	gap: .85rem;
}

.intro .eyebrow::before,
.approach .eyebrow::before,
.biz .eyebrow::before {
	content: "";
	flex: none;
	width: .44rem;
	height: .44rem;
	margin-left: 4px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* The whole image is a link to the business, like the brand card under it. */
.biz-media-link {
	display: block;
	position: relative;
	border-radius: var(--radius);
	transition: transform .15s ease;
}

.biz-media-link:hover { transform: translateY(-3px); }

.biz-body p {
	color: var(--ink-soft);
	font-size: .975rem;
	text-align: justify;
	/* Justified over a narrow measure opens gaps; let the browser break words
	   where it can to keep them small. */
	hyphens: auto;
}

/* Sized so the longest title — "Women's fashion, delivered across Indonesia" —
   holds one line beside its image. */
.biz-body h3 {
	margin-bottom: 0;
	color: var(--ink);
	font-size: clamp(1.2rem, 1.72vw, 1.5rem);
}

/* Accent rule under every section title. */
.biz-body h3::after {
	content: "";
	display: block;
	width: 14.25rem;
	max-width: 100%;
	height: .3rem;
	margin: 1rem 0 1.15rem;
	border-radius: 999px;
	background: var(--accent);
}

.ticks { margin-bottom: 1.75rem; }

.ticks li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .6rem;
	font-size: .975rem;
	color: var(--ink-soft);
}

.ticks li::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: .62rem;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--accent);
}

/* ---------- brand line-up ---------- */

/* Eight cards on white, sitting between the intro and the sections that
   explain each business. */
.brands { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.brands-grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Eight across, so each one is narrow: a plain card holding just the mark,
   the whole thing a link to that business. */
.brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1rem .75rem;
	border: 1px solid var(--rule);
	border-radius: 12px;
	background: var(--paper);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.brand-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

/* Fixed box so wordmarks of very different proportions still line up row
   to row instead of each card setting its own height. */
.brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
}

.brand-card img {
	width: auto;
	max-width: 100%;
	max-height: 2.1rem;
	object-fit: contain;
}

.brand-word {
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
}

/* ---------- approach ---------- */

.approach {
	padding-block: clamp(4rem, 8vw, 6.5rem);
	background: var(--deep);
	color: #fff;
}

.approach .lede,
.approach .card p { color: rgb(255 255 255 / 72%); }

.approach .eyebrow {
	--accent: var(--sun);
	color: var(--sun);
}

.cards {
	display: grid;
	/* 18rem, not 16 — at three narrow columns "Two markets, one standard" wraps,
	   so drop to two columns before it gets that tight. */
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem;
}

.card {
	padding: 2rem 1.75rem;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--radius);
	background: rgb(255 255 255 / 4%);
}

.card h3 {
	margin-bottom: .5rem;
	/* Sized so "Two markets, one standard" stays on one line, including at the
	   narrow three-column widths just before the grid drops to two. */
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.card p {
	margin: 0;
	font-size: .975rem;
}

/* ---------- contact ---------- */

.contact { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* Sits INSIDE a .wrap, never on it — its own padding shorthand would wipe the
   wrap's gutters and the band would run edge to edge below 1160px. */
.contact-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: var(--radius);
	background: linear-gradient(120deg, #e9f7f7 0%, #f6f8fa 60%, #fdf3e0 100%);
	border: 1px solid var(--rule);
}

.contact-inner h2 { margin-bottom: .4rem; }

.contact-inner p {
	margin: 0;
	font-size: .975rem;
	color: var(--ink-soft);
}

.contact-actions { flex-shrink: 0; }

/* ---------- footer ---------- */

.site-footer {
	--foot-row: 1.95rem;
	background: var(--deep);
	color: rgb(255 255 255 / 70%);
	font-size: .9375rem;
}

.footer-inner {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: 2.5rem;
	padding-block: 3.5rem 2.5rem;
}

/* Extra air after the first column so the blurb does not crowd the brand
   list; the gap to "Get in touch" is already wide enough. */
.footer-brand { padding-right: 2.5rem; }

.footer-brand img {
	width: 172px;
	/* Tuned so the blurb's first line lands on the same row grid as the two
	   lists beside it, rather than halfway between two of their lines. */
	margin-bottom: 1.4rem;
	/* The wordmark is near-black; lift it onto the dark ground. */
	filter: brightness(0) invert(1);
	opacity: .92;
}

.footer-brand p { max-width: 28ch; margin: 0; }

.footer-col h2 {
	margin-bottom: .9rem;
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

/* One rhythm for every line in the footer: each line is exactly --foot-row
   tall and carries no margin of its own, so a line in one column lands on the
   same pixel as the line beside it — blurb, brand list and address alike. */
.footer-brand p,
.footer-col li,
.footer-role {
	margin: 0;
	line-height: var(--foot-row);
}

/* Eight brands is a long single file, so they run in two columns under the
   one heading — the second column is a continuation, not its own list. */
.footer-col--companies ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Down the first column, then the second — the list reads in its own
	   order rather than zig-zagging across. */
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	column-gap: 1.25rem;
}

.footer-col a {
	text-decoration: none;
	color: #fff;
}

.footer-col a:hover { color: var(--teal); }

.footer-col span { color: rgb(255 255 255 / 55%); }

/* Sits under the address it belongs to, not as a list entry of its own. */
.footer-role { display: block; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	padding-block: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 12%);
	font-size: .875rem;
}

.footer-bottom p { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 62rem) {
	.hero-inner { grid-template-columns: 1fr; }

	.intro { grid-template-columns: 1fr; }

	.hero-art { max-width: 18rem; margin-inline: auto; }

	.biz-inner { grid-template-columns: 1fr; }

	.biz-body { align-self: auto; }

	.biz--flip .biz-media { order: 0; }

	.biz-media::before,
	.biz--flip .biz-media::before { inset: 1rem -.75rem -.75rem 1rem; }

	/* Weighted towards the brand list, which is two columns wide. */
	.brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.footer-inner { grid-template-columns: 1.6fr 1fr; }

	/* Full width here, so the desktop gutter would only narrow the text. */
	.footer-brand { grid-column: 1 / -1; padding-right: 0; }
}

@media (max-width: 46rem) {
	/* Phone: the headline fills the column, so the paragraph can too. */
	.hero .lede { max-width: none; }

	/* Too narrow for two columns of brand names on a phone. */
	.footer-col--companies ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }

	/* Full size would crowd the menu button on a 360px screen. */
	.brand img { width: 200px; }

	/* On a phone the hero is headline, lede and buttons — nothing else. The
	   hexagons and the stats bar are both scroll before any real content, and
	   the brand line-up is eight more taps before the sections that explain
	   them (every one is still linked from its own section and the footer). */
	.hero-art,
	.stats,
	.brands { display: none; }

	.nav-button {
		display: block;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--rule);
		border-radius: 10px;
		cursor: pointer;
		position: relative;
	}

	.nav-button span,
	.nav-button span::before,
	.nav-button span::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 1.15rem;
		height: 2px;
		background: var(--ink);
		transform: translateX(-50%);
	}

	.nav-button span { top: 50%; }
	.nav-button span::before { top: -6px; left: 0; transform: none; }
	.nav-button span::after  { top: 6px;  left: 0; transform: none; }

	.nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: .5rem var(--gutter) 1rem;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
	}

	.nav a { padding: .85rem 0; }

	.nav .nav-cta { margin-top: .5rem; text-align: center; }

	.nav-toggle:checked ~ .nav { display: flex; }

	.header-inner { position: relative; }

	.stats { grid-template-columns: repeat(2, 1fr); }

	.footer-inner { grid-template-columns: 1fr; }

	.contact-inner { flex-direction: column; align-items: flex-start; }
}

/* Small phones: keep the two hero buttons on one line. */
@media (max-width: 30rem) {
	.brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 26rem) {
	.btn {
		padding: .8rem 1.15rem;
		font-size: .95rem;
	}
}

/* 320px-class screens: the last step that keeps the headline on two lines. */
@media (max-width: 22rem) {
	h1 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn:hover, .brand-card:hover, .biz-media-link:hover { transform: none; }
}