/* Homepage only: fixed identity, shared PT/EN markup, no interaction dependency. */
html body #milobras-home-facts { display: none; }
html body #milobras-home-process { clear: both; width: 100%; margin: 28px 0 0; padding: 0; border: 1px solid #e4e4e4; background: #fff; color: #34403b; text-align: left; }
#milobras-home-process *, #milobras-home-facts * { box-sizing: border-box; }
#milobras-home-process .mb-home-process-header { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 32px; align-items: center; padding: 26px 20px; }
html body #milobras-home-process h2 { margin: 0 !important; padding: 0 24px 0 0 !important; border: 0; border-right: 1px solid #e4e4e4; color: #333f4c; font: 700 18px/20px 'Roboto Condensed', sans-serif !important; text-transform: uppercase; letter-spacing: 0; }
#milobras-home-process h2::after { content: ''; display: block; width: 40px; height: 2px; margin-top: 10px; background: #86d500; }
html body #milobras-home-process p { margin: 0; padding: 0; color: #34403b; font: 400 13px/20px Roboto, sans-serif; }
#milobras-home-process .mb-home-process-header p { max-width: 580px; }
html body #milobras-home-process .mb-home-process-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid #e4e4e4; list-style: none; }
#milobras-home-process .mb-home-process-step { position: relative; min-width: 0; margin: 0; padding: 20px; border: 0; border-left: 1px solid #e4e4e4; }
#milobras-home-process .mb-home-process-step:first-child { border-left: 0; }
#milobras-home-process .mb-home-process-number { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; background: #86d500; color: #333f4c; font: 700 17px/1 'Roboto Condensed', sans-serif; }
#milobras-home-process .mb-home-process-icon { position: absolute; top: 23px; right: 20px; width: 24px; height: 24px; fill: none; stroke: #bcc1c3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body #milobras-home-process h3 { margin: 0 0 7px !important; padding: 0 !important; border: 0; color: #34403b; font: 700 14px/20px 'Roboto Condensed', sans-serif !important; letter-spacing: 0; text-transform: uppercase; }
@media (min-width:769px) and (max-width:1199px) and (orientation:portrait) {
  html body #milobras-home-process h2 { font-size: 16px !important; line-height: 20px !important; }
}

/* One shared header grid: both separator centres follow the first of five steps.
 * Header content is inset 20px on each side, so its first track is 20% - 11px.
 * The extra 1px aligns the heading's right border with step two's left border.
 * Phones retain their existing stacked headings and vertical work stages. */
@media (min-width:769px) {
  html body.home.mb-responsive :is(#milobras-home-projects, #milobras-home-process) {
    --mb-home-heading-track: calc(20% - 11px);
    --mb-home-heading-gap: 24px;
  }
  html body.home.mb-responsive #milobras-home-projects .milobras-home-projects__header {
    grid-template-columns: var(--mb-home-heading-track) minmax(0, 1fr) auto !important;
    gap: 24px var(--mb-home-heading-gap) !important;
    align-items: start;
  }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-header {
    grid-template-columns: var(--mb-home-heading-track) minmax(0, 1fr);
    gap: 24px var(--mb-home-heading-gap);
    align-items: start;
    padding: 26px 20px;
  }
  html body.home.mb-responsive :is(#milobras-home-projects, #milobras-home-process) h2 {
    grid-column: 1 !important;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    padding-right: 12px !important;
    border-right: 1px solid var(--milobras-content-frame-color, #e4e4e4) !important;
    white-space: normal !important;
  }
  html body.home.mb-responsive :is(#milobras-home-projects, #milobras-home-process) h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 10px;
    background: #86d500;
  }
  html body.home.mb-responsive #milobras-home-projects .milobras-home-projects__heading-word::after {
    display: none;
  }
  html body.home.mb-responsive :is(.milobras-home-projects__header, .mb-home-process-header) > p {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start;
    min-width: 0;
  }
}
@media (min-width:769px) and (max-width:1199px) {
  html body.home.mb-responsive :is(#milobras-home-projects, #milobras-home-process) h2 {
    min-height: 52px;
    height: 52px;
  }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-step {
    padding-left: 14px;
    padding-right: 14px;
  }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-icon {
    right: 14px;
  }
  html body.home.mb-responsive #milobras-home-projects .milobras-home-projects__header {
    grid-template-columns: var(--mb-home-heading-track) minmax(0, 1fr) !important;
  }
  html body.home.mb-responsive #milobras-home-projects .milobras-home-projects__all--desktop {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}
