/* MMGroup — mmgroup.web.id (Bahasa Indonesia + English)

   Hand-written CSS, no build step, no JavaScript. This is the MMGroup mother
   -company design, which the client asked for by name after two other designs
   were rejected; it is the same stylesheet mmgroup.co.nl v5 runs, so a change
   made here is worth making there too.

   Section order below follows the page: tokens · base · header · hero ·
   layanan · karya · mengapa · klien · kontak · 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;

	/* The arrow beside "Or Go Direct", as a mask so it is painted in whatever
	   colour the element carries -- a font's arrow glyph would be at the mercy
	   of the loaded face. */
	--arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10.6h11.1l-4.4-4.4L11.7 4.4 19.3 12l-7.6 7.6-1.5-1.8 4.4-4.4H3.5z'/%3E%3C/svg%3E");

	--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);
}

/* The masthead alone runs wider than the page's 1160px measure (2026-09-01):
   with five menu items, the WhatsApp number and the language switch on one
   line, the 1160px box broke "Our Team" and "Why MMGroup" over two lines. */
.site-header .wrap { max-width: 1320px; }

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

.lede {
	/* The bands' body size, not a larger standfirst: asked for piecemeal
	   through 2026-09-01 (`.work`, then `.approach`, then `.steps`) and settled
	   here as one size for every section. `.hero .lede` keeps its own. */
	font-size: .975rem;
	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;
}

/* A band whose heading block is all there is -- the portfolio page's closing
   panel since the client name list came off it on 2026-09-01. The 3rem has
   nothing left below it to separate, and reads as dead space in the panel. */
.section-head:last-child { margin-bottom: 0; }

/* A heading block that runs the full box, for the bands whose content below is
   full width too -- the cards, the process row, the project grid. Two caps
   stack on a section head otherwise: .section-head's 44rem and .lede's 46ch
   reading measure. Both have to come off, not just the inner one, or the
   paragraph still stops at roughly 40% of the wrap. */
.section-head--wide { max-width: none; }
.section-head--wide .lede { max-width: none; }

/* One action sitting beside the heading instead of under it. The max-width
   moves off the block and on to its text column, or the button would be
   pushed against the copy rather than out to the wrap's right edge. */
.section-head--split {
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	/* No row gap: the standfirst on the second line takes its distance from the
	   accent rule above it and nothing else, or the two spacings stack into a
	   hole (2026-09-01). */
	gap: 0 2.5rem;
}

.section-head--split > div { max-width: 44rem; }
.section-head--split > .btn { flex: none; order: 2; }

/* A standfirst in a split head takes a line of its own, the full width of the
   box: `flex: 0 0 100%` breaks the line, `order` puts it under the heading and
   the button rather than between them, and .lede's own reading measure comes
   off (2026-09-01). */
.section-head--split > .lede {
	flex: 0 0 100%;
	max-width: none;
	order: 3;
	margin: 0;
}

.btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: 999px;
	/* `font: inherit` first, and only then the weight: a <button class="btn">
	   otherwise draws in the browser's own 13px form font while an
	   <a class="btn"> beside it inherits Inter, and the two stop matching. */
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	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; }

.btn-line {
	border-color: var(--rule);
	color: var(--ink);
}

/* The band's own accent, not the sheet's default teal: on the azure and amber
   service rows the label turned to the band's ink while the border stayed teal,
   so the two disagreed (2026-09-02). */
.btn-line:hover {
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* Filled in the hero's own deep petrol, for a call to action sitting on the
   light bands (asked for 2026-09-01). */
.btn-deep {
	background: var(--deep);
	border-color: var(--deep);
	color: #fff;
}

.btn-deep:hover { background: #14414f; border-color: #14414f; }

/* Present for a screen reader and a crawler, drawn for nobody: the services
   page lost its hero on 2026-09-01 and with it its visible <h1>. */
/* The phone-only line break, the mirror of `.br-wide`: off everywhere, and
   switched on in the 46rem block. (`.br-wide` needs no base rule of its own --
   a <br> shows by default.) */
.br-narrow { display: none; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.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); }

/* The email address, the last item in the menu before the language switch.
   Nothing here sets a size, a weight or a colour: it is a link inside .nav and
   takes the same type as Services, Work and the rest. */
.nav-mail {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
}

.nav-mail svg,
.mail-mark svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	/* The envelope follows the link's own ink, hover included. */
	fill: currentColor;
}

/* The mark on its own, beside the menu button on a phone. */
.mail-mark {
	display: none;
	margin-left: auto;
	line-height: 0;
	color: var(--ink-soft);
}

.mail-mark:hover { color: var(--ink); }

/* WhatsApp's own green, on the mark alone -- the number stays in the page's
   ink so the pair reads as a phone number, not as a badge. */
.ico--wa { fill: #25d366; }

/* Neither mark ever shrinks; the wordmark beside them may. */
.nav-mail,
.mail-mark { flex: none; }

/* Menu items never break over two lines -- widening the masthead is what makes
   room for them, and a stray wrap would undo it. */
.nav a { white-space: nowrap; }

/* 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;
	/* Copy on the left, artwork on the right -- the markup order, so no `order`
	   here at all. (They spent part of 2026-09-01 the other way round.) */
	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 second line of the headline carries the brand teal. Unlike a company
   name it is a phrase, so it is allowed to wrap on a narrow screen. */
.hero h1 .brand-name { color: var(--teal); }

/* One word inside a teal run, back in white -- the contact page's "One" in
   "Within One Working Day". */
.hero h1 .lit { color: #fff; }

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

/* The buttons sit between the eyebrow and the lede (asked for 2026-09-01),
   not at the foot of the hero, so they need air on both sides rather than
   just above. */
/* Shorter than a button elsewhere on the site (asked for 2026-09-01): only the
   vertical padding comes off, so the label and the pill's width are unchanged. */
.hero-actions .btn { padding-block: .6rem; }

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.75rem 0 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: 22rem;
	margin-inline: auto;
	padding: 1rem;
	/* The illustration is an animated GIF on an opaque white ground, so it gets
	   a white panel to sit on; on the petrol alone it is a bare white square.
	   (The ground was cut out of the artwork for a while on 2026-09-01; the
	   client asked for the white back.) */
	background: #fff;
	/* Three quarters of the site's radius: halved read too square. */
	border-radius: calc(var(--radius) * .75);
	box-shadow: var(--shadow);
	/* Vertically centred by .hero-inner's own align-items: center. */
	align-self: center;
	/* The artwork does not move: the rotation came off when the illustration
	   replaced the hexagon cluster, and the pulse came off on the client's word
	   the same day. */
}

.hero-art img {
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius) * .75 - 4px);
}


