/* Mannik: bright showroom. Shared visual system, September 2026. */
:root {
	--m-red: #E22726;
	--m-red-600: #C41E1A;
	--m-ink: #222222;
	--m-ink-80: #444444;
	--m-muted: #666666;
	--m-line: #E8E8E8;
	--m-line-strong: #D4D4D4;
	--m-surface: #F7F7F7;
	--m-surface-2: #EEEEEE;
	--m-radius: 10px;
	--m-radius-l: 16px;
	--m-shadow: 0 12px 32px rgb(0 0 0 / 5%);
	--m-container: 1360px;
}
body { background: #fff; }
.m-topbar { background: #fafafa; border-bottom: 1px solid var(--m-line); }
.m-topbar__inner { min-height: 34px; }
.m-topbar__promises { width: auto; gap: 25px; font-size: .73rem; }
.m-topbar__promises .m-icon { color: var(--m-red); width: 14px; height: 14px; }
.m-topbar__contact { font-size: .75rem; }
.m-header { background: #fff; }
.m-header__bar { height: 86px; gap: 28px; }
.m-header__logo img { width: 185px; }
.m-header .m-search--header { max-width: 575px; min-width: 180px; margin-inline: auto; }
.m-search__input { border: 1px solid #e2e2e2; background: #f8f8f8; border-radius: 7px; font-size: .9rem; }
.m-search__input::placeholder { color: #747474; }
.m-search__submit { border-radius: 0 7px 7px 0; }
.m-header__bpma { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-decoration: none; color: #555; font-size: .64rem; }
.m-header__bpma span { max-width: none; white-space: nowrap; }
.m-header__bpma img { display: block; width: 68px; height: 43px; object-fit: contain; filter: brightness(0); }
.m-header__quote { min-width: 92px; min-height: 44px; padding: 10px 0 10px 18px; border-left: 1px solid var(--m-line); border-radius: 0; font-size: .9rem; }
.m-header__quote:hover { border-left: 1px solid var(--m-line); background: transparent; color: var(--m-red-600); }
.m-quicknav { border-top: 1px solid var(--m-line); }
.m-quicknav__list { min-height: 47px; gap: clamp(24px, 2.5vw, 42px); }
.m-quicknav__link { padding-block: 12px; font-size: .83rem; font-weight: 600; }
.m-quicknav__button { border-bottom: 0; }
.m-mega { box-shadow: 0 20px 30px rgb(0 0 0 / 8%); }
.m-button { border-radius: 7px; font-size: .92rem; font-weight: 650; transition: background-color .18s, border-color .18s, transform .18s; }
.m-button--primary { box-shadow: 0 5px 14px rgb(226 39 38 / 12%); }
.m-button--secondary { border-width: 1px; }
.m-button--large { min-height: 52px; padding: 14px 22px; }

/* A white hero, with the brand line and real catalogue photography. */
.m-hero { background: #fff; overflow: hidden; }
.m-hero__inner { max-width: var(--m-container); min-height: 0; padding: 44px var(--m-gutter) 42px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: center; }
.m-hero__content { padding: 8px 0; background: transparent; min-width: 0; }
.m-hero__title { max-width: none; margin-bottom: 24px; text-wrap: initial; letter-spacing: -.045em; }
.m-hero__title .m-hero__question { margin: 0 0 20px; font-family: var(--m-font-body); font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--m-ink); letter-spacing: -.015em; font-weight: 500; line-height: 1.4; }
.m-hero__title .m-hero__message { margin: 0; color: var(--m-ink); font-size: clamp(2.6rem, 5.1vw, 4.65rem); line-height: 1.08; font-weight: 700; }
.m-hero__message em { color: var(--m-red); font-style: normal; }
.m-hero__lead { font-size: 1.08rem; line-height: 1.65; max-width: 39ch; margin-bottom: 27px; color: #565656; }
.m-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.m-hero__actions .m-button { flex: 0 0 auto; }
.m-hero__actions .m-button--secondary { display: inline-flex; background: #fff; border: 1px solid #d8d8d8; }
.m-hero__actions .m-button--secondary:hover { color: var(--m-ink); background: var(--m-surface); border-color: var(--m-ink); }
.m-hero__personal { display: flex; align-items: center; gap: 12px; color: var(--m-muted); font-size: .78rem; line-height: 1.6; margin: 0; }
.m-hero__personal img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.m-hero__personal strong { font-weight: 550; color: var(--m-ink); }
.m-hero__showroom { display: grid; grid-template-columns: 1.18fr 1fr; grid-template-rows: 218px 218px auto; gap: 14px; min-width: 0; }
.m-showcase { display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; color: var(--m-ink); background: #f5f5f5; border-radius: 13px; }
.m-showcase--main { grid-row: 1 / 3; background: #f4f4f2; }
.m-showcase--bottle { background: #fff1ef; }
.m-showcase--notebook { background: #f5f5f5; }
.m-showcase__eyebrow { position: absolute; top: 23px; left: 23px; z-index: 1; font-size: .72rem; color: #626262; }
.m-showcase img { display: block; width: 100%; height: calc(100% - 42px); object-fit: contain; mix-blend-mode: multiply; padding: 13px 15px 0; transition: transform .35s ease; }
.m-showcase--main img { width: 142%; max-width: none; align-self: center; padding: 34px 0 0; }
.m-showcase--bottle img { transform: rotate(9deg); }
.m-showcase--notebook img { transform: rotate(-8deg); }
.m-showcase__label { position: absolute; bottom: 18px; left: 20px; right: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 600; }
.m-showcase__label .m-icon { flex: none; }
.m-showcase:hover { color: var(--m-ink); }
.m-showroom__note { grid-column: 1 / -1; margin: 0; text-align: right; color: #777; font-size: .65rem; }
.m-service-strip { background: #fff; border-block: 1px solid var(--m-line); }
.m-service-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 23px; gap: 28px; }
.m-service-strip__inner > * { display: flex; align-items: center; gap: 13px; margin: 0; text-decoration: none; color: #707070; font-size: .74rem; line-height: 1.55; }
.m-service-strip__inner .m-icon { color: var(--m-red); flex: none; }
.m-service-strip strong { display: block; color: var(--m-ink); font-size: .85rem; font-weight: 600; }
.m-service-strip a:hover strong { color: var(--m-red-600); }

/* Clear product discovery, spacious sections and quiet neutral surfaces. */
.m-section { padding-block: 65px; }
.m-section--surface { background: #fafafa; }
.m-section--tight { padding-top: 20px; }
.m-section__head { padding-left: 0; border-left: 0; margin-bottom: 28px; align-items: end; }
.m-section__head .m-eyebrow { display: block; color: #737373; font-family: var(--m-font-body); font-weight: 500; text-transform: none; letter-spacing: .01em; font-size: .82rem; margin-bottom: 9px; }
.m-h2 { font-size: clamp(1.65rem, 2.35vw, 2.3rem); line-height: 1.2; letter-spacing: -.04em; }
.m-lead { font-size: 1rem; color: #666; max-width: 65ch; }
.m-link-arrow { font-size: .9rem; font-weight: 600; }
.m-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.m-cat-tile__media { background: #f6f6f6; border: 1px solid #f0f0f0; border-radius: 11px; aspect-ratio: 1.45; overflow: hidden; }
.m-cat-tile__img { width: 80%; height: 80%; mix-blend-mode: multiply; transition: transform .3s ease; }
.m-cat-tile:hover .m-cat-tile__img { transform: scale(1.05); }
.m-cat-tile__label { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; padding-top: 13px; font-weight: 600; }
.m-cat-tile__label .m-icon { display: block; color: #777; width: 16px; }
.m-card { border: 0; box-shadow: none; background: transparent; }
.m-card__media { background: #f5f5f5; border-radius: 10px; }
.m-card__body { border: 0; padding: 15px 0 5px; gap: 7px; }
.m-card__title { font-size: .94rem; line-height: 1.4; }
.m-rail__track { grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; }
.m-step { border: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--m-line); padding: 24px 14px 0 0; }
.m-step::before { background: #fff0ef; color: var(--m-red-600); border-radius: 50%; width: 36px; height: 36px; font-size: .9rem; }
.m-step__title { font-size: 1.05rem; }
.m-step p { font-size: .9rem; color: #666; }
.m-how__cta { margin: 30px 0 0; }
.m-team { background: #f8f8f8; }
.m-team__inner { gap: 72px; }
.m-team__photos { background: transparent; padding: 12px 0; gap: 22px; }
.m-polaroid { border-radius: 8px; box-shadow: 0 12px 24px rgb(0 0 0 / 7%); }
.m-team__text .m-eyebrow { color: var(--m-red-600); font-size: .75rem; }
.m-team__text p:not(.m-eyebrow) { color: #5b5b5b; font-size: 1rem; }
.m-quote { border: 1px solid var(--m-line); border-radius: 10px; padding: 28px; box-shadow: none; }
.m-rating { border-radius: 10px; }
.m-credentials { color: #555; font-size: .85rem; }
.m-faq__item summary { padding-block: 23px; font-weight: 550; }

/* Light treatment continues through catalogue, enquiry and footer. */
.m-buybox .m-price { background: #fafafa; border-color: #e5e5e5; border-top: 3px solid var(--m-red); border-radius: 10px; }
.m-buybox .m-price__includes { border-color: #e5e5e5; }
.m-step-field--quantity { background: #fafafa; border-color: #e5e5e5; border-radius: 10px; }
.m-tier-grid, .m-tier-choice + .m-tier-choice { border-color: #e6e6e6; }
.m-tier-grid__head { background: #f1f1f1; color: #626262; }
.m-tier-choice input:checked + label { background: #fff4f3; }
.m-gallery__main { background: #f7f7f7; border-radius: 12px; }
.m-about-hero__visual { background: #f7f7f7; background-image: none; }
.m-band { background: #fafafa; background-image: none; color: var(--m-ink); border-block: 1px solid var(--m-line); }
.m-band__inner { padding-block: 56px; gap: 36px; }
.m-band__text { background: transparent; box-shadow: none; padding: 0; max-width: 620px; }
.m-band__title { color: var(--m-ink); font-size: clamp(1.7rem, 2.7vw, 2.55rem); letter-spacing: -.04em; }
.m-band__text p { color: #606060; font-size: 1rem; max-width: 55ch; }
.m-band__actions { flex-direction: column; gap: 7px; }
.m-band .m-button--white { background: var(--m-red); color: #fff; padding-inline: 28px; min-width: 225px; }
.m-band .m-button--white:hover { background: var(--m-red-600); }
.m-band__phone { background: transparent; color: var(--m-ink); font-weight: 500; font-size: .88rem; }
.m-band__phone:hover { background: transparent; color: var(--m-red-600); }
.m-footer { background: #fff; color: #666; }
.m-footer a { color: #555; }
.m-footer a:hover { color: var(--m-red-600); }
.m-footer__heading { color: var(--m-ink); font-family: var(--m-font-body); font-size: .95rem; }
.m-footer__logo img { width: 180px; }
.m-footer__contact .m-icon, .m-footer__trust .m-icon { color: var(--m-red); }
.m-footer__social a { border-color: #dedede; }
.m-footer__social a:hover { color: #fff; }
.m-footer__trust, .m-footer__legal { border-color: var(--m-line); }
.m-footer__trust p { color: #555; font-size: .8rem; }
.m-footer__legal, .m-footer__legal .m-link-button { color: #6a6a6a; }

@media (prefers-reduced-motion: no-preference) {
	.m-showcase:hover img { transform: scale(1.035); }
	.m-hero__content { animation: m-bright-enter .55s ease both; }
	.m-hero__showroom { animation: m-bright-enter .7s .08s ease both; }
}
@keyframes m-bright-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) and (max-width: 1199px) {
	.m-header__bar { gap: 18px; }
	.m-header__logo img { width: 160px; }
	.m-topbar__promises { gap: 15px; }
	.m-hero__inner { gap: 28px; }
	.m-hero__showroom { grid-template-rows: 200px 200px auto; }
	.m-quicknav__link { font-size: .76rem; }
}
@media (max-width: 1023px) {
	.m-header__bar { height: 72px; gap: 16px; }
	.m-header__logo img { width: 150px; }
	.m-header__bpma { margin-left: auto; font-size: .56rem; }
	.m-header__bpma img { width: 56px; height: 35px; }
	.m-header__quote { min-width: 42px; padding-left: 12px; margin-left: 0; }
	.m-header__logo { margin-right: 0; }
	.m-searchbar { padding-block: 8px; }
	.m-search__input { min-height: 44px; }
	.m-search__submit { height: 44px; }
	.m-hero__inner { grid-template-columns: 1fr 1fr; gap: 26px; padding-block: 34px; }
	.m-hero__title .m-hero__question { font-size: .95rem; margin-bottom: 17px; }
	.m-hero__title .m-hero__message { font-size: clamp(2.45rem, 5.3vw, 3.7rem); }
	.m-hero__lead { font-size: .96rem; }
	.m-hero__showroom { grid-template-rows: 178px 178px auto; gap: 10px; }
	.m-showcase__label { font-size: .68rem; left: 12px; right: 12px; bottom: 12px; }
	.m-showcase__eyebrow { font-size: .65rem; left: 15px; top: 18px; }
	.m-hero__actions { gap: 8px; margin-bottom: 18px; }
	.m-hero__actions .m-button { padding-inline: 15px; font-size: .82rem; min-height: 46px; }
	.m-hero__personal { font-size: .71rem; }
	.m-service-strip__inner { gap: 14px; }
	.m-service-strip__inner > * { gap: 9px; font-size: .65rem; }
	.m-service-strip strong { font-size: .75rem; }
	.m-section { padding-block: 48px; }
	.m-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 22px 14px; }
	.m-cat-tile__label { font-size: .78rem; }
	.m-cat-tile__label .m-icon { display: none; }
	.m-rail__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; }
	.m-team__inner { gap: 36px; }
}
@media (max-width: 599px) {
	.m-header__bar { height: 65px; gap: 9px; }
	.m-header__logo img { width: 125px; }
	.m-header__bpma { font-size: .5rem; gap: 3px; }
	.m-header__bpma img { width: 48px; height: 30px; }
	.m-header__quote { min-width: 33px; padding-left: 8px; }
	.m-search__input { font-size: .85rem; }
	.m-hero__inner { grid-template-columns: 1fr; gap: 25px; padding-top: 30px; padding-bottom: 27px; }
	.m-hero__content { padding: 0; }
	.m-hero__title { margin-bottom: 18px; }
	.m-hero__title .m-hero__question { font-size: .95rem; margin-bottom: 13px; }
	.m-hero__title .m-hero__message { font-size: clamp(2.55rem, 11vw, 3.7rem); line-height: 1.06; }
	.m-hero__lead { max-width: 38ch; font-size: .95rem; line-height: 1.6; margin-bottom: 22px; }
	.m-hero__actions { display: flex; margin-bottom: 20px; gap: 10px; }
	.m-hero__actions .m-button { padding: 12px 16px; font-size: .85rem; min-height: 46px; }
	.m-hero__personal img { width: 35px; height: 35px; }
	.m-hero__personal { font-size: .71rem; }
	.m-hero__showroom { grid-template-columns: 1.12fr 1fr; grid-template-rows: 142px 142px auto; gap: 10px; }
	.m-showcase { border-radius: 9px; }
	.m-showcase__label { font-size: .69rem; }
	.m-showcase--main .m-showcase__label { max-width: 15ch; }
	.m-showroom__note { font-size: .59rem; }
	.m-service-strip__inner { grid-template-columns: 1fr 1fr; gap: 20px 10px; padding-block: 22px; }
	.m-service-strip__inner > * { font-size: .66rem; }
	.m-service-strip strong { font-size: .76rem; }
	.m-service-strip__inner .m-icon { width: 18px; }
	.m-section { padding-block: 40px; }
	.m-section__head { padding-left: 0; align-items: start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
	.m-section__head .m-eyebrow { font-size: .75rem; }
	.m-section__head .m-link-arrow { font-size: .8rem; }
	.m-h2 { font-size: 1.6rem; }
	.m-cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.m-cat-tile__media { aspect-ratio: 1.25; }
	.m-cat-tile__label { font-size: .81rem; padding-top: 10px; }
	.m-rail__track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
	.m-card__body { padding-inline: 0; }
	.m-card__title { font-size: .82rem; }
	.m-team__inner { gap: 30px; }
	.m-team__photos { padding-inline: 8px; }
	.m-quote { padding: 24px; }
	.m-band__inner { padding-block: 40px; }
	.m-band__actions { align-items: start; }
	.m-footer__grid { padding-top: 40px; }
}