/**
 * MEMOT theme styles.
 *
 * Presentational layer for the block patterns. Everything keys off the CSS
 * custom properties WordPress generates from theme.json (--wp--preset--*),
 * so colour, type and spacing stay defined in a single place. Class hooks
 * (memot-*) are applied via the "Additional CSS class" field on blocks
 * inside the patterns.
 */

/* -------------------------------------------------------------------------- *
 * Fonts (self-hosted, buildless — variable woff2 in ../fonts)
 *
 * Inter carries body + UI (industrial clarity); Fraunces carries the display
 * headings (an optical serif that gives the plantation-heritage warmth the old
 * system-font stack could never express). Both are single variable files.
 * -------------------------------------------------------------------------- */

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
}

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

/* -------------------------------------------------------------------------- *
 * Base
 * -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

/* Let Fraunces resolve its optical-size axis at display sizes. */
h1,
h2,
h3,
.wp-block-heading,
.memot-stat-number {
	font-optical-sizing: auto;
}

:lang(km),
[lang="km"] body {
	font-family: "Noto Sans Khmer", "Khmer OS Siemreap", "Khmer OS Battambang", Hanuman, var(--wp--preset--font-family--body);
	line-height: 1.8;
}

:lang(km) h1,
:lang(km) h2,
:lang(km) h3,
:lang(km) h4,
:lang(km) h5,
:lang(km) h6 {
	font-family: "Noto Serif Khmer", "Noto Sans Khmer", "Khmer OS Muol Light", "Khmer OS Siemreap", var(--wp--preset--font-family--display);
	line-height: 1.35;
}

:root {
	--memot-shadow-sm: 0 1px 2px rgba(22, 22, 15, 0.04), 0 2px 8px rgba(22, 22, 15, 0.05);
	--memot-shadow-md: 0 6px 20px rgba(22, 22, 15, 0.08), 0 2px 6px rgba(22, 22, 15, 0.05);
	--memot-shadow-lg: 0 24px 60px rgba(22, 22, 15, 0.16);
	--memot-radius: 16px;
	--memot-radius-lg: 24px;

	/* Rest-state height of the fixed header, used to reserve space for it on
	   templates whose content isn't meant to sit underneath (see "Header /
	   navigation" below). Declared at :root, not on .memot-header, since the
	   consumer (<main>) is a sibling of the header, not a descendant. */
	--memot-header-space: 6.5rem;
}

/* Slightly tighter measure for lead paragraphs. */
.memot-lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--slate);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- *
 * Section intro — the shared rhythm every marketing section opens with:
 * amber-tick eyebrow → display heading → capped lead. Left-aligned to the
 * same wide-container edge as the grid beneath it, so nothing "floats".
 * -------------------------------------------------------------------------- */
.memot-section-head > * {
	margin-top: 0;
	margin-bottom: 0;
}

.memot-section-head > .wp-block-heading {
	margin-top: 0.75rem;
	max-width: 22ch;
}

.memot-section-head > .memot-lead {
	margin-top: 0.9rem;
	max-width: 52ch;
}

/* Space the intro from the grid it introduces (pillars / products). */
.wp-block-group.alignfull > .memot-section-head {
	margin-bottom: var(--wp--preset--spacing--70);
}

/* Eyebrow label — small uppercase green kicker above headings. */
.is-style-memot-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--leaf);
	margin-bottom: 0.5rem;
}

/* Arrow links ("View Operations ->"). */
.memot-link-arrow a,
a.memot-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.memot-link-arrow a::after,
a.memot-link-arrow::after {
	content: "\2192";
	transition: transform 0.18s ease;
}

.memot-link-arrow a:hover::after,
a.memot-link-arrow:hover::after {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------- *
 * Header / navigation
 * -------------------------------------------------------------------------- */

/*
 * The header starts as a fully transparent shell integrated with the hero —
 * no background, border or shadow — and only grows the floating "capsule"
 * (.memot-nav) chrome once `.is-scrolled` is toggled by the motion layer
 * (see memot-motion.js). Keeping the shell itself transparent (no
 * backdrop-filter here) avoids establishing a containing block for the
 * navigation block's fixed-position mobile overlay, which would otherwise
 * clip it to the header's height instead of the viewport.
 *
 * Nav foreground colour is themeable per page via custom properties: the
 * front page opens on a dark hero scrim, so its unscrolled header reads in
 * `paper`; every other template opens on light content, so it keeps the
 * default `ink`. See the `body.home` override below.
 */
.memot-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	padding: 1.35rem clamp(1rem, 4vw, 2.5rem);
	pointer-events: none;
	transition: padding 0.3s ease-in-out;
	--memot-nav-fg: var(--wp--preset--color--ink);
	--memot-nav-fg-hover: var(--wp--preset--color--brand);
	--memot-nav-brand-fg: var(--wp--preset--color--brand);
	--memot-nav-icon-fg: var(--wp--preset--color--brand);
}

/* Front page only: transparent state sits on a dark hero scrim, so flip the
   nav to light text/icons until the white capsule takes over on scroll. */
body.home .memot-header:not(.is-scrolled) {
	--memot-nav-fg: var(--wp--preset--color--paper);
	--memot-nav-fg-hover: var(--memot-harvest, var(--wp--preset--color--harvest));
	--memot-nav-brand-fg: var(--wp--preset--color--paper);
	--memot-nav-icon-fg: var(--wp--preset--color--paper);
}

/*
 * The floating capsule. Centre it on its own terms (box-sizing + auto margins)
 * so it never inherits WordPress's root-padding alignment maths, which pushed
 * it past the right edge on narrow viewports. Shadow/border only appear once
 * scrolled (see "Header scroll state" below) — at rest the capsule is an
 * invisible hit-area with no chrome of its own.
 */
.memot-header .memot-nav {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
	isolation: isolate;
	pointer-events: auto;
	gap: 1rem;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	border-radius: 999px;
	box-shadow: none;
	border: 1px solid transparent;
	transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/*
 * The frosted glass fill lives on a pseudo-element, NOT on .memot-nav itself.
 * A backdrop-filter (or filter) on the capsule would make it the containing
 * block for the navigation block's position:fixed mobile overlay, clipping
 * that full-screen menu to the capsule. Keeping the blur here avoids that.
 * It fades and slides in on scroll rather than being always-on, so the
 * transparent-to-floating-card transition reads as one deliberate move.
 */
.memot-header .memot-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Brand lock-up: logo tile + wordmark ------------------------------------- */
.memot-header .memot-brand {
	gap: 0.6rem;
	flex-shrink: 0;
}

.memot-brand__mark {
	margin: 0;
	flex-shrink: 0;
	line-height: 0;
}

.memot-brand__mark a {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.28rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	box-shadow: 0 1px 2px rgba(22, 22, 15, 0.06);
	transition: transform 0.25s var(--memot-ease-out), background-color 0.25s ease;
}

.memot-brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.memot-header .memot-brand__word {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	line-height: 1;
}

.memot-brand__word a {
	color: var(--memot-nav-brand-fg, var(--wp--preset--color--brand));
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

/* Centre menu — grows to fill the space between brand and CTA -------------- */
.memot-header .memot-nav__menu {
	flex: 1 1 auto;
	font-weight: 500;
	font-size: 0.9375rem;
}

.memot-header .memot-nav__menu .wp-block-navigation__container {
	gap: clamp(1rem, 2.4vw, 2rem);
}

/* Header/footer brand & nav link colours (and their hovers) are defined lower
   down, right after the footer's generic anchor rules, so the file's `a`-group
   specificity ascends monotonically (stylelint no-descending-specificity). */

/* Hamburger toggle: fixed, comfortably tappable square. */
.memot-header .wp-block-navigation__responsive-container-open {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--memot-nav-icon-fg, var(--wp--preset--color--brand));
	transition: background-color 0.18s ease, color 0.3s ease-in-out;
}

.memot-header .wp-block-navigation__responsive-container-open:hover,
.memot-header .wp-block-navigation__responsive-container-open:focus-visible {
	background-color: var(--wp--preset--color--sand);
}

/* Contact CTA pill — never shrink below its content. ---------------------- */
.memot-header .memot-nav__cta {
	flex-shrink: 0;
}

.memot-header .memot-nav__cta .wp-block-button,
.memot-header .memot-nav__cta .wp-block-button__link {
	flex-shrink: 0;
	white-space: nowrap;
}

.memot-header .memot-nav__cta .wp-block-button__link {
	box-shadow: 0 6px 16px rgba(46, 158, 92, 0.28);
}

/*
 * Language switcher — a flag + code trigger that opens a card listing every
 * language, with a check on the one currently being viewed. Built on
 * <details>/<summary> so opening/closing needs no JS at all; the companion
 * memot-language-switcher.js only adds outside-click/Escape dismissal and
 * keeps two instances (header + footer) from being open at once. Colour is
 * inherited (`currentcolor`) so the trigger follows --memot-nav-fg in the
 * header and the footer's own translucent-white link colour; the popover
 * menu itself is always an opaque paper card regardless of context.
 */
.memot-language-switcher {
	--memot-lang-switcher-hover: var(--wp--preset--color--sand);
	color: currentcolor;
	display: inline-flex;
	position: relative;
}

.memot-footer .memot-language-switcher {
	--memot-lang-switcher-hover: rgb(255 255 255 / 10%);
}

.memot-language-switcher__trigger {
	align-items: center;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	gap: 0.4rem;
	line-height: 1;
	list-style: none;
	padding: 0.4rem 0.65rem;
	transition: background-color 0.18s ease;
	user-select: none;
	white-space: nowrap;
}

.memot-language-switcher__trigger::-webkit-details-marker {
	display: none;
}

.memot-language-switcher__trigger:hover,
.memot-language-switcher__trigger:focus-visible,
.memot-language-switcher__details[open] > .memot-language-switcher__trigger {
	background-color: var(--memot-lang-switcher-hover);
}

.memot-language-switcher__flag {
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgb(22 22 15 / 12%);
	display: block;
	flex-shrink: 0;
	height: 14px;
	object-fit: cover;
	width: 20px;
}

.memot-language-switcher__chevron {
	flex-shrink: 0;
	transition: transform 0.2s var(--memot-ease-out);
}

.memot-language-switcher__details[open] > .memot-language-switcher__trigger .memot-language-switcher__chevron {
	transform: rotate(180deg);
}

.memot-language-switcher__menu {
	background: var(--wp--preset--color--paper);
	border-radius: var(--memot-radius);
	box-shadow: var(--memot-shadow-lg);
	color: var(--wp--preset--color--ink);
	list-style: none;
	margin: 0.5rem 0 0;
	min-width: 11rem;
	padding: 0.4rem;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
}

/* The footer sits at the bottom of the viewport, so a menu opening downward
   from it would be clipped by the window edge -- open upward instead. */
.memot-footer .memot-language-switcher__menu {
	bottom: 100%;
	margin: 0 0 0.5rem;
	top: auto;
}

.memot-language-switcher__option {
	align-items: center;
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	display: flex;
	gap: 0.6rem;
	padding: 0.55rem 0.65rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.memot-language-switcher__option:hover,
.memot-language-switcher__option:focus-visible {
	background-color: var(--wp--preset--color--sand);
}

.memot-language-switcher__option-name {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}

.memot-language-switcher__option.is-active .memot-language-switcher__option-name {
	color: var(--wp--preset--color--brand);
}

.memot-language-switcher__check {
	color: var(--wp--preset--color--brand-bright);
	flex-shrink: 0;
}

/* Ghost button variation (dark pill used on the sustainability panel). */
.wp-block-button.is-style-memot-ghost .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.wp-block-button.is-style-memot-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand);
}