.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 ---------- */

/* Twice the room under the cards that it used to leave (2026-09-01): 2rem at
   the foot read as if the section had been cut short. */
.businesses { padding-block: clamp(4rem, 8vw, 6.5rem) 4rem; }

/* On the services page the copy always runs longer than the icon, and the icon
   left at the foot of that column looked dropped rather than placed; it is
   centred against the copy there (asked for 2026-09-01). Elsewhere the two
   columns still finish on the same line. */
.page-services .biz-inner { align-items: center; }

/* The services page opens straight on its first band since the hero came off
   (2026-09-01), so it does not need the homepage's run-up above it -- that
   would just be a field of white under the masthead. */
.page-services .businesses { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Two equal halves: the group mark on the left, the section copy on the right. */
.intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* The logo plate leads on the left and the copy follows on the right
	   (swapped back 2026-09-01). Done with `order`, so the heading keeps its
	   place in the source whichever way round the columns sit. */
	align-items: stretch;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.intro-mark { order: 1; }
.intro .section-head { order: 2; }

.intro-mark {
	position: relative;
	overflow: hidden;
	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%);
}

/* A wave of light crossing the plate and the wordmark on it (asked for
   2026-09-01). White on the deep ground and nothing else -- black and white
   against the hero's colour wave above it. It is oversized and travelled with
   `transform`, which the compositor can do on its own thread; animating the
   gradient's position instead would repaint the plate on every frame. */
.intro-mark::after {
	content: "";
	position: absolute;
	inset: -30% -70%;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 38%,
		rgb(255 255 255 / 9%) 46%,
		rgb(255 255 255 / 28%) 50%,
		rgb(255 255 255 / 9%) 54%,
		transparent 62%);
	transform: translateX(-46%);
	animation: mark-wave 7s ease-in-out infinite;
}

@keyframes mark-wave { to { transform: translateX(46%); } }

.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;
	/* Both columns finish on the same line (2026-09-01). Whichever is taller
	   sets the row height and the other hangs from the bottom of it: on the
	   homepage that is the icon, on the services page and a service's own page
	   it is the copy, which runs longer. */
	align-items: end;
	gap: clamp(2rem, 5vw, 4.5rem);
}


/* 30px of air above the copy column in every band (asked for 2026-09-01), so
   the label, headline, rule and text start below the top of the panel beside
   them rather than level with it. In rem, like the rest of the stylesheet:
   1.875rem is 30px at the default root size. */
.biz-body { margin-top: 1.875rem; }

.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; }

/* The band's artwork panel. It held a client screenshot until 2026-09-01,
   when the icons in service-icons.php took its place; the panel itself is
   unchanged -- same 3:2 box, same tinted fill and accent hairline, so the
   accent slab behind it still lines up. */
/* The panel is a link on the homepage and the services page, so the icon box
   itself is a <span>: it needs the display it no longer gets from being a
   <div>. */
.biz-icon {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent) 10%, var(--paper));
	border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--paper));
	box-shadow: var(--shadow);
}

.biz-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Asked for 2026-09-01: the six artwork panels on the homepage and the
   services page are links to the service's own page, and grow a little under
   the pointer. The transform is on the link rather than on .biz-icon so the
   accent slab behind stays where it is and the panel lifts off it. */
.biz-icon-link {
	display: block;
	border-radius: var(--radius);
	transition: transform .25s ease;
}

.biz-icon-link:hover,
.biz-icon-link:focus-visible { transform: scale(1.035); }

.biz-icon-link:hover .biz-icon {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--paper));
	box-shadow: 0 26px 52px -26px rgb(13 36 48 / 55%);
}

.biz-icon-link:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 5px;
}

/* The weights live here, not on the shapes, so all three icons stay in step. */
.biz-icon .ln,
.svc-card-icon .ln {
	fill: none;
	stroke: var(--accent-ink);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.biz-icon .ln--heavy,
.svc-card-icon .ln--heavy { stroke-width: 14; }
.biz-icon .accent,
.svc-card-icon .accent { stroke: var(--accent); }
.biz-icon .fill,
.svc-card-icon .fill { fill: var(--accent); }
.biz-icon .fill-soft,
.svc-card-icon .fill-soft { fill: color-mix(in srgb, var(--accent) 38%, var(--paper)); }

/* The palette swatches read as separate discs only if the panel fill shows
   between them, so each carries a ring in the panel's own colour. */
.biz-icon .swatch,
.svc-card-icon .swatch {
	fill: var(--accent);
	stroke: color-mix(in srgb, var(--accent) 10%, var(--paper));
	stroke-width: 8;
}

.biz-icon .swatch--2,
.svc-card-icon .swatch--2 { fill: color-mix(in srgb, var(--accent) 55%, var(--paper)); }
.biz-icon .swatch--3,
.svc-card-icon .swatch--3 { fill: color-mix(in srgb, var(--accent) 28%, var(--paper)); }

/* The artboard's selection handles in the alt web-design icon. They had no
   rule at all until 2026-09-01, so they painted with the SVG default -- solid
   black -- on the services page. */
.biz-icon .handle,
.svc-card-icon .handle {
	fill: var(--paper);
	stroke: var(--accent-ink);
	stroke-width: 7;
}

/* Each section's own brand colour, with a leading bullet. The hero is the one
   exception: its eyebrow sits under the headline in the sun colour, with no
   bullet. */
.intro .eyebrow,
.approach .eyebrow,
.work .eyebrow,
.roster .eyebrow,
.steps .eyebrow,
.contact-page .eyebrow,
.gets .eyebrow,
.faq .eyebrow,
.crew .eyebrow,
.biz .eyebrow,
/* The contact strip's heading is the one heading with no eyebrow over it, so
   it wears the bullet itself -- from this rule, not a copy of it. */
.contact-inner h2 {
	display: flex;
	align-items: center;
	gap: .85rem;
}

.intro .eyebrow::before,
.approach .eyebrow::before,
.work .eyebrow::before,
.roster .eyebrow::before,
.steps .eyebrow::before,
.contact-page .eyebrow::before,
.gets .eyebrow::before,
.faq .eyebrow::before,
.crew .eyebrow::before,
.biz .eyebrow::before,
.contact-inner h2::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);
}

