/*
Theme Name: Mit Håndværk
Theme URI: https://mithaandvaerk.dk/
Author: grn.dk
Author URI: https://grn.dk/
Description: Front page and site chrome for mithaandvaerk.dk — a short presentation of the Mit Håndværk app, the two store buttons and the way into the browser version at app.mithaandvaerk.dk. Child of Twenty Twenty-Three.
Template: twentytwentythree
Version: 2.1.0
Requires at least: 6.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: mithaandvaerk
*/

/* v2.0.0 (card https://trello.com/c/eV8wMhmG): the 2026 visual refresh. Same
   words, same structure, same palette — a display serif, a phone mockup in the
   hero, icon cards, a dark editorial "Om" band, a gradient call-to-action and
   scroll-driven reveals. v1.0.0 is tagged mh-wp-frontpage-v1.0.0 in the agents
   repo; `installers/mh-wp-frontpage-s1.sh --from-ref=mh-wp-frontpage-v1.0.0`
   puts it back. */

/* v2.1.0 (card https://trello.com/c/9i5JWIe8): MH read v2.0.0 and asked for two
   things — headlines that are less cursive, and phone figures that show more of
   the app. Both were one defect each. The headlines were set in Fraunces
   ITALIC on every h1/h2 because the two woff2 files were downloaded crossed
   (the file named `fraunces-latin.woff2` held Fraunces Italic), so the upright
   face only ever rendered where the CSS asked for italic. The files are now
   named after what is inside them, which puts the serif upright and leaves the
   italic where it was meant to be: the one coral word in the hero headline.
   The figures were cut at half the phone's screen, so the lower half of every
   mockup was empty white; they are now cut to the screen's own aspect. Going
   back one step is the same switch as before, against the v2.0.0 tag:
   `installers/mh-wp-frontpage-s1.sh --from-ref=mh-wp-frontpage-v2.0.0`. */

/* ---------- fonts (self-hosted, OFL — see assets/fonts/README.md) ----------

   The file name is the contract: `fraunces-latin.woff2` is the upright face and
   `fraunces-italic-latin.woff2` the italic one. They were the wrong way round
   until v2.1.0, and nothing failed loudly — the page just set every headline in
   the italic, which is what the client saw as "too cursive". `functions.php`
   preloads the upright file by that name too, so a future refresh that swaps
   them again reintroduces the same bug silently. Check with
   `python3 -c "from fontTools.ttLib import TTFont; print(TTFont('<file>')['name'].getDebugName(4))"`. */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin.woff2") format("woff2");
}

/* The app's own palette (lib/resources/theme_data/main_theme.dart):
   sand #CDB084 is the splash background, cream #FFF4E3 the inactive tint,
   coral #E97B7B the accent. Text stays ink on the light surfaces: white on
   sand measures 1.9:1 and white on coral 2.9:1, both under WCAG AA, so coral
   is a glow and a highlight here, never a text colour — the darker coral-ink
   (#b64444, 4.9:1 on cream) carries the accent where it has to be read. */
:root {
	--mh-sand: #cdb084;
	--mh-sand-deep: #b8976a;
	--mh-sand-soft: #e8d7b8;
	--mh-cream: #fff4e3;
	--mh-cream-soft: #fffaf1;
	--mh-coral: #e97b7b;
	--mh-coral-ink: #b64444;
	--mh-ink: #2f2a24;
	--mh-ink-2: #4a4238;
	--mh-ink-soft: #5c554c;
	--mh-line: #ecdfca;
	--mh-display: "Fraunces", Georgia, "Times New Roman", serif;
	--mh-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mh-radius: 24px;
	--mh-shadow: 0 24px 60px -24px rgba(47, 42, 36, 0.35);
	--mh-pad-x: clamp(1.1rem, 4vw, 3rem);
	--mh-max: 1140px;
}

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

