/* Our Approach — builds on styles.css (Figma UI Design: approach desktop 1280 / mobile 390) */
/* ---------- Hero (Figma values) ---------- */
.ap-hero {
  --tint: 236 244 247;
  --hero-pt: 132px;
  --hero-copy: 542px;
  --fade-x: linear-gradient(90deg, rgb(236 244 247) 0%, rgb(236 244 247 / 0.85) 38.9%, rgb(236 244 247 / 0.6) 42.2%, rgb(236 244 247 / 0) 46.9%);
  --fade-y: linear-gradient(180deg, rgb(236 244 247) 0%, rgb(236 244 247 / 0.85) 21.3%, rgb(236 244 247 / 0.6) 31.1%, rgb(236 244 247 / 0) 40%);
}
@media (max-width: 768px) {
  .ap-hero { --tint: 236 244 247; --fade-m: linear-gradient(180deg, rgb(236 244 247) 0%, rgb(236 244 247 / 0.85) 38.9%, rgb(236 244 247 / 0.6) 42.2%, rgb(236 244 247 / 0) 46.9%); }
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tone-orange { --tone: var(--orange-600); --tone-bg: #FFF7F0; }
.tone-navy   { --tone: var(--navy-800);   --tone-bg: #F1F8FD; }
.tone-green  { --tone: var(--green-700);  --tone-bg: #F2FDF5; }
svg use { overflow: visible; }

/* Shared section head (eyebrow + title left, intro right) */
.ap-head { display: grid; grid-template-columns: minmax(0, 1fr) 558px; column-gap: 40px; align-items: start; }
.ap-head .eyebrow { margin-bottom: 8px; }
.ap-head > p { margin-top: 12px; }

/* ---------- Hero ---------- */

/* ---------- Our process ---------- */
.ap-process { padding: 48px 0; background: linear-gradient(90deg, #FCFDFD, #FAFDFE); }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 40px; margin-top: 48px; }
.step-mark { display: flex; align-items: center; gap: 36px; }
.step-num {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tone); color: #fff;
  font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 600;
}
.step-arrow { width: 99px; height: 15px; }
.step-arrow-v { display: none; width: 15px; height: 27px; }
.step:last-child .step-arrow { display: none; }
.step-icon { display: block; width: 48px; height: 48px; margin-top: 16px; color: var(--tone); }
.step-text h3 { margin-top: 17px; font-size: 20px; line-height: 26px; font-weight: 600; }
.step-text p { margin-top: 2px; font-size: 16px; line-height: 26px; }

/* ---------- Journey in detail ---------- */
.ap-details { padding: 51px 0 48px; background: #fff; }
.detail-eyebrow { display: none; }
.details { display: grid; gap: 48px; margin-top: 40px; }
.detail { display: grid; grid-template-columns: 48px minmax(0, 1fr) 720px; align-items: start; }
.detail-num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tone); color: #fff;
  font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.25px;
}
.detail-copy { padding: 0 40px 0 24px; }
.detail-copy h3 { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.5px; }
.detail-lead { margin-top: 2px; font-size: 18px; line-height: 28px; color: var(--n-950); }
.detail-body { margin-top: 18px; font-size: 16px; line-height: 26px; }
.detail-panel { display: grid; grid-template-columns: 406px minmax(0, 1fr); height: 190px; border-radius: var(--radius-lg); background: var(--tone-bg); overflow: hidden; }
.detail-list { display: flex; align-items: flex-start; padding: 20px 24px; }
.detail-icon { width: 48px; height: 48px; margin-top: 4px; color: var(--tone); }
.detail-list ul { margin-left: 48px; }
.detail-list li { position: relative; font-size: 14px; line-height: 30px; }
.detail-list li::before { content: ""; position: absolute; left: -16px; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--tone); }
.detail-panel img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius-lg); }

/* ---------- What makes our approach different ---------- */
.ap-diff { padding: 48px 0 96px; }
.ap-diff .ap-head { grid-template-columns: minmax(0, 1fr) 499px; }
.diff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.diff-card { min-height: 226px; padding: 24px; }
.diff-icon { display: block; width: 48px; height: 48px; color: var(--tone); }
.diff-card h3 { margin-top: 16px; font-size: 20px; line-height: 26px; font-weight: 600; }
.diff-card p { margin-top: 8px; font-size: 16px; line-height: 26px; }

/* ---------- Our goal ---------- */
.ap-goal-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center;
  padding-right: max(var(--gutter), (100% - var(--container)) / 2);
}
.ap-goal-media { height: 344px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; overflow: hidden; }
.ap-goal-media img { width: 100%; height: 100%; object-fit: cover; }
.ap-goal-copy h2 { margin-top: 7px; line-height: 56px; }
.ap-goal-copy p { margin-top: 15px; }
.ap-goal-copy .btn { margin-top: 24px; }