.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. */
/* h2 as well as h3: a band is a section heading on the homepage and on the
   services page, but on a service's own page it is the page's second-level
   heading, under the <h1> in the hero. */
.biz-body h2,
.biz-body h3 {
	margin-bottom: 0;
	color: var(--ink);
	font-size: clamp(1.2rem, 1.72vw, 1.5rem);
}

/* The accent rule under a title.
 *
 * It measures the title it belongs to (asked for 2026-09-01): the heading box
 * is shrunk to its own text with `width: fit-content` plus 2rem of padding, so
 * the bar's 100% is the width of the words above it and a little overhang past
 * their right edge. It was a fixed 14.25rem before, which was too long over a short title
 * and too short over a long one.
 *
 * Thin, with the accent glowing underneath it rather than a grey drop shadow:
 * on these backgrounds a neutral shadow would just look like dirt. */
.biz-body h2,
.biz-body h3,
.work .section-head h2,
.approach .section-head h2,
.roster .section-head h2,
.steps .section-head h2,
.gets .section-head h2,
.faq .section-head h2,
.crew .section-head h2,
.contact-page .section-head h2 {
	width: fit-content;
	max-width: 100%;
	/* Room for the bar's overhang. The bar itself is `calc(100% + 3.5rem)`
	   below -- padding alone does nothing for it, because a block child's
	   `width: 100%` resolves against the *content* box and skips the padding
	   entirely (which is why two goes at widening the rule changed nothing).
	   The padding is still needed: it keeps the heading's own box that much
	   wider, so on a phone, where `max-width: 100%` clamps a long title to the
	   column, the content box is column - 3.5rem and the bar's 100% + 3.5rem
	   lands exactly on the column edge instead of past it. */
	padding-right: 3.5rem;
}

.biz-body h2::after,
.biz-body h3::after,
.work .section-head h2::after,
.approach .section-head h2::after,
.roster .section-head h2::after,
.steps .section-head h2::after,
.gets .section-head h2::after,
.faq .section-head h2::after,
.crew .section-head h2::after,
.contact-page .section-head h2::after {
	content: "";
	display: block;
	width: calc(100% + 3.5rem);
	height: .1875rem;
	margin: .9rem 0 1.15rem;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 3px 10px -1px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* On the services page the label opens the band, above the headline, and the
   button closes it under the tick list (2026-09-01). The list's own 1.75rem
   collapses with nothing here, so the button gets its air from that. */
.page-services .biz-body .eyebrow { margin-bottom: 1rem; }

.page-services .biz-body .biz-cta { margin: 0; }

.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 ---------- */

/* ---------- werk ---------- */

.work { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--paper-2); }

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

.work-tile a {
	display: block;
	height: 100%;
	padding: .75rem .75rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.work-tile a:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.work-shot img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
}

.work-body { display: block; padding: .9rem .5rem 0; }

.work-title {
	display: block;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* ---------- klanten ---------- */

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

/* The quotes and the contact strip sit back to back on the homepage, and two
   full section paddings between them left a canyon; each side gives up half.
   (The strip was briefly above the quotes on 2026-09-01 and went back below
   them the same day -- hence the adjacency, and the halving, being written
   this way round.) */
.roster { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.roster + .contact { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Set as chips; there are no client logo files.
   Unused as of 2026-09-01 -- the client name list was removed from both pages;
   kept because clients() is still there and the band may come back. */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
	padding: 0;
	list-style: none;
}

.chips li {
	padding: .5rem 1.05rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--ink-soft);
	background: var(--paper);
}

/* The same chips on the deep panel, where the light border and paper fill
   would both disappear. Used by the portfolio page's client roster. */
.chips--dark { margin-bottom: 0; }

.chips--dark li {
	border-color: rgb(255 255 255 / 18%);
	background: rgb(255 255 255 / 5%);
	color: rgb(255 255 255 / 80%);
}

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

.quote {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper-2);
}

.quote blockquote {
	margin: 0 0 1.25rem;
	/* The same size as the "why" cards' descriptions, asked for 2026-09-01. */
	font-size: .85rem;
	color: var(--ink-soft);
}

/* Pushed to the card's foot so the attributions line up across a row of
   quotes of unequal length. */
.quote-by {
	display: flex;
	align-items: center;
	gap: .75rem;
	/* `auto` on top keeps the attribution on the card's floor whatever the
	   quote's length, so the six rules line up across a row. */
	margin: auto 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

/* A letter monogram — there are no portrait photographs. */
.quote-mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--teal);
	color: #fff;
	font-weight: 700;
}

/* The name a step down from the body size (2026-09-01), with the brand under
   it a step smaller again, so the two still read in that order. */
.quote-by strong { display: block; font-size: .9375rem; color: var(--ink); }
.quote-by em { font-style: normal; font-size: .875rem; color: var(--ink-soft); }

/* ---------- the team roster ----------
   Seven people on the team page, one card each: the same person mark, a name
   and a role. Four across, so the last row carries three -- with seven, any
   column count leaves a short row, and a short row of three reads better than
   a single stranded card. */
.crew { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.crew-grid {
	display: grid;
	/* Two across (2026-09-01): the mark on the left of each card, the name with
	   the role under it beside the mark. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	/* The lead takes the first row on his own; the other six pair off across
	   the three rows below (2026-09-01). */
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.crew-grid > :first-child { grid-column: 1 / -1; }

.crew-member {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
}

.crew-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--teal) 14%, var(--paper));
	color: #0f7f80;
}

.crew-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.crew-text { min-width: 0; }

.crew-name {
	display: block;
	font-weight: 700;
	color: var(--ink);
}

.crew-role {
	display: block;
	margin-top: .2rem;
	font-size: .9125rem;
	color: var(--ink-soft);
}

/* ---------- service cards ----------
   The homepage carried three full-width bands until 2026-09-01; it carries
   three cards now, and the bands themselves live on the services page. Each
   card is one link -- icon, label, headline, one line -- and deliberately does
   not move under the pointer: the cursor is the only affordance the client
   wanted. */
.svc-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	/* Air above and below the row on a wide screen (2026-09-01), so the cards
	   sit clear of the intro over them and the work grid under them. Taken off
	   again on a phone, where the sections already stack with space between. */
	padding: 2.5rem 0;
	list-style: none;
}

