#approach { position: relative; isolation: isolate; background: var(--paper); }
#approach .approach-background { position: absolute; inset: 0px; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0.78; }
#approach .approach-background img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#approach .section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: end; margin-bottom: 0px; }
#approach .section-heading > p { max-width: none; margin: 0px; }
#approach .steps-stair { --rise: clamp(42px,6vh,60px); display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 30px; margin-top: 64px; align-items: start; }
#approach .step { position: relative; min-width: 0px; }
#approach .step:nth-child(1) { margin-top: calc(3 * var(--rise)); }
#approach .step:nth-child(2) { margin-top: calc(2 * var(--rise)); }
#approach .step:nth-child(3) { margin-top: var(--rise); }
#approach .step:nth-child(4) { margin-top: 0px; }
#approach .step-number { color: rgb(128, 98, 55); }
#approach .step-line { height: 1px; background: var(--gold); margin: 18px 0px 26px; position: relative; }
#approach .step-line::before { content: ""; position: absolute; left: 0px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
#approach .step-line::after { content: ""; position: absolute; left: 0px; right: -15px; top: 0px; height: 1px; background: var(--gold); transform: none; transition: none; }
#approach .step:last-child .step-line::after { right: 0px; }
#approach .step-riser { position: absolute; left: calc(100% + 15px); top: calc(-1 * var(--rise)); width: 15px; height: var(--rise); border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
#approach .step h3 { margin: 0px 0px 16px; }
#approach .step p { max-width: none; margin-top: 16px; text-wrap: pretty; }
@media (min-width: 761px) and (max-height: 800px) {
#approach .steps-stair { --rise: 42px; margin-top: 46px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
#approach .section-heading { display: block; }
#approach .section-heading > p { margin-top: 22px; }
#approach .steps-stair { --rise: 44px; gap: 24px; }
#approach .step-line::after { right: -12px; }
#approach .step-riser { left: calc(100% + 12px); width: 12px; }
}
@media (max-width: 760px) {
#approach .approach-background { opacity: 0.45; }
#approach .approach-background img { object-position: center center; }
#approach .section-heading { display: block; }
#approach .section-heading > p { margin-top: 24px; max-width: none; }
#approach .steps-stair { display: block; margin-top: 44px; padding-left: 22px; margin-left: 3px; border-left: 1px solid rgba(179, 135, 62, 0.396); }
#approach .step:nth-child(n) { display: grid; grid-template-columns: 24px 60px 1fr; gap: 12px; margin: 0px; padding: 0px 0px 23px; align-items: center; }
#approach .step + .step { border-top: 1px solid var(--line); padding-top: 23px; }
#approach .step:last-child { padding-bottom: 0px; }
#approach .step-number { grid-area: 1 / 1; }
#approach .step h3 { grid-area: 1 / 2; margin: 0px; }
#approach .step .eyebrow { grid-area: 1 / 3; letter-spacing: 0.02em; }
#approach .step p { grid-area: 2 / 1 / auto / -1; margin: 0px; }
#approach .step-line { position: absolute; left: -25px; top: 10px; width: 5px; height: 5px; border-radius: 50%; margin: 0px; }
#approach .step + .step .step-line { top: 33px; }
#approach .step-line::before, #approach .step-line::after, #approach .step-riser { display: none; }
}
@media print {
#approach { print-color-adjust: exact; }
}
#approach .step h3 { position: relative; width: fit-content; max-width: 100%; }
#approach .step h3::after { content: ""; position: absolute; left: 0px; right: 0px; height: 1px; mask-image: linear-gradient(90deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 48%, transparent 100%); background-image: linear-gradient(90deg,#fff3d400 0,#fff3d4e6 50%,#fff3d400 100%),linear-gradient(var(--gold),var(--gold)); background-size: 34% 100%, 100% 100%; background-position: -60% 0px, 0px 0px; background-repeat: no-repeat; transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease); bottom: -9px; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
#approach .step h3, #approach .step .eyebrow, #approach .step p { transition: transform .55s var(--ease),color .45s var(--ease); }
#approach .step-number { transition: color .45s var(--ease); }
#approach .step-line::before { transition: transform .55s var(--ease),box-shadow .55s var(--ease); }
#approach .step:hover h3, #approach .step:hover .eyebrow, #approach .step:hover p { transform: translateY(-4px); }
#approach .step:hover h3::after { transform: scaleX(1); animation: 3.6s cubic-bezier(0.2, 0.05, 0.7, 1) 0.12s 1 normal both running gold-sheen; }
#approach .step:hover p { color: var(--ink); }
#approach .step:hover .step-line::before { transform: scale(1.7); box-shadow: rgba(179, 135, 62, 0.17) 0px 0px 0px 6px; }
}
@keyframes gold-sheen { 
  0% { background-position: -40% 0px, 0px 0px; }
  100% { background-position: 160% 0px, 0px 0px; }
}