/* ════════════════════════════════════════════════════════════════════
   mtz. website — editorial layout system + motion
   Architectural margins, oversized bleeding type, a left index rail,
   blend-mode fixed chrome, an interactive work index, and the full
   motion layer (cursor, reveals, parallax, marquee).
   ════════════════════════════════════════════════════════════════════ */

:root {
  --pad: clamp(20px, 4.5vw, 72px);
  --frame: clamp(11px, 1.5vw, 22px);
  --line: var(--border);
}

html { scroll-behavior: auto; }
body { background: var(--color-bg); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
.mtz-has-cursor, .mtz-has-cursor a, .mtz-has-cursor button, .mtz-has-cursor input, .mtz-has-cursor textarea { cursor: none; }

/* page edges */
.mtz-edge { padding-inline: var(--pad); }
.mtz-bleed-rule { height: 1px; background: var(--line); margin-inline: var(--pad); }

/* ════ FIXED CHROME (blend-mode so it reads on any background) ════ */
.mtz-chrome {
  position: fixed; inset: 0; z-index: var(--z-sticky);
  pointer-events: none; mix-blend-mode: difference; color: #fff;
}
.mtz-chrome a, .mtz-chrome button { pointer-events: auto; color: #fff; }
.mtz-frame { position: fixed; background: rgba(255,255,255,0.5); }
.mtz-frame--t { top: var(--frame); left: var(--frame); right: var(--frame); height: 1px; }
.mtz-frame--b { bottom: var(--frame); left: var(--frame); right: var(--frame); height: 1px; }
.mtz-frame--l { left: var(--frame); top: var(--frame); bottom: var(--frame); width: 1px; }
.mtz-frame--r { right: var(--frame); top: var(--frame); bottom: var(--frame); width: 1px; }

.mtz-chrome__corner {
  position: fixed; display: flex; align-items: center; gap: 1.5rem;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mtz-chrome__tl { top: calc(var(--frame) + 1.1rem); left: calc(var(--frame) + 1.3rem); }
.mtz-chrome__tr { top: calc(var(--frame) + 1.1rem); right: calc(var(--frame) + 1.3rem); }
.mtz-chrome__bl { bottom: calc(var(--frame) + 1rem); left: calc(var(--frame) + 1.3rem); }
.mtz-chrome__br { bottom: calc(var(--frame) + 1rem); right: calc(var(--frame) + 1.3rem); }
.mtz-chrome__logo img { height: 19px; width: auto; display: block; }
.mtz-chrome__nav { display: flex; gap: 1.6rem; }
.mtz-chrome__nav a { font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; }
.mtz-chrome__nav a { position: relative; }
.mtz-chrome__nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: #fff; transition: width var(--dur-base) var(--ease-out); }
.mtz-chrome__nav a:hover::after { width: 100%; }
.mtz-chrome__vert {
  position: fixed; left: calc(var(--frame) + 1.05rem); top: 50%;
  transform-origin: left center; transform: rotate(-90deg) translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  white-space: nowrap;
}
.mtz-burger { display: none; background: none; border: 0; width: 30px; height: 16px; position: relative; }
.mtz-burger span, .mtz-burger span::before { content: ''; position: absolute; left: 0; width: 30px; height: 1.5px; background: #fff; transition: transform var(--dur-base) var(--ease-out); }
.mtz-burger span { top: 7px; } .mtz-burger span::before { top: -6px; }
.mtz-burger span::after { content: ''; position: absolute; left: 0; top: 6px; width: 30px; height: 1.5px; background: #fff; transition: transform var(--dur-base) var(--ease-out); }
.mtz-burger.is-open span { background: transparent; }
.mtz-burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.mtz-burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile menu / sidebar (not blended): discreet logo + close at the top, then
   the nav. The close button is essential — the chrome burger sits behind this
   overlay, so this is how you dismiss without picking an option. */
.mtz-menu { position: fixed; inset: 0; z-index: var(--z-overlay); color: #fff; display: flex; flex-direction: column; gap: 1.5rem; padding: calc(var(--frame) + 1rem) var(--pad) var(--pad); pointer-events: none; }
.mtz-menu.is-open { pointer-events: auto; }
@media (min-width: 821px) { .mtz-menu { display: none; } }

/* Horizontal "loading" panels — same idea as the intro curtain, but the bands
   sweep in/out sideways, staggered (loading each block), then the items load
   in one by one. Closing reverses the whole thing. */
.mtz-menu__panels { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 0; overflow: hidden; }
.mtz-menu__panels span { flex: 1; background: var(--brand-700); box-shadow: 0 0 0 1px var(--brand-700); transform: translateX(101%); transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; }
.mtz-menu.is-open .mtz-menu__panels span { transform: none; }
.mtz-menu.is-open .mtz-menu__panels span:nth-child(1) { transition-delay: 0s; }
.mtz-menu.is-open .mtz-menu__panels span:nth-child(2) { transition-delay: 0.06s; }
.mtz-menu.is-open .mtz-menu__panels span:nth-child(3) { transition-delay: 0.12s; }
.mtz-menu.is-open .mtz-menu__panels span:nth-child(4) { transition-delay: 0.18s; }
.mtz-menu__panels span:nth-child(1) { transition-delay: 0.18s; }
.mtz-menu__panels span:nth-child(2) { transition-delay: 0.12s; }
.mtz-menu__panels span:nth-child(3) { transition-delay: 0.06s; }
.mtz-menu__panels span:nth-child(4) { transition-delay: 0s; }

.mtz-menu__head, .mtz-menu__nav { position: relative; z-index: 1; }
.mtz-menu__head { display: flex; justify-content: space-between; align-items: center; }
.mtz-menu__logo { height: 18px; width: auto; opacity: 0.85; }
.mtz-menu__close { width: 38px; height: 38px; position: relative; background: none; border: 0; cursor: pointer; margin-right: -8px; }
.mtz-menu__close span { position: absolute; top: 50%; left: 8px; right: 8px; height: 1.5px; background: #fff; }
.mtz-menu__close span:first-child { transform: rotate(45deg); }
.mtz-menu__close span:last-child { transform: rotate(-45deg); }
.mtz-menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.mtz-menu a { font-size: clamp(2.4rem, 11vw, 4.5rem); font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1.04; display: flex; gap: 1rem; align-items: baseline; }
.mtz-menu a span { font-family: var(--font-mono); font-size: 0.9rem; color: var(--brand-300); }
.mtz-menu a em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* Items load in after the panels (staggered); hide quickly on close. */
.mtz-menu__head, .mtz-menu__nav a { opacity: 0; transform: translateX(26px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.mtz-menu.is-open .mtz-menu__head { opacity: 1; transform: none; transition-delay: 0.26s; }
.mtz-menu.is-open .mtz-menu__nav a { opacity: 1; transform: none; }
.mtz-menu.is-open .mtz-menu__nav a:nth-child(1) { transition-delay: 0.32s; }
.mtz-menu.is-open .mtz-menu__nav a:nth-child(2) { transition-delay: 0.38s; }
.mtz-menu.is-open .mtz-menu__nav a:nth-child(3) { transition-delay: 0.44s; }
.mtz-menu.is-open .mtz-menu__nav a:nth-child(4) { transition-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
  .mtz-menu__panels span, .mtz-menu__head, .mtz-menu__nav a { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ════ SCROLL RAIL (innovative scrollbar) ════
   A hairline on the right edge that fills top→bottom as you scroll, with a faint
   track behind it — replaces the native scrollbar on desktop. mix-blend-mode
   keeps it visible over both the light sections and the dark band. */
.mtz-progress { position: fixed; top: 0; bottom: 0; right: 0; width: 2px; background: #fff; transform: scaleY(0); transform-origin: 50% 0; z-index: var(--z-modal); mix-blend-mode: difference; pointer-events: none; }
@media (min-width: 821px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }
  body::after { content: ''; position: fixed; top: 0; bottom: 0; right: 0; width: 1px; background: var(--border); z-index: calc(var(--z-modal) - 1); pointer-events: none; }
}
@media (max-width: 820px) { .mtz-progress { display: none; } }

/* ════ HERO ════ */
.mtz-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(3.5rem, 8vh, 6rem); position: relative; }
.mtz-hero__top { display: flex; justify-content: space-between; align-items: flex-start; }
.mtz-hero__title { font-weight: var(--weight-semibold); font-size: clamp(3rem, 9.2vw, 8.5rem); line-height: 0.94; letter-spacing: -0.05em; margin: clamp(1.5rem, 4vh, 3rem) 0; }
.mtz-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.mtz-line__i { display: block; transition: transform 1.05s var(--ease-out); }
.mtz-line__i.mtz-hide { transform: translateY(115%); }
/* Hero headline: masked while the intro curtain is up, then masks in when the
   lock is released (after the curtain has cleared it — see exitIntro). Keyed off
   the <html> lock class so the reveal survives React re-rendering the line nodes.
   The failsafe animation reveals the headline even if the intro JS ever stalls. */
html.mtz-intro-lock .mtz-hero__title .mtz-line__i { transform: translateY(120%); animation: mtz-hero-failsafe 0.9s var(--ease-out) 6.6s forwards; }
@keyframes mtz-hero-failsafe { to { transform: translateY(0); } }
.mtz-hero__title .l2 { padding-left: 7vw; }
.mtz-hero__title .l3 { padding-left: 3vw; }
.mtz-hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.mtz-hero__title .dot { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); }
/* Headline accents: after the line masks in, the two brand flourishes get their
   own beat — "seguir" (the one serif word) eases up, then the period (the logo's
   dot, in brand color) pops. Base = fully visible, so the words still show if
   motion never runs; they only hide while the intro lock is up, and the
   transition-delays stage the cascade on reveal (keyed off the stable <html>
   lock class, like the line reveal, so it survives React re-rendering). */
.mtz-hero__title em { display: inline-block; vertical-align: baseline; transition: opacity 0.6s var(--ease-out) 0.9s, transform 0.6s var(--ease-out) 0.9s; }
.mtz-hero__title .dot { display: inline-block; transform-origin: 50% 78%; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s; }
html.mtz-intro-lock .mtz-hero__title em { opacity: 0; transform: translateY(0.28em); }
html.mtz-intro-lock .mtz-hero__title .dot { transform: scale(0); }
.mtz-hero__foot { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.mtz-hero__lead { max-width: 38ch; font-size: var(--text-md); line-height: 1.5; color: var(--text-secondary); justify-self: end; grid-column: 2; }
.mtz-hero__lead em { font-family: var(--font-serif); font-style: italic; color: var(--text-primary); }
.mtz-hero__cue { grid-column: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 0.8rem; }
.mtz-hero__cue::before { content: ''; width: 46px; height: 1px; background: var(--brand-700); display: inline-block; animation: mtz-cue 2.4s var(--ease-in-out) infinite; transform-origin: left; }
@keyframes mtz-cue { 0%,100% { transform: scaleX(0.2); } 50% { transform: scaleX(1); } }

/* eyebrow shared */
.mtz-eyebrow-row { display: flex; align-items: center; gap: 0.9rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.mtz-eyebrow-row b { color: var(--brand-700); font-weight: 400; }

/* ════ MANIFESTO ════ */
.mtz-manifesto { padding: clamp(6rem, 14vw, 12rem) var(--pad); border-top: 1px solid var(--line); }
.mtz-manifesto__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 4vw, 4rem); }
.mtz-manifesto__label { position: sticky; top: calc(var(--frame) + 3.5rem); align-self: start; display: flex; flex-direction: column; gap: 0.5rem; }
.mtz-manifesto__idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--brand-700); }
.mtz-manifesto__cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.mtz-manifesto__text { font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.22; letter-spacing: -0.02em; font-weight: var(--weight-medium); color: var(--text-primary); max-width: 26ch; text-wrap: balance; }
.mtz-manifesto__text em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--brand-700); }
.mtz-manifesto__meta { margin-top: clamp(2.5rem, 6vw, 5rem); display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.mtz-manifesto__loc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

/* word mask (shared by split headings) */
.mtz-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.mtz-w__i { display: inline-block; transition: transform 0.95s var(--ease-out); }
.mtz-w__i.mtz-hide { transform: translateY(115%); }

/* up reveal */
.mtz-up { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.mtz-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mtz-up, .mtz-hide { opacity: 1 !important; transform: none !important; } .mtz-form, .mtz-contact__done { animation: none; } }

/* ════ SERVICES ════ */
.mtz-services-sec { padding: clamp(5rem, 11vw, 10rem) var(--pad); border-top: 1px solid var(--line); }
.mtz-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(3rem, 7vw, 6rem); flex-wrap: wrap; }
.mtz-sec-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: var(--weight-semibold); letter-spacing: -0.035em; line-height: 1; }
.mtz-sec-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mtz-services { display: flex; flex-direction: column; }
.mtz-service { display: grid; grid-template-columns: 5rem minmax(0,1fr) minmax(0,1.1fr) auto; gap: 1.5rem; align-items: center; padding: clamp(1.4rem, 2.6vw, 2.4rem) 0; border-top: 1px solid var(--line); position: relative; transition: padding-left var(--dur-base) var(--ease-out); }
.mtz-services .mtz-service:last-child { border-bottom: 1px solid var(--line); }
.mtz-service::before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--brand-700); transition: width var(--dur-slow) var(--ease-out); }
.mtz-service:hover { padding-left: 1.5rem; }
.mtz-service:hover::before { width: 100%; }
.mtz-service__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--brand-700); }
.mtz-service__t { font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1; }
.mtz-service__t em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mtz-service__d { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.5; }
.mtz-service__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* ════ MARQUEE strip ════ */
.mtz-marquee { border-block: 1px solid var(--line); padding: clamp(1.2rem, 2.4vw, 2rem) 0; overflow: hidden; }
.mtz-marquee__track { display: flex; width: max-content; will-change: transform; }
.mtz-marquee__item { display: inline-flex; align-items: center; font-weight: var(--weight-semibold); font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: -0.02em; white-space: nowrap; }
.mtz-marquee__item em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mtz-marquee__sep { color: var(--brand-300); margin: 0 1.4rem; font-size: 0.55em; font-variant-emoji: text; }

