/*
 * UPIA 2026 — Methode v7. Self-contained component replacing legacy
 * .upia-process-steps rules. Outer two-panel homepage layout is untouched.
 * Five real stages; wide: flowing timeline; narrow right panel: 3 + 2.
 */
.upia-home-about-process .upia-home-process.upia-v7-method {
  box-sizing: border-box;
  container: upia-method / inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: clamp(36px,3.6vw,56px) clamp(26px,2.8vw,46px);
  background: #eef7fc;
  color: #173d5b;
  min-width: 0;
}
.upia-v7-method .upia-v7-overline {
  margin: 0 0 12px;
  padding: 0;
  color: #106d96;
  font: 800 10px/1.35 Montserrat,Arial,sans-serif;
  letter-spacing: .14em;
}
.upia-home-about-process .upia-v7-method > h2 {
  max-width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: #123f7b;
  font: 500 clamp(29px,2.4vw,38px)/1.08 "EB Garamond",Georgia,serif;
  letter-spacing: -.018em;
}
.upia-home-about-process .upia-v7-method .upia-v7-intro {
  max-width: 700px;
  margin: 0;
  padding: 0;
  color: #3c5d74;
  font: 400 13.5px/1.6 Montserrat,Arial,sans-serif;
}
.upia-home-about-process .upia-v7-method .upia-v7-steps {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 19px;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 41px 0 33px;
  background: none;
  border: none;
}
.upia-v7-method .upia-v7-line {
  position: absolute;
  z-index: -1;
  left: 10%;
  top: 0;
  width: 80%;
  height: 70px;
  display: block;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.upia-v7-method .upia-v7-line path {
  fill: none;
  stroke: #4ba2c9;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.upia-home-about-process .upia-v7-method .upia-v7-step {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.upia-home-about-process .upia-v7-method .upia-v7-step::before,
.upia-home-about-process .upia-v7-method .upia-v7-step::after{
  content: none;
  display: none;
}
.upia-home-about-process .upia-v7-method .upia-v7-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-self: center;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  min-height: 70px;
  margin: 0 0 20px;
  padding: 0;
  color: #13709e;
  background: #eef7fc;
  border: 2px solid #2396c9;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #eef7fc;
}
.upia-v7-icon svg {
  display: block;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: #13709e;
}
.upia-home-about-process .upia-v7-method .upia-v7-step h3 {
  min-height: 2.65em;
  margin: 0 0 7px;
  padding: 0;
  color: #163f66;
  font: 700 14px/1.32 Montserrat,Arial,sans-serif;
  letter-spacing: -.012em;
  word-break: normal;
  overflow-wrap: normal;
}
.upia-home-about-process .upia-v7-method .upia-v7-step p {
  margin: 0;
  padding: 0;
  color: #3d5c70;
  font: 400 13px/1.58 Montserrat,Arial,sans-serif;
  overflow-wrap: break-word;
  hyphens: auto;
}
.upia-home-about-process .upia-v7-method > .upia-button {
  box-sizing: border-box;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 12px 22px;
  border-radius: 8px;
  color: #fff;
  font: 700 13px/1.45 Montserrat,Arial,sans-serif;
}
.upia-home-about-process .upia-v7-method > .upia-button:focus-visible {
  outline: 3px solid #1d83bb;
  outline-offset: 3px;
}
/*
 * The right pane is much narrower than the full-width EIS reference.
 * At this width, 5 single-row columns would force microscopic copy.
 * A 3+2 rhythm preserves the five-step diagram while allowing 14px text.
 */
/* v8: removed the 3+2 container rules entirely. The intermediate
 * tablet breakpoint is handled below, without grid spans. */
@media(max-width:760px){
  .upia-home-about-process .upia-home-process.upia-v7-method{
    padding: 30px 22px 33px;
  }
  .upia-home-about-process .upia-v7-method>h2{
    font-size:clamp(27px,7.5vw,35px);
  }
  .upia-home-about-process .upia-v7-method .upia-v7-intro { font-size: 13px; }
  .upia-home-about-process .upia-v7-method .upia-v7-steps {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 23px 0 !important;
  }
  .upia-v7-method .upia-v7-line { display:none !important; }
  .upia-home-about-process .upia-v7-method .upia-v7-step{
    display:grid;
    grid-template-columns: 52px minmax(0,1fr);
    grid-column: 1 !important;
    column-gap: 16px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid #d1e2eb;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-step:last-child{
    border-bottom: 0;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-icon{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 49px;
    height: 49px;
    min-height: 49px;
    flex-basis: 49px;
    margin: 0;
    box-shadow: none;
  }
  .upia-v7-icon svg{width: 22px;height: 22px;}
  .upia-home-about-process .upia-v7-method .upia-v7-step h3{
    grid-column: 2;
    min-height: 0;
    font-size: 15px;
    margin: 2px 0 4px;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-step p{
    grid-column: 2;
    font-size: 13px;
    line-height: 1.6;
  }
}

/*
 * UPIA refined proportions — 30% identity / 70% five-stage journey.
 * Preserve the original pair of panels and colours. Prevent the 3+2
 * layout on iPad/tablet widths with sufficient space for five stages.
 */
@media (min-width: 941px) {
  .upia-home-about-process.upia-wrap {
    grid-template-columns: minmax(0,30%) minmax(0,70%) !important;
    gap: 0 !important;
  }
  .upia-home-about-process .upia-home-about {
    min-width:0 !important;
  }
  .upia-home-about-process .upia-home-about .upia-home-about-copy {
    padding: clamp(28px,3vw,42px) clamp(18px,2vw,30px) !important;
  }
  .upia-home-about-process .upia-home-about .upia-home-about-copy>.upia-kicker {
    font-size: 10px !important;
    letter-spacing: .07em !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }
  .upia-home-about-process .upia-home-about .upia-home-about-copy>h2 {
    font-size: clamp(1.85rem,2.1vw,2.25rem) !important;
    line-height: 1.13 !important;
    margin-bottom: 19px !important;
  }
  .upia-home-about-process .upia-home-about .upia-home-about-copy>p:not(.upia-kicker) {
    font-size: clamp(12px,.93vw,14px) !important;
    line-height: 1.62 !important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method {
    padding: 36px clamp(19px,2vw,31px) !important;
    justify-content: center !important;
  }
  .upia-home-about-process .upia-v7-method > h2 {
    font-size: clamp(1.9rem,2.38vw,2.45rem) !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-intro {
    font-size: 12.5px !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-steps {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: clamp(7px,.82vw,13px) !important;
    margin: 29px 0 28px !important;
  }
  /* Override the narrow-container 3+2 spans: five genuinely sequential
     stages on one row for desktop, including widths around 1024px. */
  .upia-home-about-process .upia-v7-method .upia-v7-step,
  .upia-home-about-process .upia-v7-method .upia-v7-step:nth-of-type(4),
  .upia-home-about-process .upia-v7-method .upia-v7-step:nth-of-type(5) {
    grid-column: span 1 !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-icon {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    flex-basis: 58px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 0 0 4px #eef7fc !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-icon svg {
    width: 25px !important;
    height: 25px !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-line {
    display: block !important;
    height: 59px !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-step h3 {
    min-height: 2.65em !important;
    font-size: clamp(11.6px,.9vw,14px) !important;
    line-height: 1.32 !important;
    margin-bottom: 7px !important;
  }
  .upia-home-about-process .upia-v7-method .upia-v7-step p {
    font-size: clamp(11.2px,.78vw,12.5px) !important;
    line-height: 1.58 !important;
  }
}
@media (min-width:761px) and (max-width:940px) {
  .upia-home-about-process.upia-wrap {
    grid-template-columns:minmax(0,30%) minmax(0,70%) !important;
  }
}
/* Desktop: use flex, not a grid, because the narrow-container 3+2 grid
   overrides can remain active inside the 70% panel at desktop widths.
   This always displays exactly five consecutive stages on one row. */
@media (min-width: 941px) {
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-steps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(7px, .7vw, 12px) !important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step,
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step:nth-of-type(4),
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step:nth-of-type(5) {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: auto !important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step h3 {
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step p {
    hyphens: none !important;
    overflow-wrap: break-word !important;
  }
}
/* Narrow screens continue to use the accessible vertical sequence
   defined above; these overrides do not affect mobile. */


/* UPIA v8: one *genuine* sequence on every non-phone viewport.
   Tablet panels stack so five readable stages fit on a full-width row. */
@media(min-width:761px){
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-steps{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:clamp(9px,1.2vw,19px)!important;
    width:100%!important;
    margin:26px 0 27px!important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step,
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step:nth-of-type(4),
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step:nth-of-type(5){
    display:flex!important;
    flex-direction:column!important;
    grid-column:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step h3,
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step p{
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }
}
@media(min-width:761px) and (max-width:1279px){
  .upia-home-about-process.upia-wrap{
    width:min(1180px,calc(100% - 40px))!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  .upia-home-about-process .upia-home-about,
  .upia-home-about-process .upia-home-process.upia-v7-method{
    min-width:0!important;
    width:100%!important;
  }
  .upia-home-about-process .upia-home-about .upia-home-about-copy{
    padding:30px clamp(24px,4vw,50px)!important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method{
    padding:35px clamp(24px,4vw,50px) 38px!important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-icon{
    width:56px!important;height:56px!important;min-height:56px!important;flex-basis:56px!important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step h3{
    font-size:clamp(12px,1.35vw,14px)!important;
  }
  .upia-home-about-process .upia-home-process.upia-v7-method .upia-v7-step p{
    font-size:clamp(11.5px,1.25vw,13px)!important;
  }
}