/*!
 * My Menu Place (mymenuplace.com) layout sheet.
 * One file for every page, no framework. Class prefix: mmp-
 * Colour and lettering come from the palette file and the type file a page links next to this one.
 */

/* 1. Structure tokens ---------------------------------------------------- */
:root {
  --mmp-bar-h: 70px;
  --mmp-edge: 16px;
  --mmp-gap-y: 64px;
  --mmp-curve: cubic-bezier(.25, .8, .25, 1);
  --mmp-wrap: 1230px;
  --mmp-wrap-broad: 1510px;
  --mmp-radius: 0px;
  --mmp-flow-align: center;
  --mmp-flow-justify: center;
  --mmp-flow-inline: auto;
  --mmp-stage-h: 560px;
  --mmp-w-bold: 700;
  --mmp-w-semi: 600;
  --mmp-w-med: 500;
}
@media (min-width: 768px) {
  :root { --mmp-edge: 24px; --mmp-gap-y: 90px; }
}
@media (min-width: 992px) {
  :root { --mmp-bar-h: 100px; }
}
@media (min-width: 1200px) {
  :root { --mmp-gap-y: 120px; }
}

/* 3. Base ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mmp-bar-h) + 16px);
}
body {
  margin: 0;
  background: var(--mmp-paper);
  color: var(--mmp-body);
  font-family: var(--mmp-sans);
  font-size: 15px;
  font-size-adjust: var(--mmp-sans-adjust);
  font-variant-numeric: var(--mmp-nums);
  line-height: 1.65;
  overflow-x: hidden;
}
body.mmp-is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mmp-brick-ink); text-decoration: none; transition: color .25s var(--mmp-curve); }
a:hover { color: var(--mmp-coal); }
/* A number in running text stays on one line. The big number in the contact block is the one
   exception: with an extension on it, it needs to be able to take a second line. */
a[href^="tel:"]:not(.mmp-button):not(.mmp-findus__phone) { white-space: nowrap; }
/* Links inside running text are underlined so they do not rely on color alone. */
p > a:not([class]),
li > a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mmp-base__list li > a,
.mmp-tabs li > a,
.mmp-trail li > a,
.mmp-slidein__list li > a { text-decoration: none; }
/* break-word only acts once a word would otherwise run outside its column, so nothing that fits
   today moves. It is the floor under a wide display face meeting a narrow column: a broken word
   is poor, a title sliding under the next block is worse. */
h1, h2, h3, h4 { margin: 0; color: var(--mmp-coal); font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust); font-weight: var(--mmp-w-bold); line-height: 1.2;
  overflow-wrap: break-word; }
p { margin: 0 0 15px; }
ul { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mmp-focus); outline-offset: 3px; }
.mmp-callout :focus-visible,
.mmp-stage :focus-visible,
.mmp-week :focus-visible { outline-color: var(--mmp-focus-on-fill); }
.mmp-base :focus-visible,
.mmp-viewer :focus-visible { outline-color: var(--mmp-focus-on-dark); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

.mmp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mmp-wrap {
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 var(--mmp-edge);
}
.mmp-wrap--broad { max-width: var(--mmp-wrap-broad); }
/* A broad band lets its photos run wider than the text column. On a page set flush left its title
   still has to start where every other title starts, so the title block is moved in by the extra
   width. On a centred page the factor is 0 and nothing moves. */
.mmp-wrap--broad > .mmp-intro {
  padding-inline-start: calc(max(0px, (100% - var(--mmp-wrap) + 2 * var(--mmp-edge)) / 2) * var(--mmp-flow-edge));
}
.mmp-band { padding: var(--mmp-gap-y) 0; }
.mmp-band--linen { background: var(--mmp-tint); }
.mmp-band--tight { padding-top: 0; }

/* 4. Buttons -------------------------------------------------------------- */
.mmp-button {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 34px;
  border: 1px solid var(--mmp-brick);
  background: var(--mmp-brick);
  color: var(--mmp-on-brick);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 15px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1.8px * var(--mmp-track));
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--mmp-curve), border-color .3s var(--mmp-curve), color .3s var(--mmp-curve);
}
.mmp-button:hover { background: var(--mmp-fill-alt); border-color: var(--mmp-fill-alt); color: var(--mmp-on-fill-alt); }
/* Rolling label: on hover the text slides up and a copy follows from below. */
.mmp-button__roll { display: block; position: relative; overflow: hidden; line-height: 1.4; }
.mmp-button__roll > span { display: block; transition: transform .45s var(--mmp-curve); }
.mmp-button__roll::after {
  content: attr(data-mmp-roll);
  content: attr(data-mmp-roll) / "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  transition: transform .45s var(--mmp-curve);
}
.mmp-button:hover .mmp-button__roll > span,
.mmp-button:hover .mmp-button__roll::after,
.mmp-button:focus-visible .mmp-button__roll > span,
.mmp-button:focus-visible .mmp-button__roll::after { transform: translateY(-100%); }
.mmp-button--outline { background: transparent; color: var(--mmp-brick-ink); }
.mmp-button--outline:hover { background: var(--mmp-brick); border-color: var(--mmp-brick); }
.mmp-button--pale { background: var(--mmp-paper); border-color: var(--mmp-paper); color: var(--mmp-brick-ink); }
.mmp-button--pale:hover { background: var(--mmp-fill-alt); border-color: var(--mmp-fill-alt); }
.mmp-btnrow { display: flex; flex-wrap: wrap; gap: 12px; }
.mmp-btnrow--mid { justify-content: center; }
.mmp-qa + .mmp-btnrow,
.mmp-howto + .mmp-btnrow { margin-top: 40px; }

