/* mtz-chrome.css: the header and footer partials, checkpoint 2, direction A "the office floor" (D-064).
   Source: replica/src/partials/chrome.css. scripts/build.mjs copies it to public/assets/mtz-chrome.css and links it
   right after the Webflow stylesheet on every page that carries the partials. Edit the source, never the copy.
   Everything is scoped to .mtz-header and .mtz-footer, apart from one rule for headings that stopped being h1
   (checkpoint 3, on every page that has them); the Webflow stylesheet is untouched.
   Breakpoints follow Webflow's: 1440 (large desktop), 991 (tablet and phone: the links sit under the logo), 767. */

/* ---------- headings that were h1 (one h1 per page) ----------
   On home and team, every h1 but one became an h2, h3 or div by its role, classes kept. These elements still get the base the
   h1 gave them (Webflow's "h1" rule): same specificity as that rule and later in the cascade, so any class rule that
   styled the old h1 still wins, exactly as before. Nothing moves. */
h2:where(.mtz-was-h1), h3:where(.mtz-was-h1), div:where(.mtz-was-h1) {
  margin-top: 20px; margin-bottom: 10px;
  font-family: inherit; font-size: 38px; line-height: 44px; font-weight: bold;
}

/* ---------- header ---------- */
.mtz-header{background:#fff;font-family:Poppins,sans-serif;text-align:left;position:sticky;top:0;z-index:20;transition:transform .28s ease,box-shadow .28s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* it slides away as you scroll down and back in as you scroll up (D-120; the script at the end of header.html) */
.mtz-header.is-hidden{transform:translateY(-100%)}
.mtz-header.is-floating{box-shadow:0 1px 0 rgba(0,0,0,.08)}
/* a menu jump to a home section keeps the header in view, so the section lands just under it */
#services,#portfolio{scroll-margin-top:104px}
@media (max-width:991px){#services,#portfolio{scroll-margin-top:160px}}
.mtz-header *,.mtz-header *::before,.mtz-header *::after{box-sizing:border-box}
.mtz-header__in{display:flex;align-items:center;justify-content:space-between;padding:20px 10%}
.mtz-brand{display:block;flex:none;line-height:0;border-radius:4px}
.mtz-brand img{display:block;width:55px;height:55px;max-width:none}
.mtz-nav__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.mtz-nav__item{position:relative;margin:0;padding:0}
.mtz-link{position:relative;display:inline-block;margin:0 5px;padding:5px 10px;color:#000;font-size:16px;font-weight:600;line-height:20px;letter-spacing:.25px;text-decoration:none;border-radius:4px}
.mtz-link:hover{color:#6d6d6d;text-decoration:underline}
.mtz-link__t{position:relative;white-space:nowrap}
/* seven items from checkpoint 13 (pricing): a little less room around them on small laptops, so the row never wraps */
@media (min-width:992px) and (max-width:1199px){.mtz-header__in{padding-left:5%;padding-right:5%}.mtz-link{margin:0 1px;padding:5px 8px}}
/* the current page: the dot that sits over every mascot's head in the office drawing, in the item's topic colour */
.mtz-link[aria-current] .mtz-link__t::after,.mtz-link.is-here .mtz-link__t::after{content:"";position:absolute;right:-10px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--mtz-dot,#f26625)}
/* the dot's colour follows the item's topic (D-119; facts.chrome.topics, the build checks they match) */
.mtz-link[data-topic="people"]{--mtz-dot:#000000}
.mtz-link[data-topic="growth"]{--mtz-dot:#1a20e7}
.mtz-link[data-topic="creative"]{--mtz-dot:#f26625}
.mtz-link[data-topic="tech"]{--mtz-dot:#8e6fb5}
.mtz-link[data-topic="brand"]{--mtz-dot:linear-gradient(135deg,#1a20e7,#6936a1,#b74a5b)}
.mtz-cta{display:inline-block;flex:none;padding:15px;border:2px solid #000;border-radius:7px;background:transparent;color:#000;font-size:12px;font-weight:700;line-height:20px;letter-spacing:2px;white-space:nowrap;text-decoration:none;transition:background-color .2s,color .2s}
.mtz-cta:hover{background:#000;color:#fff}
/* one "have a chat" per layout, so the tab order matches the visual order (header.html explains) */
.mtz-cta--phone{display:none}
@media screen and (min-width:1440px){
  .mtz-link{font-size:18px}
  .mtz-cta{padding:20px;font-size:15px}
}
/* tablet and phone: logo and "have a chat" on one row, every link under them, no menu icon */
@media screen and (max-width:991px){
  .mtz-header__in{flex-wrap:wrap;padding:18px 20px 14px}
  .mtz-cta{padding:12px 13px;font-size:11px;line-height:14px;letter-spacing:1.5px}
  .mtz-cta--phone{display:inline-block}
  .mtz-cta--desk{display:none}
  .mtz-nav{flex:1 0 100%}
  .mtz-brand img{width:46px;height:46px}
  .mtz-nav__list{flex-wrap:wrap;gap:0 16px;margin-top:10px}
  .mtz-link{margin:0;padding:7px 0;font-size:16px;line-height:22px}
  .mtz-link[aria-current] .mtz-link__t::after,.mtz-link.is-here .mtz-link__t::after{right:-9px;top:-3px;width:7px;height:7px}
}

/* ---------- footer ---------- */
.mtz-footer{background:#000;color:rgba(255,255,255,.75);font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.mtz-footer *,.mtz-footer *::before,.mtz-footer *::after{box-sizing:border-box}
/* resets at class weight (:where adds none), so the element rules below win on order */
.mtz-footer :where(p,ul,address){margin:0;padding:0}
.mtz-footer :where(address){font-style:normal}
.mtz-footer :where(ul){list-style:none}
.mtz-footer :where(a){color:#fff;font-weight:500;text-decoration:none;border-radius:4px;transition:color .2s}
.mtz-footer :where(a):hover{color:#f26625}
.mtz-footer__in{padding:56px 12% 64px}
.mtz-footer__scene{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.mtz-footer__sign{flex:0 1 330px;min-width:0;padding-bottom:30px}
.mtz-footer__wm{color:#fff;font-size:34px;font-weight:600;line-height:40px;letter-spacing:-.3px}
.mtz-footer__wm a{font-weight:600}
.mtz-footer__say{margin-top:12px;max-width:360px;font-size:15px;line-height:24px;text-wrap:balance}
.mtz-footer__nw{white-space:nowrap}
.mtz-footer__floor{display:block;flex:0 1 640px;min-width:0;width:640px;max-width:100%;height:auto;aspect-ratio:1056/355}
.mtz-footer__slab{height:15px;border:3px solid #fff;border-radius:3px;background:#000}
.mtz-footer__cols{display:grid;grid-template-columns:1.6fr 1.1fr .8fr .8fr;gap:40px;margin-top:48px}
.mtz-footer__col{min-width:0}
.mtz-footer__lab{margin-bottom:6px;color:#fff;font-size:13px;font-weight:700;line-height:20px}
.mtz-footer__sub{margin-top:12px;color:#fff;font-size:13px;font-weight:600;line-height:20px}
.mtz-footer__lab+.mtz-footer__sub{margin-top:0}
.mtz-footer__kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline}
.mtz-footer__kv+.mtz-footer__kv{margin-top:4px}
.mtz-footer__k{color:rgba(255,255,255,.5);font-size:12px}
.mtz-footer__list{display:grid;gap:4px}
.mtz-footer__base{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.mtz-footer__copy{font-size:14px}
/* hooks, empty today: the record line (checkpoint 12) and privacy and cookies (checkpoint 16) */
.mtz-footer__rec{margin-top:44px}
.mtz-footer__rec a{margin-right:8px;font-weight:600}
.mtz-footer__legal{display:flex;gap:22px;margin-right:auto;margin-left:28px}
/* the bottom row never squeezes a phrase onto two lines: between 768 and 1279 px the copyright went to four lines and
   "cookie settings" to two (final check, 27 Oct); now each phrase stays whole and the row wraps instead */
.mtz-footer__copy,.mtz-footer__legal a,.mtz-footer__cookies{white-space:nowrap}
.mtz-footer__legal{flex-wrap:wrap;row-gap:8px}
@media screen and (min-width:768px) and (max-width:1279px){.mtz-footer__base{flex-wrap:wrap;row-gap:16px}}
/* where the row wraps, the wrapped part starts on the left edge like the line above it */
@media screen and (min-width:768px) and (max-width:1023px){.mtz-footer__legal{margin-left:0}.mtz-footer__base .mtz-footer__view{margin-left:0}}
@media screen and (max-width:767px){.mtz-footer__legal .mtz-footer__cookies,.mtz-footer__base .mtz-footer__view{margin-left:0}}
@media screen and (max-width:1439px){
  .mtz-footer__cols{grid-template-columns:1.3fr 1.3fr .8fr .8fr}
}
@media screen and (max-width:1199px){
  .mtz-footer__cols{grid-template-columns:1fr 1fr;gap:32px 40px}
}
@media screen and (max-width:991px){
  .mtz-footer__scene{display:block}
  .mtz-footer__sign{padding-bottom:22px}
  .mtz-footer__floor{width:100%}
}
@media screen and (max-width:767px){
  .mtz-footer__in{padding:44px 20px 40px}
  .mtz-footer__wm{font-size:26px;line-height:32px}
  .mtz-footer__say{max-width:none;font-size:14px;line-height:22px}
  .mtz-footer__slab{height:9px;border-width:2px;border-radius:2px}
  .mtz-footer__cols{gap:28px 20px;margin-top:36px}
  .mtz-footer__col--addr,.mtz-footer__col--talk{grid-column:1/-1}
  .mtz-footer__base{flex-direction:column;align-items:flex-start;gap:16px}
  .mtz-footer__legal{margin-left:0}
}

/* ---------- the home page's last section meets the footer (Jon, 12 Oct) ----------
   The booking widget (Calendly) now takes its own content height (the footer script listens for Calendly's
   page-height message) instead of the embed's 100vh, and the empty padding under it goes, so the gap from the end of
   the widget to the footer's first content is the footer's own top padding plus Calendly's small inner margin.
   The widget's iframe becomes a block, which drops the few pixels of line space under it. Only blank space at the
   bottom of the contact section changes; nothing above the widget moves. */
/* form fields at 16 px on phones and tablets, so iPhone Safari does not zoom the page in when one is tapped (final
   check, 27 Oct: they were 14 px; the careers form already uses 16 px) */
@media screen and (max-width:991px){#contact-us .w-input,#contact-us .w-select{font-size:16px}}
#contact-us .padding-vertical.cta{padding-bottom:0}
#contact-us > .page-padding{padding-bottom:0}
#contact-us .calendly-inline-widget iframe{display:block}
/* the widget's height until Calendly reports its own (the frame loads only as it nears the screen): Calendly's page
   height at each width, measured 12 Oct (one column under a 1000 px wide container, two columns from there), so the
   page barely moves when the calendar arrives. The script then sets the exact height, also with !important. */
#contact-us .calendly-inline-widget{height:1215px!important}
@media screen and (min-width:480px){#contact-us .calendly-inline-widget{height:1160px!important}}
@media screen and (min-width:900px){#contact-us .calendly-inline-widget{height:1238px!important}}
@media screen and (min-width:1316px){#contact-us .calendly-inline-widget{height:798px!important}}

/* ---------- both: keyboard focus, reduced motion ---------- */
.mtz-header a:focus-visible,.mtz-footer a:focus-visible{outline:3px solid #f26625;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .mtz-cta,.mtz-footer a,.mtz-header{transition:none}
}

/* ---------- team page (checkpoint 11, Jon's pick B, D-109) ----------
   "we believe in partnership" with Jon and Tip in the deck's tall frames: photo, title, one credential and a short bio
   (D-043); the current team as the home strip's mascot tiles (D-077). Nothing overlaps on phones (today's avatar grid
   covered "who we are" there). */
.mtz-team__hero { color: #fff; }
.mtz-founders { margin-top: 56px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
@media (max-width: 991px) { .mtz-founders { grid-template-columns: minmax(0, 1fr); } }
.mtz-founders__lead { margin: 0; color: #fff; font-family: Poppins, sans-serif; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; font-weight: 400; text-wrap: balance; }
.mtz-founders__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 767px) { .mtz-founders__row { gap: 20px; } }
@media (max-width: 479px) { .mtz-founders__row { gap: 14px; } }
.mtz-founder { margin: 0; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.mtz-founder, .mtz-founder * { text-align: left; }
.mtz-founder__photo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 768; object-fit: cover; }
.mtz-founder__name { margin: 0; color: inherit; font-family: Poppins, sans-serif; font-size: 20px; line-height: 26px; font-weight: 700; }
.mtz-founder__role { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 24px; }
.mtz-founder__role span { opacity: .7; }
.mtz-founder__bio { margin: 12px 0 0; max-width: 34em; font-size: 16px; line-height: 26px; text-wrap: pretty; }
.mtz-founder__more { margin: 12px 0 0; font-size: 15px; line-height: 22px; }
.mtz-founder__more a, .mtz-faq__more a { color: #f26625; font-weight: 600; text-decoration: none; }
.mtz-founder__more a:hover, .mtz-faq__more a:hover, .mtz-founder__more a:focus-visible, .mtz-faq__more a:focus-visible { text-decoration: underline; }
.mtz-faq__more { margin-top: 10px !important; }
@media (max-width: 479px) { .mtz-founder__name { font-size: 16px; line-height: 22px; } .mtz-founder__role, .mtz-founder__bio, .mtz-founder__more { font-size: 13px; line-height: 20px; } }
.mtz-mascots { margin-top: 72px; }
.mtz-mascots__label { margin: 0 0 20px; color: inherit; font-size: 16px; line-height: 24px; }
.mtz-mascots__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.mtz-mascots__row li { flex: 0 0 calc((100% - 4 * 16px) / 5); max-width: 200px; }
@media (max-width: 767px) { .mtz-mascots__row { gap: 12px; } .mtz-mascots__row li { flex-basis: calc((100% - 2 * 12px) / 3); } }
.mtz-mascots__row img { display: block; width: 100%; height: auto; border-radius: 10%; }   /* the home strip's corners, so square pictures match the rounded ones */
/* Webflow pulls "who we are" 500 px up under the top section (today's avatar grid floated over it, and covered its text
   on phones); the new top section is as tall as its content, so the next section starts below it */
.mtz-team .who-we-are { margin-top: 0; }
.mtz-team .padding-vertical.about-us-coming-soon.first-fold.mtz-team__hero { padding-bottom: 96px; }
@media (max-width: 767px) { .mtz-team .padding-vertical.about-us-coming-soon.first-fold.mtz-team__hero { padding-bottom: 64px; } }
/* the value names became h3 (main skipped from h2 to h4); they keep today's h4 size */
.mtz-team .heading-17 { font-size: 18px; line-height: 24px; }

/* ---------- track record page (checkpoint 12, D-111 to D-113) ----------
   Option A, the status board (Jon, 18 Oct: "prefer A over hand drawn"). Black on white like the hero, Poppins, lowercase
   headings. Status is shape first: hit = filled circle, missed = open ring, not counted yet = dotted ring; every circle
   has its word under it and in its label. */
.mtz-record { background: #fff; color: #000; font-family: Poppins, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mtz-rec__in { max-width: 1120px; margin: 0 auto; padding: 120px 5% 112px; }
@media (max-width: 767px) { .mtz-rec__in { padding: 72px 16px 80px; } }
.mtz-record h1, .mtz-record h2, .mtz-record h3 { color: #000; font-family: Poppins, sans-serif; text-transform: none; letter-spacing: 0; }
.mtz-record h1 { margin: 0; font-size: clamp(44px, 6vw, 80px); line-height: 1.05; font-weight: 700; }
.mtz-record h2 { margin: 0 0 24px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; font-weight: 600; }
.mtz-record h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.mtz-record p { margin: 0; }
.mtz-record section { margin-top: 88px; }
@media (max-width: 767px) { .mtz-record section { margin-top: 64px; } }
.mtz-rec__tag { margin-top: 16px !important; max-width: 34em; font-size: 18px; line-height: 28px; color: #555; }
.mtz-rec__updated { margin-top: 28px !important; font-size: 14px; line-height: 22px; color: #555; }
.mtz-rec__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* the count */
.mtz-rec__count { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.mtz-rec__count b { font-size: clamp(64px, 9vw, 120px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mtz-rec__count > span { font-size: 18px; line-height: 26px; max-width: 14em; }
.mtz-strip { flex-basis: 100%; display: flex; gap: 6px; margin-top: 18px; }
.mtz-strip i { width: 10px; }
/* the circles */
.mtz-pill { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; vertical-align: middle; }
.mtz-pill--hit { background: #000; }
.mtz-pill--missed { border: 2px solid #000; background: #fff; }
.mtz-pill--pending { border: 2px dotted #888; background: #fff; }
.mtz-strip .mtz-pill { width: 18px; height: 18px; }
@media (max-width: 359px) { .mtz-strip { gap: 4px; } .mtz-strip .mtz-pill { width: 14px; height: 14px; } .mtz-strip i { width: 6px; } }
.mtz-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px !important; font-size: 14px; line-height: 22px; }
.mtz-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.mtz-legend .mtz-pill { width: 16px; height: 16px; }
/* the board */
.mtz-board { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.mtz-board thead th { padding: 0 0 10px; font-size: 13px; font-weight: 600; text-align: center; color: #555; border-bottom: 2px solid #000; }
.mtz-board thead th:first-child { text-align: left; }
.mtz-board tbody th { padding: 20px 24px 20px 0; text-align: left; font-weight: 400; vertical-align: top; }
.mtz-board tbody th b { display: block; font-size: 16px; font-weight: 600; }
.mtz-board tbody th > span { display: block; color: #555; font-size: 13px; line-height: 20px; }
.mtz-board tbody td { padding: 20px 6px; text-align: center; vertical-align: top; width: 76px; }
.mtz-board tbody tr { border-bottom: 1px solid #e3e3e3; }
.mtz-board__v { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtz-board__sum { font-weight: 600; white-space: nowrap; width: 64px !important; padding-top: 21px !important; }
@media (max-width: 767px) {
  .mtz-board, .mtz-board tbody { display: block; }
  .mtz-board thead { display: none; }
  .mtz-board tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: start; padding: 16px 0; }
  .mtz-board tbody th { grid-column: 1 / -1; padding: 0 0 12px; }
  .mtz-board tbody td { width: auto; padding: 0 2px; }
  .mtz-board__sum { padding: 2px 0 0 8px !important; width: auto !important; }
  .mtz-board tbody td[data-m]::before { content: attr(data-m); display: block; margin-bottom: 6px; font-size: 12px; line-height: 16px; color: #555; }
}
/* how we keep it */
.mtz-rec__qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; max-width: 980px; }
@media (max-width: 767px) { .mtz-rec__qs { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.mtz-rec__q p { margin-top: 8px; font-size: 15px; line-height: 24px; color: #222; }
/* the end */
.mtz-rec__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 48px; border-top: 2px solid #000; }
.mtz-rec__end p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 600; }

/* ---------- how to choose a marketing agency (checkpoint 15, D-131): Jon's post as a letter ----------
   One reading column, black on white, lowercase headings, orange only on links and the button. The four things worth
   paying for carry the site's own black circles, never emoji. Words from src/guide-page.json. */
.mtz-guide { background: #fff; color: #000; font-family: Poppins, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mtz-gd__in { display: block; box-sizing: content-box; max-width: 680px; margin: 0 auto; padding: 120px 5% 112px; }
@media (max-width: 767px) { .mtz-gd__in { padding: 72px 16px 80px; } }
.mtz-guide h1, .mtz-guide h2 { color: #000; font-family: Poppins, sans-serif; text-transform: none; letter-spacing: 0; margin: 0; text-wrap: balance; }
.mtz-guide h1 { margin-top: 12px; font-size: clamp(36px, 4.6vw, 54px); line-height: 1.1; font-weight: 700; }
.mtz-guide h2 { margin-bottom: 14px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; font-weight: 600; }
.mtz-guide p { margin: 0; }
.mtz-guide a:not(.mtz-cta) { color: #f26625; font-weight: 600; text-decoration: none; }
.mtz-guide a:not(.mtz-cta):hover, .mtz-guide a:not(.mtz-cta):focus-visible { text-decoration: underline; }
.mtz-gd__eyebrow { font-size: 13px; line-height: 20px; color: #555; }
.mtz-gd__by { margin-top: 22px !important; font-size: 15px; line-height: 23px; color: #444; }
.mtz-gd__head { padding-bottom: 36px; border-bottom: 2px solid #000; }
.mtz-gd__sec { margin-top: 56px; }
@media (max-width: 767px) { .mtz-gd__sec { margin-top: 44px; } }
.mtz-gd__sec > p { font-size: 18px; line-height: 30px; color: #111; }
.mtz-gd__sec > p + p { margin-top: 14px; }
@media (max-width: 767px) { .mtz-gd__sec > p { font-size: 17px; line-height: 28px; } }
.mtz-gd__pay { padding-top: 48px; border-top: 1px solid #e3e3e3; }
.mtz-gd__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 24px; }
.mtz-gd__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; align-items: start; }
.mtz-gd__dot { width: 18px; height: 18px; margin-top: 6px; border-radius: 50%; background: #000; }
.mtz-gd__list p { font-size: 18px; line-height: 30px; }
.mtz-gd__list b { font-weight: 600; }
@media (max-width: 767px) { .mtz-gd__list p { font-size: 17px; line-height: 28px; } }
.mtz-gd__close { padding-top: 48px; border-top: 1px solid #e3e3e3; }
.mtz-gd__punch { font-size: clamp(24px, 2.8vw, 32px) !important; line-height: 1.25 !important; font-weight: 600; color: #000 !important; }
.mtz-gd__answer { margin-top: 36px !important; font-size: 20px; line-height: 32px; font-weight: 600; }
@media (max-width: 767px) { .mtz-gd__answer { font-size: 18px; line-height: 29px; } }
.mtz-gd__short { margin-top: 32px; padding: 22px 24px; background: #f6f6f4; border-radius: 16px; }
.mtz-gd__cols { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
@media (max-width: 600px) { .mtz-gd__cols { grid-template-columns: minmax(0, 1fr); } }
.mtz-gd__ct { font-size: 17px; line-height: 26px; font-weight: 600; margin-bottom: 6px !important; }
.mtz-gd__short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mtz-gd__short li { position: relative; padding-left: 22px; font-size: 15px; line-height: 23px; }
.mtz-gd__short li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #000; box-sizing: border-box; }
.mtz-gd__short li.is-yes::before { background: #000; }
.mtz-guide .mtz-gd__short a { color: #000; font-weight: 400; text-decoration: underline; text-decoration-color: #c9c9c9; text-underline-offset: 3px; }
.mtz-gd__sec, .mtz-gd__list li { scroll-margin-top: 120px; }
.mtz-gd__ask { padding-top: 48px; border-top: 2px solid #000; }
.mtz-gd__qs { display: grid; gap: 22px; }
.mtz-gd__q h3 { margin: 0; font-family: Poppins, sans-serif; text-transform: none; letter-spacing: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: #000; }
.mtz-gd__q p { margin-top: 6px !important; font-size: 16px; line-height: 26px; color: #222; }
.mtz-gd__flags { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mtz-gd__flags li { position: relative; padding-left: 26px; font-size: 17px; line-height: 27px; }
.mtz-gd__flags li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; box-sizing: border-box; }
.mtz-gd__compare { margin-top: 48px !important; font-size: 17px; line-height: 28px; }
.mtz-gd__compare a { white-space: nowrap; margin-right: 10px; }
.mtz-gd__author { margin-top: 48px; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 28px; border-top: 1px solid #e3e3e3; }
.mtz-gd__author img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.mtz-gd__author p:not(.mtz-gd__eyebrow) { margin-top: 4px !important; font-size: 15px; line-height: 24px; color: #222; }
.mtz-gd__author a { display: inline-block; margin-top: 6px; font-size: 14px; }
.mtz-pr__guide { margin-top: 48px !important; font-size: 16px; line-height: 26px; }
.mtz-gd__end { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 40px; border-top: 2px solid #000; }
.mtz-gd__end p { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; font-weight: 600; }

/* ---------- the human / machine switch (checkpoint 18, D-045, D-144) ----------
   In the footer's last row: this page is the human view; "machine" opens its plain-text twin (/machine/...). */
/* the human / machine switch, as drawn at checkpoint 2 (D-064; Jon picked it again on 27 Oct 2026): Tip's mascot
   reaching for a round dial, and the two words. The pointer rests on "human" (up) and turns down to "machine" while
   someone points at the switch or tabs to the link; the link's click area covers the whole switch. */
.mtz-footer__view { position: relative; margin: 0 0 0 16px; display: inline-flex; align-items: flex-end; color: #fff; line-height: 0; }
.mtz-switch__bot { display: block; width: 44px; height: 59px; }
.mtz-switch__dial { display: block; width: 34px; height: 34px; margin: 0 9px 9px -3px; }
.mtz-switch__dial svg { display: block; width: 34px; height: 34px; overflow: visible; }
.mtz-switch__ptr { transform-origin: 18px 18px; transform: rotate(45deg); transition: transform .35s ease; }
.mtz-footer__view:hover .mtz-switch__ptr, .mtz-footer__view:focus-within .mtz-switch__ptr { transform: rotate(135deg); }
.mtz-switch__w { display: flex; flex-direction: column; min-width: 56px; margin-bottom: 8px; font-size: 12px; line-height: 16px; }   /* room for the bold "machine", so nothing shifts on hover */
.mtz-switch__w span { color: #fff; font-weight: 600; }
.mtz-switch__w a { color: rgba(255, 255, 255, .5); text-decoration: none; }
.mtz-switch__w a::after { content: ""; position: absolute; inset: 0; }
.mtz-footer__view:hover .mtz-switch__w span, .mtz-footer__view:focus-within .mtz-switch__w span { color: rgba(255, 255, 255, .5); font-weight: 400; }
.mtz-footer__view:hover .mtz-switch__w a, .mtz-footer__view:focus-within .mtz-switch__w a { color: #fff; font-weight: 600; }
.mtz-switch__w a:focus-visible { outline: 2px solid #f26625; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mtz-switch__ptr { transition: none; } }

/* ---------- the 404 page (checkpoint 18) ----------
   The page sits in the site's dark world: a short message, then Jon's drawing of the building, every mascot in a
   construction helmet, as the main thing on the page, one link back home. */
.mtz-nf { background: #050505; color: #fff; font-family: Poppins, sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: 72px; }
.mtz-nf__in { box-sizing: content-box; max-width: 1200px; margin: 0 auto; padding: 80px max(16px, 3vw) 28px; }
@media (max-width: 767px) { .mtz-nf__in { padding: 56px 16px 20px; } }
.mtz-nf__code { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: .08em; color: #f26625; }
.mtz-nf h1 { margin: 8px 0 0; color: #fff; font-family: Poppins, sans-serif; text-transform: none; letter-spacing: 0; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.05; font-weight: 700; text-wrap: balance; }
.mtz-nf__text { margin: 14px 0 0; font-size: 19px; line-height: 30px; color: #d6d6d6; }
@media (max-width: 767px) { .mtz-nf__text { font-size: 17px; line-height: 27px; } }
.mtz-nf__room { margin: 0; padding: 0 max(16px, 3vw); }
.mtz-nf__room .mtz-nf__map { max-width: 1200px; margin: 0 auto; }
.mtz-nf__map img { display: block; width: 100%; height: auto; border-radius: 16px; }
.mtz-nf__map { display: block; border-radius: 16px; outline: 3px solid transparent; outline-offset: 4px; transition: outline-color .15s; }
.mtz-nf__map:hover, .mtz-nf__map:focus-visible { outline-color: #f26625; }
@media (prefers-reduced-motion: reduce) { .mtz-nf__map { transition: none; } }

/* ---------- privacy, cookies, terms and the consent banner (checkpoint 16, D-135) ----------
   The banner sits at the bottom of the screen in the site's own black and white: one sentence, the cookie page link and
   two buttons of equal weight. The legal pages are one plain reading column. The booking calendar waits behind a button
   until someone accepts or opens it. */
.mtz-consent { position: fixed; z-index: 1000; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto; padding: 18px 20px; background: #fff; color: #000; border: 2px solid #000; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.12); font-family: Poppins, sans-serif; display: grid; gap: 14px; }
.mtz-consent[hidden] { display: none; }
.mtz-consent__text { margin: 0; font-size: 15px; line-height: 23px; }
.mtz-consent__text a { color: #f26625; font-weight: 600; text-decoration: none; }
.mtz-consent__text a:hover, .mtz-consent__text a:focus-visible { text-decoration: underline; }
.mtz-consent__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mtz-consent__btn { flex: 1 1 140px; padding: 11px 16px; border: 2px solid #000; border-radius: 999px; background: #fff; color: #000; font: 600 14px/20px Poppins, sans-serif; letter-spacing: .04em; cursor: pointer; }
.mtz-consent__btn:hover, .mtz-consent__btn:focus-visible { background: #000; color: #fff; }
/* phones: the banner took a quarter of a 390 px screen and half of a 320 px one on the first view (Jon, 27 Oct 2026:
   "the cookie banner is slightly too large"); same words and buttons, tighter, and the two buttons stay side by side */
@media (max-width: 479px) {
  .mtz-consent { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px; gap: 10px; border-radius: 14px; }
  .mtz-consent__text { font-size: 13px; line-height: 19px; }
  .mtz-consent__btns { flex-wrap: nowrap; gap: 8px; }
  .mtz-consent__btn { flex: 1 1 0; min-width: 0; padding: 8px 10px; font-size: 13px; line-height: 18px; letter-spacing: .02em; }
}
.mtz-footer__cookies { margin-left: 16px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mtz-cal-wait { height: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; border: 2px dashed rgba(0,0,0,.25); border-radius: 16px; box-sizing: border-box; }
.mtz-cal-open { padding: 12px 20px; border: 2px solid #000; border-radius: 999px; background: #fff; color: #000; font: 600 14px/20px Poppins, sans-serif; cursor: pointer; }
.mtz-cal-open:hover, .mtz-cal-open:focus-visible { background: #000; color: #fff; }
.mtz-cal-wait p { margin: 0; font-size: 13px; line-height: 20px; opacity: .7; }
.mtz-legal { background: #fff; color: #000; font-family: Poppins, sans-serif; -webkit-font-smoothing: antialiased; }
.mtz-lg__in { display: block; box-sizing: content-box; max-width: 720px; margin: 0 auto; padding: 120px 5% 112px; }
@media (max-width: 767px) { .mtz-lg__in { padding: 72px 16px 80px; } }
.mtz-legal h1, .mtz-legal h2 { color: #000; font-family: Poppins, sans-serif; text-transform: none; letter-spacing: 0; margin: 0; }
.mtz-legal h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 700; }
.mtz-legal h2 { font-size: 22px; line-height: 30px; font-weight: 600; }
.mtz-legal p { margin: 0; }
.mtz-lg__date { margin-top: 14px !important; font-size: 14px; line-height: 22px; color: #555; }
.mtz-lg__intro { margin-top: 24px !important; padding-bottom: 32px; border-bottom: 2px solid #000; font-size: 18px; line-height: 29px; }
.mtz-lg__sec { margin-top: 40px; display: grid; gap: 10px; }
.mtz-lg__sec p, .mtz-lg__list li { font-size: 16px; line-height: 26px; color: #222; }
.mtz-lg__list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.mtz-lg__more a, .mtz-legal a { color: #f26625; font-weight: 600; text-decoration: none; }
.mtz-lg__scroll { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mtz-lg__table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.mtz-lg__table th, .mtz-lg__table td { padding: 10px 10px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid #e3e3e3; }
.mtz-lg__table thead th { font-weight: 600; border-bottom: 2px solid #000; }
.mtz-lg__table tbody th { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .mtz-lg__table { min-width: 0; }
  .mtz-lg__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mtz-lg__table tr { display: block; padding: 14px 0; border-bottom: 1px solid #e3e3e3; }
  .mtz-lg__table th, .mtz-lg__table td { display: block; padding: 2px 0; border: 0; }
  .mtz-lg__table tbody th { white-space: normal; font-size: 15px; }
  .mtz-lg__table td::before { content: attr(data-label) ": "; color: #555; }
}

/* ---------- pricing page (checkpoint 13, D-116 to D-121): option A, the deck v9 package frame, polished ----------
   Black on white like /record, Poppins with a Prompt subset for the ฿ sign (the build links it on every page that shows one, D-122), lowercase
   headings, orange only on links and the button. Prices and words come from src/pricing-page.json and facts.prices. */
.mtz-price { background: #fff; color: #000; font-family: Poppins, Prompt, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mtz-pr__in { max-width: 1120px; margin: 0 auto; padding: 120px 5% 112px; }
@media (max-width: 767px) { .mtz-pr__in { padding: 72px 16px 80px; } }
.mtz-price h1, .mtz-price h2, .mtz-price h3 { color: #000; font-family: Poppins, Prompt, sans-serif; text-transform: none; letter-spacing: 0; }
.mtz-price h1 { margin: 0; font-size: clamp(44px, 6vw, 80px); line-height: 1.05; font-weight: 700; }
.mtz-price h2 { margin: 0 0 20px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; }
.mtz-price h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.mtz-price p { margin: 0; }
.mtz-price section { margin-top: 88px; }
@media (max-width: 767px) { .mtz-price section { margin-top: 64px; } }
.mtz-price a:not(.mtz-cta) { color: #f26625; font-weight: 600; text-decoration: none; }
.mtz-price a:not(.mtz-cta):hover, .mtz-price a:not(.mtz-cta):focus-visible { text-decoration: underline; }

/* the answer */
.mtz-pr__answer { margin-top: 48px !important; max-width: 38em; font-size: 22px; line-height: 34px; text-wrap: pretty; }
@media (max-width: 767px) { .mtz-pr__answer { font-size: 18px; line-height: 29px; margin-top: 36px !important; } }
.mtz-pr__fee { margin-top: 16px !important; max-width: 46em; font-size: 15px; line-height: 24px; color: #555; }

/* lists: the brand dot */
.mtz-pr__dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mtz-pr__dots li { position: relative; padding-left: 20px; font-size: 15px; line-height: 23px; }
.mtz-pr__dots li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #000; }

/* prices */
.mtz-pr__from { font-size: 13px; line-height: 20px; color: #555; }
.mtz-pr__amt { font-size: clamp(44px, 5vw, 64px); line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mtz-pr__per { margin-top: 6px !important; font-size: 15px; line-height: 22px; }
.mtz-pr__kick { font-size: 13px; line-height: 20px; color: #555; }
.mtz-pr__counts { margin-top: 6px !important; font-size: 15px; line-height: 22px; color: #555; }
.mtz-pr__line { font-size: 16px; line-height: 25px; }
.mtz-pr__note { margin-top: 18px !important; font-size: 13px; line-height: 20px; color: #555; }

/* the record line */
.mtz-pr__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 22px 0; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; margin-top: 56px !important; }
.mtz-pr__strip { display: flex; gap: 5px; }
.mtz-pr__strip i { width: 8px; }
.mtz-pr__pip { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.mtz-pr__pip--hit { background: #000; }
.mtz-pr__pip--miss { border: 2px solid #000; }
.mtz-pr__proof p { font-size: 15px; line-height: 24px; max-width: 46em; }

/* A: the deck's package frame, polished */
.mtz-pr__plans { display: grid; gap: 24px; }
.mtz-pr__frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 2px solid #000; border-radius: 20px; overflow: hidden; }
.mtz-pr__left { padding: 36px 40px 32px; display: flex; flex-direction: column; border-right: 2px solid #000; }
.mtz-pr__left h2 { margin: 6px 0 0; font-size: clamp(28px, 3vw, 40px); }
.mtz-pr__left .mtz-pr__price { margin-top: auto; padding-top: 40px; }
.mtz-pr__right { padding: 36px 40px 32px; }
.mtz-pr__right h3 { margin: 24px 0 14px; font-size: 13px; line-height: 20px; color: #555; font-weight: 600; }
@media (max-width: 991px) {
  .mtz-pr__frame { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .mtz-pr__left { border-right: 0; border-bottom: 2px solid #000; padding: 24px 20px; }
  .mtz-pr__right { padding: 24px 20px; }
  .mtz-pr__left .mtz-pr__price { padding-top: 24px; }
}

/* a quote, right after the plans */
.mtz-pr__mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 8px !important; font-size: 16px; line-height: 24px; }

/* every plan includes / not in the fee */
.mtz-pr__every { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 767px) { .mtz-pr__every { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* how it runs */
.mtz-pr__terms ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mtz-pr__terms li { padding-top: 18px; border-top: 2px solid #000; }
.mtz-pr__terms li p { margin-top: 8px !important; font-size: 15px; line-height: 24px; color: #222; }
@media (max-width: 767px) { .mtz-pr__terms ol { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* your first month (deck p.42) */
.mtz-pr__month ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: wk; }
.mtz-pr__month li { padding-top: 18px; border-top: 1px solid #000; position: relative; }
.mtz-pr__month li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #000; }
.mtz-pr__month li:last-child::before { background: #fff; border: 2px solid #000; box-sizing: border-box; }
.mtz-pr__when { display: block; font-size: 12px; line-height: 18px; color: #555; }
.mtz-pr__month h3 { margin-top: 4px; }
.mtz-pr__month li p { margin-top: 6px !important; font-size: 14px; line-height: 22px; color: #222; }
@media (max-width: 991px) { .mtz-pr__month ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 479px) { .mtz-pr__month ol { grid-template-columns: minmax(0, 1fr); } }

/* questions */
.mtz-pr__qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; max-width: 980px; }
@media (max-width: 767px) { .mtz-pr__qs { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.mtz-pr__q p { margin-top: 8px; font-size: 15px; line-height: 24px; color: #222; }

/* the end */
.mtz-pr__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 48px; border-top: 2px solid #000; }
.mtz-pr__end p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 600; }

/* the ฿ sign in page text: Poppins has no ฿, so a Prompt subset of that one glyph draws it (D-122; the build wraps it) */
.mtz-baht{font-family:Prompt,Poppins,sans-serif}