/* ════ WORK — interactive index ════ */
.mtz-work-sec { padding: clamp(5rem, 11vw, 10rem) var(--pad); border-top: 1px solid var(--line); }
.mtz-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mtz-filter__btn { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0.5em 1.05em; transition: all var(--dur-fast) var(--ease-soft); }
.mtz-filter__btn:hover { border-color: var(--neutral-500); color: var(--text-primary); }
.mtz-filter__btn.is-active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.mtz-work-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.mtz-work-row { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) 10rem 5rem; gap: 1.5rem; align-items: center; padding: clamp(1.3rem, 2.8vw, 2.6rem) 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text-primary); position: relative; transition: opacity var(--dur-base) var(--ease-soft), padding-left var(--dur-base) var(--ease-out); }
.mtz-work-list.has-active .mtz-work-row { opacity: 0.32; }
.mtz-work-row.is-hidden { display: none; }
.mtz-work-list.has-active .mtz-work-row.is-active { opacity: 1; padding-left: 1.8rem; }
.mtz-work-row__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--brand-700); }
.mtz-work-row__t { font-size: clamp(2rem, 6vw, 5.5rem); font-weight: var(--weight-semibold); letter-spacing: -0.04em; line-height: 0.95; }
.mtz-work-row__t em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mtz-work-row__cat { font-size: var(--text-sm); color: var(--text-secondary); }
.mtz-work-row__yr { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); text-align: right; }
.mtz-work-row__arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(10px); opacity: 0; font-size: 1.6rem; color: var(--brand-700); transition: all var(--dur-base) var(--ease-out); }
.mtz-work-row.is-active .mtz-work-row__arrow { opacity: 1; transform: translateY(-50%); }

