/* ============================================================
   MACRO MARKET — Project Elevate landing page
   Loaded only on page-project-elevate.php (see inc/macromarket/enqueue.php),
   which is why it can be this specific without weighing on the rest of the
   site. Tokens come from tokens.css; the fallbacks after each var() keep the
   page intact if it is ever rendered without it.

   The page is built around one idea: the visitor is gaining altitude. The
   pillars sit on rendered contour models and gold means "summit" everywhere
   it appears; that artwork is pre-rendered by tools/mm-render3d.

   The hero used to be a rendered mountain range in three parallax layers with
   a clip behind it. 2026-09-08 the range came out and the clip is the whole
   hero: cusuco.mp4 from brand_assets/elevate/, a walk down a green alley in
   the cloud forest, full bleed and looping. __sky and the ::after scrim are no
   longer a sky, only the contrast the type needs to sit on moving footage.
   ============================================================ */

.mm-elevate {
  --elev-sky-top:     #0A1119;
  --elev-sky-mid:     #172736;
  /* Was pinned to SKY in tools/mm-render3d/build.js so the far ridge could
     fade into it without a seam. The ridge render is out of the hero, so this
     is now only the bottom of the fallback backdrop. */
  --elev-sky-horizon: #3E535F;
  --elev-ink:         #0C141D;
  --elev-rule:        rgba(231, 216, 196, 0.14);
  --elev-rule-soft:   rgba(231, 216, 196, 0.08);

  background: var(--elev-ink);
  color: var(--fg-on-dark-1, #E7D8C4);
  overflow-x: clip;
}

/* Anton, the display face that actually renders until Brunson ships, is a
   single-weight family. The theme asks headings for 700, so the browser
   synthesises bold by smearing each glyph, which shows up as a white halo
   around every heading on the dark bands. Every display heading here is
   pinned to 400 for that reason. */
.mm-elevate .mm-elev-hero__title,
.mm-elevate .mm-elev-title,
.mm-elevate .mm-elev-hud__value,
.mm-elevate .mm-elev-pillar__title,
.mm-elevate .mm-elev-spec__title,
.mm-elevate .mm-elev-route__title,
.mm-elevate .mm-elev-coach__name,
.mm-elevate .mm-elev-panel__head,
.mm-elevate .mm-elev-sent__head,
.mm-elevate .mm-elev-cta__head {
  font-weight: 400;
}

/* ------------------------------------------------------------------ HERO */

.mm-elev-hero {
  position: relative;
  /* The site header is sticky and stays in flow, so a full 100svh hero would
     always overflow the first screen. Reserving ~140px for it lands the
     scroll cue just above the fold instead of just below it. */
  min-height: clamp(560px, calc(100svh - 140px), 880px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* Fallback backdrop, seen only if the clip and its poster both fail. */
  background: linear-gradient(
    180deg,
    var(--elev-sky-top) 0%,
    var(--elev-sky-mid) 30%,
    #22394A 52%,
    var(--elev-sky-horizon) 82%,
    var(--elev-sky-horizon) 100%
  );
}

/* A wide, low glow: gold on the right, teal on the left. Deliberately weak.
   With the clip running edge to edge this is what keeps the frame tied to the
   brand palette instead of reading as flat daylight green. */
.mm-elev-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 46% at 58% 78%, rgba(201, 162, 74, 0.20) 0%, rgba(201, 162, 74, 0) 62%),
    radial-gradient(90% 40% at 30% 86%, rgba(46, 124, 137, 0.24) 0%, rgba(46, 124, 137, 0) 70%);
}

/* The clip's box. Overscanned so the parallax drift never exposes an edge.

   --p is scroll progress through the hero, 0 at the top and 1 once it has
   scrolled away; --mx is the eased pointer position, -1 to 1. Both are
   written on .mm-elev-hero by project-elevate.js and inherit down here.
   --depth is how far a layer travels, in px, at --p = 1. */
