/* Home page only (checkpoint 3): the hero, the team strip and its heading link, and the about block.
   Built to public/assets/mtz-home.css and linked from index.html only, after the Webflow and chrome stylesheets. */

/* ---------- the team strip: its heading links to /team ---------- */
.mtz-team-link { color: inherit; text-decoration: none; display: block; border-radius: 6px; }
.mtz-team-link .meet-our-team::after { content: "\00a0>>" / ""; }
.mtz-team-link:hover .meet-our-team { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.mtz-team-link:focus-visible { outline: 3px solid #f26625; outline-offset: 6px; }

/* ---------- the team strip's tiles (Jon, 14 Oct, D-077: Tip, Jon, Pume, Lydia, Rob) ----------
   Desktop: the old strip's look and pace, tiles as wide as it showed them (208 px, 16 px apart) moving left at 120 px a
   second; the list starts again after one set of five (5 x 224 px = 1120 px), so the seam never shows. Below 992 px and with reduced motion:
   the first set only, standing still, all five in one row, tiles shrinking to fit the width. */
.mtz-tiles { --tile: 208px; --gap: 16px; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); width: max-content; }
.mtz-tiles__tile { flex: none; width: var(--tile); height: var(--tile); border-radius: 30px; overflow: hidden; }
.mtz-tiles__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) { .mtz-tiles { animation: mtz-tiles calc(1120s / 120) linear infinite; } }
@keyframes mtz-tiles { to { transform: translateX(calc(-5 * (var(--tile) + var(--gap)))); } }
@media (max-width: 991px) {
  .mtz-tiles { --gap: 16px; --tile: min(130px, calc((100vw - 48px - 4 * var(--gap)) / 5)); width: auto; justify-content: center; margin: 0 auto; }
  .mtz-tiles__tile { border-radius: 20px; }
  .mtz-tiles__tile:nth-child(n+6) { display: none; }
}
@media (max-width: 479px) { .mtz-tiles { --gap: 8px; } .mtz-tiles__tile { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .mtz-tiles { animation: none; width: auto; justify-content: center; margin: 0 auto; }
  .mtz-tiles__tile:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .mtz-tiles { --tile: min(208px, calc((100vw - 48px - 4 * var(--gap)) / 5)); }
}

/* ---------- the hero ---------- */
/* Poppins arrives a moment after the first paint, one weight at a time (Webflow's font loader). Until it does, the hero
   is laid out in Arial scaled to Poppins' width and height, so the lines break in the same places and nothing under the
   hero moves when each weight swaps in (cold-load layout shift on desktop went from 0.04 to the old page's level). */
@font-face { font-family: "mtz-poppins-fallback"; src: local("Arial"), local("ArialMT"); font-weight: 300 500; size-adjust: 112.2%; ascent-override: 93.6%; descent-override: 31.2%; line-gap-override: 8.9%; }
@font-face { font-family: "mtz-poppins-fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 800; size-adjust: 107.2%; ascent-override: 97.9%; descent-override: 32.6%; line-gap-override: 9.3%; }
/* type: Poppins 700, black on white, in the old hero's sizes (Webflow .bold-text.white-box, measured on the approved
   page 14-15 Oct): 60 px from 1440 px wide, 50 px from 992, 40 px from 768, 30 px from 480 (the first line 28 px, as
   the old one) and 44 px below 480. Our longest line, "puts its founder on your strategy", is 16.8 em in Poppins Bold,
   longer than any old line. From 480 px up every line has to fit on one line, so between 480 and 565 px the type eases
   down to 5.3% of the width (25 px at 480); below 480 every line has to fit on two, so below 423 px it eases down to
   10.4% of the width ("on your strategy" is 8.5 em; 41 px at 390). The slot's height never changes while it moves and
   nothing under it shifts. Every height in the hero is a whole pixel, so the sections below sit on whole pixels exactly
   as before and render pixel for pixel the same. The lines sit as far apart as the old hero's (--lh, measured 15 Oct:
   76 px from 1440, 74, 71, 42, and 51 on phones with 9 px more before the moving line), in pixels, so they stay put
   where the type eases down. */
.mtz-hero {
  --fs: 50px; --lh: 74px; --lead-gap: 0px; --slot-lines: 1; --gut: 6vw;
  position: relative; background: #fff; color: #000; font-family: Poppins, "mtz-poppins-fallback", sans-serif;
}
@media (min-width: 1440px) { .mtz-hero { --fs: 60px; --lh: 76px; } }
@media (max-width: 991px) { .mtz-hero { --fs: 40px; --lh: 71px; } }
@media (max-width: 767px) { .mtz-hero { --fs: min(30px, 5.3vw); --lh: 42px; } }
@media (max-width: 639px) { .mtz-hero { --gut: 5vw; } }
@media (max-width: 479px) { .mtz-hero { --fs: min(10.4vw, 44px); --lh: 51px; --lead-gap: 9px; --slot-lines: 2; } }
.mtz-hero__pin { padding: 0 var(--gut); }
.mtz-hero__sentence { position: relative; max-width: 1100px; margin: 0 auto; text-align: center; font-size: var(--fs); line-height: var(--lh); }
.mtz-hero__h1 { margin: 0; font: inherit; font-weight: 700; color: #000; }
.mtz-hero__lead, .mtz-hero__slot, .mtz-hero__item { display: block; }
.mtz-hero__slot { margin-top: var(--lead-gap); }
.mtz-hero__lead { text-wrap: balance; }
@media (min-width: 480px) and (max-width: 767px) { .mtz-hero__lead { font-size: calc(var(--fs) * 28 / 30); } }
.mtz-hero__item { text-wrap: balance; }

/* still (no JavaScript, or reduced motion): the three lines sit under the sentence as a short list */
.mtz-hero__lines {
  list-style: none; margin: round(.5em, 1px) auto 0; padding: 0; max-width: 46em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 1.3em;
  font-size: max(16px, .34em); line-height: round(1.4em, 1px); font-weight: 600; color: #333; letter-spacing: 0;
}
.mtz-hero__lines .mtz-hero__line { position: relative; padding-left: .95em; }
.mtz-hero__lines .mtz-hero__line::before {
  content: ""; position: absolute; left: 0; top: .5em; width: .42em; height: .42em; border: 2px solid #000; border-radius: 50%; box-sizing: border-box;
}

/* moving: the slot is a window one or two lines tall; the four steps (three lines, then the H1's own ending) slide
   through it, stacked in the same place. Waiting steps sit below the window. */
.mtz-hero.is-motion .mtz-hero__slot,
.mtz-hero.is-motion .mtz-hero__lines { height: round(up, calc(var(--slot-lines) * var(--lh) + .16em), 1px); overflow: hidden; }
.mtz-hero.is-motion .mtz-hero__slot { position: relative; }
.mtz-hero.is-motion .mtz-hero__lines {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; display: block;
  font-size: 1em; line-height: var(--lh); font-weight: 700; color: #000;
}
.mtz-hero.is-motion .mtz-hero__lines .mtz-hero__line { padding: 0; }
.mtz-hero.is-motion .mtz-hero__lines .mtz-hero__line::before { content: none; }
.mtz-hero.is-motion .mtz-hero__item { position: absolute; left: 0; right: 0; top: 0; transform: translateY(calc(var(--slot-lines) * var(--lh) + .6em)); }
.mtz-hero.is-motion .mtz-hero__end { transform: none; }

/* the first view (Jon, 14-15 Oct: B with one line, the old hero's white space, the line under the button; D-076,
   D-083). The old hero's space above and below is a share of the page width (Webflow's .padding-vertical.hero, measured
   against its .page-padding box, which is 76% of the page): 15% top and bottom, 10% and 7% from 1440 px, 10% and 25%
   below 480 px. The same shares here, with --nudge for where our line boxes start, so the sentence starts and the
   button sits where they do on the old site (--to-go, measured from the button's top, 15 Oct: within 1 to 2 px from
   1920 to 360 wide). The one line follows the button (--to-sub) and the old white under the button sits under it (its
   bottom margin takes off the line's own leading). Where the type eases down (480-565 px and below 423 px) its
   letters sit lower in the same line spacing, so --nudge takes off half the difference, and --to-go adds back what
   the shorter slot gives up. */
.mtz-hero { --pv: 76vw; --top: .15; --bottom: .15; --nudge: 16px; --to-go: 44px; --to-sub: 32px; }
@media (min-width: 1440px) { .mtz-hero { --top: .10; --bottom: .07; --nudge: -10px; --to-go: 44px; --to-sub: 32px; } }
@media (max-width: 991px) { .mtz-hero { --nudge: 17px; --to-go: 50px; --to-sub: 28px; } }
@media (max-width: 767px) { .mtz-hero { --nudge: calc(33px - (30px - var(--fs)) / 2); --to-go: calc(68px + (30px - var(--fs)) * .75); --to-sub: 28px; } }
@media (max-width: 479px) { .mtz-hero { --top: .10; --bottom: .25; --nudge: calc(20px - (44px - var(--fs)) / 2); --to-go: calc(30px + (44px - var(--fs)) * .75); --to-sub: 24px; } }
.mtz-hero__pin { padding-top: round(calc(var(--pv) * var(--top) + var(--nudge)), 1px); padding-bottom: round(calc(var(--pv) * var(--bottom)), 1px); }
.mtz-hero__sub {
  max-width: 34em; margin: var(--to-sub) auto round(-.45em, 1px); text-align: center;
  font-size: clamp(16px, 1.35vw, 20px); line-height: round(1.55em, 1px); color: #333; text-wrap: balance;
}
.mtz-hero__go { margin: var(--to-go) 0 0; text-align: center; }
/* the old button as it was: as wide as its words, at most the old hero box (76% of the page) less its 40 px margins,
   so on a 390 px phone it is 216 px wide on three lines, as today */
.mtz-hero__go .button-primary.main { display: inline-flex; max-width: calc(var(--pv) - 80px); margin: 0; font-family: inherit; }
/* lines of equal length, so ">>" never sits alone on the last line (final check 27 Oct: 390 and 600 px); the words stay
   exactly as they are, since the tag manager's "have a chat click" trigger matches them; very small phones get a little
   less letter-spacing, so the button keeps to three lines at 320 px */
.mtz-hero__go .button-primary.main { text-wrap: balance; }
@media (max-width: 374px) { .mtz-hero__go .button-primary.main { letter-spacing: 1px; padding-left: 14px; padding-right: 14px; } }
/* "about marketyze": the site paragraph of record, the last block of the page (Jon, 14 Oct: not under the first
   view). In the footer's black and type, so the two read as one; it stays page content (src/partials/about.html). */
.mtz-about {
  background: #000; color: rgba(255, 255, 255, .75); font-family: Poppins, "mtz-poppins-fallback", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left;
}
.mtz-about__in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 64px;
  padding: 72px 12% 24px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 992px) { .mtz-about__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (max-width: 991px) { .mtz-about__in { padding: 56px 20px 24px; } }
.mtz-about__h { grid-column: 1 / -1; margin: 0; color: #fff; font-size: 13px; font-weight: 700; line-height: 20px; }
.mtz-about p { margin: 0; }
.mtz-about__lede { color: #fff; font-size: clamp(17px, 1.3vw, 20px); line-height: round(1.6em, 1px); text-wrap: pretty; }
.mtz-about__a { display: grid; gap: 16px; align-content: start; }
.mtz-about__b { display: grid; gap: 12px; align-content: start; font-size: 15px; line-height: round(1.7em, 1px); text-wrap: pretty; }
.mtz-about strong { font-weight: 600; color: #fff; }
.mtz-about__nw { white-space: nowrap; }
.mtz-about__rec a { color: #f26625; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mtz-about__rec a:hover, .mtz-about__rec a:focus-visible { text-decoration: underline; }

/* ---------- "get to know us" (checkpoint 4, D-086) ----------
   The three block headings break into even lines, so no word sits alone (the copy also ties its last two words with a
   no-break space). .mtz-nw keeps a short phrase such as "(ex-Lazada)" on one line anywhere on the page. */
.kvp1-section .title-h2, .kvp2-topline-section .title-h2, .kvp3-passionate-team-section .title-h2 { text-wrap: balance; }
.mtz-nw { white-space: nowrap; }

/* ---------- "what we do" (checkpoint 5, D-088, D-090) ----------
   The service row wraps between items, never inside one ("social media" stays whole), with "AI" and "+" kept
   together; the row starts flush with the text above it on every line (Webflow gives every link 5 px on each side).
   The heading and the main-service text break into even lines. */
#services .services { display: flex; flex-wrap: wrap; row-gap: 4px; margin-left: -5px; }
#services .services .service-link { white-space: nowrap; }
#services .services .mtz-svc-tail { display: flex; }
.growth-service-section .title-h2 { text-wrap: balance; }
#services .service-main-blurb, .growth-service-section .service-main-blurb { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .mtz-team-link .meet-our-team { transition: none; }
}

/* ---------- "our main service" and the sub-services (checkpoint 6, D-098) ----------
   The "what we offer" lists are laddered: each line a little wider than the one before. A line never wraps; on phones
   the box text shrinks just enough for its widest line (--wmax, measured at 20 px by review/cp-06/ladder.mjs) to fit,
   so the staircase holds at every width. Today's lists wrapped on phones. */
.mtz-services .what-we-offer { container-type: inline-size; }
.mtz-services .what-we-offer .mtz-kw { white-space: nowrap; }
@media (max-width: 767px) {
  .mtz-services .what-we-offer { padding-left: 18px; padding-right: 18px; }
  .mtz-services .what-we-offer .sub-small-txxt { display: block; font-size: min(15px, calc(100cqi * 19.4 / var(--wmax))); line-height: 20px; }
}

/* ---------- "what we did" + client projects, logos, reviews (checkpoint 7, D-100, D-101) ----------
   One black section: the "what we did" label, the title and one line, then the project tiles, one per row at full
   width as on today's site (Jon, 18 Oct: "can these be full page as before?"). The Surround Living and Kapas
   tiles carry the client's own line, with the name and the company logo. The logo wall keeps the same gaps between
   logos at every width (6 / 4 / 3 per row from 1200 / 768 / below, so the 24 logos fill every row), no names line.
   Every review in the slider shows the person's photo, name, title and the company logo. */
.mtz-work .mtz-work__head { margin-bottom: 56px; }
.mtz-work .mtz-work__head .h2 { margin-bottom: 40px; }
.mtz-work .mtz-work__head .title-h2 { margin-top: 0; }
.mtz-work .mtz-work__blurb { max-width: 640px; margin-bottom: 0; text-wrap: pretty; }
.mtz-work .mtz-work__grid { flex: 1 1 auto; width: 100%; }
.mtz-work .mtz-work__grid .link-block { display: block; }
.mtz-work .mtz-work__grid .gallery-image-4 { width: 100%; }
.mtz-work .mtz-work__cta { margin-top: 24px; }
.mtz-work .mtz-work__quote { margin: 20px 0 0; color: #fff; text-align: left; }
.mtz-work .mtz-work__quote blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 28px; max-width: 760px; text-wrap: pretty; }
@media (max-width: 767px) { .mtz-work .mtz-work__quote blockquote { font-size: 16px; line-height: 24px; } }
.mtz-work .mtz-work__quote p { margin: 0; }
.mtz-work .mtz-work__quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; line-height: 20px; opacity: .8; }
.mtz-work .mtz-work__quote .mtz-reviews__brand { margin: 0; width: 72px; height: 48px; filter: invert(1); flex: 0 0 auto; }
.mtz-proof .mtz-logos__wall { --n: 6; --gx: 32px; --gy: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gy) var(--gx);
  max-width: calc(var(--n) * 150px + (var(--n) - 1) * var(--gx)); margin-left: auto; margin-right: auto; }
@media (max-width: 1199px) { .mtz-proof .mtz-logos__wall { --n: 4; --gx: 24px; --gy: 18px; } }
@media (max-width: 767px) { .mtz-proof .mtz-logos__wall { --n: 3; --gx: 14px; --gy: 12px; } }
.mtz-proof .mtz-logos__logo { flex: 0 0 auto; width: min(150px, calc((100% - (var(--n) - 1) * var(--gx)) / var(--n))); height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; }
.mtz-proof .testimonial-info-two .client-name { text-align: center; }
.mtz-reviews__brand { display: block; width: 96px; height: 64px; margin: 4px auto 0; object-fit: cover; }

/* ---------- FAQ (checkpoint 9, D-103) ----------
   The questions come from facts.faq (the build stamps them and the FAQPage schema from the same list). Webflow made the
   question numbers white from 1440 px, so they vanished on the white page there; they stay black as on smaller screens. */
.faq-section .faq_number-wrapper .faq_title { color: #000; }

/* ---------- contact form (checkpoint 10, D-105) ----------
   The new "how did you hear about us?" select looks like the fields above it: same underline, "pick one" in the
   placeholders' grey until an answer is picked, its text starting where theirs does; the open list reads dark on light. */
.submit-form-cta .mtz-heard { padding-left: 8px; cursor: pointer; }
.submit-form-cta .mtz-heard:has(option[value=""]:checked) { color: #999; }
.submit-form-cta .mtz-heard option { color: #000; background: #fff; }

/* The thank-you and error boxes after sending (launch day, Jon 28 Oct: "a rounded square in white around black with
   white font"): the send button's line and corners (1 px white, 10 px) on black at every width, instead of Webflow's
   grey box under 1440 px, which left the white text unreadable. Webflow's script still shows and hides them. */
.success-message.w-form-done, .success-message + .w-form-fail { background-color: #000; color: #fff; border: 1px solid #fff; border-radius: 10px; padding: 18px 24px; text-align: left; }