/* floating cursor preview */
.mtz-wp { position: fixed; top: 0; left: 0; width: 280px; height: 340px; border-radius: var(--radius-md); pointer-events: none; z-index: 900; background: var(--wp-bg, var(--brand-700)); display: flex; align-items: center; justify-content: center; opacity: 0; scale: 0.8; transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out); overflow: hidden; }
.mtz-wp.is-on { opacity: 1; scale: 1; }
.mtz-wp__init { font-family: var(--font-serif); font-style: italic; font-size: 9rem; color: rgba(255,255,255,0.92); line-height: 1; }

/* ════ STATS ════ */
.mtz-stats-sec { padding: clamp(5rem, 11vw, 9rem) var(--pad); border-top: 1px solid var(--line); }
.mtz-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.mtz-stat { display: flex; flex-direction: column; gap: 0.5rem; }
.mtz-stat:nth-child(2) { transform: translateY(2.5rem); }
.mtz-stat:nth-child(4) { transform: translateY(2.5rem); }
.mtz-stat__value { font-weight: var(--weight-semibold); font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.85; letter-spacing: -0.05em; display: flex; align-items: baseline; gap: 0.04em; }
.mtz-stat__suffix { font-size: 0.34em; color: var(--brand-700); font-weight: var(--weight-medium); }
.mtz-stat__label { font-size: var(--text-md); font-weight: var(--weight-medium); margin-top: 0.6rem; }
.mtz-stat__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; max-width: 26ch; }