/* 5. Header --------------------------------------------------------------- */
.mmp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--mmp-bar-h);
  background: var(--mmp-chrome);
  box-shadow: var(--mmp-bar-shadow);
}
.mmp-topbar__bar { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }
/* a long restaurant name keeps to one line in the bar and trails off rather than growing it */
.mmp-mark {
  display: flex;
  align-items: center;
  max-width: 72vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 14px;
  background: var(--mmp-mark-bg);
  color: var(--mmp-on-mark);
  font-family: var(--mmp-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: calc(2.7px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-mark:hover { color: var(--mmp-on-mark); background: var(--mmp-mark-hover); }
/* the platform pages carry the logo in the mark; a restaurant page keeps its name as text */
.mmp-mark__logo { display: block; width: auto; height: 28px; }
.mmp-mainnav { display: none; }
.mmp-mainnav__list { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.mmp-mainnav__list li { display: flex; align-items: center; }
.mmp-mainnav__list li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--mmp-on-chrome);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 14px;
}
.mmp-mainnav__link {
  color: var(--mmp-on-chrome);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 15px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1.5px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-mainnav__link:hover,
.mmp-mainnav__link[aria-current="page"] { color: var(--mmp-on-chrome-active); }
.mmp-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 58px;
  padding: 0 14px;
  border: 0;
  background: none;
  cursor: pointer;
}
.mmp-toggle span { display: block; height: 2px; background: var(--mmp-on-chrome); transition: transform .3s var(--mmp-curve); }
.mmp-toggle:hover span:nth-child(2) { transform: translateX(-5px); }
@media (min-width: 768px) {
  .mmp-mark { padding: 0 20px; }
  .mmp-mark__logo { height: 32px; }
}
@media (min-width: 992px) {
  .mmp-mainnav { display: block; padding-right: 24px; }
  .mmp-toggle,
  .mmp-slidein { display: none; }
  .mmp-mark { padding: 0 24px; }
}
@media (min-width: 1200px) {
  .mmp-mainnav { padding-right: 30px; }
  .mmp-mainnav__list li + li::before { margin: 0 13px; }
  .mmp-mainnav__link { font-size: 17px; letter-spacing: calc(2px * var(--mmp-track)); }
}

/* Mobile drawer */
.mmp-slidein { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s .4s; }
.mmp-slidein.mmp-is-open { visibility: visible; transition: none; }
.mmp-slidein__shade {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--mmp-veil);
  opacity: 0;
  cursor: pointer;
  transition: opacity .4s var(--mmp-curve);
}
.mmp-slidein__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 86vw);
  overflow-y: auto;
  background: var(--mmp-chrome);
  transform: translateX(-100%);
  transition: transform .4s var(--mmp-curve);
}
.mmp-slidein.mmp-is-open .mmp-slidein__shade { opacity: 1; }
.mmp-slidein.mmp-is-open .mmp-slidein__panel { transform: none; }
.mmp-slidein__head { display: flex; align-items: stretch; justify-content: space-between; height: var(--mmp-bar-h); }
.mmp-slidein__close { position: relative; width: 58px; border: 0; background: none; cursor: pointer; }
.mmp-slidein__close::before,
.mmp-slidein__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 22px;
  height: 2px;
  background: var(--mmp-on-chrome);
  transform: rotate(45deg);
}
.mmp-slidein__close::after { transform: rotate(-45deg); }
.mmp-slidein__list { margin: 0; padding: 12px 24px 32px; list-style: none; }
.mmp-slidein__list a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--mmp-hairline);
  color: var(--mmp-on-chrome);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 17px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1.6px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-slidein__list a:hover,