/* -------------------------------------------------------------------------- *
 * Compact header: collapse the capsule, keep secondary actions inside the menu
 * -------------------------------------------------------------------------- */

@media (max-width: 1120px) {

	.memot-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.memot-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.memot-header .memot-nav {
		gap: 0.45rem;
		padding: 0.4rem 0.45rem 0.4rem 0.75rem;
	}

	.memot-header .memot-brand {
		gap: 0.45rem;
		min-width: 0;
		flex: 1 1 auto;
	}

	.memot-header .memot-brand__mark a {
		width: 2rem;
		height: 2rem;
		padding: 0.22rem;
	}

	/* Menu (now just the hamburger) stops growing and sits at the far right. */
	.memot-header .memot-nav__menu {
		flex: 0 0 auto;
		order: 3;
	}

	.memot-header .memot-nav__cta,
	.memot-header .memot-language-switcher {
		display: none;
	}

	.memot-header .memot-nav__cta .wp-block-button__link {
		text-align: center;
	}

	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-nav__cta,
	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-language-switcher {
		display: flex;
		position: fixed;
		z-index: 100001;
	}

	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-nav__cta {
		left: clamp(1.5rem, 8vw, 2.25rem);
		right: clamp(1.5rem, 8vw, 2.25rem);
		bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 4rem);
		margin-left: auto;
	}

	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-nav__cta .wp-block-button,
	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-nav__cta .wp-block-button__link {
		width: 100%;
	}

	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-language-switcher {
		left: clamp(1.5rem, 8vw, 2.25rem);
		right: clamp(1.5rem, 8vw, 2.25rem);
		bottom: max(1.5rem, env(safe-area-inset-bottom));
		color: var(--wp--preset--color--ink);
	}

	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-language-switcher__trigger {
		background-color: var(--wp--preset--color--sand);
		color: var(--wp--preset--color--ink);
		justify-content: center;
		min-height: 2.75rem;
		width: 100%;
	}

	.memot-header .memot-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .memot-language-switcher__menu {
		bottom: calc(100% + 0.5rem);
		margin: 0;
		top: auto;
	}

	.memot-header .memot-brand__word {
		font-size: clamp(0.95rem, 4.2vw, 1.1rem);
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media (max-width: 380px) {

	.memot-header {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.memot-header .memot-nav {
		gap: 0.35rem;
		padding-left: 0.6rem;
		padding-right: 0.35rem;
	}

	.memot-header .memot-brand__mark a {
		width: 1.75rem;
		height: 1.75rem;
		padding: 0.18rem;
	}

	.memot-header .memot-brand__word {
		font-size: 0.9rem;
	}
}

/* -------------------------------------------------------------------------- *
 * Mobile navigation overlay
 * -------------------------------------------------------------------------- */

.memot-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--paper);
	padding-bottom: 10.75rem;
}

.memot-header .wp-block-navigation__responsive-dialog {
	width: 100%;
}

.memot-header .wp-block-navigation__responsive-container-close {
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--wp--preset--color--brand);
	transition: background-color 0.18s ease;
}

.memot-header .wp-block-navigation__responsive-container-close:hover,
.memot-header .wp-block-navigation__responsive-container-close:focus-visible {
	background-color: var(--wp--preset--color--sand);
}

.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 1rem 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand);
}

/* -------------------------------------------------------------------------- *
 * Hero
 * -------------------------------------------------------------------------- */

.memot-hero {
	position: relative;
	color: var(--wp--preset--color--paper);
	overflow: hidden;
	background-color: var(--wp--preset--color--brand);
}

.memot-hero.wp-block-cover {
	min-height: clamp(420px, 68vh, 620px);
}

/* Fallback brand backdrop when no photo has been set yet. */
.memot-hero:not(:has(img)):not(:has(video))::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 120% at 80% 0%, #2e9e5c 0%, rgba(46, 158, 92, 0) 55%),
		linear-gradient(135deg, #0d3320 0%, #1b5e3a 60%, #123f27 100%);
}

.memot-hero .wp-block-cover__inner-container {
	max-width: 1200px;
	margin-inline: auto;
	width: 100%;
}

.memot-hero h1 {
	color: var(--wp--preset--color--paper);
	max-width: 15ch;
}

.memot-hero .memot-hero-copy {
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--wp--preset--font-size--large);
}

/* -------------------------------------------------------------------------- *
 * Trusted-by logo strip
 * -------------------------------------------------------------------------- */

.memot-logos {
	background: var(--wp--preset--color--paper);
}

.memot-logos .memot-logos-label {
	text-align: center;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.memot-logos figure,
.memot-logos img {
	filter: grayscale(1);
	opacity: 0.55;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

/* -------------------------------------------------------------------------- *
 * Stat badge (legacy section "10+ countries")
 * -------------------------------------------------------------------------- */

.memot-stat {
	background: var(--wp--preset--color--sand);
	border-radius: var(--memot-radius-lg);
	text-align: center;
	min-width: 200px;
}

.memot-stat .memot-stat-number {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--brand);
	font-size: clamp(2.5rem, 6vw, 3.5rem);
}

.memot-stat .memot-stat-label {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

/* -------------------------------------------------------------------------- *
 * Cards (Group block style: is-style-memot-card)
 * -------------------------------------------------------------------------- */

.wp-block-group.is-style-memot-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	box-shadow: var(--memot-shadow-sm);
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-group.is-style-memot-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--memot-shadow-md);
}

/* Icon chip inside a pillar card. */
.memot-icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--brand);
}

.memot-icon-chip svg,
.memot-icon-chip img {
	width: 24px;
	height: 24px;
}

/* Make equal-height columns behave for card rows. */
.wp-block-columns.is-style-memot-cards {
	align-items: stretch;
}

.wp-block-columns.is-style-memot-cards > .wp-block-column {
	display: flex;
}

/* -------------------------------------------------------------------------- *
 * Floating panel (sustainability split: is-style-memot-panel)
 * -------------------------------------------------------------------------- */

.wp-block-group.is-style-memot-panel {
	background: var(--wp--preset--color--paper);
	border-radius: var(--memot-radius-lg);
	box-shadow: var(--memot-shadow-lg);
}

.memot-split .memot-split-layout {
	gap: 0;
}

.memot-split .wp-block-media-text__media {
	margin: 0;
	min-height: 420px;
	border-radius: 16px;
	background: var(--wp--preset--color--sand);
	overflow: hidden;
}

.memot-split :where(.wp-block-media-text__media img, .wp-block-media-text__media video) {
	width: 100%;
	min-height: 420px;
	object-fit: cover;
}

@media (min-width: 782px) {

	/* Pull the panel over the adjacent image for the overlap look. */
	.memot-split .wp-block-media-text__content .is-style-memot-panel {
		margin-left: -12%;
	}
}

/* -------------------------------------------------------------------------- *
 * Products grid
 * -------------------------------------------------------------------------- */

.memot-product {
	background: var(--wp--preset--color--paper);
	border-radius: var(--memot-radius);
	overflow: hidden;
	height: 100%;
}

.memot-product .wp-block-image,
.memot-product figure {
	margin: 0;
}

.memot-product .memot-product-body {
	padding-top: 1rem;
}

.memot-product h3 {
	font-size: var(--wp--preset--font-size--large);
}

.memot-product .memot-product-meta {
	color: var(--wp--preset--color--slate);
	font-size: 0.9375rem;
}

.memot-product .memot-product-desc {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--slate);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.memot-product-range__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--70);
}

.wp-block-group.alignfull > .memot-product-range__header {
	margin-bottom: var(--wp--preset--spacing--70);
}

.memot-product-slider__controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.memot-product-slider__controls[hidden] {
	display: none;
}

.memot-product-slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--memot-shadow-sm);
	cursor: pointer;
	transition:
		transform 0.25s var(--memot-ease-out),
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease;
}

.memot-product-slider__button svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.memot-product-slider__button:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
}

.memot-product-slider__button:disabled {
	cursor: default;
	opacity: 0.4;
}

.memot-product-slider__button:hover:not(:disabled) {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
}

.memot-product-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--brand-bright) transparent;
	padding: 0 0 var(--wp--preset--spacing--40);
}

.memot-product-slider.is-ready .memot-product-slider__viewport {
	scrollbar-width: none;
}

.memot-product-slider.is-ready .memot-product-slider__viewport::-webkit-scrollbar {
	display: none;
}

.memot-product-slider__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

.memot-product-slider__item {
	flex: 0 0 clamp(13.75rem, 19vw, 15.75rem);
	scroll-snap-align: start;
}

.memot-product-slider .memot-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.memot-product-slider :where(.memot-product .wp-block-image img) {
	aspect-ratio: 16 / 9;
}

.memot-product-slider .memot-product-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--wp--preset--spacing--30);
	min-height: 7.25rem;
}

.memot-product-slider :where(.is-style-memot-tag) {
	margin-bottom: var(--wp--preset--spacing--20);
}

.memot-product-slider :where(.memot-product h3) {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.memot-product-slider .memot-product-meta {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.memot-product-slider__progress {
	height: 0.2rem;
	margin-top: var(--wp--preset--spacing--20);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--leaf) 16%, transparent);
	overflow: hidden;
}

.memot-product-slider:not(.is-ready) .memot-product-slider__progress {
	display: none;
}

.memot-product-slider__progress span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--brand-bright);
	transform: scaleX(0.12);
	transform-origin: left center;
	transition: transform 0.3s var(--memot-ease-out);
}

/* -------------------------------------------------------------------------- *
 * Our Reach
 * -------------------------------------------------------------------------- */

.memot-reach-map img {
	border-radius: var(--memot-radius);
	width: 100%;
	background: var(--wp--preset--color--sand);
}

.memot-reach-item {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 1.25rem;
}

.memot-reach-item .memot-reach-index {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	color: var(--wp--preset--color--brand-bright);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------- *
 * Latest Insights
 * -------------------------------------------------------------------------- */

.memot-insight {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	overflow: hidden;
	height: 100%;
	box-shadow: var(--memot-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.memot-insight:hover {
	transform: translateY(-3px);
	box-shadow: var(--memot-shadow-md);
}

.memot-insight :where(figure, .wp-block-image) img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	background: var(--wp--preset--color--sand);
}

.memot-product :where(.wp-block-image) img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	background: var(--wp--preset--color--sand);
}

.memot-logos figure:hover,
.memot-logos img:where(:hover) {
	filter: grayscale(0);
	opacity: 1;
}

.memot-insight .memot-insight-body {
	padding: 1.25rem;
}

.memot-insight h3 {
	font-size: var(--wp--preset--font-size--large);
}

/* Tag / category pill. */
.memot-tag,
.is-style-memot-tag,
.is-style-memot-tag a {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	background: #e9f2ea;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	text-decoration: none;
}

.memot-meta-date {
	color: var(--wp--preset--color--slate);
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------- *
 * Newsroom and article pages
 * -------------------------------------------------------------------------- */

.memot-news-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--wp--preset--color--brand-bright) 20%, transparent) 0 12rem, transparent 12.1rem),
		radial-gradient(circle at 5% 92%, color-mix(in srgb, var(--wp--preset--color--harvest) 16%, transparent) 0 9rem, transparent 9.1rem),
		var(--wp--preset--color--sand);
}

.memot-news-hero::before,
.memot-news-hero::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
}