/* ════ QUOTE (dark full-bleed) ════ */
.mtz-quote { background: var(--brand-700); color: #fff; padding: clamp(6rem, 14vw, 12rem) var(--pad); }
.mtz-quote__text { font-size: clamp(2rem, 5.5vw, 5rem); font-weight: var(--weight-medium); line-height: 1.12; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
.mtz-quote__text em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--brand-200); }
.mtz-quote__by { display: flex; align-items: center; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.mtz-quote__mark { height: 24px; opacity: 0.85; }
.mtz-quote__by strong { display: block; font-weight: var(--weight-semibold); }
.mtz-quote__by span { font-size: var(--text-sm); color: rgba(255,255,255,0.6); }

/* ════ CONTACT ════ */
.mtz-contact { padding: clamp(5rem, 11vw, 10rem) var(--pad); border-top: 1px solid var(--line); }
.mtz-contact__big { display: block; font-weight: var(--weight-semibold); font-size: clamp(2.6rem, 9vw, 8.5rem); letter-spacing: -0.05em; line-height: 0.92; color: var(--text-primary); width: fit-content; margin: clamp(1.5rem,4vw,3rem) 0; transition: opacity var(--dur-base); }
.mtz-contact__big:hover { opacity: 0.55; }
.mtz-contact__big em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mtz-contact__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.mtz-contact__social { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.mtz-contact__social a { font-size: var(--text-sm); color: var(--text-secondary); border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; transition: color var(--dur-fast); }
.mtz-contact__social a:hover { color: var(--brand-700); }
.mtz-form { display: flex; flex-direction: column; gap: 1.25rem; }
.mtz-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mtz-contact__done { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.mtz-contact__done h3 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.mtz-contact__done p { color: var(--text-secondary); max-width: 36ch; }
/* Fluid swap between the form and the WhatsApp confirmation — whichever mounts
   eases in (e.g. clicking "Voltar ao formulário"). Invisible on first load since
   the section is still hidden by its scroll-reveal at that point. */
.mtz-form, .mtz-contact__done { animation: mtz-contact-swap 0.55s var(--ease-out) both; }
@keyframes mtz-contact-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ════ FOOTER ════ */
.mtz-footer { background: var(--brand-900); color: rgba(255,255,255,0.7); padding: clamp(3.5rem,7vw,6rem) var(--pad) clamp(2.5rem,5vw,4rem); overflow: hidden; }
.mtz-footer__cols { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; padding-bottom: clamp(3rem,6vw,5rem); border-bottom: 1px solid var(--border-inverse); }
.mtz-footer__say { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem,3vw,2.2rem); color: #fff; max-width: 16ch; }
.mtz-footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.mtz-footer__h { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); margin-bottom: 0.4rem; }
.mtz-footer__col a { font-size: var(--text-sm); color: rgba(255,255,255,0.75); width: fit-content; transition: color var(--dur-fast); }
.mtz-footer__col a:hover { color: #fff; }
.mtz-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 1.5rem; padding: 1.5rem 0; font-size: var(--text-sm); }
.mtz-footer__bottom > span:first-child { justify-self: start; }
.mtz-footer__bottom > span:last-child { justify-self: end; text-align: right; }
.mtz-footer__mark { justify-self: center; height: 22px; width: auto; opacity: 0.85; }
.mtz-footer__credit { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.38); padding-bottom: 0.4rem; }
.mtz-footer__credit em { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.62); font-size: 1.3em; }