/* No card chrome (2026-09-01): the border came off on the client's word, and
   the padding with it -- an invisible box with 1.75rem of inset would only
   have pushed the icons out of line with everything else in the wrap. */
.svc-card a {
	display: block;
	height: 100%;
	text-decoration: none;
	cursor: pointer;
}

.svc-card-icon {
	/* Half the width it opened at (2026-09-01); the 3:2 box takes the height
	   down with it. */
	display: block;
	width: 50%;
	aspect-ratio: 3 / 2;
	margin-bottom: 1.5rem;
	padding: 1rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent) 10%, var(--paper));
	border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--paper));
}

.svc-card-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.svc-card .eyebrow {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: .6rem;
}

.svc-card .eyebrow::before {
	content: "";
	flex: none;
	width: .44rem;
	height: .44rem;
	margin-left: 4px;
	border-radius: 50%;
	background: var(--accent);
}

.svc-card-title {
	/* Ranged left, like the rest of the card. fit-content plus the padding is
	   what makes the rule under it measure the words rather than the card, and
	   the whole 3.5rem of overhang sits on the right. */
	display: block;
	width: fit-content;
	max-width: 100%;
	padding-right: 3.5rem;
	margin-bottom: .9rem;
	/* Smaller than a band's headline: these have to hold one line in a third of
	   the wrap, in Indonesian as well as English, and "Ditemukan, & Tetap
	   Ditemukan" is the one that sets the size (2026-09-01). */
	font-size: clamp(1rem, 1.15vw, 1.075rem);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink);
}

.svc-card-title::after {
	content: "";
	display: block;
	/* No max-width here: 100% resolves against the title's *content* box, so a
	   cap of 100% clamped the rule back to the width of the words -- which is
	   why two goes at widening and centring it changed nothing. The title's own
	   max-width already keeps it inside the card, padding included. */
	width: calc(100% + 3.5rem);
	height: .1875rem;
	margin: .9rem 0 0;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 3px 10px -1px color-mix(in srgb, var(--accent) 65%, transparent);
}

.svc-card-text {
	display: block;
	margin-top: 1.1rem;
	font-size: .975rem;
	color: var(--ink-soft);
}

/* ---------- project lightbox ----------
   Opened by `:target`, closed by a link back to the grid. No JavaScript on
   this site, so there is no Escape key and no focus trap; the scrim and the
   cross are both ordinary links, which is what makes it work at all. */
.lightbox {
	position: fixed;
	inset: 0;
	/* Above the sticky masthead (50) and the skip link (100), so the scrim
	   covers the whole page rather than stopping at the header. */
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
}

.lightbox:target { display: flex; }

.lightbox-scrim {
	position: absolute;
	inset: 0;
	background: rgb(6 20 27 / 74%);
}

.lightbox-panel {
	position: relative;
	width: min(44rem, 100%);
	max-height: 92vh;
	overflow: auto;
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: 0 40px 90px -30px rgb(6 20 27 / 75%);
}

.lightbox-shot {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--rule);
}

.lightbox-close {
	position: absolute;
	top: .85rem;
	right: .85rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgb(13 36 48 / 62%);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
}

.lightbox-close:hover { background: rgb(13 36 48 / 85%); }

.lightbox-body { padding: clamp(1.5rem, 3vw, 2rem); }

.lightbox-body h3 {
	/* A little more under the title than there used to be: on most of these the
	   domain line beneath it is dropped as a duplicate of the title itself. */
	margin: .75rem 0 .6rem;
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	color: var(--ink);
}


.lightbox-note {
	margin: 0 0 1.5rem;
	color: var(--ink-soft);
}

.lightbox-actions { margin: 0; }

/* ---------- 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);
}

/* The section headings on "Recent Work . . .", "Driving Digital
   Transformation" and "What Our Clients Say" take the same rule; it is defined
   with the bands' one above, so the two kinds of heading cannot drift.

   The deep panel's eyebrow is the sun colour rather than the teal default, and
   its rule and glow follow the eyebrow. */
.approach .section-head h2::after {
	background: var(--sun);
	box-shadow: 0 3px 10px -1px color-mix(in srgb, var(--sun) 55%, transparent);
}

/* Four reasons, so two by two: auto-fit would put three on the top row and
   leave the fourth stranded on its own. */
.cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 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%);
}

/* The two sibling services at the foot of a service page. Same card, but it
   is the whole thing that is clickable. */
.card--link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.card--link:hover {
	transform: translateY(-3px);
	background: rgb(255 255 255 / 8%);
	border-color: color-mix(in srgb, var(--accent) 65%, transparent);
}

.card-more {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 600;
	color: var(--accent);
}

.card-more::after { content: " \2192"; }

.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;
	/* Down from .975rem on 2026-09-01: "From webshops to corporate sites, in the
	   Netherlands and well beyond it." is the longest of the four and spilled on
	   to a second line at the full wrap width. */
	font-size: .85rem;
}

/* ---------- 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);
}

/* The copy takes whatever room the buttons leave, so the row stays on one
   line instead of the actions dropping underneath it. */
.contact-inner > div { flex: 1 1 22rem; }

/* One line written twice: the full sentence on a wide screen, a shorter one on
   a phone, with CSS showing one at a time. Used where a sentence has to hold to
   a set number of lines in a ~260px column and the type cannot shrink far
   enough to do it (the portfolio's "Top clients" standfirst). Hidden text is
   skipped by screen readers, so neither version is read twice. */
.copy--phone { display: none; }

/* The short version of the strip's copy, shown on a phone in place of the
   full sentence -- set here, beside the button it keeps company with, rather
   than with a rule further down the sheet that would win over the media query
   whatever the viewport. */
.contact-copy--short { display: none; }

/* The email/WhatsApp lines stand in for the button on a phone, and only
   there -- see the 46rem block. The list itself is set here rather than with
   the contact card's dl further down the sheet: that rule sits after the 46rem
   block, and a later rule of equal specificity would win over it whatever the
   viewport. */
.contact-lines {
	margin: 0;
	display: none;
	gap: 1.1rem;
}

.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	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;
	/* Four columns here, three on mmgroup.co.nl: this domain carries a
	   language link, so "Jelajahi" is its own column rather than a tail on
	   the services list. */
	grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
	gap: 2.5rem;
	/* Deeper at the top than it needs for itself: the wordmark is scaled up out
	   of its box and grows into this space. */
	padding-block: 5rem 2.5rem;
}