body {
	background: var(--mh-cream-soft);
	color: var(--mh-ink);
	font-family: var(--mh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

h1,
h2,
.mh-header__brand,
.mh-footer__name {
	font-family: var(--mh-display);
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: -0.015em;
}

:focus-visible {
	outline: 3px solid var(--mh-coral);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- site chrome ---------- */

.mh-mark {
	align-items: center;
	background: linear-gradient(135deg, var(--mh-sand) 0%, var(--mh-sand-deep) 100%);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 14px -8px rgba(47, 42, 36, 0.5);
	color: var(--mh-ink);
	display: inline-flex;
	flex: 0 0 auto;
	height: 2.35rem;
	justify-content: center;
	width: 2.35rem;
}

.mh-mark svg {
	height: 1.15rem;
	width: auto;
}

.mh-header {
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	background: rgba(255, 250, 241, 0.82);
	border-bottom: 1px solid rgba(205, 176, 132, 0.35);
	padding: 0.7rem var(--mh-pad-x);
	position: sticky;
	top: 0;
	z-index: 50;
}

.mh-header__inner {
	align-items: center;
	display: flex;
	gap: 1.25rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--mh-max);
}

.mh-header a {
	text-decoration: none;
}

.mh-header__brand {
	align-items: center;
	color: var(--mh-ink);
	display: inline-flex;
	font-size: 1.3rem;
	gap: 0.7rem;
}

.mh-nav {
	display: flex;
	gap: 1.75rem;
}

.mh-nav a {
	color: var(--mh-ink-soft);
	font-size: 0.95rem;
	font-weight: 600;
	position: relative;
}

.mh-nav a::after {
	background: var(--mh-coral);
	border-radius: 2px;
	bottom: -0.35rem;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
	width: 100%;
}

.mh-nav a:hover,
.mh-nav a:focus-visible {
	color: var(--mh-ink);
}

.mh-nav a:hover::after,
.mh-nav a:focus-visible::after {
	transform: scaleX(1);
}

.mh-header__cta {
	background: var(--mh-ink);
	border-radius: 999px;
	box-shadow: 0 10px 24px -14px rgba(47, 42, 36, 0.9);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 0.6rem 1.25rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	white-space: nowrap;
}

.mh-header__cta:hover,
.mh-header__cta:focus-visible {
	background: var(--mh-ink-2);
	box-shadow: 0 14px 28px -14px rgba(233, 123, 123, 0.9);
	color: #fff;
	transform: translateY(-1px);
}

.mh-footer {
	background: var(--mh-ink);
	border-top: 4px solid var(--mh-sand);
	border-image: linear-gradient(90deg, var(--mh-sand) 0%, var(--mh-coral) 100%) 1;
	color: #cfc5b6;
	padding: 3.25rem var(--mh-pad-x) 2.5rem;
}

.mh-footer__inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1.3fr 1fr 1fr;
	margin: 0 auto;
	max-width: var(--mh-max);
}

.mh-footer p {
	line-height: 1.6;
	margin: 0.3rem 0;
}

.mh-footer a {
	color: #f3ece1;
	text-decoration-color: rgba(205, 176, 132, 0.5);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mh-footer a:hover,
.mh-footer a:focus-visible {
	color: #fff;
	text-decoration-color: var(--mh-coral);
}

.mh-footer__brand {
	align-items: flex-start;
	display: flex;
	gap: 0.9rem;
}

.mh-footer__brand .mh-mark {
	margin-top: 0.15rem;
}

.mh-footer__name {
	color: #fff;
	font-size: 1.35rem;
	margin: 0 0 0.2rem;
}

.mh-footer__label {
	color: var(--mh-sand);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.mh-footer__small {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #9d9284;
	font-size: 0.85rem;
	margin: 2.5rem auto 0;
	max-width: var(--mh-max);
	padding-top: 1.5rem;
}

/* ---------- shared blocks ---------- */

.mh-eyebrow {
	align-items: center;
	color: var(--mh-coral-ink);
	display: flex;
	font-size: 0.8rem;
	font-weight: 800;
	gap: 0.6rem;
	letter-spacing: 0.12em;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

.mh-eyebrow::before {
	background: currentColor;
	border-radius: 2px;
	content: "";
	flex: 0 0 auto;
	height: 2px;
	width: 2rem;
}

.mh-lead {
	color: var(--mh-ink-soft);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.65;
	margin: 0;
}

.mh-lead + .mh-lead {
	margin-top: 1.1rem;
}

.mh-webcta {
	align-items: center;
	background: var(--mh-ink);
	border-radius: 999px;
	box-shadow: 0 16px 30px -18px rgba(47, 42, 36, 0.9);
	color: #fff;
	display: inline-flex;
	font-size: 1.05rem;
	font-weight: 700;
	gap: 0.6rem;
	padding: 0.9rem 1.9rem;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.mh-webcta::after {
	content: "→";
	font-weight: 400;
	transition: transform 0.25s ease;
}

.mh-webcta:hover,
.mh-webcta:focus-visible {
	background: var(--mh-ink-2);
	box-shadow: 0 18px 34px -16px rgba(233, 123, 123, 0.95);
	color: #fff;
	transform: translateY(-2px);
}

.mh-webcta:hover::after,
.mh-webcta:focus-visible::after {
	transform: translateX(4px);
}

.mh-webcta--big {
	font-size: 1.15rem;
	padding: 1.05rem 2.3rem;
}

.mh-stores {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 2rem 0 1rem;
}

.mh-stores a {
	border-radius: 9px;
	display: inline-block;
	line-height: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mh-stores a:hover,
.mh-stores a:focus-visible {
	box-shadow: 0 14px 26px -16px rgba(47, 42, 36, 0.8);
	transform: translateY(-2px);
}

.mh-stores img {
	border-radius: 9px;
	height: 54px;
	width: auto;
}

.mh-note {
	color: var(--mh-ink-soft);
	font-size: 0.9rem;
	margin: 0.9rem 0 0;
}

/* A phone drawn in CSS around the figure captured by installers/mh-wp-shots.cjs.
   Each crop ends on a rule the app draws, so the screen fades to white below the
   picture instead of showing an edge (LEARNINGS 2026-08-27). */
.mh-phone {
	--w: clamp(220px, 22vw, 290px);
	aspect-ratio: 9 / 18.6;
	background: linear-gradient(160deg, #3a342d 0%, var(--mh-ink) 60%, #1e1b17 100%);
	border-radius: calc(var(--w) * 0.165);
	box-shadow: var(--mh-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	padding: calc(var(--w) * 0.035);
	position: relative;
	width: var(--w);
}

.mh-phone__screen {
	background: #fff;
	border-radius: calc(var(--w) * 0.13);
	height: 100%;
	overflow: hidden;
	position: relative;
}

/* The figure is cut to the screen's own aspect (see installers/mh-wp-shots.cjs),
   so `cover` only ever absorbs the rounding — it is here so a figure that is a
   few pixels short cannot leave a white line along the bottom of the glass. */
.mh-phone__screen img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

/* Where the screenshot stops being worth reading, the glass fades to white
   rather than ending on a hard edge. How far up that starts is per figure:
   the listing fills the screen top to bottom and wants little more than a
   vignette, while the catalogue is honest about a pre-launch shop — its second
   row is placeholder listings, so the fade begins just under the first row. */
.mh-phone__screen::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 90%);
	bottom: 0;
	content: "";
	height: var(--mh-screen-fade, 14%);
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.mh-phone--browse {
	--mh-screen-fade: 46%;
}

.mh-phone--product {
	--mh-screen-fade: 10%;
}

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

.mh-hero {
	background: var(--mh-cream);
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.5rem, 7vw, 5.5rem) var(--mh-pad-x) clamp(3rem, 7vw, 5rem);
	position: relative;
}

.mh-hero::before {
	background:
		radial-gradient(55% 60% at 82% 35%, rgba(233, 123, 123, 0.30) 0%, rgba(233, 123, 123, 0) 70%),
		radial-gradient(45% 50% at 12% 10%, rgba(205, 176, 132, 0.55) 0%, rgba(205, 176, 132, 0) 70%),
		radial-gradient(40% 45% at 55% 105%, rgba(205, 176, 132, 0.40) 0%, rgba(205, 176, 132, 0) 70%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.mh-hero .mh-hero__inner {
	gap: clamp(2rem, 5vw, 4.5rem);
	margin: 0 auto;
	max-width: var(--mh-max);
}

.mh-hero .mh-hero__copy > * + * {
	margin-block-start: 0;
}

.mh-hero h1 {
	font-size: clamp(2.7rem, 6.2vw, 4.7rem);
	line-height: 1.02;
	margin: 0 0 1.35rem;
	max-width: 12ch;
}

.mh-hero h1 em {
	color: var(--mh-coral-ink);
	font-style: italic;
	font-weight: 500;
}

.mh-hero .mh-lead {
	max-width: 44ch;
}

.mh-hero__cta {
	margin: 0;
}

.mh-hero__stage {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0;
	position: relative;
}

.mh-hero__stage::before {
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(233, 123, 123, 0.38) 0%, rgba(205, 176, 132, 0.30) 42%, rgba(205, 176, 132, 0) 70%);
	border-radius: 50%;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(120%, 520px);
	z-index: -1;
}

.mh-phone--hero {
	--w: clamp(240px, 24vw, 310px);
	transform: rotate(-4deg);
}

.mh-chip {
	align-items: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(205, 176, 132, 0.5);
	border-radius: 999px;
	bottom: 2.75rem;
	box-shadow: 0 16px 34px -18px rgba(47, 42, 36, 0.6);
	color: var(--mh-ink);
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 700;
	gap: 0.6rem;
	left: 0;
	padding: 0.45rem 1rem 0.45rem 0.45rem;
	position: absolute;
}

.mh-chip img {
	border-radius: 10px;
	height: 2.2rem;
	width: 2.2rem;
}

/* ---------- sections ---------- */

.mh-section {
	padding: clamp(3.5rem, 8vw, 6.5rem) var(--mh-pad-x);
	position: relative;
}

.mh-section > * + * {
	margin-block-start: 0;
}

.mh-section h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	margin: 0 auto 2.5rem;
	max-width: 22ch;
	text-align: center;
}

.mh-section .mh-lead {
	margin-left: auto;
	margin-right: auto;
	max-width: 60ch;
	text-align: center;
}

.mh-section__cta {
	margin: 2.25rem 0 0;
	text-align: center;
}

/* how it works */

.mh-cards {
	counter-reset: mh-step;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0 auto;
	max-width: var(--mh-max);
}

.mh-card {
	background: #fff;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	box-shadow: 0 1px 0 rgba(47, 42, 36, 0.03);
	counter-increment: mh-step;
	overflow: hidden;
	padding: 2rem 1.75rem 1.9rem;
	position: relative;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.mh-card::before {
	color: var(--mh-sand);
	content: counter(mh-step, decimal-leading-zero);
	font-family: var(--mh-display);
	font-size: 2.6rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	opacity: 0.6;
	position: absolute;
	right: 1.4rem;
	top: 1.2rem;
}

.mh-card:hover {
	border-color: var(--mh-sand-soft);
	box-shadow: var(--mh-shadow);
	transform: translateY(-6px);
}

.mh-card__icon {
	align-items: center;
	background: linear-gradient(135deg, var(--mh-cream) 0%, var(--mh-sand-soft) 100%);
	border-radius: 16px;
	display: inline-flex;
	height: 3.4rem;
	justify-content: center;
	margin-bottom: 1.3rem;
	width: 3.4rem;
}

.mh-card__icon::before {
	background: var(--mh-coral-ink);
	content: "";
	height: 1.6rem;
	-webkit-mask: var(--mh-icon) center / contain no-repeat;
	mask: var(--mh-icon) center / contain no-repeat;
	width: 1.6rem;
}

.mh-card--find { --mh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20.5 20.5-4.6-4.6'/%3E%3Cpath d='M10.5 13.6 8.3 11.5a1.5 1.5 0 0 1 2.2-2 1.5 1.5 0 0 1 2.2 2z'/%3E%3C/svg%3E"); }
.mh-card--sell { --mh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.6'/%3E%3C/svg%3E"); }
.mh-card--chat { --mh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3.5V14a2 2 0 0 1-2-2V6a2 2 0 0 1 1-2z'/%3E%3Cpath d='M19 9h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v3l-3.5-3H12'/%3E%3C/svg%3E"); }

.mh-card h3 {
	color: var(--mh-ink);
	font-family: var(--mh-text);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 0.55rem;
}

.mh-card p {
	color: var(--mh-ink-soft);
	line-height: 1.65;
	margin: 0;
}

/* gallery */

.mh-section--gallery {
	background: var(--mh-cream);
	overflow: hidden;
}

.mh-section--gallery::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 188'%3E%3Cpath d='M191.063 185.221H149.761V66.5412L105.228 129.626L131.086 185.221H97.3268L83.6794 158.431L64.6449 184.933L59.2578 187.237L78.2923 145.757L38.4276 63.9487V185.221H0.717773V0.1331L38.4276 0.0982943L95.8902 111.478L149.761 0H191.063V185.221Z' fill='rgba%28205,176,132,0.28%29'/%3E%3C/svg%3E") right -6% bottom -22% / 46vw auto no-repeat;
	content: "";
	inset: 0;
	opacity: 0.55;
	pointer-events: none;
	position: absolute;
}

.mh-shots {
	align-items: start;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
	justify-content: center;
	margin: 0 auto;
	max-width: 900px;
	position: relative;
}

.mh-shots figure {
	margin: 0;
	text-align: center;
}

.mh-shots .mh-phone {
	margin: 0 auto;
}

.mh-shots figure:nth-child(2) .mh-phone {
	transform: rotate(2deg);
}

.mh-shots figure:first-child .mh-phone {
	transform: rotate(-2deg);
}

.mh-shots figcaption {
	color: var(--mh-ink-2);
	font-weight: 700;
	margin-top: 1.4rem;
}

/* about */

.mh-section--about {
	background: var(--mh-ink);
	color: #f3ece1;
	overflow: hidden;
}

.mh-section--about::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 188'%3E%3Cpath d='M191.063 185.221H149.761V66.5412L105.228 129.626L131.086 185.221H97.3268L83.6794 158.431L64.6449 184.933L59.2578 187.237L78.2923 145.757L38.4276 63.9487V185.221H0.717773V0.1331L38.4276 0.0982943L95.8902 111.478L149.761 0H191.063V185.221Z' fill='rgba%28205,176,132,0.10%29'/%3E%3C/svg%3E") left -8% top 8% / 34vw auto no-repeat;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mh-section--about .mh-about {
	gap: clamp(2rem, 5vw, 5rem);
	margin: 0 auto;
	max-width: var(--mh-max);
	position: relative;
	z-index: 1;
}

.mh-section--about h2 {
	color: #fff;
	margin: 0;
	max-width: none;
	text-align: left;
}

.mh-section--about .mh-lead {
	color: #e9e1d4;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	text-align: left;
}

/* call to action band */

.mh-section--cta {
	background: linear-gradient(135deg, #f7e7cc 0%, var(--mh-sand) 52%, #e6a894 100%);
	overflow: hidden;
	text-align: center;
}

.mh-section--cta::before {
	background:
		radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 28%),
		radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mh-section--cta > * {
	position: relative;
}

.mh-section--cta .mh-lead {
	color: var(--mh-ink-2);
	max-width: 56ch;
}

/* contact */

.mh-contact {
	background: #fff;
	border: 1px solid var(--mh-line);
	border-radius: var(--mh-radius);
	box-shadow: var(--mh-shadow);
	margin: 0 auto;
	max-width: 680px;
	padding: 2.4rem clamp(1.25rem, 4vw, 3rem);
	text-align: center;
}

.mh-contact p {
	color: var(--mh-ink-soft);
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0.5rem 0;
}

.mh-contact a {
	color: var(--mh-ink);
	font-weight: 700;
	text-decoration-color: var(--mh-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ---------- parent-theme corrections ---------- */

/* Twenty Twenty-Three pads .wp-site-blocks so ordinary pages keep a margin on
   a phone. The front page's own sections carry that padding themselves and are
   meant to run edge to edge, so the root padding is dropped there only — the
   terms page still needs it. */
body.home .wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
}

body.home .wp-site-blocks > * + *,
body.home main.wp-block-group > .wp-block-group {
	margin-block-start: 0;
}

/* The header and footer parts are full-bleed on every page; on the terms page
   the root padding would otherwise inset them. Not on the home page, where the
   padding is already gone and the negative margin would only widen the page. */
body:not(.home) .wp-site-blocks > header,
body:not(.home) .wp-site-blocks > footer {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/* ---------- motion ---------- */

@keyframes mh-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mh-pop {
	from {
		opacity: 0;
		transform: rotate(-4deg) translateY(30px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: rotate(-4deg) translateY(0) scale(1);
	}
}

@keyframes mh-float {
	0%,
	100% {
		transform: rotate(-4deg) translateY(0);
	}
	50% {
		transform: rotate(-4deg) translateY(-10px);
	}
}

@keyframes mh-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mh-hero__copy > * {
		animation: mh-fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.mh-hero__copy > :nth-child(2) { animation-delay: 0.1s; }
	.mh-hero__copy > :nth-child(3) { animation-delay: 0.2s; }
	.mh-hero__copy > :nth-child(4) { animation-delay: 0.3s; }

	.mh-phone--hero {
		animation: mh-pop 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both, mh-float 7s 1.2s ease-in-out infinite;
	}

	.mh-chip {
		animation: mh-fade-up 0.8s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	/* Scroll-driven reveals where the browser has them; elsewhere the blocks
	   are simply there. Applied to containers, never to a card — an animation's
	   fill would override the card's own hover transform. */
	@supports (animation-timeline: view()) {
		.mh-reveal {
			animation: mh-rise linear both;
			animation-range: entry 5% entry 40%;
			animation-timeline: view();
		}
	}
}

/* ---------- breakpoints ---------- */

@media (max-width: 900px) {
	.mh-nav {
		display: none;
	}

	.mh-hero .mh-hero__inner {
		flex-direction: column;
	}

	.mh-hero .mh-hero__copy,
	.mh-hero .mh-hero__visual {
		flex-basis: auto !important;
		width: 100%;
	}

	.mh-hero__copy {
		text-align: center;
	}

	.mh-eyebrow {
		justify-content: center;
	}

	.mh-hero h1,
	.mh-hero .mh-lead,
	.mh-note {
		margin-left: auto;
		margin-right: auto;
	}

	.mh-stores {
		justify-content: center;
	}

	.mh-hero__stage {
		margin-top: 1.5rem;
	}

	.mh-chip {
		bottom: 1.5rem;
		left: max(0px, calc(50% - 11rem));
	}

	.mh-section--about .mh-about {
		flex-direction: column;
		gap: 1.5rem;
	}

	.mh-section--about .wp-block-column {
		flex-basis: auto !important;
	}

	.mh-footer__inner {
		gap: 2rem;
		grid-template-columns: 1fr;
	}
}

/* 390 px is the narrowest phone this has to hold: the brand and the header
   link have to stay on one line, or the header reads as a wrapped accident. */
@media (max-width: 480px) {
	.mh-header__inner {
		gap: 0.6rem;
	}

	.mh-header__brand {
		font-size: 1.12rem;
	}

	.mh-mark {
		height: 2.05rem;
		width: 2.05rem;
	}

	.mh-header__cta {
		font-size: 0.9rem;
		padding: 0.5rem 0.95rem;
	}

	.mh-hero h1 {
		font-size: clamp(2.3rem, 11vw, 2.9rem);
	}

	.mh-phone--hero {
		--w: 230px;
	}

	.mh-shots figure:first-child .mh-phone,
	.mh-shots figure:nth-child(2) .mh-phone {
		transform: none;
	}

	.mh-card {
		padding: 1.7rem 1.4rem 1.6rem;
	}
}