/* Premium editorial "How It Works" — bright warm-white surface, huge uppercase
   display headline, top-right slide counter, and a five-column process row
   divided by hairlines with oversized outlined numerals pinned to the top and
   copy pinned to the bottom, echoing a tall, breathing editorial layout. */

.section {
  background: linear-gradient(180deg, #fbfaf7 0%, #f5f2ec 100%);
  padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 8vw, 120px);
  margin-bottom: 40px;
  margin-right: 24px;
  margin-left: 24px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}

.sectionShell {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 5vw;
  box-sizing: border-box;
  position: relative;
}

@media (max-width: 1024px) {
  .sectionShell {
    padding: 0 24px;
  }
}

/* ---------- Header: eyebrow + giant display headline, counter top-right ---------- */

.headerRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.header {
  text-align: left;
  max-width: 780px;
  margin: 0;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  color: rgba(20, 18, 15, 0.5);
  margin-bottom: 22px;
}

.title {
  font-size: clamp(32px, 4.6vw, 68px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.02 !important;
  text-transform: uppercase !important;
  color: #17140f !important;
  margin: 0;
}

.progress {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.progressCount {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #17140f;
  white-space: nowrap;
}

.progressTrack {
  position: relative;
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: rgba(23, 20, 15, 0.12);
  overflow: hidden;
}

.progressFill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #c8102e;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Process row: hairline-divided columns, numeral up top, copy at the bottom ---------- */

.flow {
  width: 100%;
  display: flex;
  align-items: stretch;
}

.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(200px, 18vw, 260px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 32px;
  border-left: 1px solid rgba(23, 20, 15, 0.14);
  cursor: pointer;
}

.step:first-child {
  padding-left: 0;
  border-left: none;
}

.step:last-child {
  padding-right: 0;
}

.step:focus-visible {
  outline: 2px solid rgba(200, 16, 46, 0.55);
  outline-offset: 8px;
  border-radius: 4px;
}

.stepTop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.stepNum {
  font-size: clamp(44px, 5.1vw, 92px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(23, 20, 15, 0.22);
  transition: -webkit-text-stroke-color 0.4s ease, filter 0.4s ease;
}

.stepActive .stepNum {
  -webkit-text-stroke-color: #c8102e;
  filter: drop-shadow(0 0 14px rgba(200, 16, 46, 0.18));
}

.stepTag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(23, 20, 15, 0.4);
  transition: color 0.4s ease;
}

.stepIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.stepActive .stepTag {
  color: #c8102e;
}

.stepBottom {
  align-self: end;
  max-width: 280px;
}

.stepTitle {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: #17140f !important;
  margin: 0 0 10px 0 !important;
}

.stepDesc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(23, 20, 15, 0.55);
  margin: 0;
}

/* ---- Step 04 / Step 05 title-alignment fix ----
   .stepBottom sits in .step's 1fr grid row with align-self:end, so its
   title starts wherever the leftover space above it runs out — driven by
   its OWN content height, not a shared position. Steps 01-03's
   descriptions wrap to 3 lines, giving .stepBottom a natural height of
   ~101px; "Destination Hub" (04) and "EV Last-Mile" (05) wrap to only 2
   lines (~79px) at several desktop widths, so under that same
   end-alignment they're left with ~22px more leftover space above them
   and their titles land visibly lower. Reserving that same ~101px on
   .stepBottom for these two steps only — a floor, not a cap, so it's
   inert wherever their content is already taller — reproduces Steps
   01-03's exact title position without touching their CSS, the shared
   grid, or align-self. */
@media (min-width: 1200px) {
  .step:nth-child(4) .stepBottom,
  .step:nth-child(5) .stepBottom {
    min-height: 102px;
  }
}

@media (max-width: 1024px) {
  .headerRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .progress {
    align-items: flex-start;
  }

  .flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
  }

  .step {
    flex: none;
    border-left: none;
    padding: 0;
    min-height: 0;
    display: block;
  }

  .stepBottom {
    max-width: none;
    margin-top: 24px;
  }

  .step:nth-child(n + 3) {
    border-top: 1px solid rgba(23, 20, 15, 0.14);
    padding-top: 28px;
  }

  .flow > .step:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  /* The clamp() on .section floors at a fixed 56px/80px on any phone width
     (no further breakpoint-based step-down), noticeably heavier than the
     rhythm every other Wings section settles into on mobile — normalized to
     the same 44px/44px here.

     .section's own margin-left/right also stays fixed at 24px below 1024px
     (set at the top of this file, for the card's inset from the viewport
     edge). Stacked with .sectionShell's padding that put the card's content
     34px from the screen edge on phones — noticeably narrower than the
     Footer's real 10px edge gutter (--dm-mobile-gutter, see globals.css's
     .dm-section-container). Moving the full 10px gutter onto .section's
     margin reproduces that same 10px screen-to-card edge, so the card sits
     flush with its neighbors. .sectionShell then gets its own small 10px
     breathing-room padding (independent of the outer gutter) so the eyebrow,
     heading, progress indicator, and step content aren't flush against the
     card's inner edge. */
  .section {
    padding-top: 44px;
    padding-bottom: 44px;
    margin-left: var(--dm-mobile-gutter, 10px);
    margin-right: var(--dm-mobile-gutter, 10px);
  }

  .sectionShell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .flow {
    display: flex;
    flex-direction: column;
  }

  .step {
    padding: 28px 0;
  }

  .step:first-child {
    padding-top: 0;
  }

  .step:not(:first-child) {
    border-top: 1px solid rgba(23, 20, 15, 0.14);
  }

  .step:last-child {
    padding-bottom: 0;
  }
}