.memot-news-hero::before {
	width: 24rem;
	height: 24rem;
	right: -8rem;
	top: -10rem;
	background: color-mix(in srgb, var(--wp--preset--color--brand-bright) 18%, transparent);
}

.memot-news-hero::after {
	width: 18rem;
	height: 18rem;
	left: -7rem;
	bottom: -9rem;
	background: color-mix(in srgb, var(--wp--preset--color--harvest) 18%, transparent);
}

.memot-news-hero__inner {
	position: relative;
	z-index: 1;
}

.memot-news-hero__panel {
	position: relative;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 76%, var(--wp--preset--color--paper));
	border-radius: clamp(1.5rem, 4vw, 2.5rem);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	box-shadow: var(--memot-shadow-lg);
	padding: clamp(var(--wp--preset--spacing--50), 5vw, var(--wp--preset--spacing--80));
}

.memot-news-hero__topline {
	margin-bottom: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.memot-news-hero__topline p {
	margin: 0;
}

.memot-news-hero__brand {
	color: var(--wp--preset--color--brand);
}

.memot-news-hero__copy {
	position: relative;
	z-index: 2;
}

.memot-news-hero__eyebrow {
	margin-bottom: var(--wp--preset--spacing--40);
}

.memot-news-hero h1 {
	max-width: 11ch;
}

.memot-news-hero__lead {
	max-width: 35rem;
	color: var(--wp--preset--color--slate);
}

.memot-news-hero__actions {
	margin-top: var(--wp--preset--spacing--50);
}

.memot-news-hero__actions :where(.wp-block-button__link) {
	min-width: 9rem;
}

.memot-news-hero__stage {
	position: relative;
	min-height: clamp(24rem, 42vw, 35rem);
	border-radius: clamp(1.75rem, 5vw, 4rem);
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--brand) 88%, var(--wp--preset--color--ink)) 0%, color-mix(in srgb, var(--wp--preset--color--brand-bright) 76%, var(--wp--preset--color--paper)) 100%);
	box-shadow: var(--memot-shadow-md);
	isolation: isolate;
	overflow: hidden;
}

.memot-news-hero__stage::before {
	content: "";
	position: absolute;
	inset: 12% -18% auto 14%;
	height: 36%;
	border-radius: 999px;
	background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent) 0 0.45rem, transparent 0.45rem 1rem);
	opacity: 0.45;
	transform: rotate(-12deg);
}

.memot-news-hero__stage::after {
	content: "";
	position: absolute;
	inset: auto 8% 10% auto;
	width: 42%;
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent);
	box-shadow: inset 0 0 2.5rem color-mix(in srgb, var(--wp--preset--color--paper) 26%, transparent);
}

.memot-news-hero__orb {
	position: absolute;
	border-radius: 999px;
	z-index: 1;
}

.memot-news-hero__orb--one {
	width: 9rem;
	height: 9rem;
	left: 9%;
	bottom: 15%;
	background: color-mix(in srgb, var(--wp--preset--color--harvest) 72%, var(--wp--preset--color--paper));
	box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
}

.memot-news-hero__orb--two {
	width: 5rem;
	height: 5rem;
	right: 18%;
	top: 14%;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 82%, var(--wp--preset--color--brand-bright));
}

.memot-news-hero__photo-card {
	position: absolute;
	z-index: 2;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 58%, transparent);
	border-radius: var(--memot-radius-lg);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 74%, transparent);
	box-shadow: var(--memot-shadow-md);
	margin: 0;
	overflow: hidden;
}

.memot-news-hero__photo-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.memot-news-hero__photo-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent));
	pointer-events: none;
}

.memot-news-hero__photo-card--plantation {
	right: 8%;
	bottom: 12%;
	width: min(70%, 26rem);
	height: clamp(13rem, 24vw, 19rem);
}

.memot-news-hero__photo-card--farm {
	left: 5%;
	top: 8%;
	width: min(48%, 17rem);
	height: clamp(9rem, 16vw, 13rem);
}

.memot-news-hero__photo-card--field {
	left: 12%;
	bottom: 9%;
	width: min(50%, 18rem);
	height: clamp(8rem, 14vw, 11rem);
}

.memot-news-hero__stats {
	margin-top: var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.memot-news-hero__stat {
	min-width: 9rem;
}

.memot-news-hero__stat :where(p) {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.memot-news-hero__stat-number {
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-weight: 800;
}

.memot-news-featured__layout {
	align-items: stretch !important;
}

.memot-news-featured__layout.wp-block-columns > .wp-block-column {
	min-width: 0;
}

.memot-insight :where(.wp-block-post-featured-image, figure) {
	margin: 0;
	overflow: hidden;
}

.memot-insight :where(a, img) {
	display: block;
}

.memot-insight:not(.memot-insight--featured, .memot-insight--compact) :where(.wp-block-post-featured-image img) {
	aspect-ratio: 16 / 10;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.memot-insight :where(.wp-block-post-title, .wp-block-post-title a) {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.memot-insight :where(.wp-block-post-title a:hover, .wp-block-post-title a:focus-visible) {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.memot-insight .wp-block-post-excerpt {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}

.memot-insight .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.memot-insight--featured {
	border-radius: var(--memot-radius-lg);
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(15rem, 42%) minmax(0, 1fr);
	height: 100%;
	min-height: 21rem;
}

.memot-insight--featured .wp-block-post-featured-image {
	height: 100%;
	min-height: 0;
}

.memot-insight--featured :where(.wp-block-post-featured-image a, .wp-block-post-featured-image img) {
	height: 100%;
}

.memot-insight--featured :where(.wp-block-post-featured-image img) {
	aspect-ratio: auto;
	min-height: 100%;
	object-fit: cover;
}

.memot-insight--featured .memot-insight-body {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--50);
}

.memot-insight--featured h3 {
	font-size: var(--wp--preset--font-size--x-large);
	max-width: 20ch;
}

.memot-insight--compact {
	display: grid;
	grid-template-columns: minmax(7.5rem, 34%) 1fr;
	height: 100%;
	min-height: 0;
}

.memot-insight--compact .wp-block-post-featured-image {
	height: 100%;
	min-height: 0;
}

.memot-insight--compact :where(.wp-block-post-featured-image img, .wp-block-post-featured-image a) {
	height: 100%;
}

.memot-insight--compact :where(.wp-block-post-featured-image img) {
	aspect-ratio: auto;
	min-height: 100%;
	object-fit: cover;
}

.memot-insight--compact .memot-insight-body {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

.memot-insight--compact h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.28;
}

@media (min-width: 1101px) {

	.memot-news-featured__layout.wp-block-columns {
		align-items: stretch !important;
		display: grid !important;
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--40);
		grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	}

	.memot-news-featured__layout > .wp-block-column {
		align-self: stretch;
		display: flex;
		flex-basis: auto !important;
		flex-direction: column;
		flex-grow: 0 !important;
		min-height: 0;
		width: auto !important;
	}

	.memot-news-featured__layout > .wp-block-column > .wp-block-query {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	.memot-news-featured__layout .wp-block-post-template {
		flex: 1 1 auto;
		list-style: none;
		margin: 0;
		min-height: 0;
		padding: 0;
	}

	.memot-news-featured__rail > .wp-block-query > .wp-block-post-template {
		display: grid;
		gap: var(--wp--preset--spacing--40);
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.memot-news-featured__layout > .wp-block-column:first-child .wp-block-post-template {
		display: flex;
		flex-direction: column;
	}

	.memot-news-featured__layout .wp-block-post {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	.memot-news-featured__layout .memot-insight--featured.wp-block-group,
	.memot-news-featured__layout .memot-insight--compact.wp-block-group {
		display: grid;
	}

	.memot-insight--featured {
		height: 100%;
		min-height: 0;
	}

	.memot-insight--compact {
		height: 100%;
	}

	.memot-news-featured__layout .memot-insight--featured,
	.memot-news-featured__layout .memot-insight--compact {
		flex: 1 1 auto;
		min-height: 0;
	}
}

.memot-news-list .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--40);
}

.memot-news-index {
	scroll-margin-top: calc(var(--memot-header-height) + var(--wp--preset--spacing--40));
	transition: opacity 180ms ease;
}

html.memot-anim .memot-news-index :where(.memot-insight, .memot-lead) {
	opacity: 1;
}

.memot-news-index.is-loading {
	opacity: 0.58;
	pointer-events: none;
}

.memot-news-index__toolbar {
	margin-bottom: var(--wp--preset--spacing--50);
}

.memot-news-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.memot-news-filter {
	align-items: center;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--slate);
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.06em;
	min-height: 1.95rem;
	padding-inline: 0.72rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.memot-news-filter:is(:hover, :focus-visible),
.memot-news-filter.is-active {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	box-shadow: var(--memot-shadow-sm);
}

.memot-news-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.memot-news-grid .memot-insight {
	min-width: 0;
}

.memot-news-grid .memot-insight-body {
	padding: var(--wp--preset--spacing--40);
}

.memot-news-grid .wp-block-post-featured-image {
	height: 8rem;
}

.memot-news-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.28;
}

.memot-news-grid .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.memot-news-card-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 1100px) {

	.memot-insight--featured {
		flex: none;
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.memot-insight--featured .wp-block-post-featured-image {
		height: 15rem;
		min-height: 0;
	}

	.memot-insight--featured :where(.wp-block-post-featured-image img) {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.memot-insight--compact {
		height: auto;
	}

	.memot-insight--compact .wp-block-post-featured-image {
		min-height: 8.5rem;
	}

	.memot-insight--compact :where(.wp-block-post-featured-image img) {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.memot-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.memot-pagination {
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
}

.memot-pagination__directions {
	flex: 0 0 auto;
}

.memot-pagination__directions--prev {
	text-align: left;
}

.memot-pagination__directions--next {
	text-align: right;
}

.memot-pagination__numbers {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	min-width: 0;
}

.memot-pagination :where(a, .page-numbers) {
	align-items: center;
	border-radius: 999px;
	color: var(--wp--preset--color--slate);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	justify-content: center;
	min-height: 2.25rem;
	min-width: 2.25rem;
	padding-inline: 0.75rem;
	text-decoration: none;
}

.memot-pagination__direction {
	height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	width: 2.75rem;
}

.memot-pagination__icon {
	fill: none;
	height: 1.2rem;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 1.2rem;
}

.memot-pagination :where(a:hover, a:focus-visible, .current) {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--brand);
	box-shadow: var(--memot-shadow-sm);
}

.memot-pagination .is-disabled {
	background: transparent;
	color: color-mix(in srgb, var(--wp--preset--color--slate) 42%, transparent);
	cursor: default;
	box-shadow: none;
}

.memot-article-hero {
	position: relative;
	overflow: hidden;
}

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

.memot-article-meta {
	color: var(--wp--preset--color--slate);
}

.memot-article-hero__image {
	margin: 0;
	border-radius: var(--memot-radius-lg);
	box-shadow: var(--memot-shadow-lg);
	overflow: hidden;
	background: var(--wp--preset--color--sand);
}

.memot-article-hero__image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.memot-article-layout {
	align-items: flex-start;
}

.memot-article-sidebar {
	position: sticky;
	top: calc(var(--memot-header-space) + var(--wp--preset--spacing--40));
}

.memot-article-panel {
	box-shadow: var(--memot-shadow-md);
}

.memot-article-main {
	min-width: 0;
}

.memot-article-content {
	font-size: var(--wp--preset--font-size--medium);
}

.memot-article-content > * {
	max-width: var(--wp--style--global--content-size, 760px);
}

.memot-article-content :where(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--70);
}

.memot-article-content :where(p, li) {
	color: var(--wp--preset--color--slate);
}

.memot-article-content :where(blockquote, .wp-block-quote) {
	border-left: 4px solid var(--wp--preset--color--brand-bright);
	background: var(--wp--preset--color--sand);
	border-radius: 0 var(--memot-radius) var(--memot-radius) 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
	margin-block: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--50);
}

.memot-article-content :where(.wp-block-image img, .wp-block-gallery img) {
	border-radius: var(--memot-radius);
	box-shadow: var(--memot-shadow-sm);
}

.memot-article-footer-nav {
	border-top: 1px solid var(--wp--preset--color--line);
	max-width: var(--wp--style--global--content-size, 760px);
}

.memot-article-back :where(a) {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}

.memot-article-back :where(a:hover, a:focus-visible) {
	text-decoration: underline;
}

.memot-related-posts .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--60);
}

@media (max-width: 781px) {

	.memot-news-hero__panel {
		border-radius: var(--memot-radius-lg);
		padding: var(--wp--preset--spacing--50);
	}

	.memot-news-hero__topline {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.memot-news-hero h1 {
		max-width: 100%;
	}

	.memot-news-hero__actions .wp-block-button,
	.memot-news-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.memot-news-hero__stage {
		min-height: 30rem;
		margin-top: var(--wp--preset--spacing--50);
	}

	.memot-news-hero__photo-card--plantation {
		right: 6%;
		bottom: 8%;
		width: 82%;
		height: 14rem;
	}

	.memot-news-hero__photo-card--farm,
	.memot-news-hero__photo-card--field {
		width: 72%;
		height: 10rem;
	}

	.memot-news-hero__photo-card--field {
		left: 8%;
		bottom: 34%;
	}

	.memot-news-hero__stats {
		align-items: stretch;
		border-radius: var(--memot-radius);
	}

	.memot-news-hero__stat {
		flex: 1 1 100%;
	}

	.memot-news-featured .memot-section-head,
	.memot-news-list .memot-section-head {
		max-width: 100%;
	}

	.memot-insight--featured {
		display: block;
	}

	.memot-insight--compact {
		grid-template-columns: minmax(7rem, 34%) 1fr;
		min-height: 0;
	}

	.memot-insight--featured .wp-block-post-featured-image {
		height: 12.5rem;
	}

	.memot-insight--featured .memot-insight-body,
	.memot-insight--compact .memot-insight-body,
	.memot-news-grid .memot-insight-body {
		padding: var(--wp--preset--spacing--40);
	}

	.memot-news-filters {
		overflow-x: auto;
		padding-bottom: 0.25rem;
		flex-wrap: nowrap;
	}

	.memot-news-filter {
		flex: 0 0 auto;
	}

	.memot-news-grid {
		grid-template-columns: 1fr;
	}

	.memot-news-grid .wp-block-post-featured-image {
		height: 8rem;
	}

	.memot-pagination {
		gap: var(--wp--preset--spacing--20);
	}

	.memot-pagination__direction {
		height: 2.5rem;
		min-width: 2.5rem;
		width: 2.5rem;
	}

	.memot-article-hero h1,
	.memot-article-hero .memot-lead {
		max-width: 100%;
	}

	.memot-article-sidebar {
		position: static;
	}
}

/* -------------------------------------------------------------------------- *
 * CTA banner
 * -------------------------------------------------------------------------- */

.memot-cta {
	background: var(--wp--preset--gradient--brand-soft, linear-gradient(180deg, #e9f2ea 0%, #f5f3ee 100%));
	text-align: center;
	border-radius: var(--memot-radius-lg);
}

.memot-cta h2 {
	max-width: 20ch;
	margin-inline: auto;
}

.memot-cta p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--wp--preset--color--slate);
}

/* -------------------------------------------------------------------------- *
 * Footer
 * -------------------------------------------------------------------------- */

.memot-footer {
	background: var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
}

/* Column headings: quiet uppercase labels. */
.memot-footer .wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 1.1rem;
}

/* Wordmark — logo tile + display-face word. */
.memot-footer .memot-footer-brand {
	gap: 0.7rem;
	margin-bottom: 1rem;
}

.memot-footer-brand__mark {
	margin: 0;
	flex-shrink: 0;
	line-height: 0;
}

.memot-footer-brand__mark a {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.3rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.25s ease;
}

.memot-footer-brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.memot-footer .memot-footer-brand__word {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.75rem;
	letter-spacing: 0.01em;
	line-height: 1;
}

.memot-footer-brand__word a {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.memot-footer .memot-footer-mission {
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.56);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.memot-footer .memot-footer-contact {
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 0.35rem;
}

/* Footer link lists — no bullets, generous line rhythm. */
.memot-footer .memot-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.memot-footer .memot-footer-list li {
	margin: 0;
}

.memot-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.18s ease;
}

.memot-footer a:hover {
	color: var(--wp--preset--color--paper);
}

/* Social icons: muted white, warm on hover. */
.memot-footer .memot-footer-social a,
.memot-footer .memot-footer-social svg {
	color: var(--wp--preset--color--paper);
	fill: currentcolor;
}

.memot-footer .memot-footer-social a {
	opacity: 0.65;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Prefix dropped on purpose: matches the specificity of the link rules that
   follow, so source order stays non-descending. */
.memot-footer-social a:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* Bottom bar — hairline divider, copyright + legal links. */
.memot-footer .memot-footer-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	gap: 1rem 1.5rem;
}

.memot-footer .memot-legal {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.8125rem;
	margin: 0;
}

.memot-footer-legal-links p {
	margin: 0;
	font-size: 0.8125rem;
}

.memot-footer .memot-footer-legal-links a {
	color: rgba(255, 255, 255, 0.55);
}

/* The switcher sits inside .memot-footer-legal-links, whose `a` rule above
   would otherwise paint its popover options (an opaque paper card) in the
   same translucent white as "Legal"/"Privacy policy" -- invisible on white. */
.memot-footer .memot-footer-legal-links .memot-language-switcher__option,
.memot-footer .memot-footer-legal-links .memot-language-switcher__option:hover,
.memot-footer .memot-footer-legal-links .memot-language-switcher__option:focus-visible {
	color: var(--wp--preset--color--ink);
}

/*
 * Brand hovers + nav link colours. Deliberately placed here, after the footer's
 * generic anchor rules, so the whole file's `a`-group specificity ascends in
 * source order (stylelint no-descending-specificity). The header link colour
 * itself is set on .memot-brand__word a / .memot-brand__mark a earlier.
 */
.memot-brand__mark a:hover {
	transform: rotate(-6deg) scale(1.05);
	background: #e9f2ea;
}

.memot-footer-brand__mark a:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* Core's navigation block CSS doubles up `.wp-block-navigation-item__content`
   to boost its specificity for `color: inherit`. Match that trick here so the
   themeable nav colour actually wins over it. */
.memot-header .memot-nav__menu .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--memot-nav-fg, var(--wp--preset--color--ink));
	transition: color 0.3s ease-in-out;
}