/* ════ NAV TEXT ROLL ════ */
.mtz-roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.mtz-roll > span { display: block; transition: transform 0.42s var(--ease-out); }
.mtz-roll > span:last-child { position: absolute; top: 100%; left: 0; }
a:hover > .mtz-roll > span { transform: translateY(-100%); }

/* ════ CUSTOM CURSOR ════ */
.mtz-cursor, .mtz-cursor-follow { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9998; mix-blend-mode: difference; }
.mtz-cursor { width: 7px; height: 7px; background: #fff; z-index: 9999; }
.mtz-cursor-follow { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.7); transition: width 0.32s var(--ease-out), height 0.32s var(--ease-out), opacity 0.3s; }
.mtz-cursor-follow.is-hover { width: 66px; height: 66px; }
.mtz-cursor-follow.is-work { opacity: 0; }
.mtz-cursor-label { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--brand-700); padding: 0.5em 0.8em; border-radius: var(--radius-full); opacity: 0; scale: 0.6; transition: opacity 0.25s, scale 0.25s; white-space: nowrap; }
.mtz-cursor-label.is-on { opacity: 1; scale: 1; }
body.mtz-cursor-hidden .mtz-cursor, body.mtz-cursor-hidden .mtz-cursor-follow { opacity: 0; }