.mmp-slidein__list a[aria-current="page"] { color: var(--mmp-on-chrome-active); }

/* 6. Section heading + divider ------------------------------------------- */
.mmp-intro { margin: 0 auto 50px; text-align: var(--mmp-flow-align); }
.mmp-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--mmp-brick-ink);
  font-size: 14px;
  letter-spacing: calc(1.5px * var(--mmp-track));
  line-height: 1.4;
  text-transform: uppercase;
}
.mmp-heading {
  padding-bottom: 16px;
  font-size: 30px;
  letter-spacing: calc(1.3px * var(--mmp-track));
  line-height: 1.15;
  text-transform: uppercase;
}
.mmp-intro__text { max-width: 820px; margin: 4px var(--mmp-flow-inline) 18px; }
.mmp-ornament {
  display: block;
  width: 220px;
  height: 38px;
  margin: 0 var(--mmp-flow-inline);
  background:
    var(--mmp-icon-cloche, url("../img/icons/cloche.svg")) center / 30px no-repeat,
    linear-gradient(var(--mmp-hairline), var(--mmp-hairline)) left center / 88px 1px no-repeat,
    linear-gradient(var(--mmp-hairline), var(--mmp-hairline)) right center / 88px 1px no-repeat;
}
@media (min-width: 768px) {
  .mmp-intro { margin-bottom: 60px; }
}
@media (min-width: 1351px) {
  .mmp-heading { font-size: 45px; line-height: 1.22; }
}

/* 7. Hero slider (menu page) --------------------------------------------- */
.mmp-stage { position: relative; min-height: var(--mmp-stage-h); overflow: hidden; background: var(--mmp-stage-bg); }
.mmp-stage__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--mmp-curve), visibility 0s 1s;
}
.mmp-stage__slide.mmp-is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--mmp-curve); }
.mmp-stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mmp-stage__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mmp-stage-veil);
}
.mmp-stage__content {
  position: relative;
  z-index: 1;
  min-height: var(--mmp-stage-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mmp-edge) 40px;
  text-align: center;
}
.mmp-stage__title {
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  color: var(--mmp-stage-ink);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 40px;
  font-weight: var(--mmp-w-bold);
  line-height: 1.15;
  letter-spacing: calc(1.6px * var(--mmp-track));
  text-transform: uppercase;
  text-shadow: var(--mmp-stage-title-shadow);
}
.mmp-stage__text {
  max-width: 760px;
  margin: 0;
  padding: 18px 0 32px;
  color: var(--mmp-stage-ink);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: calc(.3px * var(--mmp-track));
  text-shadow: var(--mmp-stage-text-shadow);
}
.mmp-stage__content > * { animation: mmp-lift .9s var(--mmp-curve) both; }
.mmp-stage__content > :nth-child(2) { animation-delay: .15s; }
.mmp-stage__content > :nth-child(3) { animation-delay: .3s; }
@keyframes mmp-lift { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.mmp-stage__controls { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; }
.mmp-stage__dots { display: flex; gap: 8px; }
.mmp-stage__pause {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--mmp-stage-btn-line);
  border-radius: 50%;
  background: var(--mmp-stage-btn-bg);
  cursor: pointer;
}
.mmp-stage__pause::before,
.mmp-stage__pause::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 3px;
  height: 10px;
  background: var(--mmp-stage-ink);
}
.mmp-stage__pause::before { left: 9px; }
.mmp-stage__pause::after { right: 9px; }
.mmp-stage__pause[aria-pressed="true"]::before {
  left: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--mmp-stage-ink);
  background: none;
}
.mmp-stage__pause[aria-pressed="true"]::after { display: none; }
.mmp-pip {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.mmp-pip::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--mmp-stage-ink);
  opacity: .55;
}
.mmp-pip[aria-current="true"] { border-color: var(--mmp-stage-ink); }
.mmp-pip[aria-current="true"]::before { inset: 7px; }
.mmp-pip[aria-current="true"]::before { opacity: 1; }
@media (min-width: 768px) {
  :root { --mmp-stage-h: 620px; }
  .mmp-stage__title { font-size: 60px; letter-spacing: calc(1.8px * var(--mmp-track)); }
}
@media (min-width: 1200px) {
  :root { --mmp-stage-h: 710px; }
}