.memot-header .memot-nav__menu .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--memot-nav-fg-hover, var(--wp--preset--color--brand));
}

/* Current page indicator: core's navigation-link render adds
   aria-current="page" to whichever link's target matches the queried
   object (wp-includes/blocks/navigation-link.php), so the "you are here"
   state is styled off that attribute rather than a bespoke class. It
   permanently takes the same colour/weight as the hover state. */
.memot-header .memot-nav__menu .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--memot-nav-fg-hover, var(--wp--preset--color--brand));
	font-weight: 600;
}

/* The fullscreen mobile overlay always has a paper background regardless of
   scroll state or template, so its links must stay dark ink even when the
   themed --memot-nav-fg is paper (e.g. the front page before scrolling). */
.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

.memot-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--brand);
}

/* -------------------------------------------------------------------------- *
 * Small screens
 * -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	.memot-hero h1 {
		max-width: 100%;
	}

	.memot-split .wp-block-column:last-child .is-style-memot-panel {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------- *
 * Page hero (About / Sustainability / Investors / Contact)
 * -------------------------------------------------------------------------- */

.memot-page-hero {
	background: var(--wp--preset--gradient--brand-soft, linear-gradient(180deg, #e9f2ea 0%, #f5f3ee 100%));
}

.memot-page-hero h1 {
	max-width: 20ch;
}

.memot-page-hero .memot-lead {
	max-width: 60ch;
}

@media (max-width: 781px) {

	.memot-page-hero h1 {
		max-width: 100%;
	}
}

/* Single-post (article) hero: a headline can run longer than a page title. */
.memot-article-hero h1 {
	max-width: 13ch;
}

/* -------------------------------------------------------------------------- *
 * Timeline (About history) — a scroll-drawn rail with lighting dots
 * -------------------------------------------------------------------------- */

.memot-timeline {
	position: relative;
	padding-left: 2.5rem;
}

/* The rail track + its scroll-driven fill. */
.memot-timeline-track {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 5px;
	width: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}

.memot-timeline-progress {
	position: absolute;
	inset: 0;
	transform-origin: top center;
	background: linear-gradient(180deg, var(--wp--preset--color--brand-bright) 0%, var(--wp--preset--color--brand) 100%);
}

.memot-timeline-item {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--80);
}

.memot-timeline-item:last-child {
	padding-bottom: 0;
}

/* Dot on the rail — a paper ring keeps it clear of the fill behind it. */
.memot-timeline-item::before {
	content: "";
	position: absolute;
	top: 0.2rem;
	left: -2.5rem;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-bright);
	box-shadow: 0 0 0 4px var(--wp--preset--color--paper);
	transition: box-shadow 0.4s var(--memot-ease-out), transform 0.4s var(--memot-ease-out);
}

.memot-timeline-item.is-active::before {
	box-shadow: 0 0 0 4px var(--wp--preset--color--paper), 0 0 0 8px rgba(46, 158, 92, 0.16);
	transform: scale(1.15);
}

.memot-timeline-year {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--leaf);
	margin-bottom: 0.35rem;
}

.memot-timeline-title {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.4rem;
}

.memot-timeline-label {
	color: var(--wp--preset--color--slate);
	margin: 0;
	max-width: 54ch;
}

@media (max-width: 600px) {

	.memot-timeline {
		padding-left: 2rem;
	}

	.memot-timeline-item::before {
		left: -2rem;
	}
}

/* -------------------------------------------------------------------------- *
 * Contact info grid
 * -------------------------------------------------------------------------- */

.memot-contact-grid {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.memot-contact-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.memot-contact-item .memot-icon-chip {
	flex: 0 0 auto;
}

.memot-contact-grid .memot-contact-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-bottom: 0.4rem;
}

.memot-contact-grid .memot-contact-value {
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* -------------------------------------------------------------------------- *
 * Contact form
 * -------------------------------------------------------------------------- */

.memot-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	max-width: 640px;
}

.memot-contact-form .memot-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.memot-contact-form label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.memot-contact-form input[type="text"],
.memot-contact-form input[type="email"],
.memot-contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.memot-contact-form textarea {
	height: 110px;
	resize: vertical;
}

.memot-contact-form input[type="text"]:focus-visible,
.memot-contact-form input[type="email"]:focus-visible,
.memot-contact-form textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand-bright) 25%, transparent);
}

.memot-contact-form .memot-form-field-submit {
	margin-top: var(--wp--preset--spacing--20);
}

/* Honeypot field: hidden from real visitors regardless of any inline style
   already applied by the PHP that renders the form. */