.mm-elev-hero__bg {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  pointer-events: none;
  --depth: -70px;
  --sway: 6px;
  transform: translate3d(
    calc(var(--mx, 0) * var(--sway, 0px)),
    calc(var(--p, 0) * var(--depth, 0px)),
    0
  );
  will-change: transform;
}
.mm-elev-hero__bg-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The encode is a 1.08:1 slice of a portrait source, so a wide desktop hero
     crops roughly a third of it away vertically. The crop was already chosen
     around the climber (see page-project-elevate.php), so this only has to
     choose where in that band the desktop window sits. Held high: he is
     biggest on the first frames, head near the top of the band, and anything
     much lower than this clips his hair off the poster. */
  object-position: 50% 12%;
  /* No blur. The encode denoises the source and sharpens after the upscale
     (the ffmpeg chain is in page-project-elevate.php's docblock), and a CSS
     blur on top threw all of that away. The grade only pulls the daylight
     green far enough back that it stops fighting the gold. */
  filter: saturate(0.86) contrast(1.05) brightness(0.98);
  /* No scale(): cropping in only costs resolution it does not have to spare. */
}

/* Was the sky ramp under the ridge bands. With those gone it does one job:
   darken the top, where the sticky header sits, and the bottom, where the type
   and the HUD sit, while leaving the middle of the frame open. */
.mm-elev-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 17, 25, 0.58) 0%,
    rgba(14, 23, 33, 0.08) 26%,
    rgba(14, 23, 33, 0.06) 46%,
    rgba(10, 17, 25, 0.34) 78%,
    rgba(10, 17, 25, 0.60) 100%
  );
}

/* Scrim under the type. With the ridge render gone the clip runs edge to edge,
   so this is the only thing holding the headline's contrast: a ramp that is
   heaviest where the type sits, plus a wash from the left so the right half of
   the frame stays open footage. */
.mm-elev-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 25, 0.34) 0%,
      rgba(10, 17, 25, 0.04) 24%,
      rgba(10, 17, 25, 0.24) 58%,
      rgba(10, 17, 25, 0.70) 100%
    ),
    linear-gradient(90deg, rgba(10, 17, 25, 0.62) 0%, rgba(10, 17, 25, 0) 56%);
}

.mm-elev-hero__inner {
  position: relative;
  z-index: 5;
  width: min(1220px, calc(100% - 2 * clamp(20px, 5vw, 56px)));
  margin: 0 auto;
  padding-block: clamp(40px, 6vw, 72px) clamp(26px, 3.4vw, 40px);
}

.mm-elev-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
}
@media (min-width: 980px) {
  .mm-elev-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: end;
  }
}

.mm-elev-hero__stamp {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(231, 216, 196, 0.52);
  margin-bottom: clamp(18px, 3vw, 30px);
}