/* Extra air after the first column so the blurb does not crowd the link
   list; the gap to "Contact" is already wide enough. */
/* Only .5rem of gutter now: the wordmark below is drawn at twice its size and
   needs the column's full width to grow into. The blurb is capped at 28ch
   anyway, so it does not widen. */
/* The brand block leads and Kontak closes, which is also the markup order --
   the two spent part of 2026-09-01 swapped and went back the same day, so
   there is no `order` here at all. */
.footer-brand {
	padding-right: .5rem;
}

/* Sized to the footer's own line grid (2026-09-01): the other three columns
   spend 29px on their heading before their first link, so the wordmark and the
   margin under it have to spend the same, and then the blurb's two lines land
   exactly on their first two link lines. 96px wide is 21px tall, which leaves
   8px of gap. It was scaled up to 1.85x for part of the day; the transform is
   gone with it, so what is drawn and what is laid out are the same thing again.

   The pull to the left is proportional to that width -- the wordmark carries
   its own transparent margin, and -12px is what puts its ink near the column
   edge. Reset below 62rem, where the brand block spans the full width. */
.footer-brand img {
	width: 96px;
	margin-bottom: .5rem;
	/* Drawn at 2.6x (2026-09-01) with the origin at the **bottom** left: it
	   grows upward into the footer's padding rather than downward into the
	   blurb, so the line grid above stays exactly where it was measured. A
	   transform is painted, not laid out, so nothing below it moves either.
	   The wordmark carries 11.3% of its width as transparent margin, so the
	   pull left is -10.8px x the scale to put its ink on the column edge. */
	transform: scale(2.6);
	transform-origin: left bottom;
	margin-left: -28px;
	/* 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, link list and address alike. */
.footer-brand p,
.footer-col li {
	margin: 0;
	line-height: var(--foot-row);
}

/* Rows three and four of the brand column: WhatsApp and the address, each on
   one line of the footer's grid, so they run level with the third and fourth
   link of the columns beside them. */
.brand-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each row is exactly one line of the footer's grid, set as a height rather
   than left to the line box: the marks make these anchors inline-flex, and an
   inline-flex box sitting on the baseline grows the line by ~3px -- enough to
   push the address off the row its neighbours sit on. */
.brand-contact li {
	display: flex;
	align-items: center;
	height: var(--foot-row);
	line-height: var(--foot-row);
}

.brand-contact a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: #fff;
}

.brand-contact svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
}

/* The envelope takes the colour of the line it stands next to; the WhatsApp
   mark keeps its own green, as it does in the masthead. */
.brand-contact svg:not(.ico--wa) { fill: rgb(255 255 255 / 70%); }

.brand-contact a:hover { color: var(--teal); }

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

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

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

.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; }

/* The copyright and the rights line are two spans, so the space between them
   can be set: a word space read as one long sentence. Reset on a phone, where
   they are flex items on two lines and the flex gap spaces them instead. */
.footer-bottom p span + span { margin-left: 1.25rem; }

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

/* Between the full menu and the wordmark there is only so much masthead. Under
   ~1216px the address and the three flags together squeeze the wordmark
   itself, so the address steps back to its envelope alone and the flags step
   out; both come back in the phone menu at 46rem, where the menu is a column
   and has all the room it needs. */
/* Between 70rem and 76rem the masthead has room for the mark but not the
   address beside it. */
@media (min-width: 70.0625rem) and (max-width: 76rem) {
	.nav-mail { display: inline-flex; }
}

/* Where the flags are shown the masthead needs the extra room they take: the
   German menu plus four flagged codes wants ~1350px of it. */
@media (min-width: 100.0625rem) {
	.site-header .wrap { max-width: 1440px; }
}

@media (max-width: 100rem) {
	/* Four flags and four codes is a wide switch; under ~1600px it costs the
	   wordmark more than it is worth -- the German menu is the longest of the
	   four -- so the codes travel alone. The flags come back in full in the
	   collapsed menu, where the column has room for them. */
	.langs .flag { display: none; }
}

@media (max-width: 76rem) {
	.nav-mail-text { display: none; }
	/* The envelope goes with the digits below 70rem: German is the longest of
	   the four menus and the row would not fit 768px with it (2026-09-01). It
	   is a full row in the phone menu at 46rem, and it is in the footer and on
	   the contact page at every width. */
	.nav-mail { display: none; }
	.nav-mail { gap: 0; }
}

/* ---------- service pages ----------
   /desain-web/, /pengembangan-web/, /optimasi-mesin-pencari/ and their English
   slugs. Both sections below take their colour from a `.biz--<accent>` class
   on the section itself, so one page reads in one accent throughout. */
.gets {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--paper-2);
}

