/* ============================================================
   Component: Our Approach (approach.css)
   BEM Architecture: block_element--modifier
   Matched to Figma Node 0:6111
   ============================================================ */

.section_approach {
  position: relative;
  width: 100%;
  z-index: 2;
  padding: 56px 16px 72px;
  background: #FFFFFF;
}

@media (min-width: 768px) {
  .section_approach {
    padding: 72px 40px 96px;
  }
}

@media (min-width: 1024px) {
  .section_approach {
    padding: 96px 56px 120px;
  }
}

@media (min-width: 1280px) {
  .section_approach {
    padding: 100px 64px 128px;
  }
}

/* ------------------------------------------------------------
   Container Layout: Responsive 2-Column Structure
   ------------------------------------------------------------ */
.approach_container {
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
}

@media (min-width: 1024px) {
  .approach_container {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 686px);
    justify-content: space-between;
    align-items: start;
    gap: 48px;
  }
}

@media (min-width: 1280px) {
  .approach_container {
    grid-template-columns: 522px 686px;
    gap: 64px;
  }
}

/* ------------------------------------------------------------
   Left Column: Header / Intro (Sticky on Desktop)
   ------------------------------------------------------------ */
.approach_intro {
  display: flex;
  flex-direction: column;
  max-width: 522px;
}

@media (min-width: 1024px) {
  .approach_intro {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

.approach_eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--font-size-eyebrow, 14px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-eyebrow, 0.08em);
  color: var(--color-approach-eyebrow, #834AE0);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.approach_title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 3.8vw, 52px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.12;
  letter-spacing: var(--letter-spacing-tight, -0.02em);
  color: var(--color-text-primary, #020101);
  margin: 0 0 28px 0;
}

@media (max-width: 767px) {
  .approach_title {
    font-size: 40px;
    font-weight: 500;
  }
}

.approach_description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: #020101;
  margin: 0;
  max-width: 455px;
}

/* ------------------------------------------------------------
   Right Column: Comparison & Timeline Process
   ------------------------------------------------------------ */
.approach_process {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ------------------------------------------------------------
   Sticky Note Comparison ("From" -> "To")
   ------------------------------------------------------------ */
.approach_comparison {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: 56px;
  position: relative;
  width: 100%;
}

@media (min-width: 640px) {
  .approach_comparison {
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 68px;
  }
}

@media (min-width: 1024px) {
  .approach_comparison {
    gap: 24px;
    margin-bottom: 80px;
  }
}

.approach_comparison-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(50% - 6px);
  max-width: 172px;
  position: relative;
}

@media (min-width: 640px) {
  .approach_comparison-col {
    width: 100%;
    max-width: 280px;
  }
}

.approach_comparison-label {
  font-family: var(--font-accent, 'La Belle Aurore', cursive);
  font-size: 20px;
  color: var(--color-text-primary, #020101);
  margin-bottom: 8px;
  user-select: none;
}

@media (min-width: 640px) {
  .approach_comparison-label {
    font-size: 26px;
    margin-bottom: 12px;
  }
}

@media (min-width: 768px) {
  .approach_comparison-label {
    font-size: 28px;
    margin-bottom: 16px;
  }
}

/* Sticky Note Paper Elements */
.approach_note {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 172px;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out-smooth);
}

@media (min-width: 640px) {
  .approach_note {
    max-width: 280px;
  }
}

.approach_note:hover {
  transform: translateY(-4px);
}

/* Note Left-Side Soft Peeling Shadow */
.approach_note-shadow {
  position: absolute;
  left: -8px;
  top: 8%;
  width: 24px;
  height: 84%;
  border-radius: 50%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.02));
  filter: blur(5px);
  transform: rotate(-3deg);
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-smooth),
    filter var(--duration-fast) var(--ease-out-smooth);
}

@media (min-width: 640px) {
  .approach_note-shadow {
    left: -12px;
    width: 36px;
    filter: blur(6px);
  }
}

.approach_note:hover .approach_note-shadow {
  opacity: 0.95;
  filter: blur(8px);
}

/* Paper Surface */
.approach_note-paper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 14px 10px 10px;
  border-radius: 2px 2px 4px 2px;
  box-shadow: -2px 8px 20px -2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--duration-fast) var(--ease-out-smooth),
    filter var(--duration-fast) var(--ease-out-smooth);
}

@media (min-width: 640px) {
  .approach_note-paper {
    padding: 28px 22px 22px;
  }
}

.approach_note-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: rgba(0, 0, 0, 0.025);
  pointer-events: none;
  border-radius: 2px 2px 0 0;
}

@media (min-width: 640px) {
  .approach_note-paper::before {
    height: 24px;
  }
}