.memot-contact-form .memot-form-field-honeypot,
.memot-form-field--honeypot {
	position: absolute;
	left: -9999px;
}

.memot-notice {
	padding: 1rem 1.25rem;
	margin-bottom: var(--wp--preset--spacing--50);
	border: 1px solid transparent;
	border-radius: var(--memot-radius);
	font-size: 0.9375rem;
}

.memot-notice-success {
	background: color-mix(in srgb, var(--wp--preset--color--leaf) 12%, var(--wp--preset--color--paper));
	border-color: color-mix(in srgb, var(--wp--preset--color--leaf) 30%, transparent);
	color: var(--wp--preset--color--brand);
}

.memot-notice-error {
	background: color-mix(in srgb, var(--wp--preset--color--line) 45%, var(--wp--preset--color--sand));
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------- *
 * Map (Google Maps embed, no API key — see docs/DESIGN.md §6)
 * -------------------------------------------------------------------------- */

.memot-map {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--sand);
	border-radius: var(--memot-radius-lg);
	box-shadow: var(--memot-shadow-lg);
	color: var(--wp--preset--color--slate);
	font-size: 0.875rem;
	overflow: hidden;
}

.memot-map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.memot-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* -------------------------------------------------------------------------- *
 * Contact Form 7 (contact page)
 * -------------------------------------------------------------------------- */

.memot-contact-form-wrap .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--50);
}

.memot-contact-form-wrap .wpcf7-form p {
	margin: 0;
}

.memot-contact-form-wrap div.wpcf7-response-output {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	font-size: 0.9375rem;
}

/* CF7's wpautop wraps every field (and the submit button) in its own <p>,
   so each field is a grid item by default — pairing name + email on one
   row. Subject, message, the submit button and the response notice are
   forced to span the full width, matched on CF7's own `data-name` (the
   field name an admin sets — see the fixed field names documented in
   docs/required-plugins.md) or, for the submit paragraph, the presence of
   the submit button itself. */
.memot-contact-form-wrap .wpcf7-form > p:has([data-name="your-subject"]),
.memot-contact-form-wrap .wpcf7-form > p:has([data-name="your-message"]),
.memot-contact-form-wrap .wpcf7-form > p:has(.wpcf7-submit),
.memot-contact-form-wrap .wpcf7-form > div.wpcf7-response-output {
	grid-column: 1 / -1;
}

.memot-contact-form-wrap .wpcf7-form > .hidden-fields-container {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
}

.memot-contact-form-wrap .wpcf7-form label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.memot-contact-form-wrap .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.35rem;
}

.memot-contact-form-wrap .wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 0.875rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.memot-contact-form-wrap textarea.wpcf7-form-control {
	height: 90px;
	resize: vertical;
}

@media (max-width: 600px) {

	.memot-contact-form-wrap .wpcf7-form {
		grid-template-columns: 1fr;
	}
}

.memot-contact-form-wrap .wpcf7-form-control:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand-bright) 25%, transparent);
}

.memot-contact-form-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: #b3261e;
}

.memot-contact-form-wrap .wpcf7-submit {
	width: auto;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-bright);
	color: var(--wp--preset--color--paper);
	padding: 0.75rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.memot-contact-form-wrap .wpcf7-submit:hover {
	background: var(--wp--preset--color--brand);
}

.memot-contact-form-wrap .wpcf7-form.sent div.wpcf7-response-output {
	background: color-mix(in srgb, var(--wp--preset--color--leaf) 12%, var(--wp--preset--color--paper));
	border-color: color-mix(in srgb, var(--wp--preset--color--leaf) 30%, transparent);
	color: var(--wp--preset--color--brand);
}

.memot-contact-form-wrap .wpcf7-form.invalid div.wpcf7-response-output,
.memot-contact-form-wrap .wpcf7-form.failed div.wpcf7-response-output,
.memot-contact-form-wrap .wpcf7-form.aborted div.wpcf7-response-output,
.memot-contact-form-wrap .wpcf7-form.spam div.wpcf7-response-output {
	background: color-mix(in srgb, var(--wp--preset--color--line) 45%, var(--wp--preset--color--sand));
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------- *
 * Investor documents list
 * -------------------------------------------------------------------------- */

.memot-doc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.memot-doc:last-child {
	border-bottom: none;
}

.memot-doc-meta {
	color: var(--wp--preset--color--slate);
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------- *
 * Product specs
 * -------------------------------------------------------------------------- */

.memot-specs {
	position: relative;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius-lg);
	box-shadow: var(--memot-shadow-sm);
	overflow: hidden;
}

/* Amber tick along the top edge — the same signature mark as the eyebrow,
   here signalling "certified spec" rather than a section intro. */
.memot-specs::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--wp--preset--color--harvest);
}

.memot-specs table {
	width: 100%;
	border-collapse: collapse;
}

.memot-specs th,
.memot-specs td {
	padding: 0.875rem 1.25rem;
	text-align: left;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.memot-specs th {
	width: 40%;
	font-weight: 600;
	color: var(--wp--preset--color--slate);
}

.memot-specs td {
	font-variant-numeric: tabular-nums;
}

.memot-specs tr:last-child th,
.memot-specs tr:last-child td {
	border-bottom: none;
}

.memot-specs tr:nth-child(even) {
	background: var(--wp--preset--color--sand);
}

.memot-specs__summary {
	padding: 1.5rem 1.25rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.memot-specs__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.memot-specs__fact {
	background: var(--wp--preset--color--sand);
	border-radius: var(--memot-radius);
	padding: 0.6rem 1.1rem 0.75rem;
	min-width: 6.5rem;
}

.memot-specs__fact dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.memot-specs__fact dd {
	margin: 0.15rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.memot-specs__apps {
	margin-top: var(--wp--preset--spacing--30);
}

.memot-specs__apps-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-bottom: 0.5rem;
}

.memot-specs__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.memot-specs__chip {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
}

.memot-specs-datasheet {
	padding: 0 1.25rem 1.25rem;
	margin-top: var(--wp--preset--spacing--50);
}

.memot-specs-datasheet__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.memot-specs-datasheet__icon {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.memot-specs .memot-specs-download {
	margin-top: var(--wp--preset--spacing--50);
}

/* Product description (post-content), rendered under the spec card in the
   same column so it reads as one continuous fact sheet instead of a
   separate block floating below the gallery/specs row. */
.memot-product-overview {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.memot-product-overview > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------- *
 * Product gallery — main stage image + vertical thumbnail rail (single
 * product page). The stage/thumb swap runs on plain radio inputs + labels so
 * it works with no JavaScript; memot-product-gallery.js only adds the
 * up/down rail buttons and keeps the active thumbnail scrolled into view.
 * -------------------------------------------------------------------------- */

/* Sticks alongside the taller spec/description column so the product image
   stays in view while that column scrolls; unsticks naturally once the
   column (and the row it's in) runs out of height. Desktop only — see the
   width:781px reset below, where the two columns stack instead. */
.memot-product-gallery-col {
	position: sticky;
	top: calc(var(--memot-header-space) + var(--wp--preset--spacing--40));
	align-self: flex-start;
}

.memot-gallery {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--wp--preset--spacing--40);
}

.memot-gallery__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.memot-gallery__stage {
	position: relative;
	flex: 1 1 auto;
	aspect-ratio: 4 / 5;
	margin: 0;
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius-lg);
	box-shadow: var(--memot-shadow-sm);
	overflow: hidden;
}

.memot-gallery__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	cursor: zoom-in;
	transition: opacity 0.25s var(--memot-ease-out, ease), transform 0.4s var(--memot-ease-out, ease);
}

.memot-gallery--single .memot-gallery__slide {
	opacity: 1;
}

.memot-gallery__stage:hover .memot-gallery__slide {
	transform: scale(1.03);
}

/* Each radio's :checked state (radio 1 is checked by default in the markup)
   picks the matching slide by DOM position — see product-gallery/render.php. */
.memot-gallery__radio:nth-of-type(1):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(1),
.memot-gallery__radio:nth-of-type(2):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(2),
.memot-gallery__radio:nth-of-type(3):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(3),
.memot-gallery__radio:nth-of-type(4):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(4),
.memot-gallery__radio:nth-of-type(5):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(5),
.memot-gallery__radio:nth-of-type(6):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(6),
.memot-gallery__radio:nth-of-type(7):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(7),
.memot-gallery__radio:nth-of-type(8):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(8),
.memot-gallery__radio:nth-of-type(9):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(9),
.memot-gallery__radio:nth-of-type(10):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(10),
.memot-gallery__radio:nth-of-type(11):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(11),
.memot-gallery__radio:nth-of-type(12):checked ~ .memot-gallery__stage .memot-gallery__slide:nth-of-type(12) {
	opacity: 1;
}

.memot-gallery__thumbs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	flex: 0 0 5.5rem;
}

.memot-gallery__nav {
	display: flex;
	justify-content: center;
	width: 100%;
}

.memot-gallery__nav[hidden] {
	display: none;
}

.memot-gallery__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	box-shadow: var(--memot-shadow-sm);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.memot-gallery__nav .memot-gallery__nav-button svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.memot-gallery__nav-button:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
	transform: none;
}

.memot-gallery__nav-button:hover:not(:disabled) {
	box-shadow: var(--memot-shadow-md);
	transform: translateY(-1px);
}

.memot-gallery__viewport {
	width: 100%;
	max-height: 32rem;
	overflow-y: auto;
	scrollbar-width: none;
}

.memot-gallery__viewport::-webkit-scrollbar {
	display: none;
}

.memot-gallery__track {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.memot-gallery__thumb {
	display: block;
	flex: none;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--memot-radius);
	overflow: hidden;
	border: 2px solid transparent;
	box-shadow: var(--memot-shadow-sm);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.memot-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.memot-gallery__thumb:hover {
	box-shadow: var(--memot-shadow-md);
}

.memot-gallery__radio:nth-of-type(1):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(1),
.memot-gallery__radio:nth-of-type(2):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(2),
.memot-gallery__radio:nth-of-type(3):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(3),
.memot-gallery__radio:nth-of-type(4):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(4),
.memot-gallery__radio:nth-of-type(5):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(5),
.memot-gallery__radio:nth-of-type(6):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(6),
.memot-gallery__radio:nth-of-type(7):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(7),
.memot-gallery__radio:nth-of-type(8):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(8),
.memot-gallery__radio:nth-of-type(9):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(9),
.memot-gallery__radio:nth-of-type(10):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(10),
.memot-gallery__radio:nth-of-type(11):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(11),
.memot-gallery__radio:nth-of-type(12):checked ~ .memot-gallery__thumbs .memot-gallery__thumb:nth-of-type(12) {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--memot-shadow-md);
}

@media (max-width: 781px) {

	.memot-product-gallery-col {
		position: static;
	}

	.memot-gallery {
		flex-direction: column-reverse;
	}

	.memot-gallery__thumbs {
		flex-direction: row;
		flex: none;
	}

	.memot-gallery__nav {
		display: none;
	}

	.memot-gallery__viewport {
		max-height: none;
		overflow-x: auto;
		overflow-y: visible;
	}

	.memot-gallery__track {
		flex-direction: row;
	}

	.memot-gallery__thumb {
		width: 4.5rem;
		flex: none;
	}
}