.gets-grid {
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.get {
	padding: 1.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
}

/* Its own accent per card, the way the process steps do it: design, then
   development, then search, then hosting. */
.get:nth-child(1) { --accent: var(--teal);  --accent-ink: #0f7f80; }
.get:nth-child(2) { --accent: var(--azure); --accent-ink: #0d55ab; }
.get:nth-child(3) { --accent: var(--amber); --accent-ink: #b3670a; }
.get:nth-child(4) { --accent: var(--sun);   --accent-ink: #a37000; }

.get-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 14%, var(--paper));
	color: var(--accent-ink);
}

.get-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The section eyebrows' bullet, not the smaller one the .ticks lists use, and
   the accent rule under it that every other heading on the site carries
   (2026-09-01). The rule starts under the bullet and runs 3.5rem past the
   words: 100% is the h3's content box, so the padding either side is what the
   two margins give back. */
.get h3 {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-bottom: .8rem;
	padding-left: 1.5rem;
	padding-right: 3.5rem;
	font-size: 1.075rem;
}

.get h3::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .68rem;
	width: .44rem;
	height: .44rem;
	border-radius: 50%;
	background: var(--accent);
}

.get h3::after {
	content: "";
	display: block;
	width: calc(100% + 3.5rem);
	height: .1875rem;
	margin: .8rem 0 0 -1.5rem;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 3px 10px -1px color-mix(in srgb, var(--accent) 65%, transparent);
}

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

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

.faq-list {
	margin: 2.5rem 0 0;
	max-width: 52rem;
}

.faq-item {
	padding: 1.5rem 0;
	border-top: 1px solid var(--rule);
}

.faq-item:last-child { border-bottom: 1px solid var(--rule); }

.faq-item dt {
	position: relative;
	padding-left: 1.5rem;
	font-size: 1.075rem;
	font-weight: 700;
	color: var(--ink);
}

.faq-item dt::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: .6rem;
	width: .44rem;
	height: .44rem;
	border-radius: 50%;
	background: var(--accent);
}

.faq-item dd {
	margin: .6rem 0 0 1.5rem;
	font-size: .975rem;
	color: var(--ink-soft);
}

@media (max-width: 62rem) {
	/* The tightest stretch of the masthead: the full menu is still shown and
	   the wordmark has to share the row with it. Closing the menu's gutters
	   buys the wordmark ~60px, and the address steps out altogether -- with
	   German in the menu (2026-09-01) the row no longer fit at 768px. It is
	   back as a full row in the phone menu at 46rem, and it is in the footer
	   and on the contact page throughout. */
	.nav { gap: 1.1rem; }

	.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; }

	/* One column here, so nothing to bottom-align against. */
	.biz-inner { align-items: stretch; }

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

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

	.work-grid,
	.svc-cards,
	.quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-brand { grid-column: 1 / -1; }

	/* Full width here, so the desktop gutter would only narrow the text. */
	.footer-brand { grid-column: 1 / -1; padding-right: 0; }
	/* The pull left stays (2026-09-01): the wordmark carries 11.3% of its
	   width as transparent margin, so at margin-left 0 its ink would start
	   ~28px in from the gutter while the blurb under it starts at the gutter
	   itself. -28px is that transparent strip at 2.6x, which puts the "M" on
	   the same pixel as the "F" of "For brands...". */
	.footer-brand img { margin-left: -28px; }
}

@media (max-width: 46rem) {
	.section-head--split { display: block; }
	.section-head--split > .btn { margin-top: 1.5rem; }

	/* Hand-placed line breaks (services, "How we work"): they balance a
	   full-box line on a wide screen and would break the copy in an odd place
	   in a phone column, which wraps on its own. */
	.br-wide { display: none; }

	/* Its mirror: a break that exists only in a phone column. */
	.br-narrow { display: inline; }

	/* Phone: the headline fills the column, so the paragraph can too. */
	.hero .lede { max-width: 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. */
	.hero-art,
	.stats { display: none; }

	.work-grid,
	.quotes,
	.gets-grid,
	.svc-cards,
	.cards { grid-template-columns: minmax(0, 1fr); }

	/* Stacked, with no border or fill to separate them, the cards need a real
	   gap or the next icon reads as part of the paragraph above it. */
	.svc-cards {
		padding: 0;
		gap: 3rem;
	}

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


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

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

	/* The bare domain in the footer's bottom bar (2026-09-01): on a phone it
	   wraps onto its own line under the copyright and only repeats what is in
	   the address bar, so it goes. Hidden rather than dropped from the markup,
	   because it still balances the bar on a wide screen. */
	.footer-bottom p:last-child { display: none; }

	/* With the domain gone the bar holds a single line, so it gets a little
	   more air above and below it rather than sitting tight against the rule
	   and the foot of the page. Halved above the rule on 2026-09-01: the run
	   from the last link to the copyright was 86.6px on a phone and the
	   client asked for half of it, which is this, the list's trailing margin
	   and the grid's bottom padding each cut in two. */
	.footer-bottom { padding-block: .9rem 1.85rem; }
	.footer-inner { padding-bottom: 1.25rem; }
	.footer-col ul { margin-bottom: .5rem; }

	/* ...and the two halves of that line spread to the ends of the bar, the
	   way the copyright and the domain do on a wide screen, so there is a
	   real gap between "(c) ... MMGroup." and "All rights reserved." rather
	   than one word space. Wraps to two lines on a 320-class screen, where
	   they do not both fit. */
	.footer-bottom p {
		flex: 1 1 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: .35rem 1rem;
	}

	/* "All Rights Reserved." leads and the copyright sits under it (2026-09-01,
	   the client's order). The spans stay in reading order in the markup --
	   the copyright is the first thing a screen reader should meet -- so the
	   swap is `order`, and the desktop word gap goes with it. */
	.footer-bottom p span:first-child { order: 2; }
	.footer-bottom p span + span { margin-left: 0; }

	/* Stacked, `flex: 1 1 22rem` on the copy stops being a width and becomes a
	   352px *height*, and space-between then pushes the button to the bottom of
	   it -- a screen of dead space inside the card. Both have to be undone, not
	   just the direction. */
	.contact-inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.contact-inner > div { flex: 0 1 auto; }

	/* A full-width pill under three lines of copy is a lot of button for a
	   phone; the two ways to reach us are listed instead, exactly as "Or Go
	   Direct" lists them on the contact page (asked for 2026-09-01). */
	.contact-actions { display: none; }
	.contact-lines { display: grid; }

	.contact-copy { display: none; }
	.contact-copy--short { display: block; }


	.copy--wide { display: none; }
	.copy--phone { display: block; }

	/* A rule between the heading and the copy, as the section headings carry
	   (asked for 2026-09-01). The heading is a flex row -- the bullet is its
	   ::before -- so the rule is a third flex item forced onto a line of its
	   own rather than a block ::after, which would sit beside the words. */
	.contact-inner h2 {
		flex-wrap: wrap;
		margin-bottom: .9rem;
	}

	.contact-inner h2::after {
		content: "";
		flex: 0 0 100%;
		height: .1875rem;
		/* Negative on purpose: the gap the eye sees is not this margin alone
		   but the heading's leading under the glyphs plus it -- 19px in all
		   with .4rem here. -.25rem takes that to ~10px, half of what it was
		   (2026-09-01, measured with a pixel scan rather than by the number). */
		margin-top: -.25rem;
		border-radius: 999px;
		background: var(--accent);
		box-shadow: 0 3px 10px -1px color-mix(in srgb, var(--accent) 65%, transparent);
	}

	/* "Dienst 03 · Zoekmachineoptimalisatie" is one 24-character word, and its
	   min-content width (304px) was stretching the whole band past a 320px
	   screen -- the page scrolled sideways on /nl/diensten/. `anywhere`, not
	   `break-word`: only the former counts when the browser works out how
	   narrow the column may be. */
	.biz .eyebrow { overflow-wrap: anywhere; }

	/* The bands' copy stays justified on a phone too (asked for 2026-09-01;
	   it was ragged right here for most of the day). The base rule already
	   sets `hyphens: auto` with it, which is what keeps a ~310px column from
	   opening rivers between the words. */

	/* The one exception (asked for 2026-09-01): the standfirst under "Recent
	   Work . . ." is justified on a phone. Hyphenation is on with it, so the
	   two short sentences do not open rivers the way the bands' copy does. */
	.work .section-head .lede {
		text-align: justify;
		hyphens: auto;
	}
}

/* Small phones: keep the two hero buttons on one line. */
@media (max-width: 26rem) {
	.btn {
		padding: .8rem 1.15rem;
		font-size: .95rem;
	}

	/* A little more air under the wordmark once the columns stack. */
	.footer-brand img { margin-bottom: 1rem; }
}

/* 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, .work-tile a:hover { transform: none; }
	/* The wave of light over the wordmark holds still for anyone who asked for
	   less movement. */
	.intro-mark::after { animation: none; }
	.biz-icon-link:hover, .biz-icon-link:focus-visible,
	.card--link:hover { transform: none; }
}