.mm-elev-hero__kicker {
  font-family: var(--font-mono, monospace);
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.75;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-gold-bright, #E4C172);
  max-width: 54ch;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding-left: 18px;
  border-left: 2px solid var(--mm-gold, #C9A24A);
}

.mm-elev-hero__title {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(60px, 10.5vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  /* Keeps the top of the caps off the kicker without a magic margin. */
  text-wrap: balance;
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.mm-elev-hero__title span {
  display: block;
  /* Tight display line-height packs the two words together; a fixed 4px
     opens the seam between "Project" and "Elevate" at every clamp size. */
  margin-top: 4px;
  color: var(--mm-warm-sand, #E7D8C4);
}

.mm-elev-hero__lede {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.66;
  color: rgba(231, 216, 196, 0.84);
  max-width: 62ch;
  margin: 0;
  padding-top: clamp(0px, 1vw, 10px);
  border-top: 1px solid var(--elev-rule);
}
@media (min-width: 980px) {
  .mm-elev-hero__lede { padding-top: 18px; }
}

.mm-elev-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.4vw, 28px);
}

/* Altitude HUD: the three facts the page has to answer before anyone reads
   a word of body copy. */
.mm-elev-hero__hud {
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--elev-rule);
  background: rgba(10, 17, 25, 0.55);
  backdrop-filter: blur(2px);
}
.mm-elev-hud {
  width: min(1220px, calc(100% - 2 * clamp(20px, 5vw, 56px)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
@media (min-width: 700px) {
  .mm-elev-hud { grid-template-columns: repeat(3, 1fr); }
  .mm-elev-hud__item + .mm-elev-hud__item { border-top: 0; border-left: 1px solid var(--elev-rule-soft); }
}
.mm-elev-hud__item {
  padding: clamp(14px, 2vw, 22px) clamp(0px, 2vw, 26px);
}
.mm-elev-hud__item + .mm-elev-hud__item { border-top: 1px solid var(--elev-rule-soft); }
.mm-elev-hud__item:first-child { padding-left: 0; }
.mm-elev-hud__value {
  display: block;
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--mm-gold-bright, #E4C172);
}
.mm-elev-hud__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(231, 216, 196, 0.6);
}

/* Phones used to get the artwork as a band across the top, because a portrait
   viewport crushed the 2.53:1 ridge render into a smear. With the render gone
   the clip is near square and cut from a portrait source, so it sits far
   closer to the shape of the screen: it runs full bleed behind the copy and
   the scrim does the separating. */
@media (max-width: 860px) {
  .mm-elev-hero {
    min-height: clamp(600px, calc(100svh - 120px), 820px);
  }
  .mm-elev-hero__bg-media {
    /* A tall narrow box against a 1.08:1 encode: cover fills the height here
       and crops sideways instead, so only the first number does anything and
       the whole band is visible. Past 50% because the climber sits right of
       centre on the first frame, which is also the poster. */
    object-position: 54% 50%;
    /* Brighter than desktop: the sideways crop lands on the darkest column of
       the frame, and the copy sits over the whole hero here, not just its
       bottom third, so the scrim below is already doing more work. */
    filter: saturate(0.84) contrast(1.06) brightness(1.02);
  }
  .mm-elev-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(10, 17, 25, 0.48) 0%,
        rgba(10, 17, 25, 0.12) 20%,
        rgba(10, 17, 25, 0.42) 60%,
        rgba(10, 17, 25, 0.78) 100%
      );
  }
}

/* ----------------------------------------------------------- SECTIONS */

.mm-elev-band {
  position: relative;
  padding-block: clamp(72px, 10vw, 152px);
}
.mm-elev-band--ink   { background: var(--elev-ink); color: var(--fg-on-dark-1, #E7D8C4); }
.mm-elev-band--navy  { background: var(--mm-deep-navy, #1E2A3A); color: var(--fg-on-dark-1, #E7D8C4); }
.mm-elev-band--paper { background: var(--mm-paper, #FAF6EF); color: var(--fg1, #1E2A3A); }
.mm-elev-band--sand  { background: var(--mm-warm-sand, #E7D8C4); color: var(--fg1, #1E2A3A); }
.mm-elev-band--green { background: var(--mm-forest-green, #1F3F36); color: var(--fg-on-dark-1, #E7D8C4); }

.mm-elev-wrap {
  width: min(1220px, calc(100% - 2 * clamp(20px, 5vw, 56px)));
  margin: 0 auto;
}
.mm-elev-wrap--narrow { max-width: 900px; }

.mm-elev-head { margin-bottom: clamp(36px, 5vw, 66px); }
@media (min-width: 940px) {
  .mm-elev-head--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
  }
}

.mm-elev-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mm-gold, #C9A24A);
  margin: 0 0 clamp(14px, 2vw, 22px);
}
.mm-elev-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.mm-elev-band--paper .mm-elev-eyebrow,
.mm-elev-band--sand .mm-elev-eyebrow { color: #8A6D24; }

.mm-elev-title {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
.mm-elev-band--ink .mm-elev-title,
.mm-elev-band--navy .mm-elev-title { color: #fff; }

.mm-elev-lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  margin: clamp(16px, 2vw, 22px) 0 0;
  max-width: 62ch;
  color: rgba(231, 216, 196, 0.78);
}
.mm-elev-band--paper .mm-elev-lede,
.mm-elev-band--sand .mm-elev-lede { color: var(--fg2, #2B3340); }
@media (min-width: 940px) {
  .mm-elev-head--split .mm-elev-lede { margin-top: 0; }
}

/* -------------------------------------------------------- PILLAR CARDS */

.mm-elev-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 32px);
}
@media (min-width: 860px) { .mm-elev-pillars { grid-template-columns: repeat(3, 1fr); } }

.mm-elev-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Read back by __figure, which bleeds the photo out to the card edge. */
  --pad: clamp(22px, 2.4vw, 32px);
  padding: var(--pad);
  background: linear-gradient(180deg, rgba(231,216,196,0.055) 0%, rgba(231,216,196,0.015) 100%);
  border: 1px solid var(--elev-rule-soft);
  border-radius: var(--r-2, 4px);
  overflow: hidden;
  transition:
    transform var(--dur-med, 220ms) var(--ease-out, ease),
    border-color var(--dur-med, 220ms) var(--ease-out, ease);
}
.mm-elev-pillar::before {
  /* Gold hairline that fills in on hover, echoing the summit colour. Above the
     photo, which now bleeds up to this same edge and would otherwise paint
     over it (both are positioned at z-index auto, so DOM order would win). */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 2px;
  background: var(--mm-gold, #C9A24A);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-slow, 420ms) var(--ease-out, ease);
}
.mm-elev-pillar:hover { transform: translateY(-4px); border-color: rgba(231,216,196,0.20); }
.mm-elev-pillar:hover::before { transform: scaleX(1); }

/* Photographs since 2026-09-10, where this used to hold a centred alpha-cut
   render on its own drop shadow. A photo has edges, so it gets framed instead
   of floated: full bleed to the card edge, which means cancelling the card's
   own padding with matching negative margins. --pad is declared on the card so
   the two stay in step. */
.mm-elev-pillar__figure {
  position: relative;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) clamp(16px, 2vw, 22px);
  /* Width is stated, not left to the flex stretch, and max-width is switched
     off, because the theme's `figure { max-width: 100% }` (theme-unit-test.css)
     resolves against the card's CONTENT box and clamped the stretched figure
     straight back to it. The negative margins still applied, so the photo sat
     flush against the left edge and stopped two paddings short of the right. */
  width: calc(100% + 2 * var(--pad));
  max-width: none;
  overflow: hidden;
}
.mm-elev-pillar__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(231, 216, 196, 0.06);
  /* Same grade as the coach portrait: these are phone candids sitting on an
     almost black band next to rendered artwork, and pulling the saturation
     down is what stops them reading as snapshots dropped into the page. */
  filter: saturate(0.78) contrast(1.06);
}
/* Seats the photo on the card: the card's own surface is a top-down wash, so
   darkening the foot of the image is what joins the two instead of leaving a
   hard horizontal edge above the eyebrow. */
.mm-elev-pillar__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,20,29,0) 52%, rgba(12,20,29,0.78) 100%),
    linear-gradient(210deg, rgba(46,124,137,0.16) 0%, rgba(30,42,58,0.26) 100%);
}
.mm-elev-pillar__frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(231, 216, 196, 0.22);
  pointer-events: none;
  z-index: 1;
}
.mm-elev-pillar__num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-gold, #C9A24A);
  margin-bottom: 10px;
}
.mm-elev-pillar__title {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 12px;
}
.mm-elev-pillar__body {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(231, 216, 196, 0.74);
  margin: 0;
}

/* ------------------------------------------------------- "QUÉ INCLUYE" */

/* A spec sheet, not cards: hairlines and a mono index, so this section reads
   as the plain inventory it is and does not compete with the pillars. */
.mm-elev-spec {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mm-line, rgba(30,42,58,0.12));
}
.mm-elev-spec__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px clamp(20px, 4vw, 56px);
  padding-block: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--mm-line, rgba(30,42,58,0.12));
}
@media (min-width: 820px) {
  .mm-elev-spec__item {
    grid-template-columns: 68px minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
}
.mm-elev-spec__num {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mm-gold, #C9A24A);
  font-weight: 700;
}
.mm-elev-spec__title {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--fg1, #1E2A3A);
  margin: 0;
}
.mm-elev-spec__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg2, #2B3340);
  margin: 0;
}

/* ----------------------------------------------------------- THE ROUTE */

/* The four steps drawn as camps on an ascent: a gold route line with a node
   per step. Horizontal on desktop, vertical on phones, same markup. */
.mm-elev-route {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 960px) {
  .mm-elev-route { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 34px); }
}