/* 8. Split block: image + text ------------------------------------------- */
/* one column that may not grow past its track, so a wide word or image cannot widen the page */
.mmp-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.mmp-duo__media img { width: 100%; object-fit: cover; }
.mmp-duo__media--tall img { aspect-ratio: 400 / 550; }
.mmp-duo__media--land img { aspect-ratio: 4 / 3; }
.mmp-duo .mmp-heading { padding-bottom: 22px; }
@media (min-width: 992px) {
  .mmp-duo { grid-template-columns: 400px minmax(0, 1fr); gap: 100px; }
  .mmp-duo__media--tall { margin-top: 44px; }
  .mmp-duo--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
  .mmp-duo--swap .mmp-duo__media { order: 2; }
}
.mmp-pair { display: grid; gap: 36px 70px; }
@media (min-width: 992px) {
  .mmp-pair { grid-template-columns: 1fr 1fr; }
}
.mmp-copy { font-size: 16px; line-height: 1.6; letter-spacing: calc(.1px * var(--mmp-track)); }
.mmp-copy strong { color: var(--mmp-coal); }
@media (min-width: 768px) {
  .mmp-copy--block { text-align: justify; }
}

/* 9. Menu: photo gallery, category jump bar, dishes ---------------------- */
.mmp-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mmp-pics__link { display: block; position: relative; overflow: hidden; background: var(--mmp-oat); }
.mmp-pics__link img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s var(--mmp-curve); }
.mmp-pics__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--mmp-brick) 45%, transparent) var(--mmp-icon-zoom, url("../img/icons/zoom.svg")) center / 42px no-repeat;
  opacity: 0;
  transition: opacity .35s var(--mmp-curve);
}
.mmp-pics__link:hover img { transform: scale(1.06); }
.mmp-pics__link:hover::after,
.mmp-pics__link:focus-visible::after { opacity: 1; }
@media (min-width: 768px) {
  .mmp-pics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1200px) {
  .mmp-pics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
}
.mmp-menu-lead { max-width: 900px; margin: 40px var(--mmp-flow-inline) 0; text-align: var(--mmp-flow-align); }

.mmp-tabs {
  position: relative;
  display: flex;
  margin: 0 calc(var(--mmp-edge) * -1) 44px;
  padding: 14px var(--mmp-edge);
  overflow-x: auto;
  border-top: 1px solid var(--mmp-hairline);
  border-bottom: 1px solid var(--mmp-hairline);
  list-style: none;
  scrollbar-width: none;
}
.mmp-tabs::-webkit-scrollbar { display: none; }
.mmp-tabs li { display: flex; align-items: center; flex: 0 0 auto; }
.mmp-tabs li + li::before { content: "/"; margin: 0 12px; color: var(--mmp-body); font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust); }
.mmp-tabs a {
  color: var(--mmp-coal);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 15px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1.4px * var(--mmp-track));
  text-transform: uppercase;
  white-space: nowrap;
}
.mmp-tabs a:hover { color: var(--mmp-brick-ink); }
@media (min-width: 1200px) {
  .mmp-tabs { flex-wrap: wrap; justify-content: center; margin: 0 0 60px; padding: 16px 0; overflow: visible; }
}

.mmp-course + .mmp-course { margin-top: 56px; }
.mmp-course__title {
  display: inline-block;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--mmp-brick);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: calc(1.2px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-fares { display: grid; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) {
  .mmp-fares { grid-template-columns: 1fr 1fr; column-gap: 70px; }
  .mmp-course__title { font-size: 24px; }
}
.mmp-fare { position: relative; padding: 18px 0 12px; border-bottom: 1px solid var(--mmp-coal); }
.mmp-fare::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mmp-coal);
}
.mmp-fare__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.mmp-fare__name {
  min-width: 0;
  color: var(--mmp-coal-2);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: calc(1.1px * var(--mmp-track));
  line-height: 1.3;
  text-transform: uppercase;
}
/* a price with two sizes in it keeps to the row: it shrinks, then wraps under the name */
.mmp-fare__price {
  flex: 0 1 auto;
  max-width: 100%;
  text-align: right;
  color: var(--mmp-brick-ink);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 22px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1.1px * var(--mmp-track));
  line-height: 1.3;
}
.mmp-fare__desc { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }
.mmp-fare__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background: var(--mmp-brick);
  color: var(--mmp-on-brick);
  font-family: var(--mmp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: calc(1px * var(--mmp-track));
  vertical-align: 3px;
}