/* ========================================================================== *
 * MOTION + INTERACTION LAYER
 *
 * Progressive enhancement for the marketing pages. Everything in this block is
 * additive: the site is fully readable with JavaScript disabled, and every
 * animation collapses to its finished state under prefers-reduced-motion.
 *
 * Reveal orchestration: an early inline script adds `.memot-anim` to <html>
 * before first paint (only when motion is allowed). The rules below use that
 * class to pre-hide reveal targets so there is no flash of un-animated content;
 * memot-motion.js then animates them in and the class is a no-op afterwards.
 *
 * This layer is deliberately additive: it re-opens base component selectors and
 * relies on higher-specificity `.memot-anim` pre-hide rules preceding their
 * lower-specificity resting state. Both patterns are intentional here.
 * ========================================================================== */

/* stylelint-disable no-duplicate-selectors, no-descending-specificity */

:root {
	--memot-harvest: var(--wp--preset--color--harvest, #c9a15a);
	--memot-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Give the display face a touch more optical presence at large sizes. */
:where(h1, h2) {
	letter-spacing: -0.018em;
}

/* Amber tick before every eyebrow — the small recurring signature that ties
   the sections together (tapped-latex amber against the plantation green). */
.is-style-memot-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.is-style-memot-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--memot-harvest);
	flex: none;
}

.has-text-align-center.is-style-memot-eyebrow {
	justify-content: center;
}

/* -------------------------------------------------------------------------- *
 * Scroll-reveal utilities (JS-gated; safe without JS / reduced motion)
 * -------------------------------------------------------------------------- */

.memot-anim .memot-hero .memot-line-inner,
.memot-anim .memot-hero .memot-hero-eyebrow,
.memot-anim .memot-hero .memot-hero-copy,
.memot-anim .memot-hero .wp-block-buttons,
.memot-anim .memot-hero .memot-hero-cue,
.memot-anim .memot-hero .memot-hero-media {
	opacity: 0;
	will-change: transform, opacity;
}

.memot-anim .memot-news-hero :where(.memot-news-hero__topline, .memot-news-hero__eyebrow, h1, .memot-news-hero__lead, .memot-news-hero__actions, .memot-news-hero__stage, .memot-news-hero__stat) {
	opacity: 0;
	will-change: transform, opacity;
}

.memot-anim .wp-block-group.alignfull h2.wp-block-heading,
.memot-anim .memot-lead,
.memot-anim .memot-stat,
.memot-anim .is-style-memot-card,
.memot-anim .is-style-memot-panel,
.memot-anim .memot-product,
.memot-anim .memot-reach-map,
.memot-anim .memot-reach-item,
.memot-anim .memot-contact-item,
.memot-anim .memot-insight,
.memot-anim .memot-map,
.memot-anim .memot-cta {
	opacity: 0;
	transform: translateY(30px);
	will-change: transform, opacity;
}

/* -------------------------------------------------------------------------- *
 * Hero — the signature "living latex flow" field
 * -------------------------------------------------------------------------- */

.memot-hero.wp-block-cover {
	min-height: clamp(560px, 88vh, 860px);
	display: flex;
	align-items: center;
}

/* Richer, deeper brand backdrop (used until a photograph is dropped in). */
.memot-hero:not(:has(img)):not(:has(video))::before {
	background:
		radial-gradient(90% 60% at 8% 8%, rgba(46, 158, 92, 0.55) 0%, rgba(46, 158, 92, 0) 55%),
		radial-gradient(70% 70% at 92% 100%, rgba(201, 161, 90, 0.28) 0%, rgba(201, 161, 90, 0) 60%),
		linear-gradient(150deg, #0a2416 0%, #0f3a23 45%, #123f27 100%);
}

/* Slowly drifting light — the ambient "flow". GPU-cheap, pure CSS. */
.memot-hero-flow {
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 25% 30%, rgba(96, 214, 148, 0.42) 0%, rgba(96, 214, 148, 0) 70%),
		radial-gradient(34% 40% at 78% 62%, rgba(201, 161, 90, 0.3) 0%, rgba(201, 161, 90, 0) 70%),
		radial-gradient(30% 34% at 60% 18%, rgba(46, 158, 92, 0.3) 0%, rgba(46, 158, 92, 0) 70%);
	filter: blur(18px);
	animation: memot-flow 22s ease-in-out infinite alternate;
}

@keyframes memot-flow {

	0% {
		transform: translate3d(-3%, -2%, 0) scale(1.05);
	}

	50% {
		transform: translate3d(3%, 2%, 0) scale(1.12);
	}

	100% {
		transform: translate3d(-1%, 4%, 0) scale(1.06);
	}
}

/* Fine grain so the flat gradient reads as a surface, not a swatch. */
.memot-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.memot-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.memot-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.memot-hero-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--memot-harvest);
	flex: none;
}

.memot-hero h1 {
	margin: 0;
	font-weight: 560;
	line-height: 1.04;
}

/* Line-clip reveal wrappers. */
.memot-hero h1 .memot-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
}

.memot-hero h1 .memot-line-inner {
	display: block;
}

.memot-hero h1 .memot-accent {
	color: #7fe0a6;
	font-style: italic;
}

/* Hero buttons: primary keeps the brand pill; the outline reads on dark. */
.memot-hero .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
}

.memot-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--paper);
	border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.memot-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--paper);
}

.memot-hero-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: var(--wp--preset--spacing--70);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.memot-hero-cue::before {
	content: "";
	width: 1px;
	height: 2.5rem;
	background: linear-gradient(180deg, var(--memot-harvest), rgba(201, 161, 90, 0));
	animation: memot-cue 1.9s ease-in-out infinite;
	transform-origin: top;
}

@keyframes memot-cue {

	0%,
	100% {
		transform: scaleY(0.4);
		opacity: 0.4;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------- *
 * Trusted-by marquee
 * -------------------------------------------------------------------------- */

.wp-block-gallery.is-style-memot-marquee {
	margin-top: var(--wp--preset--spacing--50);
	overflow: hidden;
}

/* The Gallery block nests figure > figure > img; reset the outer two levels
 * so the grayscale/opacity treatment above only applies once, at the img. */
.wp-block-gallery.is-style-memot-marquee,
.wp-block-gallery.is-style-memot-marquee .wp-block-image {
	filter: none;
	opacity: 1;
}

/* Core Gallery sizes each figure as a grid column via a selector that carries
 * an ID (`:not(#individual-image)`), and — when "Crop images" is on — forces
 * the image to `object-fit: cover` its column. Neither can be beaten by
 * specificity alone, so every logo gets `!important` overrides for a fixed,
 * uniform tile regardless of the image's size/aspect or the block's own
 * crop setting. */
.wp-block-gallery.is-style-memot-marquee .wp-block-image {
	display: flex !important;
	flex: none !important;
	align-items: center;
	justify-content: center;
	width: var(--wp--preset--spacing--100) !important;
	height: var(--wp--preset--spacing--70) !important;
	margin: 0 !important;
}

.wp-block-gallery.is-style-memot-marquee figure.wp-block-image img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	flex: none !important;
	filter: grayscale(1);
	opacity: 0.55;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.wp-block-gallery.is-style-memot-marquee .wp-block-image:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* memot-marquee-inner is the animated track; memot-marquee-clone (injected
 * server-side by memot_render_marquee_gallery() in functions.php) is an
 * aria-hidden duplicate of the same figures so the loop below closes without
 * a visible seam, regardless of how many logos an editor adds. */
.memot-marquee-inner,
.memot-marquee-clone {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.memot-marquee-inner {
	width: max-content;
	padding-right: var(--wp--preset--spacing--90);
	animation: memot-marquee 34s linear infinite;
}

.wp-block-gallery.is-style-memot-marquee:hover .memot-marquee-inner {
	animation-play-state: paused;
}

.memot-marquee-inner .wp-block-image,
.memot-marquee-clone {
	flex: none;
	margin: 0;
}

@keyframes memot-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* -------------------------------------------------------------------------- *
 * Hero split layout + image carousel
 *
 * The hero cover holds two columns: the headline stack (left) and an
 * auto-playing image carousel (right). The carousel is a "Sliding carousel"
 * Gallery block enhanced by assets/js/memot-carousel.js — the .memot-carousel-
 * ready class is added by that script, so the stacked (no-JS) fallback stays
 * fully visible per the progressive-enhancement contract.
 * -------------------------------------------------------------------------- */

.memot-hero-columns {
	gap: clamp(2rem, 4vw, 4rem);
	width: 100%;
}

/* Keep the headline stack tight; its children keep their own max-widths. */
.memot-hero-text > * {
	margin-block: 0;
}

.memot-hero-text > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

/* Base (pre-enhancement / no-JS): a plain gallery, capped so it never runs
 * away vertically before the carousel script upgrades it. */
.memot-hero-media .wp-block-gallery.is-style-memot-hero-carousel {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-gallery.is-style-memot-hero-carousel .wp-block-image img {
	border-radius: var(--memot-radius-lg);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Enhanced state: overlap slides in a fixed-ratio frame and cross-fade. */
.wp-block-gallery.is-style-memot-hero-carousel.memot-carousel-ready {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	max-height: min(72vh, 620px);
	margin: 0 auto;
	border-radius: var(--memot-radius-lg);
	overflow: hidden;
	box-shadow: var(--memot-shadow-lg);
	background: rgba(10, 26, 16, 0.4);
}

/* Core Gallery's `:not(#individual-image)` rules carry ID-level specificity
 * (see DESIGN.md §4) and otherwise pin each slide to `position: relative` and a
 * flex column width — so the overlap/stretch below must use `!important`. */
.memot-carousel-ready .wp-block-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	transform: scale(1.04);
	transition:
		opacity 0.8s var(--memot-ease-out),
		transform 1.2s var(--memot-ease-out);
	pointer-events: none;
}

.memot-carousel-ready .wp-block-image.is-active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.memot-carousel-ready .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 0;
	display: block;
	object-fit: cover;
}

/* A soft scrim so pager controls stay legible over any photo. */
.memot-carousel-ready::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(180deg, rgba(10, 26, 16, 0) 55%, rgba(10, 26, 16, 0.5) 100%);
}

/* Prev / next arrows. */
.memot-carousel-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(10, 26, 16, 0.35);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--paper);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.memot-carousel-ready:hover .memot-carousel-arrow,
.memot-carousel-arrow:focus-visible {
	opacity: 1;
}

.memot-carousel-arrow:hover {
	background: rgba(10, 26, 16, 0.6);
	border-color: var(--wp--preset--color--paper);
}

.memot-carousel-prev {
	left: 0.9rem;
}

.memot-carousel-next {
	right: 0.9rem;
}

/* Pager dots. */
.memot-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.memot-carousel-dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: width 0.3s var(--memot-ease-out), background 0.2s ease;
}

.memot-carousel-dot.is-active {
	width: 1.5rem;
	background: var(--wp--preset--color--paper);
}

.memot-carousel-dot:focus-visible {
	outline: 2px solid var(--memot-harvest);
	outline-offset: 2px;
}

@media (max-width: 781px) {

	/* Stacked columns: carousel drops below the copy, a touch shorter. */
	.wp-block-gallery.is-style-memot-hero-carousel.memot-carousel-ready {
		aspect-ratio: 3 / 2;
		max-height: 60vh;
	}

	.memot-carousel-arrow {
		opacity: 1;
	}

	.memot-product-range__header {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.memot-product-slider__item {
		flex-basis: min(82vw, 21rem);
	}
}

/* -------------------------------------------------------------------------- *
 * Refined depth on the gradient placeholders + interaction states
 *
 * This additive layer intentionally re-opens base component selectors
 * (.memot-product, .memot-header, cards, …) to layer hover/scroll behaviour
 * on top of them in source order.
 * -------------------------------------------------------------------------- */

.memot-product .wp-block-cover,
.memot-insight .wp-block-cover {
	position: relative;
	overflow: hidden;
}

.memot-product .wp-block-cover::after,
.memot-insight .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
		radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, 0.18), transparent 60%);
}