.mm-elev-route__step {
  position: relative;
  padding-left: 46px;
  padding-bottom: clamp(28px, 4vw, 40px);
}
@media (min-width: 960px) {
  .mm-elev-route__step { padding-left: 0; padding-top: 52px; padding-bottom: 0; }
}

/* The line. Vertical down the gutter on phones, horizontal above the row on
   desktop; the last step stops its own line so the route ends at the summit. */
.mm-elev-route__step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--mm-gold, #C9A24A), rgba(201,162,74,0.18));
}
.mm-elev-route__step:last-child::before { display: none; }
@media (min-width: 960px) {
  .mm-elev-route__step::before {
    left: 26px;
    right: calc(-1 * clamp(20px, 2.4vw, 34px));
    top: 13px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--mm-gold, #C9A24A), rgba(201,162,74,0.18));
  }
}

.mm-elev-route__node {
  position: absolute;
  left: 0;
  top: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid var(--mm-gold, #C9A24A);
  background: var(--elev-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mm-gold-bright, #E4C172);
}
.mm-elev-route__step:first-child .mm-elev-route__node {
  background: var(--mm-gold, #C9A24A);
  color: var(--elev-ink);
}

.mm-elev-route__title {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 10px;
}
.mm-elev-route__body {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(231, 216, 196, 0.74);
  margin: 0;
}

/* ----------------------------------------------------------- THE COACH */

.mm-elev-coach {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 0;
}
@media (min-width: 900px) {
  .mm-elev-coach { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.mm-elev-coach__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-2, 4px);
  overflow: hidden;
}
.mm-elev-coach__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* The source is a 9:16 full-body gym shot, so a 4/5 box keeps ~70% of its
     height: pulling the window up to 45% frames Roberto head to feet with a
     little headroom instead of cutting the shoes off at the bottom. */
  object-position: 50% 45%;
  background: rgba(231, 216, 196, 0.06);
  /* A phone shot next to rendered artwork on an almost black band reads as a
     different page. Pulling the saturation down and the contrast up lets the
     overlay below finish the job. */
  filter: saturate(0.78) contrast(1.06);
}
@media (max-width: 899px) {
  /* Stays portrait below the two-column break. A landscape crop of a 9:16
     source shows barely a third of its height, which loses the full figure. */
  .mm-elev-coach__photo { aspect-ratio: 4 / 5; }
}
/* Grades the candid toward the page palette so it belongs beside the
   rendered artwork instead of reading as a phone snapshot dropped in. */
.mm-elev-coach__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,20,29,0) 42%, rgba(12,20,29,0.72) 100%),
    linear-gradient(210deg, rgba(46,124,137,0.20) 0%, rgba(30,42,58,0.30) 100%);
}
.mm-elev-coach__frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(231, 216, 196, 0.22);
  pointer-events: none;
  z-index: 1;
}