/* 10. Services & amenities ------------------------------------------------ */
.mmp-perks { display: grid; gap: 30px; }
@media (min-width: 576px) {
  .mmp-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (min-width: 992px) {
  .mmp-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 30px; }
}
.mmp-perk__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--mmp-coal-2);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: calc(.8px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-perk__title::before { content: ""; flex: 0 0 18px; height: 18px; background: var(--mmp-icon-check, url("../img/icons/check.svg")) center / contain no-repeat; }
.mmp-perk__list { padding-left: 44px; color: var(--mmp-coal-2); font-size: 15px; }
.mmp-perk__list li { padding: 4px 0; }
@media (min-width: 768px) {
  .mmp-perk__list { font-size: 16px; }
}
@media (min-width: 992px) {
  .mmp-perk__title { font-size: 25px; }
}

/* 11. Visit: map, contact, opening hours --------------------------------- */
/* the three blocks share one track that never grows past the page */
/* the tracks are allowed to shrink, but a grid item still refuses to go below its longest word
   unless it is told it may, and then the whole block pushes past the side of the phone */
.mmp-findus > * { min-width: 0; }
.mmp-findus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  grid-template-areas: "contact" "hours" "map";
  align-items: center;
}
.mmp-findus__map { grid-area: map; min-height: 360px; background: var(--mmp-oat); }
.mmp-findus__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.mmp-findus__contact { grid-area: contact; text-align: var(--mmp-flow-align); }
.mmp-findus__label {
  margin-top: 8px;
  color: var(--mmp-coal);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 19px;
  font-weight: var(--mmp-w-semi);
  letter-spacing: calc(1px * var(--mmp-track));
  line-height: 2.4;
  text-transform: uppercase;
}
/* a number with an extension on it is allowed to take two lines instead of widening the column */
.mmp-findus__phone {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  padding-bottom: 20px;
  color: var(--mmp-brick-ink);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 34px;
  font-weight: var(--mmp-w-semi);
  letter-spacing: calc(.5px * var(--mmp-track));
  line-height: 1.3;
}
.mmp-findus__line { margin: 0 0 6px; }
.mmp-live { font-weight: 700; }
.mmp-live.mmp-is-open { color: var(--mmp-go); }
.mmp-live.mmp-is-closed { color: var(--mmp-brick-ink); }
/* the buttons follow the text above them: centred under centred text, on its edge under flush left text */
.mmp-findus .mmp-btnrow { justify-content: var(--mmp-flow-justify); margin-top: 24px; }
.mmp-week { grid-area: hours; padding: 44px 30px; background: var(--mmp-week-bg); color: var(--mmp-week-ink); }
.mmp-week__title {
  margin-bottom: 18px;
  color: var(--mmp-week-strong);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: calc(1px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-week__table { width: 100%; border-collapse: collapse; font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust); font-size: 17px; letter-spacing: calc(.3px * var(--mmp-track)); text-transform: uppercase; }
.mmp-week__table th,
.mmp-week__table td { padding: 7px 0; border-bottom: 1px solid var(--mmp-week-line); font-weight: 400; text-align: left; }
.mmp-week__table th { padding-right: 12px; font-weight: 700; }
.mmp-week__table td { text-align: right; }
.mmp-week__table tr.mmp-is-today { color: var(--mmp-week-strong); }
.mmp-week__table tr.mmp-is-today th::after { content: " (today)"; font-weight: 400; text-transform: none; }
.mmp-week__note { margin: 18px 0 0; color: var(--mmp-week-strong); font-size: 14px; line-height: 1.6; }
@media (min-width: 768px) {
  .mmp-findus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "contact hours" "map map"; }
  .mmp-findus__phone { font-size: 40px; }
}
@media (min-width: 1200px) {
  .mmp-findus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "map contact hours"; gap: 30px; align-items: stretch; }
  .mmp-findus__contact { align-self: center; }
  .mmp-findus__map { min-height: 460px; }
  .mmp-week { padding: 54px 40px; }
}