/* ════ RESPONSIVE ════ */
@media (max-width: 1024px) {
  .mtz-hero__title .l2 { padding-left: 4vw; }
  .mtz-stat:nth-child(2), .mtz-stat:nth-child(4) { transform: none; }
  .mtz-stats-grid { grid-template-columns: 1fr 1fr; row-gap: 3.5rem; }
}
@media (max-width: 820px) {
  html, body { cursor: auto; }
  .mtz-cursor, .mtz-cursor-follow, .mtz-cursor-label, .mtz-wp { display: none !important; }
  .mtz-chrome__nav, .mtz-chrome__vert { display: none; }
  .mtz-burger { display: block; }
  .mtz-manifesto__grid { grid-template-columns: 1fr; gap: 2rem; }
  .mtz-manifesto__label { position: static; flex-direction: row; gap: 1rem; }
  /* Services stack into a single, left-aligned column on phones — the number
     becomes a small eyebrow above the title, content uses the full width.
     Far more harmonious than a tiny number floating beside a big title. */
  .mtz-service { grid-template-columns: 1fr; grid-template-areas: 'n' 't' 'd' 'tags'; align-items: start; row-gap: 0.5rem; padding-block: clamp(1.8rem, 6vw, 2.6rem); }
  .mtz-service__n { grid-area: n; margin-bottom: 0.1rem; }
  .mtz-service__t { grid-area: t; }
  .mtz-service__d { grid-area: d; max-width: 42ch; }
  .mtz-service__tags { grid-area: tags; justify-content: flex-start; margin-top: 0.45rem; }
  .mtz-service:hover { padding-left: 0; }
  .mtz-work-row { grid-template-columns: 2.5rem 1fr auto; grid-template-areas: 'n t t' '. cat yr'; row-gap: 0.5rem; column-gap: 0.8rem; }
  .mtz-work-row__cat { grid-area: cat; } .mtz-work-row__yr { grid-area: yr; text-align: right; }
  .mtz-contact__grid { grid-template-columns: 1fr; }
  .mtz-form__row { grid-template-columns: 1fr; }
}
/* Footer on phones/tablets: a tidy grid instead of a wrapping flex row.
   The serif line spans full width on top, then the three link columns sit in an
   even, consistently left-aligned grid. */
@media (max-width: 720px) {
  .mtz-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1.5rem; text-align: left; }
  .mtz-footer__say { grid-column: 1 / -1; max-width: 22ch; margin-bottom: 0.25rem; }
  .mtz-footer__col { align-items: flex-start; }
}

@media (max-width: 540px) {
  .mtz-stats-grid { grid-template-columns: 1fr; }
  .mtz-hero__foot { grid-template-columns: 1fr; }
  .mtz-hero__lead { grid-column: 1; justify-self: start; }
  /* stack the two eyebrows so they stop colliding on phones */
  .mtz-hero__top { flex-direction: column; justify-content: flex-start; gap: 0.4rem; }
  .mtz-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.3rem; }
  .mtz-footer__bottom > span:first-child, .mtz-footer__bottom > span:last-child { justify-self: center; text-align: center; }
  /* the fixed corner metadata collides on narrow screens — hide it on phones */
  .mtz-chrome__bl, .mtz-chrome__br { display: none; }
}