/* ---------- contact page ----------
   New on this domain: mmgroup.co.nl has no form, only a mailto strip. The
   form sits beside a details card that reuses the contact strip's gradient, so
   the page still reads as part of the same design. */

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

.contact-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 3.5rem);
}

/* The card is the shorter column, so it is centred against the form rather
   than hung from its top (asked for 2026-09-01). `align-items: start` above
   still governs the form itself. Below 62rem the two stack and there is
   nothing to centre against. */
.contact-page .deets { align-self: center; }

/* Tighter than it opened (2026-09-01): the form ran taller than the details
   card beside it, and a contact form is one of the few places where less
   scrolling is worth more than air. */
/* Two columns, and everything in the form spans both of them except the pair
   marked .field--half -- Name and Email, which share the first row (asked for
   2026-09-01). One column again on a phone, where two 150px inputs beside each
   other would be worse than two full-width ones. */
.form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem 1rem;
}

.form > * { grid-column: 1 / -1; }

.form > .field--half { grid-column: auto; }

.field { display: grid; gap: .25rem; }

.field label::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .5rem;
	width: .44rem;
	height: .44rem;
	border-radius: 50%;
	background: var(--accent);
}


/* Name, Email and Message carry the section eyebrows' bullet on the left, set
   at the same size and offset as the team page's card titles. The rule that
   went under them came and went the same day (2026-09-01), and the padding it
   needed on the right went with it. */
.field label {
	position: relative;
	width: fit-content;
	max-width: 100%;
	/* 1.1rem, not the 1.5rem the team page's card titles use: the bullet sits
	   at 4px and is .44rem across, so this leaves ~6.5px between it and the
	   word -- half what it was (2026-09-01). */
	padding-left: 1.1rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ink);
}

.field label span { font-weight: 400; color: var(--ink-soft); }

.field input,
.field textarea {
	width: 100%;
	padding: .6rem 1rem;
	border: 1px solid var(--rule);
	border-radius: 12px;
	background: var(--paper);
	font: inherit;
	font-size: .975rem;
	color: var(--ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Still draggable, so a long message is not cramped by the shorter default. */
.field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent);
}