.mm-elev-coach__name {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.mm-elev-coach__role {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-gold, #C9A24A);
  margin: 12px 0 clamp(18px, 2.4vw, 26px);
}
.mm-elev-coach__bio {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(231, 216, 196, 0.78);
  margin: 0 0 var(--sp-4, 16px);
  max-width: 62ch;
}
/* Roberto in his own words. Set larger and lighter than the bio so it reads
   as a change of voice, and marked by a gold rule rather than quote glyphs,
   which Anton does not draw well at this size. */
.mm-elev-quote {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding-left: clamp(18px, 2.2vw, 26px);
  border-left: 2px solid var(--mm-gold, #C9A24A);
  max-width: 56ch;
}
.mm-elev-quote__text {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.56;
  font-style: italic;
  color: rgba(231, 216, 196, 0.95);
  margin: 0;
  /* The theme gives blockquote its own indent and border; this component
     supplies both. */
  padding: 0;
  border: 0;
  quotes: none;
}
.mm-elev-quote__text::before,
.mm-elev-quote__text::after { content: none; }
.mm-elev-quote__cite {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-gold, #C9A24A);
  margin-top: 14px;
}

.mm-elev-coach__certs {
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--elev-rule);
}
.mm-elev-coach__certs-head {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231, 216, 196, 0.55);
  margin: 0 0 var(--sp-4, 16px);
}
.mm-elev-coach__certs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mm-elev-coach__certs li {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 216, 196, 0.82);
  border: 1px solid var(--elev-rule);
  border-radius: var(--r-pill, 999px);
  padding: 8px 14px;
}
/* The theme decorates list items with a gold dot. Inside a chip it just
   crowds the left edge. */