/* ---------- FAQ ---------- */
.ap-faq { padding: 96px 0 48px; }
.ap-faq-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ap-faq-head .eyebrow { margin-bottom: 8px; }
.ap-faq-more { margin-top: 27px; font-size: 16px; line-height: 26px; }
.ap-faq-more .link-arrow { margin-left: 8px; }
.faq-list { grid-column: 1 / -1; display: grid; gap: 24px; margin-top: 48px; }
.faq { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 96px; padding: 0 28px 0 24px;
  font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.25px; color: #000;
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { width: 24px; height: 24px; fill: none; stroke: var(--navy-950); stroke-width: 2.5; stroke-linecap: round; transition: transform .2s ease; }
.faq[open] .faq-plus { transform: rotate(45deg); }
.faq p { padding: 0 24px 26px; font-size: 16px; line-height: 26px; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .ap-head, .ap-diff .ap-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .step:nth-child(3) .step-arrow { display: none; }
  .detail { grid-template-columns: 48px minmax(0, 1fr); row-gap: 24px; }
  .detail-panel { grid-column: 2; }
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile (390 frame) ---------- */
@media (max-width: 768px) {
  .ap-head, .ap-diff .ap-head { display: block; }
  .ap-head .eyebrow, .ap-faq-head .eyebrow { margin-bottom: 9px; }
  .ap-head > p { margin-top: 12px; }
  .ap-process h2, .ap-diff h2, .ap-goal h2, .ap-faq h2 { font-weight: 600; }

  /* Hero */

  /* Process: vertical list */
  .ap-process { padding: 32px 0 32px; }
  .steps { grid-template-columns: 1fr; row-gap: 0; margin-top: 31px; }
  .step { display: grid; grid-template-columns: 32px 40px minmax(0, 1fr); column-gap: 16px; padding-bottom: 48px; }
  .step:last-child { padding-bottom: 0; }
  .step-mark { flex-direction: column; gap: 0; align-self: stretch; margin-bottom: -48px; padding-bottom: 0; }
  .step:last-child .step-mark { margin-bottom: 0; }
  .step-num { width: 32px; height: 32px; font-size: 18px; }
  .step-arrow { display: none !important; }
  .step-arrow-v { display: block; margin: auto 0; }
  .step:last-child .step-arrow-v { display: none; }
  .step-icon { width: 40px; height: 40px; margin-top: 0; }
  .step-text h3 { margin-top: 0; font-size: 18px; line-height: 24px; }
  .step-text p { margin-top: 4px; font-size: 14px; line-height: 22px; }

  /* Journey in detail: one block per step */
  .ap-details { padding: 0; }
  .ap-details-eyebrow { display: none; }
  .details { gap: 0; margin-top: 0; }
  .detail { display: block; padding: 32px 0; }
  .detail-eyebrow { display: block; margin-bottom: 40px; }
  .detail-num { width: 40px; height: 40px; font-size: 20px; letter-spacing: 0; }
  .detail-copy { padding: 0; margin-top: 22px; }
  .detail-copy h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.25px; }
  .detail-lead { margin-top: 2px; font-size: 16px; line-height: 26px; }
  .detail-body { margin-top: 21px; font-size: 14px; line-height: 22px; }
  .detail-panel { display: block; height: auto; margin-top: 31px; }
  .detail-list { height: 190px; padding: 20px; }
  .detail-icon { width: 32px; height: 32px; margin-top: 4px; }
  .detail-list ul { margin-left: 36px; }
  .detail-panel img { height: 208px; }

  /* Different */
  .ap-diff { padding: 32px 0; }
  .diff-grid { gap: 16px; margin-top: 31px; }
  .diff-card { min-height: 242px; padding: 20px 16px; }
  .diff-icon { width: 40px; height: 40px; }
  .diff-card h3 { margin-top: 17px; font-size: 18px; line-height: 24px; }
  .diff-card p { margin-top: 8px; font-size: 14px; line-height: 22px; }

  /* Goal */
  .ap-goal { padding-bottom: 32px; background: linear-gradient(180deg, rgba(244, 248, 251, 0) 0%, rgba(244, 248, 251, .7) 40%, rgba(244, 248, 251, .95) 56%, #F4F8FB 70%); }
  .ap-goal-inner { display: block; padding-right: 0; }
  .ap-goal-media { height: auto; aspect-ratio: 390 / 452; border-radius: 0; }
  .ap-goal-copy { padding: 32px var(--gutter) 0; }
  .ap-goal-copy h2 { margin-top: 11px; line-height: 38px; }
  .ap-goal-copy p { margin-top: 10px; }
  .ap-goal-copy .btn { width: 100%; margin-top: 31px; }

  /* FAQ */
  .ap-faq { padding: 32px 0 48px; }
  .ap-faq-inner { display: flex; flex-direction: column; }
  .faq-list { order: 2; gap: 16px; margin-top: 31px; }
  .ap-faq-more { order: 3; margin-top: 46px; }
  .faq summary { min-height: 56px; padding: 12px 19px 12px 16px; gap: 4px; font-size: 18px; line-height: 24px; letter-spacing: 0; }
  .faq-plus { width: 18px; height: 18px; stroke-width: 2.6; }
  .faq p { padding: 0 16px 18px; font-size: 14px; line-height: 22px; }
}