/* Colour is never the only signal: the message below says the same thing. */
.field--bad input,
.field--bad textarea { border-color: #c8102e; }

.field-error {
	font-size: .875rem;
	font-weight: 500;
	color: #a80d26;
}

/* Off-screen rather than display:none -- a bot that skips hidden fields still
   fills this one. Out of the tab order and hidden from assistive tech. */
.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.note {
	padding: 1rem 1.15rem;
	border-radius: 12px;
	border: 1px solid var(--rule);
	font-size: .975rem;
}

.note--good {
	border-color: color-mix(in srgb, var(--teal) 40%, var(--rule));
	background: color-mix(in srgb, var(--teal) 9%, var(--paper));
	color: #0f7f80;
}

.note--bad {
	border-color: #f0c2c9;
	background: #fdf2f4;
	color: #a80d26;
}

/* The details beside the form: the contact strip's gradient, stacked. */
.deets {
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: linear-gradient(150deg, #e9f7f7 0%, #f6f8fa 60%, #fdf3e0 100%);
}

/* An arrow rather than the section eyebrows' dot (asked for 2026-09-01): this
   heading points at the two ways to reach us under it. It keeps the dot's
   colour and its footprint -- .875rem is what the .44rem dot and its 4px halo
   measure across -- so the card still reads as part of the same family. */
.deets h2 {
	display: flex;
	align-items: center;
	gap: .85rem;
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	margin-bottom: .75rem;
}

.deets h2::before {
	content: "";
	flex: none;
	width: .875rem;
	height: .875rem;
	margin-left: 4px;
	background: var(--accent);
	/* A right-pointing arrow, drawn as a mask so it takes the accent above and
	   cannot fall back to a font's own idea of an arrowhead. */
	-webkit-mask: var(--arrow-mask) center / contain no-repeat;
	mask: var(--arrow-mask) center / contain no-repeat;
}

.deets dl { margin: 0; display: grid; gap: 1.1rem; }

.deets dt,
.contact-lines dt {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.deets dd,
.contact-lines dd {
	margin: .25rem 0 0;
	font-size: .975rem;
	color: var(--ink);
	line-height: 1.6;
}

/* No rule under the address (2026-09-01): it is the only link in the card, so
   nothing has to mark it out as one. It still answers to the pointer. */
.deets dd a,
.contact-lines dd a { color: var(--ink); text-decoration: none; }

/* The two answers in "Or Go Direct" that carry a mark -- the address and the
   WhatsApp number -- each set as mark, then text, on the baseline of the rest.
   WhatsApp keeps its own green (.ico--wa, further up); the envelope takes the
   card's quieter ink. */
.line-ico {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.line-ico svg { width: 1.25rem; height: 1.25rem; flex: none; }

.line-ico svg:not(.ico--wa) { fill: var(--ink-soft); }
.deets dd a:hover,
.contact-lines dd a:hover { color: #0f7f80; }

@media (max-width: 62rem) {
	.contact-cols { grid-template-columns: minmax(0, 1fr); }

	.contact-page .deets { align-self: auto; }
}

@media (max-width: 46rem) {
	/* A phone column is too narrow to split: Name and Email go back to a line
	   each. Between here and 62rem the form has the page's full width, where
	   the pair sits side by side comfortably. */
	.form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- portfolio ----------
   The homepage tiles carry a title and a domain. On /portofolio/ each also
   carries the sector it was built for and a line on what it is, so the grid
   reads without opening fifteen tabs. */

.work-sector {
	display: inline-block;
	margin-bottom: .55rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--teal) 12%, var(--paper));
	color: #0f7f80;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}


/* ---------- sub-page hero ----------
   The homepage hero pairs its headline with the hexagon cluster. A sub-page
   has no artwork to pair with, so it drops to one column and the copy is given
   the room instead. Same deep band, same stats bar underneath. */

/* `.hero--page` -- the one-column page hero -- is gone (2026-09-01). The
   services and portfolio heroes were dropped earlier in the day, and the team
   and contact heroes both carry the illustration on the right now, so every
   hero left on the site is the homepage's two-column arrangement. */

/* ---------- process ----------
   New on this domain: mmgroup.co.nl has no services page yet. Four numbered
   steps, on the light band, using the same accent bullet the sections do. */

.steps { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--paper-2); }

.steps-grid {
	margin: 2.5rem 0 0;
	padding: 0;
	/* The base reset only covers <ul>; this one is an <ol> because the four
	   steps are a sequence. */
	list-style: none;
	display: grid;
	/* Two by two since 2026-09-01, not four across: the icons are large enough
	   now that a quarter-width card would leave them stranded over two lines of
	   type. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.step {
	padding: 2rem 1.75rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

/* The badge held the step's number until 2026-09-01; it holds an icon now, and
   the icon is the card's opening move: at the top, ranged right with the words
   under it. It was drawn at twice this size for part of 2026-09-01 and halved
   again the same day. */
.step { text-align: right; }

.step-n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: .25rem 0 1.25rem auto;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 14%, var(--paper));
	color: var(--accent-ink);
}

.step-n svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.step:nth-child(1) { --accent: var(--teal);  --accent-ink: #0f7f80; }
.step:nth-child(2) { --accent: var(--azure); --accent-ink: #0d55ab; }
.step:nth-child(3) { --accent: var(--amber); --accent-ink: #b3670a; }
.step:nth-child(4) { --accent: var(--sun);   --accent-ink: #a37000; }

.step h3 {
	margin-bottom: .45rem;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--ink);
}

.step p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

@media (max-width: 62rem) {
	.steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
	.steps-grid { grid-template-columns: minmax(0, 1fr); }

	/* Same call the homepage hero makes: on a phone the stats bar is scroll
	   before any real content. */
}

/* ---------- language switch ----------
   New on this domain: mmgroup.co.nl is Dutch only. Set as type beside the
   nav, and repeated inside the phone menu where the nav collapses. */

.langs {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}
/* Code and flag travel together, so the pair never breaks over the separator. */
.langs__on,
.langs__off {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

/* Sized to the type beside it: 1.05rem wide is about the height of the two
   capitals, and the 3:2 field keeps all three flags the same size. */
.flag {
	width: 1.05rem;
	height: auto;
	flex: none;
	border-radius: 2px;
}

/* Twice the menu's own gap before the switch (2026-09-01): the links and the
   address are one run, and the languages are not part of it. The value tracks
   .nav's gap at each width, so the two stay in proportion. */
.nav .langs { margin-left: 1.75rem; }

@media (max-width: 62rem) {
	.nav .langs { margin-left: 1.1rem; }
}

.langs__on  { color: var(--ink); }
.langs__sep { color: #b7c0cb; }   /* --rule is too pale to read as a divider */
.langs__off { color: var(--ink-soft); transition: color .18s ease; }
.langs__off:hover { color: var(--accent-ink); }

/* Same breakpoint the nav itself collapses at. */
@media (max-width: 62rem) {
	.nav .langs { order: 5; margin-top: .75rem; margin-left: 0; padding-top: .75rem; border-top: 1px solid var(--rule); }
}

/* ---------- justified body copy ----------
   Every standfirst and every block of body copy on the site is justified once
   the layout is off its widest arrangement (2026-09-01, after a page-by-page
   run through them), with hyphenation on so the browser can break a word
   rather than stretch the line. `.lede` covers the section standfirsts and the
   hero paragraphs; the rest are the cards, steps, quotes and answers that
   carry copy of their own. Not listed, and deliberately: headings, eyebrows,
   labels, nav, footer, and the paragraphs that hold nothing but a button.

   64rem, not 46rem: a tablet is 768-820px upright and 1024px on its side, both
   past the phone breakpoint but still a narrow enough column to justify. 1024
   is the last width this covers; a laptop keeps the ragged right.

   The block sits at the foot of the sheet on purpose. Half the rules it has to
   beat -- `.step { text-align: right }` among them -- are defined after the
   responsive section, and a media query earlier in the file loses to a later
   rule of equal specificity whatever the viewport. */
@media (max-width: 64rem) {
	.lede,
	.biz-body p,
	.svc-card-text,
	.get p,
	.card p,
	.step p,
	.quote blockquote,
	.deets dd {
		text-align: justify;
		hyphens: auto;
	}

	/* The step cards range right on a wide screen -- the icon sits top right
	   with the words under it -- but with their copy justified that leaves the
	   titles alone pointing the other way. */
	.step { text-align: left; }
	.step-n { margin-right: auto; margin-left: 0; }
}

/* ---------- the collapsed menu ----------
   Behind the button from 62rem down (2026-09-01; it was 46rem until German
   joined the four languages). Five items in German, plus the address and a
   four-language switch, no longer fit a tablet's masthead beside the wordmark
   -- at 768px the wordmark was being squeezed to a couple of pixels. Behind
   the button all of it has a column to itself.

   The block sits after the phone block on purpose: both match on a phone, and
   these rules must be the ones that land. */
@media (max-width: 62rem) {
	.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; }

	/* In the open menu the address is spelled out and the flags come back: the
	   column is as wide as the page, and the mark beside the button carries no
	   words. */
	.mail-mark { display: block; }

	.nav-mail {
		display: flex;
		gap: .5rem;
		margin-left: 0;
	}

	.nav-mail-text { display: inline; }

	.langs .flag { display: block; }

	.nav-mail svg { width: 1.15rem; height: 1.15rem; }

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

	.header-inner { position: relative; }
}