.mm-elev-coach__certs li::before,
.mm-elev-coach__certs li::marker { content: none; }

/* ---------------------------------------------------------- FIT COLUMNS */

.mm-elev-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 34px);
}
@media (min-width: 820px) { .mm-elev-fit { grid-template-columns: 1fr 1fr; } }

.mm-elev-fit__col {
  background: #fff;
  border: 1px solid var(--mm-line, rgba(30,42,58,0.12));
  border-radius: var(--r-2, 4px);
  padding: clamp(24px, 3vw, 38px);
}
.mm-elev-fit__col--yes { border-top: 3px solid var(--mm-forest-green, #1F3F36); }
.mm-elev-fit__col--no  { border-top: 3px solid var(--mm-line-strong, rgba(30,42,58,0.28)); }

.mm-elev-fit__head {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3, #5B6472);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.mm-elev-fit__col ul { list-style: none; margin: 0; padding: 0; }
.mm-elev-fit__col li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg2, #2B3340);
  margin-bottom: 14px;
}
.mm-elev-fit__col li:last-child { margin-bottom: 0; }
/* Marks are drawn, not typed: a filled square for "encaja", a hollow one for
   "no encaja". Keeps the two columns legible without leaning on punctuation. */
.mm-elev-fit__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
}
.mm-elev-fit__col--yes li::before { background: var(--mm-forest-green, #1F3F36); }
.mm-elev-fit__col--no  li::before { border: 1px solid var(--fg4, #9AA1AB); }

/* ---------------------------------------------------------------- FORM */

.mm-elev-panel {
  background: #fff;
  border: 1px solid var(--mm-line, rgba(30,42,58,0.12));
  border-radius: var(--r-3, 8px);
  padding: clamp(24px, 4vw, 56px);
  box-shadow: var(--shadow-3);
}
.mm-elev-panel__head {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg1, #1E2A3A);
  margin: 0 0 12px;
}
.mm-elev-panel__note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg2, #2B3340);
  margin: 0;
  max-width: 62ch;
}

/* The two-up field grid. `.mm-elev-form` itself is styled with the Contacto
   and Patrocinios forms in overrides.css; only the layout is page-specific.
   The shared rule leaves 16px above the first field, which reads as cramped
   under this panel's intro paragraph. */
.mm-elevate .mm-elev-form { margin-top: clamp(24px, 3vw, 36px); }

/* Three tracks, not two. There are nine short fields, so a two-up grid always
   left a hole in the right column under the last select; three closes every
   row exactly. Cells stretch to the tallest in their row and each label pushes
   its control to the bottom of its cell, which keeps the inputs on one line
   across a row even when a longer label above one of them wraps. */
@media (min-width: 760px) {
  .mm-elevate .mm-elev-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 24px);
    align-items: stretch;
  }
  .mm-elevate .mm-elev-form > label {
    margin: 0;
    justify-content: flex-end;
  }
  /* Anything that is not a short field spans the full row. Driven by explicit
     classes rather than :has(), so the layout does not depend on selector
     support. */
  .mm-elevate .mm-elev-form__wide,
  .mm-elevate .mm-elev-form__check,
  .mm-elevate .mm-elev-form__hp,
  .mm-elevate .mm-elev-form__foot,
  .mm-elevate .mm-elev-form > div,
  .mm-elevate .mm-elev-form > p,
  .mm-elevate .mm-elev-form > input[type="hidden"] {
    grid-column: 1 / -1;
  }
}

/* Every control on one height. Left to themselves the inputs size to their
   text (~44px) while the selects size to their 1.4 line-height (~47px), which
   is small enough to look like a mistake rather than a choice and shows up as
   a ragged baseline across each row. */
.mm-elevate .mm-elev-form input:not([type="checkbox"]),
.mm-elevate .mm-elev-form select {
  height: 46px;
  line-height: 20px;
}
/* Both textareas share one height so the two stacked full-width rows match. */
.mm-elevate .mm-elev-form textarea {
  min-height: 132px;
}

/* The submit row: button left, the direct-contact line right, collapsing to a
   stack on phones where a right-aligned sentence under a left-aligned button
   reads as a misalignment. */
.mm-elev-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(6px, 1vw, 12px);
}
.mm-elevate .mm-elev-form__foot button { flex: 0 0 auto; margin-top: 0; align-self: center; }
/* Allowed to shrink and wrap to two lines. Without the flex-basis a wrapping
   flex container drops the whole sentence onto its own line rather than
   narrowing it, which put the contact line under the button instead of
   opposite it. */
.mm-elevate .mm-elev-form__foot .mm-elev-form__fallback {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  text-align: right;
}
@media (max-width: 759px) {
  .mm-elev-form__foot { flex-direction: column; align-items: flex-start; }
  .mm-elevate .mm-elev-form__foot .mm-elev-form__fallback { text-align: left; }
}

/* The theme hands selects line-height:48px AND height:48px. With border-box
   and 12px of vertical padding the content box is only 24px tall, so the 48px
   line box overflowed it and sliced the option label in half. The height rule
   above resets both; this keeps the arrow and the text clear of it. */
.mm-elev-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}