.memot-product {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--memot-shadow-sm);
	transition: transform 0.35s var(--memot-ease-out), box-shadow 0.35s var(--memot-ease-out);
}

.memot-product:hover {
	transform: translateY(-6px);
	box-shadow: var(--memot-shadow-md);
}

.memot-product .wp-block-cover__background {
	transition: transform 0.5s var(--memot-ease-out);
}

.memot-product:hover .wp-block-cover__background {
	transform: scale(1.06);
}

.memot-product .wp-block-image img {
	transition: transform 0.5s var(--memot-ease-out);
}

.memot-product:hover .wp-block-image img {
	transform: scale(1.06);
}

/* Whole-card link wrapper around .memot-product (products grid). */
.memot-product-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.memot-product-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-bright);
	outline-offset: 4px;
	border-radius: var(--memot-radius);
}

.memot-reach-map {
	position: relative;
	overflow: hidden;
	transition: transform 0.4s var(--memot-ease-out);
}

.memot-reach-item {
	transition: border-color 0.25s ease;
}

.memot-reach-item:hover {
	border-top-color: var(--memot-harvest);
}

.memot-reach-item .memot-reach-index {
	color: var(--memot-harvest);
}

/* Card lift easing upgrade (matches the new motion vocabulary). */
.wp-block-group.is-style-memot-card {
	transition: transform 0.35s var(--memot-ease-out), box-shadow 0.35s var(--memot-ease-out), border-color 0.35s var(--memot-ease-out);
}

.wp-block-group.is-style-memot-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--wp--preset--color--brand-bright) 40%, var(--wp--preset--color--line));
}

.memot-icon-chip {
	transition: transform 0.35s var(--memot-ease-out), background-color 0.3s ease, color 0.3s ease;
}

.is-style-memot-card:hover .memot-icon-chip {
	transform: translateY(-2px) rotate(-6deg);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
}

/* Primary buttons get a soft press + sheen on hover. */
.wp-element-button {
	transition: transform 0.25s var(--memot-ease-out), background-color 0.25s ease, box-shadow 0.25s ease;
}

.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(27, 94, 58, 0.28);
}

.wp-element-button:active {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------- *
 * Header scroll state
 * -------------------------------------------------------------------------- */

/* On scroll the transparent shell becomes a floating white capsule: the
   glass fill fades/slides in, a border and shadow appear, and the header
   itself tightens for a more compact bar. `.is-scrolled` is toggled on
   .memot-header by the motion layer (see memot-motion.js) once the page has
   scrolled past the 50–100px threshold. */
.memot-header.is-scrolled {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.memot-header.is-scrolled .memot-nav {
	border-color: rgba(27, 94, 58, 0.1);
	box-shadow:
		0 4px 10px rgba(22, 22, 15, 0.08),
		0 18px 40px rgba(22, 22, 15, 0.12);
}

.memot-header.is-scrolled .memot-nav::before {
	opacity: 1;
	transform: translateY(0);
	background: rgba(255, 255, 255, 0.94);
}

/* Desktop nav links: an amber underline that wipes in on hover/focus.
   Scoped to the closed (horizontal) menu so the mobile overlay is untouched. */
.memot-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}

.memot-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--memot-harvest);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--memot-ease-out);
}

.memot-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover::after,
.memot-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible::after,
.memot-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------- *
 * Reduced motion — collapse everything to the finished state
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.memot-hero-flow,
	.memot-hero-cue::before,
	.memot-marquee-inner {
		animation: none;
	}

	.memot-marquee-inner {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		padding-right: 0;
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	}

	/* Fully remove the aria-hidden duplicate from layout — otherwise a
	 * reduced-motion visitor sees every logo twice in the wrapped, static row. */
	.memot-marquee-clone {
		display: none;
	}

	/* Carousel slides swap instantly (no cross-fade) for reduced-motion. */
	.memot-carousel-ready .wp-block-image {
		transition: none;
		transform: none;
	}

	.memot-product-slider__button,
	.memot-product-slider__progress span {
		transition: none;
	}

	.memot-anim .memot-hero .memot-line-inner,
	.memot-anim .memot-hero .memot-hero-eyebrow,
	.memot-anim .memot-hero .memot-hero-copy,
	.memot-anim .memot-hero .wp-block-buttons,
	.memot-anim .memot-hero .memot-hero-cue,
	.memot-anim .memot-hero .memot-hero-media,
	.memot-anim .wp-block-group.alignfull h2.wp-block-heading,
	.memot-anim .memot-lead,
	.memot-anim .memot-stat,
	.memot-anim .is-style-memot-card,
	.memot-anim .is-style-memot-panel,
	.memot-anim .memot-product,
	.memot-anim .memot-reach-map,
	.memot-anim .memot-reach-item,
	.memot-anim .memot-contact-item,
	.memot-anim .memot-insight,
	.memot-anim .memot-map,
	.memot-anim .memot-cta {
		opacity: 1;
		transform: none;
	}

	.memot-header,
	.memot-header .memot-nav,
	.memot-header .memot-nav::before {
		transition-duration: 0.01ms;
	}
}

/* ========================================================================== *
 * ABOUT PAGE
 *
 * Self-contained components for the company story page. Built on the shared
 * tokens and the same `.memot-anim` reveal contract used across the theme.
 * ========================================================================== */

/* -------------------------------------------------------------------------- *
 * About hero — proof strip beneath the headline
 * -------------------------------------------------------------------------- */

.memot-about-hero .memot-lead {
	max-width: 58ch;
}

.memot-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	margin: var(--wp--preset--spacing--80) 0 0;
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}

.memot-hero-stats,
.memot-hero-stats dt,
.memot-hero-stats dd {
	margin: 0;
}

.memot-hero-stat {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.memot-hero-stat-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--wp--preset--color--brand);
}

.memot-hero-stat-label {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

/* -------------------------------------------------------------------------- *
 * Products hero — one photographic panel with the headline overlaid on the
 * image, and a floating "reach" badge in place of a generic avatar stack:
 * the number this page can honestly show off is export markets, not client
 * logos. The corner accent traces the spiral cut of a tapped rubber trunk.
 * -------------------------------------------------------------------------- */

.memot-products-hero {
	background:
		radial-gradient(60% 70% at 14% 0%, rgba(46, 158, 92, 0.16) 0%, rgba(46, 158, 92, 0) 60%),
		radial-gradient(50% 60% at 100% 100%, rgba(201, 161, 90, 0.14) 0%, rgba(201, 161, 90, 0) 60%),
		var(--wp--preset--gradient--brand-soft, linear-gradient(180deg, #e9f2ea 0%, #f5f3ee 100%));
}

/*
 * Scope this selector to `.memot-products-hero` so it beats core's
 * `.has-global-padding > .alignfull` layout rule on specificity.
 * Core sets margin-left/right via calc(); otherwise a bare
 * single-class selector pins the panel left instead of centering it.
 */
.memot-products-hero .memot-products-hero__inner {
	max-width: 1560px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.memot-products-hero__stage {
	position: relative;
}

.memot-products-hero__panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(320px, 42vh, 440px);
	border-radius: clamp(20px, 2vw, 28px);
	box-shadow: var(--memot-shadow-lg);
}

.memot-products-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

.memot-products-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scrim: a brand-green fade from the text corner, not a generic black one. */
.memot-products-hero__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, rgba(9, 30, 18, 0.88) 0%, rgba(9, 30, 18, 0.5) 38%, rgba(9, 30, 18, 0) 68%);
}

/* The signature: a dashed line tracing a tapped trunk's spiral incision,
   ending in the drop of latex it releases. */
.memot-products-hero__panel::after {
	content: "";
	position: absolute;
	top: clamp(1.5rem, 4vw, 3rem);
	left: clamp(1.5rem, 4vw, 3.5rem);
	z-index: 1;
	width: 64px;
	height: 120px;
	opacity: 0.85;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 120'%3E%3Cpath d='M8 4c20 16 6 36 24 50s2 34 22 60' stroke='%23C9A15A' stroke-width='2' fill='none' stroke-linecap='round' stroke-dasharray='1 8'/%3E%3Ccircle cx='54' cy='114' r='4' fill='%23C9A15A'/%3E%3C/svg%3E");
}

.memot-products-hero__copy {
	position: relative;
	z-index: 2;
	max-width: 46ch;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--wp--preset--color--paper);
}

.memot-products-hero__copy h1 {
	max-width: 26ch;
	color: var(--wp--preset--color--paper);
}

.memot-products-hero__copy .memot-lead {
	max-width: 44ch;
	color: rgba(255, 255, 255, 0.88);
}

.memot-products-hero__copy .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--50);
}

.memot-products-hero__copy .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--paper);
	border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.memot-products-hero__copy .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--paper);
}

.memot-products-hero__badge {
	position: absolute;
	z-index: 3;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(-1.75rem, -1vw, -1.25rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 1.1rem 1.35rem;
	border-radius: var(--memot-radius);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	box-shadow: var(--memot-shadow-lg);
	animation: memot-badge-float 5s ease-in-out infinite;
}

.memot-products-hero__badge .memot-icon-chip {
	width: 40px;
	height: 40px;
	margin-bottom: 0.2rem;
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--brand-bright);
}

.memot-products-hero__badge .memot-icon-chip svg {
	width: 20px;
	height: 20px;
}

.memot-products-hero__badge-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
}

.memot-products-hero__badge-label {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

@keyframes memot-badge-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

.memot-products-hero__stats {
	margin-top: var(--wp--preset--spacing--70);
}

@media (max-width: 781px) {

	.memot-products-hero__panel {
		min-height: 360px;
	}

	.memot-products-hero__copy {
		max-width: 100%;
		padding: 1.25rem;
	}

	.memot-products-hero__copy h1 {
		max-width: 100%;
	}

	/*
	 * The floating corner card doesn't have room to overlay the copy once the
	 * buttons wrap to two lines on narrow screens, so it drops into normal
	 * flow below the panel instead (it's already last in source order).
	 */
	.memot-products-hero__badge {
		position: static;
		width: fit-content;
		margin: 1rem 0 0 auto;
		animation: none;
	}

	.memot-products-hero__panel::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.memot-products-hero__badge {
		animation: none;
	}
}

/* -------------------------------------------------------------------------- *
 * Mission — immersive dark statement panel
 * -------------------------------------------------------------------------- */

.memot-mission__panel {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding: clamp(2rem, 5vw, var(--wp--preset--spacing--80));
	border-radius: var(--memot-radius-lg);
	background: linear-gradient(150deg, #0f3a23 0%, #1b5e3a 55%, #123f27 100%);
	color: rgba(255, 255, 255, 0.94);
	box-shadow: var(--memot-shadow-lg);
}

/* Soft brand glow so the flat gradient reads with more depth. */
.memot-mission__panel::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 55%;
	height: 130%;
	background: radial-gradient(closest-side, rgba(78, 199, 128, 0.35), transparent 70%);
	pointer-events: none;
}

.memot-mission__main {
	position: relative;
}

.memot-mission__eyebrow {
	color: #8fe0ab;
}

.memot-mission__title {
	margin: 0.4rem 0 0;
	color: #fff;
}

.memot-mission__lead {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.memot-mission__aside {
	position: relative;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 2px solid rgba(255, 255, 255, 0.22);
}

.memot-mission__index {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(3rem, 6vw, 4.5rem);
	line-height: 1;
	color: rgba(143, 224, 171, 0.45);
}

.memot-mission__quote {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #fff;
}

@media (max-width: 781px) {

	.memot-mission__panel {
		grid-template-columns: 1fr;
	}

	.memot-mission__aside {
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--40);
		border-left: 0;
		border-top: 2px solid rgba(255, 255, 255, 0.22);
	}
}

/* -------------------------------------------------------------------------- *
 * Vision — numbered roadmap goals + amber pledge banner
 * -------------------------------------------------------------------------- */

.memot-vision__goals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
}