/* Note Colors */
.approach_note--blue .approach_note-paper {
  background-color: var(--color-reality-blue, #80CAFF);
}

.approach_note--pink .approach_note-paper {
  background-color: var(--color-reality-pink, #FFBDF2);
}

/* Handwritten Text inside Sticky Notes */
.approach_note-text {
  font-family: var(--font-accent, 'La Belle Aurore', cursive);
  color: var(--color-text-primary, #020101);
  line-height: 1.25;
  text-align: left;
  user-select: none;
  margin: 0;
}

.approach_note--blue .approach_note-text {
  font-size: 18px;
  line-height: 1.25;
}

@media (min-width: 640px) {
  .approach_note--blue .approach_note-text {
    font-size: clamp(21px, 2.3vw, 26px);
    line-height: 1.35;
  }
}

.approach_note--pink .approach_note-text {
  font-size: 16px;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .approach_note--pink .approach_note-text {
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.32;
  }
}

/* Directional Arrow between notes */
.approach_comparison-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

@media (min-width: 640px) {
  .approach_comparison-arrow {
    position: static;
    transform: none;
    padding: 8px;
    align-self: center;
    margin-top: 36px;
    margin-bottom: 0;
  }
}

.approach_arrow-img {
  width: 44px;
  height: 28px;
  display: block;
}

@media (min-width: 768px) {
  .approach_arrow-img {
    width: 60px;
    height: 40px;
  }
}

/* ------------------------------------------------------------
   Vertical Timeline Process (Steps 1 to 4)
   ------------------------------------------------------------ */
.approach_timeline {
  position: relative;
  width: 100%;
}

/* Dotted/Dashed connecting line extending up to the blue sticky note */
.approach_timeline::before {
  content: '';
  position: absolute;
  left: 25px;
  top: -24px;
  bottom: 26px;
  width: 2px;
  border-left: 2px dashed var(--color-approach-line, #D0D5DD);
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 640px) {
  .approach_timeline::before {
    top: -68px;
  }
}

@media (min-width: 1024px) {
  .approach_timeline::before {
    top: -80px;
  }
}

.approach_steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .approach_steps {
    gap: 60px;
  }
}

@media (min-width: 1024px) {
  .approach_steps {
    gap: 72px;
  }
}

/* Individual Timeline Step Item */
.approach_step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

@media (min-width: 768px) {
  .approach_step {
    gap: 28px;
  }
}

@media (min-width: 1024px) {
  .approach_step {
    gap: 32px;
  }
}

/* Step Number Badge Circle */
.approach_step-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-approach-badge-bg, #000000);
  color: var(--color-approach-badge-text, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--duration-fast) var(--ease-out-smooth),
    box-shadow var(--duration-fast) var(--ease-out-smooth);
}

.approach_step:hover .approach_step-badge {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.approach_step-number {
  font-family: var(--font-accent, 'La Belle Aurore', cursive);
  font-size: 26px;
  line-height: 1;
  color: #FFFFFF;
  margin-top: 2px;
  user-select: none;
}

/* Step Content Block */
.approach_step-content {
  display: flex;
  flex-direction: column;
  max-width: 553px;
}

.approach_step-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.22;
  letter-spacing: var(--letter-spacing-tight, -0.015em);
  color: var(--color-text-primary, #020101);
  margin: 0 0 12px 0;
}

@media (min-width: 768px) {
  .approach_step-title {
    margin-bottom: 14px;
  }
}

.approach_step-description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-approach-step-desc, #475467);
  margin: 0 0 18px 0;
}

/* Pill Tags (Steps 1 & 2) */
.approach_pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.approach_pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 6px 16px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--color-approach-pill-border, #E5E7EB);
  background-color: var(--color-approach-pill-bg, #FFFFFF);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-approach-pill-text, #1F2937);
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color var(--duration-fast) var(--ease-out-smooth),
    background-color var(--duration-fast) var(--ease-out-smooth),
    transform var(--duration-fast) var(--ease-out-smooth);
}

.approach_pill:hover {
  border-color: var(--color-approach-pill-hover-border, #D1D5DB);
  background-color: #FAFAFA;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Progressive Enhancement: Entrance Animations
   ------------------------------------------------------------ */
.approach_animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow, 550ms) var(--ease-out-smooth),
    transform var(--duration-slow, 550ms) var(--ease-out-smooth);
}

.section_approach.has-motion .approach_animate {
  opacity: 0;
  transform: translateY(24px);
}

.section_approach.has-motion.is-in-view .approach_animate {
  opacity: 1;
  transform: translateY(0);
}

.approach_stagger-1 {
  transition-delay: 0.05s;
}

.approach_stagger-2 {
  transition-delay: 0.12s;
}

.approach_stagger-3 {
  transition-delay: 0.20s;
}

.approach_stagger-4 {
  transition-delay: 0.28s;
}

.approach_stagger-5 {
  transition-delay: 0.36s;
}

.approach_stagger-6 {
  transition-delay: 0.44s;
}

.approach_stagger-7 {
  transition-delay: 0.52s;
}

/* ------------------------------------------------------------
   Accessibility: Reduced Motion (WCAG 2.1 AA)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

  .approach_animate,
  .section_approach.has-motion .approach_animate,
  .section_approach.has-motion.is-in-view .approach_animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .approach_note,
  .approach_step-badge,
  .approach_pill {
    transition: none;
    transform: none;
  }
}