@media (max-width:768px) {
  html body #milobras-home-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 25px 0 0; padding: 0; border: 1px solid #e4e4e4; background: #fff; }
  #milobras-home-facts .mb-home-fact { display: grid; grid-template-columns: clamp(26px, 8.53vw, 32px) minmax(0, 1fr); align-items: center; gap: clamp(3px, calc(8vw - 22px), 8px); min-height: clamp(54px, 16.4vw, 66px); padding: 10px clamp(12px, 3.59vw, 14px); text-align: left; }
  #milobras-home-facts .mb-home-fact:nth-child(2) { grid-template-columns: auto minmax(0, 1fr); }
  #milobras-home-facts .mb-home-fact:nth-child(2) strong { justify-self: start; margin-left: calc((clamp(26px, 8.53vw, 32px) - clamp(24px, 7.47vw, 28px)) / 2); }
  #milobras-home-facts .mb-home-fact:nth-child(even) { border-left: 1px solid #e4e4e4; }
  #milobras-home-facts .mb-home-fact:nth-child(n+3) { border-top: 1px solid #e4e4e4; }
  #milobras-home-facts .mb-home-fact:nth-child(4) { padding-right: 4px; }
  #milobras-home-facts strong { justify-self: center; color: #86d500; font: 700 clamp(26px, 8.2vw, 32px)/1 'Roboto Condensed', sans-serif; }
  #milobras-home-facts span { max-width: 145px; white-space: nowrap; color: #34403b; font: 700 calc(clamp(10px, 3.34vw, 13px) + 1px)/16px 'Roboto Condensed', sans-serif; }
  #milobras-home-facts svg { justify-self: center; width: clamp(24px, 7.47vw, 28px); height: clamp(24px, 7.47vw, 28px); fill: none; stroke: #86d500; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html body #milobras-home-process { margin-top: 25px; }
  #milobras-home-process .mb-home-process-header { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 15px 20px; }
  html body #milobras-home-process h2 { padding: 0 !important; border: 0; }
  html body #milobras-home-process p { font-size: 14px; line-height: 21px; }
  html body #milobras-home-process .mb-home-process-steps { grid-template-columns: minmax(0, 1fr); }
  #milobras-home-process .mb-home-process-step { padding: 18px 48px 18px 63px; border-left: 0; border-top: 1px solid #e4e4e4; }
  #milobras-home-process .mb-home-process-step:first-child { border-top: 0; }
  #milobras-home-process .mb-home-process-number { position: absolute; left: 15px; top: 18px; width: 32px; height: 32px; margin: 0; }
  #milobras-home-process .mb-home-process-icon { top: 19px; right: 15px; width: 20px; height: 20px; }
  @layer milobras-mobile-typography {
    html body #milobras-home-process h2 { font-size: 18px !important; line-height: 30px !important; }
    html body #milobras-home-process h3 { font-size: 14px !important; line-height: 20px !important; }
  }
}

/* Existing desktop mouse effects; mobile state is driven by scroll. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html body #milobras-home-process .mb-home-process-step {
    translate: 0 0;
    transition: translate 250ms ease-out;
  }
  html body #milobras-home-process .mb-home-process-step:hover {
    translate: 0 -2px;
  }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html body #milobras-home-process .mb-home-process-steps { position: relative; }
  html body #milobras-home-process .mb-home-process-steps::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #86D500;
    transform: scaleX(var(--mb-process-progress, 0));
    transform-origin: left center;
    transition: transform 450ms ease-out;
    pointer-events: none;
    z-index: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #milobras-home-process .mb-home-process-step,
  html body #milobras-home-process .mb-home-process-steps::before { transition: none; }
}

/* Each work stage is one native link, with the existing card geometry and hover. */
html body.home.mb-responsive #milobras-home-process .mb-home-process-step { padding: 0; }
html body #milobras-home-process .mb-home-process-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: inherit;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}
html body #milobras-home-process .mb-home-process-link:is(:hover, :focus, :active, :visited) {
  color: inherit;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}
html body #milobras-home-process .mb-home-process-link:focus-visible {
  outline: 2px solid #86d500;
  outline-offset: -4px;
}
@media (min-width: 769px) and (max-width: 1199px) {
  html body #milobras-home-process .mb-home-process-link { padding: 20px 14px; }
}
@media (max-width: 768px) {
  html body #milobras-home-process .mb-home-process-link { padding: 18px 48px 18px 63px; }
}

/* Requested tablet stages: three columns, no progress line. */
@media (min-width: 769px) and (max-width: 1199px) {
  html body.home.mb-responsive #milobras-home-process .mb-home-process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-step:nth-child(3n + 1) { border-left: 0; }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-step:nth-child(n + 4) { border-top: 1px solid #e4e4e4; }
}
/* The new mobile boundary includes 768px; the original slider stays desktop/tablet. */
@media (width: 768px) {
  html body.home.mb-responsive .AreaPortfolio { display: none !important; }
}

/* Owner correction: portrait iPads keep all five stages in a single row. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  html body.home.mb-responsive :is(.milobras-home-projects__header, .mb-home-process-header) .mb-home-intro-follow { display: block; }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-step:nth-child(n) { border-top: 0; border-left: 1px solid #e4e4e4; }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-step:first-child { border-left: 0; }
}
/* 768px portrait is an iPad layout for the process, not a vertical phone column. */
@media (width: 768px) and (orientation: portrait) {
  html body.home.mb-responsive #milobras-home-process .mb-home-process-header {
    grid-template-columns: calc(20% - 11px) minmax(0, 1fr);
    gap: 24px;
    padding: 26px 20px;
    align-items: start;
  }
  html body.home.mb-responsive #milobras-home-process h2 {
    min-height: 52px;
    height: 52px;
    padding-right: 12px !important;
    border-right: 1px solid #e4e4e4;
  }
  html body.home.mb-responsive #milobras-home-process p { font-size: 13px; line-height: 20px; }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-header > p { font-size: 12px; }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-number {
    position: static;
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
  }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-icon { top: 23px; right: 14px; width: 24px; height: 24px; }
  html body.home.mb-responsive #milobras-home-process .mb-home-process-link { padding: 20px 14px; }
  @layer milobras-mobile-typography {
    html body.home.mb-responsive #milobras-home-process h2 { font-size: 16px !important; line-height: 20px !important; }
  }
}

/* Keep the photographed two-line labels on the narrowest phones. */
@media (max-width: 359px) {
  #milobras-home-facts .mb-home-fact { grid-template-columns: 24px minmax(0, 1fr); gap: 2px; padding: 10px; }
  #milobras-home-facts svg { width: 24px; height: 24px; }
  #milobras-home-facts .mb-home-fact:nth-child(2) strong { margin-left: 0; }
}