.memot-vision__goal {
	position: relative;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	box-shadow: var(--memot-shadow-sm);
	overflow: hidden;
	transition: transform 0.2s var(--memot-ease-out), box-shadow 0.2s var(--memot-ease-out);
}

.memot-vision__goal::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, #c9a15a, #8a6d34);
}

.memot-vision__goal:hover {
	transform: translateY(-4px);
	box-shadow: var(--memot-shadow-md);
}

.memot-vision__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--wp--preset--color--harvest);
	opacity: 0.7;
}

.memot-vision__goal-title {
	margin: var(--wp--preset--spacing--30) 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}

.memot-vision__goal-text {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.memot-vision__banner {
	position: relative;
	overflow: hidden;
	margin-top: var(--wp--preset--spacing--60);
	padding: clamp(1.75rem, 4vw, var(--wp--preset--spacing--70)) clamp(1.75rem, 4vw, var(--wp--preset--spacing--80));
	border-radius: var(--memot-radius-lg);
	background: linear-gradient(150deg, #7a5a24 0%, #c9a15a 60%, #a07d38 100%);
	color: #1c1608;
	box-shadow: var(--memot-shadow-md);
}

.memot-vision__quote {
	margin: 0;
	max-width: 44ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.32;
	letter-spacing: -0.01em;
}

@media (max-width: 781px) {

	.memot-vision__goals {
		grid-template-columns: 1fr;
	}
}

/* Shared check-list used in Mission / Vision. */
.memot-checklist {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.memot-checklist li {
	position: relative;
	padding-left: 2rem;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.memot-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 999px;
	background-color: rgba(46, 158, 92, 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E9E5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.8rem;
}

/* Inverted variant for dark backgrounds (Mission panel). */
.memot-checklist--invert li {
	color: rgba(255, 255, 255, 0.9);
}

.memot-checklist--invert li::before {
	background-color: rgba(255, 255, 255, 0.16);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0AB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------- *
 * Generic one-row card slider (About values + leadership)
 * -------------------------------------------------------------------------- */

.memot-card-slider-scope {
	margin-top: var(--wp--preset--spacing--70);
}

.memot-card-slider__controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

.memot-card-slider__controls[hidden] {
	display: none;
}

.memot-card-slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--memot-shadow-sm);
	cursor: pointer;
	transition:
		transform 0.25s var(--memot-ease-out),
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease;
}

.memot-card-slider__button svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.memot-card-slider__button:hover:not(:disabled),
.memot-card-slider__button:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
}

.memot-card-slider__button:disabled {
	cursor: default;
	opacity: 0.4;
}

.memot-card-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--brand-bright) transparent;
	padding-bottom: var(--wp--preset--spacing--30);
}

.memot-card-slider.is-ready .memot-card-slider__viewport {
	scrollbar-width: none;
}

.memot-card-slider.is-ready .memot-card-slider__viewport::-webkit-scrollbar {
	display: none;
}

.memot-card-slider__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

.memot-card-slider__item {
	scroll-snap-align: start;
}

.memot-card-slider__progress {
	height: 0.2rem;
	margin-top: var(--wp--preset--spacing--30);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--leaf) 16%, transparent);
	overflow: hidden;
}

.memot-card-slider:not(.is-ready) .memot-card-slider__progress {
	display: none;
}

.memot-card-slider__progress span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--brand-bright);
	transform: scaleX(0.12);
	transform-origin: left center;
	transition: transform 0.3s var(--memot-ease-out);
}

@media (prefers-reduced-motion: reduce) {

	.memot-card-slider__button,
	.memot-card-slider__progress span {
		transition: none;
	}
}

/* Value cards keep their look but flex to an equal, fixed slide width. */
.memot-value-track .memot-value-card {
	flex: 0 0 clamp(15rem, 24vw, 18rem);
	display: flex;
	flex-direction: column;
}

.memot-value-track .memot-value-text {
	margin-top: auto;
}

/* -------------------------------------------------------------------------- *
 * Leadership — portrait slider cards (monogram avatar + role)
 * -------------------------------------------------------------------------- */

.memot-leader-track .memot-leader-card {
	flex: 0 0 clamp(15rem, 24vw, 18rem);
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius-lg);
	box-shadow: var(--memot-shadow-sm);
	transition: transform 0.2s var(--memot-ease-out), box-shadow 0.2s var(--memot-ease-out);
}

.memot-leader-track .memot-leader-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--memot-shadow-md);
}

.memot-leader-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-bottom: var(--wp--preset--spacing--40);
	border-radius: 999px;
	background: var(--memot-leader-grad, linear-gradient(135deg, #3c8c55 0%, #1b5e3a 100%));
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
}

.memot-leader-card__avatar img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.memot-leader-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.memot-leader-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}

.memot-leader-card__role {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--leaf);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.memot-leader-card__bio {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--slate);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- *
 * Core values — icon card grid
 * -------------------------------------------------------------------------- */

.memot-value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
}

.memot-value-card {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--memot-radius);
	box-shadow: var(--memot-shadow-sm);
	transition: transform 0.2s var(--memot-ease-out), box-shadow 0.2s var(--memot-ease-out), border-color 0.2s var(--memot-ease-out);
}

.memot-value-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--memot-shadow-md);
	border-color: transparent;
}

.memot-value-card .memot-icon-chip {
	margin-bottom: var(--wp--preset--spacing--40);
	transition: transform 0.2s var(--memot-ease-out), background-color 0.2s var(--memot-ease-out), color 0.2s var(--memot-ease-out);
}

.memot-value-card:hover .memot-icon-chip {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	transform: rotate(-6deg);
}

.memot-value-title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}

.memot-value-text {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- *
 * Industries — single-row divided strip ("Where it goes")
 * -------------------------------------------------------------------------- */

.memot-industry-row {
	display: flex;
	margin-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.memot-industry-tile {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-right: 1px solid var(--wp--preset--color--line);
	transition: background-color 0.25s var(--memot-ease-out);
}

.memot-industry-tile:last-child {
	border-right: 0;
}

.memot-industry-tile::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--harvest);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--memot-ease-out);
}

.memot-industry-tile:hover,
.memot-industry-tile:focus-visible {
	background: var(--wp--preset--color--sand);
	outline: none;
}

.memot-industry-tile:hover::after,
.memot-industry-tile:focus-visible::after {
	transform: scaleX(1);
}

.memot-industry-tile .memot-icon-chip {
	width: 40px;
	height: 40px;
	margin-bottom: var(--wp--preset--spacing--40);
	transition: transform 0.2s var(--memot-ease-out), background-color 0.2s var(--memot-ease-out), color 0.2s var(--memot-ease-out);
}

.memot-industry-tile .memot-icon-chip svg {
	width: 20px;
	height: 20px;
}

.memot-industry-tile:hover .memot-icon-chip,
.memot-industry-tile:focus-visible .memot-icon-chip {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	transform: rotate(-6deg);
}

.memot-industry-tile__title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.memot-industry-tile__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--slate);
	font-size: 0.8125rem;
	line-height: 1.5;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

@media (max-width: 1100px) {

	.memot-industry-row {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--brand-bright) transparent;
	}

	.memot-industry-tile {
		flex: 0 0 clamp(9.5rem, 32vw, 12rem);
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {

	.memot-industry-tile {
		flex-basis: clamp(8.5rem, 68vw, 10.5rem);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* -------------------------------------------------------------------------- *
 * Corporate profile — details list beneath the stat row
 * -------------------------------------------------------------------------- */

.memot-profile-stats {
	margin-top: var(--wp--preset--spacing--70);
}

.memot-profile-details {
	margin: var(--wp--preset--spacing--80) 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--wp--preset--color--line);
}

.memot-profile-detail {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.memot-profile-detail:nth-child(odd) {
	padding-right: var(--wp--preset--spacing--60);
}

.memot-profile-detail:nth-child(even) {
	padding-left: var(--wp--preset--spacing--60);
	border-left: 1px solid var(--wp--preset--color--line);
}

.memot-profile-detail__term {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--leaf);
}

.memot-profile-detail__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {

	.memot-profile-details {
		grid-template-columns: 1fr;
	}

	.memot-profile-detail:nth-child(odd) {
		padding-right: 0;
	}

	.memot-profile-detail:nth-child(even) {
		padding-left: 0;
		border-left: 0;
	}
}

/* -------------------------------------------------------------------------- *
 * Reveal contract for About-specific targets (JS-gated, safe without it)
 * -------------------------------------------------------------------------- */

.memot-anim .memot-hero-stat,
.memot-anim .memot-timeline-item,
.memot-anim .memot-mission__panel,
.memot-anim .memot-vision__goal,
.memot-anim .memot-vision__banner,
.memot-anim .memot-value-card,
.memot-anim .memot-leader-card,
.memot-anim .memot-profile-detail,
.memot-anim .memot-industry-tile {
	opacity: 0;
	transform: translateY(28px);
	will-change: transform, opacity;
}

.memot-anim .memot-timeline-progress {
	transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {

	.memot-anim .memot-hero-stat,
	.memot-anim .memot-timeline-item,
	.memot-anim .memot-mission__panel,
	.memot-anim .memot-vision__goal,
	.memot-anim .memot-vision__banner,
	.memot-anim .memot-value-card,
	.memot-anim .memot-leader-card,
	.memot-anim .memot-profile-detail,
	.memot-anim .memot-industry-tile {
		opacity: 1;
		transform: none;
	}

	.memot-anim .memot-timeline-progress {
		transform: none;
	}
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

:root :where(a:where(:not(.wp-element-button)):hover) {
	text-decoration: none;
}

/* -------------------------------------------------------------------------- *
 * Scroll to top
 * -------------------------------------------------------------------------- */

/*
 * Printed once via wp_footer (functions.php) so it's present on every
 * template without editing each one. Hidden by default; memot-scroll-top.js
 * adds `.is-visible` once the page has scrolled past a full viewport and the
 * document is actually long enough to warrant it — pages that don't scroll
 * never see the button at all.
 */
.memot-to-top {
	position: fixed;
	right: clamp(1.25rem, 4vw, 2rem);
	bottom: clamp(1.25rem, 4vw, 2rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--memot-shadow-md);
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.75rem);
	pointer-events: none;
	transition:
		opacity 0.3s var(--memot-ease-out),
		transform 0.3s var(--memot-ease-out),
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}

.memot-to-top svg {
	width: 1.35rem;
	height: 1.35rem;
}

.memot-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.memot-to-top:hover,
.memot-to-top:focus-visible {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {

	.memot-to-top {
		transition: opacity 0.15s ease;
	}

	.memot-to-top.is-visible,
	.memot-to-top:hover,
	.memot-to-top:focus-visible {
		transform: none;
	}
}

@media (max-width: 480px) {

	.memot-to-top {
		width: 2.85rem;
		height: 2.85rem;
	}

	.memot-to-top svg {
		width: 1.2rem;
		height: 1.2rem;
	}
}