@media (max-width: 380px) {
  .mtz-footer__cols { grid-template-columns: 1fr; gap: 1.9rem; }
}

/* ════ INTRO / PRESENTATION PRELOADER ════
   Full-bleed dark band shown on first paint while React + Babel compile.
   Wordmark masks up, a mono counter ticks 000→100, then the overlay lifts
   away in staggered columns — the hero headline reveals in sync. */
html.mtz-intro-lock, html.mtz-intro-lock body { overflow: hidden; }
html.mtz-intro-lock .mtz-cursor,
html.mtz-intro-lock .mtz-cursor-follow,
html.mtz-intro-lock .mtz-cursor-label { opacity: 0 !important; }

.mtz-intro {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden; color: #fff;
  /* Failsafe: if motion.js never removes it, fade out so the site stays usable. */
  animation: mtz-intro-failsafe 0.6s linear 6.5s forwards;
}
.mtz-intro__panels { position: absolute; inset: 0; display: flex; }
/* Seamless while static (the faint column seams read as "separated blocks" on
   narrow screens); the columns still appear as the panels lift on exit. The 1px
   same-colour box-shadow fills any sub-pixel gaps between columns at odd widths
   without affecting layout, so the page behind never peeks through. */
.mtz-intro__panel { flex: 1 1 20%; height: 100%; background: var(--brand-700); will-change: transform; box-shadow: 0 0 0 1px var(--brand-700); }

.mtz-intro__content {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--frame) + 1.3rem) var(--pad) calc(var(--frame) + 1.6rem);
}
.mtz-intro__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.mtz-intro__row b { color: var(--brand-200); font-weight: 400; }

.mtz-intro__center { align-self: center; justify-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.mtz-intro__mask { display: block; overflow: hidden; padding-bottom: 0.12em; }
.mtz-intro__mark { display: block; height: clamp(34px, 7vw, 66px); width: auto; transform: translateY(120%); transition: transform 1s var(--ease-out); }
.mtz-intro.is-in .mtz-intro__mark { transform: none; }
.mtz-intro__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.34em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  opacity: 0; transform: translateY(10px); transition: opacity 0.85s var(--ease-out) 0.28s, transform 0.85s var(--ease-out) 0.28s;
}
.mtz-intro.is-in .mtz-intro__tag { opacity: 1; transform: none; }

.mtz-intro__bottom {
  align-self: end;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.85s var(--ease-out) 0.18s, transform 0.85s var(--ease-out) 0.18s;
}
.mtz-intro.is-in .mtz-intro__bottom { opacity: 1; transform: none; }
/* Draw-on hairline tied to load progress — the Tres Mares line-draw move,
   read through mtz.'s rule-before-eyebrow hairline system. */
.mtz-intro__progress { height: 1px; background: rgba(255,255,255,0.16); margin-bottom: 1.1rem; overflow: hidden; }
.mtz-intro__progress span { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.mtz-intro__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--font-mono); font-size: clamp(11px, 1.4vw, 13px); letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
}
.mtz-intro__count { color: #fff; font-variant-numeric: tabular-nums; }
.mtz-intro__count i { color: var(--brand-200); font-style: normal; }

/* Exit — content lifts out first, then panels sweep up left→right. */
.mtz-intro.is-leaving { pointer-events: none; }
.mtz-intro.is-leaving .mtz-intro__row,
.mtz-intro.is-leaving .mtz-intro__center,
.mtz-intro.is-leaving .mtz-intro__bottom { transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); opacity: 0; transform: translateY(-26px); }
.mtz-intro.is-leaving .mtz-intro__panel { transform: translateY(-101%); transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); }
.mtz-intro.is-leaving .mtz-intro__panel:nth-child(1) { transition-delay: 0.18s; }
.mtz-intro.is-leaving .mtz-intro__panel:nth-child(2) { transition-delay: 0.24s; }
.mtz-intro.is-leaving .mtz-intro__panel:nth-child(3) { transition-delay: 0.30s; }
.mtz-intro.is-leaving .mtz-intro__panel:nth-child(4) { transition-delay: 0.36s; }
.mtz-intro.is-leaving .mtz-intro__panel:nth-child(5) { transition-delay: 0.42s; }

@keyframes mtz-intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .mtz-intro { display: none !important; }
}