@import url('./foundation/fonts.css');
@import url('./foundation/tokens.css');
@import url('./foundation/reset.css');
@import url('./foundation/utilities.css');

body { background: var(--mero-canvas); color: var(--mero-ink); font-family: var(--mero-body); font-size: var(--ug-text-base); font-weight: var(--ug-weight-regular); line-height: var(--ug-leading-body); margin: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--mero-ink); font-family: var(--mero-heading); margin: 0 0 1rem; text-transform: none; }
h1 { font-size: var(--ug-type-h1); font-weight: var(--ug-weight-h1); letter-spacing: var(--ug-tracking-h1); line-height: var(--ug-leading-h1); }
h2 { font-size: var(--ug-type-h2); font-weight: var(--ug-weight-h2); letter-spacing: var(--ug-tracking-h2); line-height: var(--ug-leading-h2); }
h3 { font-size: var(--ug-type-h3); font-weight: var(--ug-weight-h2); letter-spacing: var(--ug-tracking-h3); line-height: var(--ug-leading-h3); }
h4, h5, h6 { font-size: var(--ug-type-h4); font-weight: var(--ug-weight-h2); letter-spacing: var(--ug-tracking-h3); line-height: var(--ug-leading-h3); }
/* Mega menu titles look like headings but are plain text, so the menu (printed twice, desktop and mobile) adds nothing to the page outline before the h1. */
.mero-mega-menu__title, .mero-mega-menu__group-title, .mero-mega-menu__featured-title { color: var(--mero-ink); font-family: var(--mero-heading); font-weight: var(--ug-weight-h2); line-height: var(--ug-leading-h3); margin: 0 0 1rem; text-transform: none; }
a { color: inherit; }
.mero-breadcrumbs { color: var(--mero-muted); font-size: var(--ug-text-sm); margin-bottom: 1.5rem; }.mero-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }.mero-breadcrumbs__item { align-items: center; display: inline-flex; gap: .35rem; }.mero-breadcrumbs a { color: inherit; text-decoration: none; }.mero-breadcrumbs a:hover, .mero-breadcrumbs a:focus-visible { color: var(--mero-brand-hover); text-decoration: underline; }.mero-breadcrumbs [aria-current="page"] { color: var(--mero-ink); }
.mero-container { margin-inline: auto; max-width: var(--mero-content-width); padding-inline: var(--mero-gutter); width: 100%; }
.mero-container--narrow { max-width: 700px; }.mero-container--wide { max-width: var(--mero-wide-width); }.mero-container--full { max-width: none; }
.mero-header { background: var(--mero-canvas); border-bottom: 1px solid var(--mero-border); position: relative; z-index: 2; }
.mero-header__inner { align-items: center; display: flex; gap: 2rem; justify-content: space-between; min-height: 5.5rem; }
.mero-brand__name, .mero-footer__brand { color: var(--mero-ink); font-family: var(--mero-heading); font-size: 2.25rem; font-weight: var(--ug-weight-bold); text-decoration: none; text-transform: uppercase; }
.custom-logo-link img { display: block; max-height: 3.5rem; width: auto; }
.mero-nav__list, .mero-footer__menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }.mero-nav__list .menu-item { position: relative; }
.mero-nav__list a, .mero-footer__menu a { text-decoration: none; }.mero-nav__list a:hover, .mero-nav__list a:focus-visible, .mero-nav__list .current-menu-item > a, .mero-nav__list .current-menu-ancestor > a { color: var(--mero-brand-hover); }.mero-nav__list .sub-menu { background: var(--mero-surface); border: 1px solid var(--mero-border); box-shadow: 0 .75rem 1.5rem rgb(17 17 17 / 12%); display: none; left: -.75rem; list-style: none; margin: .75rem 0 0; min-width: 13rem; padding: .75rem; position: absolute; top: 100%; z-index: 10; }.mero-nav__list .sub-menu .menu-item + .menu-item { margin-top: .5rem; }.mero-nav__list .menu-item:hover > .sub-menu, .mero-nav__list .menu-item:focus-within > .sub-menu { display: block; }
.mero-mega-nav { align-self: stretch; display: flex; }
.mero-mega-nav__list { align-items: stretch; }
.mero-mega-nav__item { position: static !important; }
.mero-mega-nav__toggle { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font: inherit; font-weight: inherit; padding: 0; }
.mero-mega-nav__toggle::after { border-bottom: 1.5px solid currentcolor; border-right: 1.5px solid currentcolor; content: ""; height: .45rem; margin: -.2rem 0 0 .45rem; transform: rotate(45deg); width: .45rem; }
.mero-mega-nav__item.is-open .mero-mega-nav__toggle::after { margin-top: .2rem; transform: rotate(225deg); }
.mero-mega-menu { background: var(--mero-canvas); border-top: 1px solid var(--mero-border); box-shadow: 0 1.125rem 2.5rem rgb(17 17 17 / 14%); left: 0; opacity: 0; padding-block: 1.875rem; pointer-events: none; position: absolute; right: 0; top: 100%; transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; visibility: hidden; }
.mero-mega-nav__item.is-open .mero-mega-menu { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.mero-mega-menu__intro { border-bottom: 1px solid var(--mero-border); display: grid; gap: 2rem; grid-template-columns: 13rem minmax(0, 1fr); margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
.mero-mega-menu__intro h2, .mero-mega-menu__intro p { margin: 0; }
.mero-mega-menu__intro h2 { font-size: var(--ug-type-h3); }
.mero-mega-menu__intro div > p { color: var(--mero-muted); margin-top: .5rem; max-width: 42rem; }
.mero-mega-menu__eyebrow { color: var(--mero-brand-hover); font-family: var(--mero-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); margin: 0; text-transform: uppercase; }
.mero-mega-menu__columns { display: grid; gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(16rem, 1.3fr); }
.mero-mega-menu :is(.mero-mega-menu__group-title, .mero-mega-menu__featured-title) { font-size: var(--ug-text-xs); margin: 0 0 .875rem; }
.mero-mega-menu ul { list-style: none; margin: 0; padding: 0; }
.mero-mega-menu li + li { margin-top: .625rem; }
.mero-mega-menu a { color: var(--mero-muted); text-decoration: none; }
.mero-mega-menu a:hover, .mero-mega-menu a:focus-visible { color: var(--mero-brand-hover); text-decoration: underline; text-underline-offset: .2em; }
.mero-mega-menu__latest { background: var(--mero-surface); border-radius: var(--mero-radius); padding: 1.25rem; }
.mero-mega-menu__latest > p { color: var(--mero-muted); font-size: var(--ug-text-sm); margin: 0; }
.mero-mega-post + .mero-mega-post { margin-top: 1rem; }
.mero-mega-post a { align-items: center; display: grid; gap: .875rem; grid-template-columns: 4.5rem minmax(0, 1fr); }
.mero-mega-post img { border-radius: calc(var(--mero-radius) * .7); display: block; height: 3.75rem; object-fit: cover; width: 4.5rem; }
.mero-mega-post strong, .mero-mega-post small { display: block; }
.mero-mega-post strong { color: var(--mero-ink); line-height: 1.3; }
.mero-mega-post small { color: var(--mero-muted); font-size: var(--ug-text-xs); margin-top: .2rem; }
.mero-mega-menu__view-all { display: inline-block; font-family: var(--mero-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); margin-top: 1rem; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .mero-mega-menu { transition: none; } }

/* Navigation treatment inspired by contemporary product-navigation patterns. */
.site .mero-header, body .mero-header { border-bottom: 0; box-shadow: 0 1px 0 rgb(23 52 45 / 8%); position: relative; z-index: 100; }
.mero-header .mero-header__inner { gap: clamp(1rem, 2vw, 2.25rem); min-height: 5rem; }
.mero-brand__name { font-size: 1.75rem; letter-spacing: -.04em; text-transform: none; }
.mero-header .mero-mega-nav__list { gap: clamp(.85rem, 1.6vw, 1.5rem); }
.mero-mega-nav__list > .menu-item > a, .mero-mega-nav__toggle { color: var(--mero-ink); font-size: var(--ug-text-sm); font-weight: var(--ug-weight-bold); min-height: 5rem; white-space: nowrap; }
.mero-mega-nav__list > .menu-item > a:hover, .mero-mega-nav__toggle:hover, .mero-mega-nav__item.is-open .mero-mega-nav__toggle { color: var(--mero-brand-hover); }
.mero-header .mero-mega-nav__toggle::after { border-width: 1px; height: .35rem; margin: -.18rem 0 0 .4rem; transition: transform .18s ease; width: .35rem; }
.mero-header .mero-mega-nav__item.is-open .mero-mega-nav__toggle::after { margin-top: .15rem; }
.mero-header__cta.mero-button { font: var(--ug-button-font-compact); min-height: var(--ug-button-height-compact); padding: var(--ug-button-padding-compact); white-space: nowrap; }
.mero-header .mero-mega-menu { background: transparent; border: 0; box-shadow: none; left: 0; padding: .75rem var(--mero-gutter) 0; right: 0; top: 100%; }
.mero-mega-menu > .mero-container { background: var(--mero-canvas); border: 1px solid rgb(23 52 45 / 10%); border-radius: 1.25rem; box-shadow: 0 1.25rem 3.5rem rgb(23 52 45 / 16%); max-width: calc(var(--mero-wide-width) - (var(--mero-gutter) * 2)); padding: 2rem; }
.mero-header .mero-mega-menu__intro { border: 0; gap: 3rem; grid-template-columns: minmax(10rem, .65fr) minmax(0, 1.8fr); margin-bottom: 1.75rem; padding-bottom: 0; }
.mero-header .mero-mega-menu__intro h2 { font-size: var(--ug-type-h3); letter-spacing: var(--ug-tracking-h3); line-height: var(--ug-leading-h3); }
.mero-header .mero-mega-menu__intro div > p { font-size: var(--ug-text-base); line-height: 1.5; margin-top: .75rem; max-width: 35rem; }
.mero-header .mero-mega-menu__eyebrow { align-self: start; background: var(--mero-surface); border-radius: 999px; color: var(--mero-brand-hover); display: inline-flex; font-family: var(--ug-font-heading); font-size: var(--ug-text-xs); letter-spacing: var(--ug-tracking-label); padding: .45rem .7rem; width: fit-content; }
.mero-header .mero-mega-menu__columns { border-top: 1px solid rgb(23 52 45 / 10%); gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(16rem, 1.15fr); padding-top: 1.5rem; }
.mero-mega-menu__column { border-right: 1px solid rgb(23 52 45 / 8%); padding: 0 1.5rem; }.mero-mega-menu__column:first-child { padding-left: 0; }
.mero-header .mero-mega-menu :is(.mero-mega-menu__group-title, .mero-mega-menu__featured-title) { font-family: var(--ug-font-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); text-transform: uppercase; }
.mero-header .mero-mega-menu li + li { margin-top: .75rem; }.mero-header .mero-mega-menu a { color: var(--mero-ink); font-size: var(--ug-text-sm); }
.mero-header .mero-mega-menu__latest { background: #f0f8f5; border-radius: .9rem; margin-left: 1.5rem; padding: 1.25rem; }.mero-header .mero-mega-menu__latest .mero-mega-menu__featured-title { color: var(--mero-brand-hover); }
.mero-header .mero-mega-menu__featured { background: linear-gradient(145deg, #e7f8ef, #f7fcf8); border: 1px solid rgb(23 52 45 / 10%); display: flex; flex-direction: column; }.mero-header .mero-mega-menu__featured-eyebrow { color: var(--mero-brand-hover); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); margin: 0 0 .55rem; text-transform: uppercase; }.mero-header .mero-mega-menu__featured .mero-mega-menu__featured-title { font-family: var(--mero-heading); font-size: var(--ug-type-card-title); line-height: var(--ug-leading-h3); margin: 0; }.mero-header .mero-mega-menu__featured > p:not(.mero-mega-menu__featured-eyebrow) { color: var(--mero-muted); font-size: var(--ug-text-sm); line-height: 1.45; margin: .65rem 0 0; }.mero-header .mero-mega-menu__featured .mero-mega-menu__view-all { font-weight: var(--ug-weight-heading); margin-top: auto; padding-top: 1rem; }
.mero-header .mero-mega-post a { font-size: var(--ug-text-sm); }.mero-header .mero-mega-post img { border-radius: .5rem; }.mero-header .mero-mega-menu__view-all { color: var(--mero-brand-hover); font-family: var(--mero-body); font-size: var(--ug-text-sm); letter-spacing: 0; text-transform: none; }

/* Keep the desktop panel concise while retaining every navigation option. */
@media (min-width: 1024px) { .mero-header .mero-mega-menu { max-width: 100vw; overflow: clip; transform: none; transition: clip-path .28s cubic-bezier(.37, 0, .63, 1), opacity .2s ease-in-out, visibility .2s ease-in-out; clip-path: inset(0 0 0 100%); }.mero-mega-nav__item.is-open .mero-mega-menu { clip-path: inset(0); transform: none; }.mero-mega-menu > .mero-container { max-width: min(calc(var(--mero-wide-width) - (var(--mero-gutter) * 2)), 100%); padding: 1.25rem 1.5rem; transform: translateX(.75rem); transition: transform .28s cubic-bezier(.37, 0, .63, 1); }.mero-mega-nav__item.is-open .mero-mega-menu > .mero-container { transform: translateX(0); }.mero-header .mero-mega-menu__intro { gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 3.15fr); margin-bottom: 1rem; }.mero-header .mero-mega-menu__intro h2 { font-size: var(--ug-type-h3); }.mero-header .mero-mega-menu__intro div > p { font-size: var(--ug-text-sm); line-height: 1.4; margin-top: .45rem; }.mero-header .mero-mega-menu__eyebrow { padding: .3rem .55rem; }.mero-header .mero-mega-menu__columns { padding-top: 1rem; }.mero-mega-menu__column, .mero-mega-menu__latest { min-width: 0; }.mero-mega-menu__column { padding-inline: 1rem; }.mero-header .mero-mega-menu :is(.mero-mega-menu__group-title, .mero-mega-menu__featured-title) { margin-bottom: .6rem; }.mero-header .mero-mega-menu li + li { margin-top: .45rem; }.mero-header .mero-mega-menu a { font-size: var(--ug-text-sm); overflow-wrap: anywhere; }.mero-header .mero-mega-menu__latest { margin-left: 1rem; padding: 1rem; }.mero-mega-post + .mero-mega-post { margin-top: .7rem; }.mero-header .mero-mega-menu__view-all { margin-top: .7rem; } }
@media (min-width: 1024px) { .mero-header .mero-mega-menu, .mero-mega-nav__item.is-open .mero-mega-menu { clip-path: none; transform: none; transition: opacity .2s ease-in-out, visibility .2s ease-in-out; }.mero-mega-menu > .mero-container { transform: translateX(1.5rem); transition: transform .32s cubic-bezier(.37, 0, .63, 1); }.mero-mega-nav__item.is-open .mero-mega-menu > .mero-container { transform: translateX(0); } }
@media (max-width: 1150px) and (min-width: 768px) { .mero-header__inner { gap: 1rem; }.mero-mega-nav__list { gap: .8rem; }.mero-mega-nav__list > .menu-item > a, .mero-mega-nav__toggle { font-size: var(--ug-text-xs); }.mero-header__cta { display: none; } }
@media (max-width: 767px) { .mero-mobile-nav .mero-mega-menu { padding-top: .5rem; }.mero-mobile-nav .mero-mega-menu > .mero-container { border: 0; border-radius: 0; box-shadow: none; max-width: none; padding: 1rem 0; }.mero-mobile-nav .mero-mega-menu__intro { gap: 0; }.mero-mobile-nav .mero-mega-menu__columns { border-top: 0; padding-top: 0; }.mero-mobile-nav .mero-mega-menu__column { border: 0; padding: 0; }.mero-mobile-nav .mero-mega-menu__column + .mero-mega-menu__column { margin-top: 1.5rem; }.mero-mobile-nav .mero-mega-menu__latest { margin-left: 0; } }

/* Airy desktop bar and mobile drill-down navigation. */
body .mero-header { background: #c8ffa9; color: var(--mero-ink); box-shadow: inset 0 1px 0 rgb(23 52 45 / 28%), 0 1px 0 rgb(23 52 45 / 16%); }
body .mero-header { position: sticky; top: 0; }.admin-bar .mero-header { top: 32px; }@media (max-width: 782px) { .admin-bar .mero-header { top: 46px; } }
body .mero-header .mero-header__inner { max-width: none; padding-inline: clamp(2rem, 4vw, 4rem); }
.mero-header .mero-brand__name { color: #008f70; font-weight: var(--ug-weight-bold); }
body .mero-header .mero-mega-nav__list { gap: clamp(.75rem, 1.25vw, 1.35rem); }
.mero-header .mero-mega-nav__list > .menu-item > a, .mero-header .mero-mega-nav__toggle { font-size: var(--ug-text-md); font-weight: var(--ug-weight-semibold); }
.mero-header .mero-mega-nav__list > .menu-item { align-items: stretch; display: flex; }
.mero-header .mero-mega-nav__list > .menu-item > a { align-items: center; display: flex; }
.mero-header .mero-header__cta.mero-button { background: transparent; border-color: var(--ug-button-secondary-border); box-shadow: none; color: var(--ug-button-secondary-text); }
.mero-header .mero-header__cta.mero-button:hover, .mero-header .mero-header__cta.mero-button:focus-visible { background: var(--ug-button-primary-bg); border-color: transparent; color: var(--ug-button-primary-text); }
.mero-mobile-nav__back { align-items: center; background: transparent; border: 0; color: var(--mero-ink); cursor: pointer; display: none; font: var(--ug-weight-bold) var(--ug-text-sm)/1 var(--mero-body); gap: .5rem; padding: .5rem 0 1.25rem; }.mero-mobile-nav__back::before { content: "←"; font-size: 1.2em; }
body .mero-mobile-nav summary::after { display: none; }body .mero-mobile-nav summary { gap: .65rem; }.mero-mobile-nav__burger { display: grid; gap: .26rem; width: 1.35rem; }.mero-mobile-nav__burger i { background: currentcolor; display: block; height: 2px; transform-origin: center; transition: opacity .18s ease, transform .18s ease; width: 100%; }.mero-mobile-nav[open] .mero-mobile-nav__burger i:first-child { transform: translateY(.33rem) rotate(45deg); }.mero-mobile-nav[open] .mero-mobile-nav__burger i:nth-child(2) { opacity: 0; }.mero-mobile-nav[open] .mero-mobile-nav__burger i:last-child { transform: translateY(-.33rem) rotate(-45deg); }
@media (max-width: 1023px) { .mero-header__inner > .mero-nav { display: none; }.mero-header__inner { min-height: 4.75rem; }.mero-mobile-nav { display: block; margin-left: auto; order: 2; }.mero-mobile-nav summary { font-size: var(--ug-text-md); text-transform: none; }.mero-mobile-nav nav { background: #c8ffa9; border-top: 1px solid rgb(23 52 45 / 16%); max-height: calc(100vh - 4.75rem); overflow-y: auto; padding: 1.25rem var(--mero-gutter) 2rem; }.mero-mobile-nav .mero-mega-nav { display: block; }.mero-mobile-nav .mero-mega-nav__list { display: block; }.mero-mobile-nav .mero-mega-nav__list > .menu-item + .menu-item { border-top: 1px solid rgb(23 52 45 / 14%); }.mero-mobile-nav .mero-mega-nav__list > .menu-item > a, .mero-mobile-nav .mero-mega-nav__toggle { font-size: var(--ug-text-md); justify-content: space-between; min-height: 3.75rem; width: 100%; }.mero-mobile-nav .mero-mega-menu { box-shadow: none; display: none; opacity: 1; padding: 0; pointer-events: auto; position: static; transform: none; visibility: visible; }.mero-mobile-nav .mero-mega-nav__item.is-open .mero-mega-menu { display: block; }.mero-mobile-nav .mero-mega-menu > .mero-container { border: 0; border-radius: 0; box-shadow: none; max-width: none; padding: 0; }.mero-mobile-nav .mero-mega-menu__intro { display: block; }.mero-mobile-nav .mero-mega-menu__eyebrow { margin-bottom: .75rem; }.mero-mobile-nav .mero-mega-menu__columns { border-top: 0; grid-template-columns: 1fr; padding-top: 0; }.mero-mobile-nav .mero-mega-menu__column { border: 0; padding: 0; }.mero-mobile-nav .mero-mega-menu__column + .mero-mega-menu__column { margin-top: 1.75rem; }.mero-mobile-nav .mero-mega-menu__latest { margin: 1.75rem 0 0; }.mero-mobile-nav.is-drilling .mero-mobile-nav__back { display: inline-flex; }.mero-mobile-nav.is-drilling .mero-mega-nav__list > .menu-item:not(.is-open) { display: none; }.mero-mobile-nav.is-drilling .mero-mega-nav__item.is-open > .mero-mega-nav__toggle { display: none; }.mero-header__cta { display: none; } }
@media (max-width: 1023px) { .mero-header__inner { flex-wrap: nowrap; }.mero-mobile-nav { position: static; }.mero-mobile-nav summary { align-items: center; display: flex; min-height: 3rem; }.mero-mobile-nav nav { left: 0; right: 0; top: 100%; width: 100%; }.mero-mobile-nav .mero-mega-nav__list > .menu-item { display: block; }.mero-mobile-nav .mero-mega-nav__list > .menu-item > a { display: flex; }.mero-mobile-nav.is-drilling .mero-mega-nav__list > .mero-mega-nav__item.is-open { border-top: 0; }.mero-mobile-nav.is-drilling .mero-mega-menu__intro { margin-bottom: 1.5rem; }.mero-mobile-nav.is-drilling .mero-mega-menu__latest { display: none; } }
@media (max-width: 1023px) { .mero-mobile-nav[open] summary { color: var(--mero-ink); position: relative; z-index: 1002; }.mero-mobile-nav[open] > nav { background: #c8ffa9; bottom: 0; left: 0; max-height: none; padding: 1.25rem var(--mero-gutter) 2rem; position: fixed; right: 0; top: var(--mero-mobile-nav-top, 5rem); width: 100%; z-index: 1001; }.mero-mobile-nav .mero-mega-nav { border: 0; max-height: none; overflow: visible; padding: 0; position: static; } }
@media (max-width: 1023px) { .mero-mobile-nav nav, .mero-mobile-nav .mero-mega-nav, .mero-mobile-nav .mero-mega-menu { background-color: #c8ffa9; opacity: 1; }.mero-mobile-nav[open] nav { background-color: #c8ffa9; } }
@media (max-width: 1023px) { .mero-mobile-nav.is-drilling .mero-mobile-nav__back { align-items: center; background: #fff; border: 1px solid rgb(23 52 45 / 22%); border-radius: .6rem; display: inline-flex; font-size: var(--ug-text-sm); margin: 0 0 1rem; padding: .7rem .9rem; position: sticky; top: 0; z-index: 1; } }
@media (max-width: 1400px) and (min-width: 1024px) { body .mero-header .mero-mega-nav__list { gap: 1rem; }.mero-header .mero-mega-nav__list > .menu-item > a, .mero-header .mero-mega-nav__toggle { font-size: var(--ug-text-sm); }.mero-header .mero-header__cta { display: none; } }
@media (min-width: 1024px) { .mero-mobile-nav { display: none; } }.mero-mobile-nav summary { cursor: pointer; font-family: var(--mero-heading); font-size: var(--ug-text-lg); font-weight: var(--ug-weight-semibold); list-style: none; text-transform: uppercase; }.mero-mobile-nav summary::-webkit-details-marker { display: none; }.mero-mobile-nav summary::after { content: "+"; margin-left: .5rem; }.mero-mobile-nav[open] summary::after { content: "−"; }.mero-mobile-nav nav { background: var(--mero-canvas); border-top: 1px solid var(--mero-border); left: 0; padding: 1.25rem var(--mero-gutter); position: absolute; right: 0; top: 100%; }.mero-mobile-nav__list { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }.mero-mobile-nav__list a { text-decoration: none; }
/* Buttons: the shared recipe from tokens.css. Variants change colour only; "small" is the compact size. */
.mero-button { align-items: center; background: var(--ug-button-primary-bg); border: 1px solid transparent; border-radius: var(--ug-control-radius); color: var(--ug-button-primary-text); display: inline-flex; font: var(--ug-button-font); gap: .5rem; justify-content: center; letter-spacing: 0; min-height: var(--ug-button-height); padding: var(--ug-button-padding); text-decoration: none; text-transform: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }.mero-button--small { font: var(--ug-button-font-compact); min-height: var(--ug-button-height-compact); padding: var(--ug-button-padding-compact); }.mero-button--outline { background: transparent; border-color: var(--ug-button-secondary-border); color: var(--ug-button-secondary-text); }.mero-button:hover, .mero-button:focus-visible { background: var(--ug-button-primary-hover-bg); color: var(--ug-button-primary-hover-text); }.mero-button--outline:hover, .mero-button--outline:focus-visible { background: var(--ug-button-secondary-hover-bg); color: var(--ug-button-secondary-text); }.mero-button:focus-visible { outline: 2px solid var(--mero-ink); outline-offset: 3px; }
/* Centre the logo and desktop navigation together as one visual group. */
.mero-header .mero-header__inner { justify-content:center; }.mero-header__primary { align-items:center; display:flex; gap:clamp(1.25rem,2.5vw,3rem); justify-content:center; }.mero-header__primary .mero-mega-nav { flex:0 1 auto; }.mero-header__inner > .mero-mobile-nav { margin-left:0; }
@media (min-width: 1401px) { .mero-header .mero-header__inner { display:flex; justify-content:center; }.mero-header .mero-brand,.mero-header .mero-mega-nav { justify-self:auto; } }
@media (max-width: 1023px) { .mero-header .mero-header__inner { justify-content:space-between; }.mero-header__primary > .mero-nav { display:none; }.mero-header__primary { gap:0; }.mero-header__inner > .mero-mobile-nav { margin-left:auto; } }
@media (max-width: 374px) { body .mero-header .mero-header__inner { padding-inline: var(--mero-gutter); } }
.mero-footer { background: var(--mero-ink); color: #fff; margin-top: 5rem; padding-block: 3rem; }.mero-footer__inner { align-items: start; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }.mero-footer__brand { color: #fff; }.mero-footer p { margin-bottom: 0; max-width: 28rem; }.mero-footer a { color: #fff; }.mero-footer a:hover, .mero-footer a:focus-visible { color: var(--mero-brand); }.mero-footer__menu { flex-wrap: wrap; }.mero-footer__menu a { display: inline-block; }.mero-footer__social-links { display: flex; flex-wrap: wrap; gap: .75rem 1rem; list-style: none; margin: 0; padding: 0; }.mero-footer__social-links a { font-family: var(--mero-heading); font-weight: var(--ug-weight-bold); text-transform: uppercase; }
.mero-eyebrow { color: var(--mero-brand-hover); font-family: var(--mero-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); line-height: 1.3; letter-spacing: var(--ug-tracking-label); margin: 0 0 .5rem; text-transform: uppercase; }.mero-section-header { margin-bottom: 2rem; }.mero-section-header__description { max-width: 42rem; }.mero-section-header__description > *:last-child { margin-bottom: 0; }
.mero-archive { padding-block: 5rem; }
/* The site's one pagination (mero_pagination): archives, search, directories and seller shops. Colours are variables so dark pages can restyle it. */
.mero-pagination { --mero-pagination-ink: var(--ug-text, #14201e); --mero-pagination-muted: var(--ug-text-muted, #52645f); --mero-pagination-bg: var(--ug-surface-white, #fff); --mero-pagination-border: var(--ug-border, #cad8d2); --mero-pagination-hover: var(--ug-deep, #063f36); --mero-pagination-current-bg: var(--ug-deep, #063f36); --mero-pagination-current-ink: #fff; display: flex; justify-content: center; margin-top: 3rem; }
.mero-pagination ul.page-numbers { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
.mero-pagination li { margin: 0; }
.mero-pagination .page-numbers:is(a, span) { align-items: center; background: var(--mero-pagination-bg); border: 1px solid var(--mero-pagination-border); border-radius: var(--ug-control-radius, .5rem); color: var(--mero-pagination-ink); display: inline-flex; font-family: var(--ug-font-heading, inherit); font-size: var(--ug-text-sm); font-weight: var(--ug-weight-semibold, 600); gap: .5rem; justify-content: center; line-height: 1; min-height: 2.75rem; min-width: 2.75rem; padding-inline: .875rem; text-decoration: none; transition: background-color .16s, border-color .16s, color .16s; }
.mero-pagination a.page-numbers:hover { border-color: var(--mero-pagination-hover); color: var(--mero-pagination-hover); }
.mero-pagination a.page-numbers:focus-visible { outline: 3px solid var(--ug-focus-ring, #087861); outline-offset: 2px; }
.mero-pagination .page-numbers.current { background: var(--mero-pagination-current-bg); border-color: var(--mero-pagination-current-bg); color: var(--mero-pagination-current-ink); font-weight: var(--ug-weight-bold, 700); }
.mero-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--mero-pagination-muted); min-width: 1.25rem; padding-inline: 0; }
.mero-pagination .page-numbers:is(.prev, .next) { padding-inline: 1rem; }
.mero-pagination__arrow { border: solid currentColor; border-width: 0 2px 2px 0; display: inline-block; flex: none; height: .5rem; width: .5rem; }
.mero-pagination__arrow--prev { margin-left: .2rem; transform: rotate(135deg); }
.mero-pagination__arrow--next { margin-right: .2rem; transform: rotate(-45deg); }
@media (max-width: 560px) { .mero-pagination ul.page-numbers { gap: .375rem; } .mero-pagination .page-numbers:is(.prev, .next) { padding-inline: 0; } .mero-pagination__text { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } }
@media (prefers-reduced-motion: reduce) { .mero-pagination .page-numbers { transition: none; } }

.mero-page { padding-block: 5rem; }.mero-page__content > img { border-radius: var(--mero-radius); height: auto; margin-bottom: 2rem; width: 100%; }.mero-page__content > * + * { margin-top: 1.25rem; }
.mero-not-found { padding-block: clamp(5rem, 12vw, 9rem); }.mero-video-link { background: var(--mero-ink); border-radius: var(--mero-radius); color: #fff; display: block; font-family: var(--mero-heading); font-size: var(--ug-text-2xl); font-weight: var(--ug-weight-bold); padding: clamp(3rem, 8vw, 7rem); text-align: center; text-decoration: none; text-transform: uppercase; }
.mero-post-archive { padding-block: 5rem; }.mero-archive__header { margin-bottom: 3rem; max-width: 44rem; }.mero-post-grid { display: grid; gap: 1.875rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }.mero-post-card { background: var(--mero-surface); border-radius: var(--mero-radius); overflow: hidden; }.mero-post-card__link { color: inherit; display: block; height: 100%; text-decoration: none; }.mero-post-card img { aspect-ratio: 4 / 3; display: block; object-fit: cover; transition: transform .25s ease; width: 100%; }.mero-post-card__content { padding: 1.5rem; }.mero-post-card__meta { color: var(--mero-muted); font-size: var(--ug-text-sm); margin: 0 0 .5rem; }.mero-post-card h2, .mero-post-card h3 { margin: 0; }.mero-post-card a:hover h2, .mero-post-card a:hover h3, .mero-post-card a:focus-visible h2, .mero-post-card a:focus-visible h3 { color: var(--mero-brand-hover); }.mero-post-card a:hover img { transform: scale(1.03); }@media (prefers-reduced-motion: reduce) { .mero-post-card img { transition: none; } }
.mero-home__hero { background: var(--mero-ink); color: #fff; min-height: min(48rem, 78vh); overflow: hidden; position: relative; }.mero-home__hero-media, .mero-home__hero-media::after { inset: 0; position: absolute; }.mero-home__hero-media::after { background: linear-gradient(90deg, rgb(17 17 17 / 88%), rgb(17 17 17 / 28%)); content: ""; }.mero-home__hero-media img { height: 100%; object-fit: cover; width: 100%; }.mero-home__hero-content { padding-block: clamp(6rem, 16vw, 12rem); position: relative; z-index: 1; }.mero-home__hero h1 { color: #fff; max-width: 48rem; }.mero-home__hero-text { font-size: var(--ug-text-lg); max-width: 38rem; }.mero-home__hero-text p { margin-block: 0 1.5rem; }.mero-home__adventures, .mero-home__posts { padding-block: 6rem; }.mero-home__groups { background: var(--mero-surface); padding-block: 6rem; }.mero-home__groups p:not(.mero-eyebrow) { max-width: 40rem; }.mero-home-hero { align-items: center; background-color: var(--mero-ink); background-image: linear-gradient(rgb(17 17 17 / 58%), rgb(17 17 17 / 58%)), var(--mero-home-hero-image, none); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: var(--mero-radius); color: #fff; display: flex; justify-content: center; min-height: 820px; overflow: hidden; padding: 9.375rem 1.875rem; text-align: center; }.mero-home-hero__content { max-width: 72rem; }.mero-home-hero__eyebrow { font-family: var(--ug-font-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); line-height: 1.2; margin: 0 0 1.25rem; text-transform: uppercase; }.mero-home-hero h1 { color: #fff; font-size: var(--ug-text-display); letter-spacing: var(--ug-tracking-h1); line-height: var(--ug-leading-h1); max-width: none; }.mero-home-hero__cta.mero-button { background: var(--mero-brand); border-color: var(--mero-brand); border-style: solid; color: #fff; }.mero-home-hero__cta.mero-button:hover, .mero-home-hero__cta.mero-button:focus-visible { background: var(--mero-brand-hover); border-color: var(--mero-brand-hover); color: #fff; }

/* Editorial post layout: opening copy sits alongside the featured image, then a sticky reading map supports the article. */
.mero-single-post { padding-block: clamp(3rem, 6vw, 5rem); }
.mero-single-post__hero { align-items: stretch; display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(22rem, .9fr); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mero-single-post__hero-copy { align-self: center; }
.mero-single-post__header { margin-bottom: 1.5rem; }
.mero-single-post__header h1 { font-size: var(--ug-type-h1); max-width: 100%; }
.mero-single-post__intro { color: var(--mero-ink); font-size: var(--ug-text-prose); line-height: var(--ug-leading-body); max-width: 42rem; }
.mero-single-post__intro p { margin: 0; }
.mero-single-post__intro p + p { margin-top: 1rem; }
.mero-single-post__hero-media { min-height: 24rem; overflow: hidden; }
.mero-single-post__hero-media img { border-radius: var(--mero-radius); display: block; height: 100%; object-fit: cover; width: 100%; }
.mero-single-post__body { align-items: start; display: grid; gap: clamp(2rem, 4vw, 4rem); }
.mero-single-post__toc { min-width: 0; }
.mero-single-post__toc-mobile { display: none; }
.mero-single-post__toc-inner { box-shadow: inset 2px 0 0 var(--mero-border); position: sticky; top: calc(6rem + 1rem); }
.mero-single-post__toc p { color: var(--mero-brand-hover); font-family: var(--mero-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); margin: 0 0 .75rem; padding-left: 1rem; text-transform: uppercase; }
.mero-single-post__toc ol { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.mero-single-post__toc a { color: var(--mero-muted); display: block; font-size: var(--ug-text-sm); line-height: 1.35; padding: .15rem 0 .15rem 1rem; text-decoration: none; }
.mero-single-post__toc a:hover, .mero-single-post__toc a:focus-visible { color: var(--mero-brand-hover); text-decoration: underline; text-underline-offset: .2em; }
.mero-single-post__toc a.is-active { color: var(--mero-brand-hover); font-weight: var(--ug-weight-bold); }
.mero-single-post__toc-inner a.is-active { box-shadow: inset 2px 0 0 var(--mero-brand-hover); }
.mero-single-post__toc-inner a:focus-visible { outline-offset: -3px; }
.mero-single-post__toc-level-3 { padding-left: .75rem; }
.mero-single-post__toc-level-4, .mero-single-post__toc-level-5, .mero-single-post__toc-level-6 { padding-left: 1.5rem; }
.mero-single-post__content { min-width: 0; }
.mero-single-post__content p, .mero-single-post__content :where(li, td, th) { font-size: var(--ug-text-prose); }
.mero-single-post__content > * + * { margin-top: 1.35rem; }
.mero-single-post__content h2, .mero-single-post__content h3, .mero-single-post__content h4, .mero-single-post__content h5, .mero-single-post__content h6 { scroll-margin-top: 7rem; }
.mero-single-post__content h2 { font-size: var(--ug-type-h2); line-height: var(--ug-leading-h2); margin-top: 4rem; }
.mero-single-post__content h3 { font-size: var(--ug-type-h3); line-height: var(--ug-leading-h3); margin-top: 2.5rem; }
.mero-single-post__content > :first-child { margin-top: 0; }
.mero-single-post__content .wp-block-table, .mero-single-post__content > table { margin-inline: 0; overflow-x: auto; }
.mero-single-post__content table { border: 1px solid var(--mero-border); border-collapse: separate; border-radius: var(--mero-radius); border-spacing: 0; width: 100%; }
.mero-single-post__content th { background: var(--mero-surface); color: var(--mero-ink); font-family: var(--mero-heading); font-size: var(--ug-text-sm); font-weight: var(--ug-weight-bold); padding: .75rem 1rem; text-align: left; }
.mero-single-post__content td { border-top: 1px solid var(--mero-border); padding: .75rem 1rem; vertical-align: top; }
.mero-single-post__content td:first-child { color: var(--mero-ink); font-weight: var(--ug-weight-semibold); white-space: nowrap; }
@media (max-width: 767px) { .mero-single-post__content td:first-child { white-space: normal; } }

/* Guides are as wide as the header's logo-to-menu group, like profiles. The contents list floats in the left margin;
   where that margin can't hold the list and a 3rem gap, the article moves over to make room. */
@media (min-width: 768px) {
  .mero-single-post > article, .mero-post-archive > .mero-container { max-width: none; padding-inline: 0; width: min(100% - 2rem, var(--mero-header-width, 1240px)); }
  .mero-single-post > article { --mero-guide-margin: var(--mero-header-start, calc((100vw - 100%) / 2)); }
  .mero-single-post__body { display: block; position: relative; }
  .mero-single-post__toc { bottom: 0; inset-inline-start: calc(1rem - var(--mero-guide-margin)); position: absolute; top: 0; width: clamp(13rem, calc(var(--mero-guide-margin) - 4rem), 17.25rem); }
  .mero-single-post__toc-inner { max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: none; }
  .mero-single-post__toc-inner::-webkit-scrollbar { display: none; }
  .mero-single-post__toc-inner ol { gap: .6rem; }
  .mero-single-post__content, .mero-single-post__hero, .mero-single-post > article > .mero-breadcrumbs { margin-inline-start: max(0px, calc(17rem - var(--mero-guide-margin))); }
}
/* Too narrow for the intro and photo side by side once the article has moved over for the contents list. */
@media (min-width: 768px) and (max-width: 1099px) { .mero-single-post__hero { grid-template-columns: minmax(0, 1fr); } .mero-single-post__hero-media { min-height: 16rem; } }

/* FAQ disclosure styling mirrors the supplied accordion: fine separators, an outlined plus/minus control, and one answer at a time. */
.mero-faqs { border-top: 1px solid var(--mero-border); }
.mero-faqs details { border-bottom: 1px solid var(--mero-border); }
.mero-faqs summary { color: var(--mero-muted); cursor: pointer; font-family: var(--mero-body); font-size: var(--ug-text-prose); font-weight: var(--ug-weight-regular); list-style: none; padding: 1.25rem 3rem 1.25rem 0; position: relative; transition: color .2s ease; }
.mero-faqs summary::-webkit-details-marker { display: none; }
.mero-faqs summary::before, .mero-faqs summary::after { background: currentcolor; content: ""; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); }
.mero-faqs summary::before { height: 2px; width: .7rem; }
.mero-faqs summary::after { height: .7rem; right: .7rem; transition: transform .25s ease; width: 2px; }
.mero-faqs summary::marker { display: none; }
.mero-faqs summary { background-image: radial-gradient(circle at calc(100% - .75rem) 50%, transparent 0 .63rem, currentcolor .66rem .71rem, transparent .74rem); }
.mero-faqs details[open]:not(.is-closing) summary { color: var(--mero-brand-hover); }
.mero-faqs details[open]:not(.is-closing) summary::after { transform: translateY(-50%) scaleY(0); }
@media (prefers-reduced-motion: reduce) { .mero-faqs summary, .mero-faqs summary::after { transition: none; } }
.mero-faqs summary:hover, .mero-faqs summary:focus-visible { color: var(--mero-brand-hover); }
.mero-faqs summary:focus-visible { outline: 2px solid var(--mero-brand-hover); outline-offset: -2px; }
.mero-faqs details > div { color: var(--mero-muted); padding: 0 3rem 1.5rem 0; }
.mero-faqs details > div > :first-child { margin-top: 0; }
.mero-faqs details > div > :last-child { margin-bottom: 0; }

@media (max-width: 767px) { .mero-single-post__hero, .mero-single-post__body { grid-template-columns: 1fr; }.mero-single-post__hero { gap: 1.25rem; }.mero-single-post__hero-copy { display: contents; }.mero-single-post__header { margin-bottom: 0; order: 0; }.mero-single-post__hero-media { min-height: 14rem; order: 1; }.mero-single-post__intro { order: 2; }.mero-single-post__header h1 { max-width: none; }.mero-single-post__toc { background: var(--mero-canvas); border-block: 1px solid var(--mero-border); inset-inline: calc(var(--mero-gutter) * -1); margin-block: 0 1.5rem; padding-inline: var(--mero-gutter); position: sticky; top: 3.5rem; z-index: 3; }.admin-bar .mero-single-post__toc { top: calc(3.5rem + 46px); }.mero-single-post__toc-inner { display: none; }.mero-single-post__toc-mobile { display: block; }.mero-single-post__toc-mobile summary { align-items: center; color: var(--mero-brand-hover); cursor: pointer; display: flex; font-family: var(--mero-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); justify-content: space-between; letter-spacing: var(--ug-tracking-label); list-style: none; min-height: 3.25rem; text-transform: uppercase; }.mero-single-post__toc-mobile summary::-webkit-details-marker { display: none; }.mero-single-post__toc-mobile summary::after { border-bottom: 2px solid currentcolor; border-right: 2px solid currentcolor; content: ""; height: .55rem; margin-right: .2rem; transform: rotate(45deg); transition: transform .2s ease; width: .55rem; }.mero-single-post__toc-mobile[open] summary::after { transform: rotate(225deg); }.mero-single-post__toc-mobile ol { border-top: 1px solid var(--mero-border); display: grid; list-style: none; margin: 0; max-height: calc(100dvh - 7rem); overflow-y: auto; padding: .35rem 0 .75rem; }.mero-single-post__toc-mobile a { align-items: center; color: var(--mero-muted); display: flex; font-size: var(--ug-text-sm); line-height: 1.35; min-height: 2.75rem; text-decoration: none; }.mero-single-post__toc-mobile a:hover, .mero-single-post__toc-mobile a:focus-visible { color: var(--mero-brand-hover); text-decoration: underline; text-underline-offset: .2em; }.mero-single-post__toc-mobile a.is-active { border-left: 2px solid var(--mero-brand-hover); margin-left: -.75rem; padding-left: .75rem; text-decoration: none; } }
@media (max-width: 767px) { .mero-post-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { :root { --mero-gutter: 15px; --mero-radius: 10px; } .mero-header__inner { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 1rem; min-height: 4.75rem; padding-block: .5rem; }.mero-header__inner > .mero-nav { display: none; }.mero-mobile-nav { display: block; margin-left: auto; order: 2; }.mero-mobile-nav .mero-mega-nav { display: block; }.mero-mobile-nav .mero-mega-nav__list { display: block; }.mero-mobile-nav .mero-mega-nav__list > .menu-item + .menu-item { border-top: 1px solid var(--mero-border); }.mero-mobile-nav .mero-mega-nav__list > .menu-item > a, .mero-mobile-nav .mero-mega-nav__toggle { justify-content: space-between; min-height: 3.25rem; width: 100%; }.mero-mobile-nav .mero-mega-menu { box-shadow: none; display: none; opacity: 1; padding-block: 1rem; pointer-events: auto; position: static; transform: none; transition: none; visibility: visible; }.mero-mobile-nav .mero-mega-nav__item.is-open .mero-mega-menu { display: block; }.mero-mobile-nav .mero-mega-menu .mero-container { padding-inline: 0; }.mero-mobile-nav .mero-mega-menu__intro { display: block; }.mero-mobile-nav .mero-mega-menu__eyebrow { margin-bottom: .5rem; }.mero-mobile-nav .mero-mega-menu__columns { grid-template-columns: 1fr; }.mero-header__cta { order: 3; width: 100%; }.mero-footer__inner { flex-direction: column; } }
@media (max-width: 1023px) { .mero-mobile-nav .mero-mega-menu { padding: 1rem 0 0; }.mero-mobile-nav .mero-mega-menu > .mero-container { background: var(--mero-canvas); border: 0; border-radius: 1rem; box-shadow: none; padding: 1.25rem; }.mero-mobile-nav .mero-mega-menu__intro { margin-bottom: 1.5rem; }.mero-mobile-nav .mero-mega-menu__intro h2 { font-size: var(--ug-type-h3); line-height: var(--ug-leading-h3); }.mero-mobile-nav .mero-mega-menu__intro div > p { font-size: var(--ug-text-sm); line-height: 1.45; margin-top: .5rem; }.mero-mobile-nav .mero-mega-menu__eyebrow { margin-bottom: .65rem; }.mero-mobile-nav .mero-mega-menu__columns { gap: 0; }.mero-mobile-nav .mero-mega-menu__column { padding: 0; }.mero-mobile-nav .mero-mega-menu__column + .mero-mega-menu__column { border-top: 1px solid rgb(23 52 45 / 10%); margin-top: 1.25rem; padding-top: 1.25rem; }.mero-mobile-nav .mero-mega-menu :is(.mero-mega-menu__group-title, .mero-mega-menu__featured-title) { font-size: var(--ug-text-xs); margin-bottom: .65rem; }.mero-mobile-nav .mero-mega-menu li + li { margin-top: .7rem; }.mero-mobile-nav .mero-mega-menu a { font-size: var(--ug-text-sm); } }
@media (prefers-reduced-motion: no-preference) { .mero-home-hero { --mero-home-hero-parallax-y: 0; background-position: center calc(50% + var(--mero-home-hero-parallax-y)); }.mero-home-hero__eyebrow { transform: scale(var(--mero-home-hero-eyebrow-scale, 1)); }.mero-home-hero h1 { transform: translateY(var(--mero-home-hero-heading-y, 0)) scale(var(--mero-home-hero-heading-scale, 1)); }.mero-home-hero [data-mero-home-hero-cta] { transform: translateY(var(--mero-home-hero-cta-y, 0)); } }
/* One header on every page: the logo never wraps, menu links use the small size up to 1600px, and between
   1024px and 1279px the logo sits above a centred menu so all top-level items fit. The row needs about 1220px. */
.mero-header .mero-brand { flex-shrink: 0; }
.mero-header .mero-brand__name { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1600px) { .mero-header .mero-mega-nav__list > .menu-item > a, .mero-header .mero-mega-nav__toggle { font-size: var(--ug-text-sm); } }
@media (min-width: 1280px) and (max-width: 1359px) { body .mero-header .mero-mega-nav__list { gap: .65rem; } }
@media (min-width: 1024px) and (max-width: 1279px) { .mero-header__primary { flex-wrap: wrap; row-gap: 0; max-width: 100%; } .mero-header .mero-brand { flex-basis: 100%; display: flex; justify-content: center; padding-top: 16px; } .mero-header .mero-mega-nav__list { flex-wrap: wrap; justify-content: center; } }
/* Full-bleed blocks use 100vw, which includes the scrollbar; never let that scroll the page sideways. */
body { overflow-x: clip; }
/* Footer: identity, link columns (Species, Plants, Learn, and Marketplace from the seller plugin), then a bottom bar.
   Links are light on the dark footer; the older rule turned hovered links deep green, which vanished on it. */
.mero-footer { padding-block: clamp(3rem, 6vw, 4.5rem) 0; color: var(--ug-text-inverse-muted); }
.mero-footer__top { display: grid; gap: 2.5rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.mero-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.mero-footer__heading { margin: 0 0 .85rem; color: var(--ug-plant); font-family: var(--ug-font-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); line-height: 1.3; text-transform: uppercase; }
.mero-footer__links, .mero-footer__legal { margin: 0; padding: 0; list-style: none; }
.mero-footer__links li + li { margin-top: .15rem; }
.mero-footer a:hover, .mero-footer a:focus-visible { color: #fff; }
.mero-footer :is(.mero-footer__links, .mero-footer__legal) a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ug-text-inverse-muted); font-size: var(--ug-text-sm); text-decoration: none; }
.mero-footer :is(.mero-footer__links, .mero-footer__legal) a:is(:hover, :focus-visible, [aria-current="page"]) { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.mero-footer a:focus-visible { border-radius: 4px; outline: 2px solid var(--ug-plant); outline-offset: 2px; }
.mero-footer__email { margin-top: 1rem; }
.mero-footer__social-links { margin-top: 1rem; }
.mero-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / 12%); font-size: var(--ug-text-sm); }
.mero-footer .mero-footer__bottom p { max-width: none; margin: 0; }
.mero-footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
@media (min-width: 768px) { .mero-footer__nav { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } }
@media (min-width: 1024px) { .mero-footer__top { grid-template-columns: minmax(16rem, 1.2fr) minmax(0, 3fr); gap: clamp(3rem, 6vw, 6rem); } }

/* Phones: a slimmer sticky header leaves more of the screen for content. */
@media (max-width: 767px) {
  body .mero-header .mero-header__inner { min-height: 3.5rem; }
  .mero-mobile-nav nav { max-height: calc(100dvh - 3.5rem); }
}

/* Touch targets: at least 44px tall where a link stands alone. */
body .mero-header .mero-brand__name { min-height: 2.75rem; }
.mero-feature-cards__button { align-items: center; display: inline-flex; min-height: 2.75rem; }
.mero-breadcrumbs a { align-items: center; display: inline-flex; min-height: 2.75rem; }
.mero-breadcrumbs { margin-bottom: .5rem; }
.mero-browse-categories__header a { align-items: center; display: inline-flex; min-height: 2.75rem; }
@media (max-width: 767px) {
  .mero-footer :is(.mero-footer__links, .mero-footer__legal) a { min-height: 2.75rem; }
}
@media (max-width: 767px) { html body .mero-footer a.mero-footer__brand { align-items: center; display: inline-flex; min-height: 2.75rem; } }

/* The header group (logo + menu) is a fixed 1440px wide, so the content width that follows it never depends on the number of menu items. */
@media (min-width: 1024px) { .mero-header__primary { flex: 0 1 1440px; max-width: 1440px; width: 100%; }.mero-header__primary .mero-mega-nav { flex: 1 1 auto; }.mero-header .mero-mega-nav__list { justify-content: space-between; width: 100%; } }

/* Mega menu panels: a heading row with the main listing link, three balanced columns with profile counts, and a finder or featured card. */
.mero-mega-menu__head { align-items: flex-end; display: flex; gap: 1rem 2rem; justify-content: space-between; margin-bottom: 1rem; }
.mero-mega-menu__head-text { max-width: 46rem; min-width: 0; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__kicker { color: var(--ug-teal); font-family: var(--ug-font-heading); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); margin: 0 0 .35rem; text-transform: uppercase; }
.mero-mega-nav .mero-mega-menu__head .mero-mega-menu__title { font-size: var(--ug-type-h3); letter-spacing: var(--ug-tracking-h3); line-height: var(--ug-leading-h3); margin: 0; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__lede { color: var(--mero-muted); font-size: var(--ug-text-sm); line-height: 1.45; margin: .4rem 0 0; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__cta { align-items: center; background: var(--ug-deep); border-radius: var(--ug-control-radius); color: #fff; display: inline-flex; flex: none; font: var(--ug-button-font-compact); gap: .45rem; min-height: var(--ug-button-height-compact); padding: var(--ug-button-padding-compact); text-decoration: none; transition: background .18s ease; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__cta:hover, .mero-mega-nav .mero-mega-menu .mero-mega-menu__cta:focus-visible { background: var(--ug-teal); color: #fff; }
.mero-mega-menu__grid { border-top: 1px solid rgb(23 52 45 / 10%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(16rem, 1.15fr); padding-top: 1rem; }
.mero-mega-menu__group + .mero-mega-menu__group { margin-top: 1.1rem; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__link { align-items: baseline; display: flex; gap: .75rem; justify-content: space-between; }
.mero-mega-menu__count { color: var(--mero-muted); flex: none; font-size: var(--ug-text-xs); font-variant-numeric: tabular-nums; }
.mero-mega-menu__link:hover .mero-mega-menu__count, .mero-mega-menu__link:focus-visible .mero-mega-menu__count { color: inherit; }
.mero-mega-menu__finder form { display: grid; gap: .5rem; margin: 0; }
.mero-mega-menu__finder input { background: #fff; border: 1px solid var(--ug-border-accessible, #557b71); border-radius: var(--ug-control-radius); color: var(--ug-text); font: inherit; font-size: var(--ug-text-sm); min-height: 2.5rem; min-width: 0; padding: 0 .8rem; width: 100%; }
.mero-mega-menu__finder input:focus-visible { outline: 2px solid var(--ug-teal); outline-offset: 1px; }
.mero-mega-menu__finder button { background: var(--ug-deep); border: 0; border-radius: var(--ug-control-radius); color: #fff; cursor: pointer; font: var(--ug-button-font-compact); min-height: 2.5rem; width: 100%; }
.mero-mega-menu__finder button:hover, .mero-mega-menu__finder button:focus-visible { background: var(--ug-teal); }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__finder .mero-mega-menu__chips-label { color: var(--mero-muted); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); margin: .85rem 0 .45rem; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__chips li { margin: 0; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__chips a { background: #fff; border: 1px solid rgb(23 52 45 / 16%); border-radius: 999px; color: var(--ug-deep); display: inline-flex; font-size: var(--ug-text-xs); font-weight: var(--ug-weight-bold); line-height: 1.2; padding: .35rem .7rem; }
.mero-mega-nav .mero-mega-menu .mero-mega-menu__chips a:hover, .mero-mega-nav .mero-mega-menu .mero-mega-menu__chips a:focus-visible { background: var(--ug-deep); border-color: var(--ug-deep); color: #fff; }
/* Featured card titles read as a title, not as another column label. */
.mero-mega-nav .mero-mega-menu .mero-mega-menu__featured .mero-mega-menu__featured-title { color: var(--ug-deep); font-family: var(--ug-font-heading); font-size: var(--ug-type-card-title); letter-spacing: 0; line-height: var(--ug-leading-h3); margin: 0; text-transform: none; }
/* Phone and tablet menu: the main link spans the panel, the finder comes first, and the columns stack. */
@media (max-width: 1023px) {
  .mero-mega-menu__head { align-items: stretch; flex-direction: column; margin-bottom: 1.25rem; }
  .mero-mega-nav .mero-mega-menu .mero-mega-menu__cta { justify-content: center; width: 100%; }
  .mero-mega-menu__grid { border-top: 0; display: flex; flex-direction: column; padding-top: 0; }
  .mero-mega-nav .mero-mega-menu .mero-mega-menu__column { border-right: 0; padding: 0; }
  .mero-mega-nav .mero-mega-menu .mero-mega-menu__latest { margin: 1.25rem 0 0; }
  .mero-mega-nav .mero-mega-menu .mero-mega-menu__finder { margin: 0 0 1.25rem; order: -1; }
  .mero-mobile-nav.is-drilling .mero-mega-menu__finder { display: flex; }
}

/* Legal pages (page-templates/legal.php) use the guide layout. They have no photo, so the title and intro take the
   whole row instead of leaving the photo's column empty. */
.mero-single-post__hero--text { grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mero-legal-page .mero-single-post__content :where(ul, ol) { padding-left: 1.4rem; }
.mero-legal-page .mero-single-post__content li + li { margin-top: .4rem; }
/* Legal tables describe purposes in their first column, so it wraps like the others. */
.mero-legal-page .mero-single-post__content td:first-child { white-space: normal; }

/* Headings, chosen by the owner from the guide design on 8 November: every heading in the page body (h1 to h6, card
   titles included) is mint, the label right above a heading is lime, and the breadcrumb's current page is mint while its
   links stay muted. A card title turns lime on hover, since mint is now its resting colour. Dark theme only, so the
   profile light-mode toggle keeps dark headings. Header and footer are outside <main> and keep their own colours. Kept as
   they were: the homepage title (white, on video) and the spotlight's small "Care requirements" label (lime). The seller
   sign-in page doesn't load this file; login.css repeats these colours. */
:root[data-aq-theme="dark"] main :is(h1, h2, h3, h4, h5, h6):not(.merofish-hero-search__heading, .mero-species-spotlight__care h3) { color: var(--ug-mint); }
/* The editor's "dark text" helper turns text white on the dark theme with !important (tokens.css); headings take mint. */
:root[data-aq-theme="dark"] main :is(h1, h2, h3, h4, h5, h6).aq-text-dark { color: var(--ug-mint) !important; }
:root[data-aq-theme="dark"] main :is(a:is(:hover, :focus-visible) :is(h2, h3, h4), :is(h2, h3, h4) a:is(:hover, :focus-visible)) { color: var(--ug-plant); }
:root[data-aq-theme="dark"] main :is(.mero-eyebrow, .aq-eyebrow, .mero-contact-form__eyebrow):has(+ :is(h1, h2, h3, h4, h5, h6)) { color: var(--ug-plant); }
:root[data-aq-theme="dark"] :is(.mero-breadcrumbs [aria-current="page"], .aq-breadcrumbs > span:last-child, .aq-market-breadcrumbs > span:last-child) { color: var(--ug-mint); }