.mm-elev-form__fallback {
  font-size: 14px;
  color: var(--fg3, #5B6472);
  margin-top: var(--sp-4, 16px);
}
/* nowrap so the phone number never breaks across two lines, which it did as
   soon as this line started sharing its row with the submit button. */
.mm-elev-form__fallback a { color: var(--accent-primary, #2F588C); white-space: nowrap; }

.mm-elev-sent {
  border-left: 3px solid var(--mm-forest-green, #1F3F36);
  padding-left: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
}
.mm-elev-sent__head {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--fg1, #1E2A3A);
  margin: 0 0 10px;
}
.mm-elev-sent p { font-size: 16px; line-height: 1.7; color: var(--fg2, #2B3340); margin: 0; }
.mm-elev-error {
  border-left: 3px solid var(--state-danger, #B8452E);
  padding-left: 16px;
  color: var(--state-danger, #B8452E);
  font-size: 15px;
  margin: var(--sp-4, 16px) 0 0;
}

/* ------------------------------------------------------------ CTA BAND */

.mm-elev-cta {
  position: relative;
  overflow: hidden;
  /* Tighter than the content bands: this is a closing note, not a chapter. */
  padding-block: clamp(56px, 7vw, 104px);
}
.mm-elev-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .mm-elev-cta__inner { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; }
}
.mm-elev-cta__marker {
  display: block;
  width: min(200px, 46vw);
  height: auto;
  justify-self: start;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
}
.mm-elev-cta__head {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.mm-elev-cta__lede {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(231, 216, 196, 0.8);
  margin: 14px 0 0;
  max-width: 54ch;
}
.mm-elev-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- BUTTONS */

/* .mm-cta is defined globally in overrides.css for light surfaces. This page
   is mostly dark, so the two variants are restated here for on-dark use. */
.mm-elevate .mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-button, var(--font-mono, monospace));
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  padding: 17px 28px;
  border-radius: var(--r-1, 2px);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast, 120ms) var(--ease-standard, ease),
    border-color var(--dur-fast, 120ms) var(--ease-standard, ease),
    color var(--dur-fast, 120ms) var(--ease-standard, ease),
    transform var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.mm-elevate .mm-btn:active { transform: translateY(1px); }
.mm-elevate .mm-btn--gold {
  background: var(--mm-gold, #C9A24A);
  border-color: var(--mm-gold, #C9A24A);
  color: #14202C;
}
.mm-elevate .mm-btn--gold:hover {
  background: var(--mm-gold-bright, #E4C172);
  border-color: var(--mm-gold-bright, #E4C172);
  color: #14202C;
}
.mm-elevate .mm-btn--ghost {
  background: transparent;
  border-color: rgba(231, 216, 196, 0.36);
  color: var(--mm-warm-sand, #E7D8C4);
}
.mm-elevate .mm-btn--ghost:hover {
  border-color: var(--mm-warm-sand, #E7D8C4);
  background: rgba(231, 216, 196, 0.08);
}
/* On the light bands the ghost outline needs ink, not sand. */
.mm-elev-band--paper .mm-btn--ghost,
.mm-elev-band--sand .mm-btn--ghost {
  border-color: var(--mm-line-strong, rgba(30,42,58,0.28));
  color: var(--fg1, #1E2A3A);
}
.mm-elev-band--paper .mm-btn--ghost:hover,
.mm-elev-band--sand .mm-btn--ghost:hover {
  border-color: var(--fg1, #1E2A3A);
  background: rgba(30, 42, 58, 0.05);
}
/* The signup button is rendered by the shared form markup, so it is targeted
   through the form rather than given a .mm-btn class. */
.mm-elevate .mm-elev-form button[type="submit"] {
  background: var(--mm-forest-green, #1F3F36);
  border: 1px solid var(--mm-forest-green, #1F3F36);
  color: var(--mm-warm-sand, #E7D8C4);
  font-family: var(--font-button, var(--font-mono, monospace));
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 17px 30px;
  border-radius: var(--r-1, 2px);
  cursor: pointer;
}
.mm-elevate .mm-elev-form button[type="submit"]:hover {
  background: var(--mm-gold, #C9A24A);
  border-color: var(--mm-gold, #C9A24A);
  color: #14202C;
}

/* ------------------------------------------------------------- REVEALS */

/* The hidden start state is gated on .mm-elev-anim, which the script adds
   only once it is running. Without JS every section stays visible. */
.mm-elev-anim [data-mm-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-xslow, 800ms) var(--ease-out, ease),
    transform var(--dur-xslow, 800ms) var(--ease-out, ease);
}
.mm-elev-anim [data-mm-reveal].is-in { opacity: 1; transform: none; }
.mm-elev-anim [data-mm-reveal][data-mm-delay="1"] { transition-delay: 90ms; }
.mm-elev-anim [data-mm-reveal][data-mm-delay="2"] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .mm-elev-anim [data-mm-reveal] { opacity: 1; transform: none; transition: none; }
  .mm-elev-hero__bg { transform: none !important; }
  /* project-elevate.js also declines to start the hero clip under this
     preference, so it stays on its poster frame. */
}