/* 12. Reviews slider ------------------------------------------------------ */
.mmp-voices { position: relative; max-width: 960px; margin: 0 auto; }
.mmp-voices__track {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  scrollbar-width: none;
}
.mmp-voices__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mmp-voices__track { scroll-behavior: auto; }
}
.mmp-voice { flex: 0 0 100%; padding: 0 4px; scroll-snap-align: center; text-align: var(--mmp-flow-align); }
.mmp-voice__text { margin: 0 0 18px; color: var(--mmp-coal); font-size: 17px; line-height: 30px; letter-spacing: calc(.1px * var(--mmp-track)); }
.mmp-score { color: var(--mmp-star); font-size: 18px; letter-spacing: calc(3px * var(--mmp-track)); line-height: 1; }
.mmp-score__off { color: var(--mmp-star-off); }
.mmp-voice__name {
  margin: 14px 0 0;
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 15px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-voices__dots { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.mmp-voices__dots .mmp-pip::before { background: var(--mmp-brick-ink); opacity: .25; }
.mmp-voices__dots .mmp-pip[aria-current="true"] { border-color: var(--mmp-coal); }
.mmp-voices__dots .mmp-pip[aria-current="true"]::before { opacity: 1; }

/* 13. Forms --------------------------------------------------------------- */
.mmp-entry { display: grid; gap: 20px; max-width: 820px; margin: 0 auto; }
.mmp-entry--start { margin: 0; }
@media (min-width: 768px) {
  .mmp-entry { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .mmp-slot--span { grid-column: 1 / -1; }
}
.mmp-slot { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mmp-caption {
  padding: 0;
  color: var(--mmp-coal);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 15px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(1px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-textbox {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--mmp-hairline);
  border-radius: 0;
  background: var(--mmp-paper);
  color: var(--mmp-coal);
  font-size: 15px;
  transition: border-color .25s var(--mmp-curve);
}
.mmp-textbox:focus { border-color: var(--mmp-brick); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mmp-brick) 15%, transparent); }
textarea.mmp-textbox { min-height: 150px; resize: vertical; }
select.mmp-textbox { appearance: none; padding-right: 44px; background: var(--mmp-paper) var(--mmp-icon-chevron, url("../img/icons/chevron.svg")) right 16px center / 14px no-repeat; cursor: pointer; }
.mmp-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.mmp-agree input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mmp-brick); }
.mmp-textbox::placeholder { color: var(--mmp-hintgray); }
.mmp-entry__submit { display: flex; flex-direction: column; align-items: var(--mmp-flow-justify); gap: 14px; }
.mmp-entry--start .mmp-entry__submit { align-items: flex-start; }
.mmp-entry__status { margin: 0; color: var(--mmp-go); font-weight: 700; text-align: center; }

/* Star rating: radios in 1..5 order; the checked star and every star before it light up. */
.mmp-starpick { display: inline-flex; gap: 4px; }
.mmp-starpick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mmp-starpick label { color: var(--mmp-star-off); font-size: 32px; line-height: 1; cursor: pointer; transition: color .2s; }
.mmp-starpick input:checked + label,
.mmp-starpick label:has(~ input:checked),
.mmp-starpick:hover label { color: var(--mmp-star); }
.mmp-starpick label:hover ~ label { color: var(--mmp-star-off); }
.mmp-starpick input:focus-visible + label { outline: 2px solid var(--mmp-focus); outline-offset: 2px; }

/* 14. Footer -------------------------------------------------------------- */
.mmp-base { position: relative; overflow: hidden; padding: 70px 0 0; background: var(--mmp-base-bg); color: var(--mmp-base-ink); }
.mmp-base::before {
  content: "";
  position: absolute;
  right: -110px;
  top: -40px;
  width: 460px;
  height: 460px;
  background: url("../img/deco/footer-ring.svg") center / contain no-repeat;
  pointer-events: none;
}
.mmp-base a { color: var(--mmp-base-strong); }
.mmp-base a:hover { color: var(--mmp-base-hover); }
.mmp-base__grid { position: relative; display: grid; gap: 40px; padding-bottom: 50px; }
@media (min-width: 768px) {
  .mmp-base__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 50px; }
}
.mmp-base__brand {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: calc(2.7px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-base__logo { display: block; width: auto; height: 34px; }
.mmp-base__title {
  margin-bottom: 18px;
  color: var(--mmp-base-strong);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: calc(1px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-base__text { font-size: 15px; line-height: 1.75; }
.mmp-base__list { padding: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.mmp-base__list li + li { margin-top: 10px; }
.mmp-base__list small { display: block; color: var(--mmp-base-soft); font-size: 13px; }
.mmp-base__bottom {
  position: relative;
  padding: 26px 0 30px;
  border-top: 1px solid var(--mmp-base-line);
  font-size: 14px;
  text-align: center;
}
.mmp-base__bottom p { margin: 0; }

/* 15. Lightbox ------------------------------------------------------------ */
.mmp-viewer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mmp-viewer-bg);
  color: var(--mmp-on-viewer);
}
.mmp-viewer::backdrop { background: var(--mmp-viewer-backdrop); }
.mmp-viewer__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 64px 16px 24px; }
.mmp-viewer__img { width: auto; max-width: 100%; max-height: calc(100% - 44px); object-fit: contain; }

.mmp-viewer__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--mmp-viewer-btn);
  color: var(--mmp-on-viewer);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.mmp-viewer__btn:hover { background: var(--mmp-brick); }
.mmp-viewer__btn--close { top: 8px; right: 8px; }
.mmp-viewer__btn--prev { left: 8px; top: 50%; transform: translateY(-50%); }
.mmp-viewer__btn--next { right: 8px; top: 50%; transform: translateY(-50%); }

/* 16. Platform pages: banner, features, cards ---------------------------- */
.mmp-masthead {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 50px 0;
  background: var(--mmp-tint) url("../img/site/banner-m.jpg") center / cover no-repeat;
  text-align: center;
}
@media (min-width: 768px) {
  .mmp-masthead { min-height: 400px; background-image: url("../img/site/banner.jpg"); }
  /* the banner keeps its drawings at the two edges, so the words stay in the empty middle */
  .mmp-masthead > .mmp-wrap { max-width: min(var(--mmp-wrap), 80%); }
}
@media (min-width: 992px) {
  .mmp-masthead > .mmp-wrap { max-width: min(var(--mmp-wrap), 64%); }
}
.mmp-masthead--front { min-height: 380px; }
@media (min-width: 992px) {
  .mmp-masthead--front { min-height: 540px; }
}
.mmp-masthead__title { font-size: 36px; letter-spacing: calc(1.6px * var(--mmp-track)); text-transform: uppercase; }
.mmp-masthead__brand {
  margin: 0 0 8px;
  color: var(--mmp-brick-ink);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 44px;
  font-weight: var(--mmp-w-bold);
  line-height: 1.1;
  letter-spacing: calc(2px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-masthead__lead { max-width: 620px; margin: 0 auto 28px; color: var(--mmp-coal-2); font-size: 17px; }
@media (min-width: 768px) {
  .mmp-masthead__title { font-size: 56px; }
  .mmp-masthead__brand { font-size: 80px; }
}
.mmp-trail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 14px;
  letter-spacing: calc(1.4px * var(--mmp-track));
  text-transform: uppercase;
}
.mmp-trail li + li::before { content: "/"; margin: 0 10px; }
.mmp-trail [aria-current="page"] { color: var(--mmp-coal); }

.mmp-pillars { display: grid; gap: 40px; text-align: center; }
@media (min-width: 768px) {
  .mmp-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}
.mmp-pillar__img { width: 150px; height: 150px; margin: 0 auto 22px; border-radius: 50%; object-fit: cover; }
.mmp-pillar__title { margin-bottom: 10px; font-size: 20px; font-weight: 600; letter-spacing: calc(1px * var(--mmp-track)); text-transform: uppercase; }
.mmp-pillar p { max-width: 340px; margin: 0 auto; }

.mmp-spots { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .mmp-spots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 992px) {
  .mmp-spots { gap: 30px; }
}
.mmp-spot { position: relative; }
.mmp-spot__media { display: block; overflow: hidden; background: var(--mmp-oat); }
.mmp-spot__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--mmp-curve); }
.mmp-spot__media:hover img { transform: scale(1.05); }
.mmp-spot__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-width: 64px;
  padding: 8px 10px 7px;
  background: var(--mmp-brick);
  color: var(--mmp-paper);
  text-align: center;
  pointer-events: none;
}
.mmp-spot__badge b { display: block; font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust); font-size: 28px; font-weight: var(--mmp-w-med); line-height: 1; }
.mmp-spot__badge span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: calc(1px * var(--mmp-track)); text-transform: uppercase; }
.mmp-spot__meta { margin: 18px 0 4px; color: var(--mmp-brick-ink); font-size: 13px; font-weight: 700; }
.mmp-spot__title { margin-bottom: 8px; font-size: 20px; font-weight: 500; letter-spacing: calc(.8px * var(--mmp-track)); text-transform: uppercase; }
.mmp-spot__title a { color: var(--mmp-coal); }
.mmp-spot__title a:hover { color: var(--mmp-brick-ink); }
.mmp-spot__addr { margin: 0; font-size: 14px; line-height: 1.6; }

/* 17. Platform pages: long-form text, steps, FAQ, CTA, contact ----------- */
.mmp-article { max-width: 900px; margin: 0 auto; font-size: 16px; line-height: 1.75; }
.mmp-article > :first-child { margin-top: 0; }
.mmp-article h2 {
  margin: 44px 0 14px;
  font-family: var(--mmp-sans);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
}
.mmp-article h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: calc(.8px * var(--mmp-track)); text-transform: uppercase; }
.mmp-article p { margin: 0 0 16px; }
.mmp-article ul { margin: 0 0 18px; padding-left: 22px; }
.mmp-article li { margin-bottom: 8px; }
.mmp-article li::marker { color: var(--mmp-brick-ink); }
.mmp-article strong { color: var(--mmp-coal); }
.mmp-article a { text-decoration: underline; text-underline-offset: 3px; }
.mmp-dated { color: var(--mmp-coal); font-size: 14px; letter-spacing: calc(.4px * var(--mmp-track)); }
@media (min-width: 768px) {
  .mmp-article h2 { font-size: 34px; }
}

.mmp-howto { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: mmp-howto__step; }
@media (min-width: 768px) {
  .mmp-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (min-width: 1200px) {
  .mmp-howto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Three-step variant: stacked below 992px, three across from there. */
@media (min-width: 768px) {
  .mmp-howto--trio { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 992px) {
  .mmp-howto--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mmp-howto__step { position: relative; padding: 36px 26px 28px; border-top: 3px solid var(--mmp-brick); background: var(--mmp-paper); counter-increment: mmp-howto__step; }
.mmp-howto__step::before {
  content: counter(mmp-howto__step, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: var(--mmp-brick-ink);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 40px;
  font-weight: var(--mmp-w-semi);
  line-height: 1;
}
.mmp-howto__title { margin-bottom: 10px; font-size: 19px; font-weight: 600; letter-spacing: calc(.8px * var(--mmp-track)); text-transform: uppercase; }
.mmp-howto__step p { margin: 0; }

.mmp-ticks { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.mmp-ticks li { position: relative; padding-left: 30px; }
.mmp-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--mmp-icon-check, url("../img/icons/check.svg")) center / contain no-repeat; }

.mmp-qa { max-width: 900px; margin: 0 auto; }
.mmp-qa__item { border-bottom: 1px solid var(--mmp-hairline); }
.mmp-qa__item:first-child { border-top: 1px solid var(--mmp-hairline); }
.mmp-qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  color: var(--mmp-coal);
  font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust);
  font-size: 18px;
  font-weight: var(--mmp-w-med);
  letter-spacing: calc(.6px * var(--mmp-track));
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.mmp-qa__q::-webkit-details-marker { display: none; }
.mmp-qa__q::after {
  content: "+";
  content: "+" / "";
  flex: 0 0 34px;
  height: 34px;
  border: 1px solid var(--mmp-brick);
  color: var(--mmp-brick-ink);
  font-size: 22px;
  line-height: 31px;
  text-align: center;
  transition: background-color .3s, color .3s;
}
.mmp-qa__item[open] .mmp-qa__q::after { content: "\2212"; content: "\2212" / ""; background: var(--mmp-brick); color: var(--mmp-on-brick); }
.mmp-qa__q:hover { color: var(--mmp-brick-ink); }
.mmp-qa__a { padding: 0 50px 22px 0; font-size: 16px; line-height: 1.7; }
.mmp-qa__a p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .mmp-qa__q { font-size: 20px; }
}

.mmp-callout { padding: 64px 0; background: var(--mmp-callout-bg); color: var(--mmp-on-callout); text-align: center; }
.mmp-callout__title { margin-bottom: 12px; color: var(--mmp-on-callout); font-size: 28px; letter-spacing: calc(1.2px * var(--mmp-track)); text-transform: uppercase; }
.mmp-callout p { max-width: 680px; margin: 0 auto 26px; font-size: 16px; }
@media (min-width: 768px) {
  .mmp-callout { padding: 80px 0; }
  .mmp-callout__title { font-size: 36px; }
}

.mmp-reach { display: grid; gap: 40px; }
@media (min-width: 992px) {
  .mmp-reach { grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
}
.mmp-box { padding: 34px 28px; background: var(--mmp-tint); }
.mmp-box__title { margin-bottom: 14px; font-size: 20px; font-weight: 600; letter-spacing: calc(1px * var(--mmp-track)); text-transform: uppercase; }
.mmp-box p:last-child { margin-bottom: 0; }
.mmp-box + .mmp-box { margin-top: 20px; }

.mmp-lost { padding-block: 90px; text-align: center; }
body:has(.mmp-lost) { display: flex; flex-direction: column; min-height: 100svh; }
body:has(.mmp-lost) > main { display: flex; flex: 1 0 auto; }
body:has(.mmp-lost) .mmp-masthead { flex: 1; }
.mmp-lost__code { color: var(--mmp-brick-ink); font-family: var(--mmp-display);
  font-size-adjust: var(--mmp-display-adjust); font-size: 110px; font-weight: var(--mmp-w-bold); line-height: 1; letter-spacing: calc(4px * var(--mmp-track)); }
.mmp-lost__title { margin: 14px 0 12px; font-size: 28px; letter-spacing: calc(1.2px * var(--mmp-track)); text-transform: uppercase; }
.mmp-lost p { max-width: 560px; margin: 0 auto 28px; font-size: 16px; }