/* Ignition: a six-stage track with a focused conversation card. */
#approach{border-block:1px solid var(--line)}
#approach .eyebrow{font-size:clamp(19px,2.1vw,28px);letter-spacing:2px;font-weight:800;color:var(--ink)}
#approach .section-top{display:block;margin-bottom:42px}
#approach h2{font-size:clamp(25px,3.35vw,46px);letter-spacing:-1.6px;white-space:nowrap;line-height:1.2;margin-top:16px}
#approach .section-top>p{max-width:760px;margin-top:24px;font-size:17px}
#approach .model{display:block;margin-top:0}
#approach [role=tablist]{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative}
#approach .model button{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:21px 17px;border:1px solid var(--line);border-radius:10px;font-size:15px;transition:background .2s,border-color .2s,transform .2s}
#approach .model button span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#d8f1ff;color:var(--blue);font:700 22px Arial,sans-serif}
#approach .model button b{display:none}
#approach .model button[aria-selected=true]{background:var(--ink);color:white;border-color:var(--ink);box-shadow:0 8px 24px #0d156812}
#approach .model button[aria-selected=true] span{background:#3ca8ff;color:var(--ink)}
#approach .model button:hover{transform:translateY(-3px);border-color:var(--blue)}
#approach .stage{position:relative;isolation:isolate;overflow:hidden;margin-top:24px;padding:44px 48px;border:1px solid var(--line);border-radius:14px;min-height:350px;background:linear-gradient(120deg,#e1f5ff,var(--paper) 75%)}
#approach .stage:after{content:'';position:absolute;z-index:-1;right:35px;top:25px;width:240px;height:300px;opacity:.055;background:url('assets/flame.png') center/contain no-repeat;pointer-events:none}
#approach .stage .number{color:var(--blue);font-size:12px}
#approach .stage h3{max-width:850px;font-size:clamp(28px,3vw,40px);margin:20px 0 18px}
#approach .stage>p{max-width:750px;margin:0;font-size:17px}
#approach .prompt{max-width:900px;margin-top:28px;padding-top:22px}
#approach .prompt p{font-family:Arial,sans-serif;font-size:19px;max-width:760px;margin:10px 0 0}
@media(max-width:760px){#approach h2{white-space:normal;font-size:clamp(29px,5vw,38px);letter-spacing:-1px}#approach [role=tablist]{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#approach .model button{padding:15px 12px;gap:8px;font-size:14px}#approach .stage{padding:28px 24px}#approach .stage:after{right:-50px;width:200px}#approach .section-top>p{font-size:16px}}
@media(prefers-reduced-motion:reduce){#approach .model button:hover{transform:none}}

/* A campfire built one stage at a time. */
#approach .model button .fire-tab-icon{width:62px;height:58px;background:transparent;border-radius:0;display:block}
.fire-tab-icon svg{width:100%;height:100%;overflow:visible}
#approach .model button[aria-selected=true] .fire-tab-icon{background:transparent}
#approach .model button[aria-selected=true]{background:#d9f2ff;color:var(--ink);border-color:var(--blue)}
#approach .stage{padding-right:340px;min-height:400px}
#approach .stage:after{display:none}
.fire-scene{position:absolute;right:36px;top:50%;width:250px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.fire-scene>svg{width:250px;height:250px;overflow:visible;filter:drop-shadow(0 14px 16px #0879c915)}
.fire-caption{display:block;text-align:center;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1.8px;margin-top:10px}
.fire-scene .brand-fire,.fire-scene .fire-small-flame{transform-origin:100px 140px;animation:fire-breathe 2.4s ease-in-out infinite alternate}
.fire-scene .fire-smoke{animation:smoke-rise 3s ease-in-out infinite}
@keyframes fire-breathe{to{transform:scale(1.035,1.06)}}
@keyframes smoke-rise{0%,100%{opacity:.55;transform:translateY(3px)}50%{opacity:1;transform:translateY(-5px)}}
@media(max-width:1000px){#approach .stage{padding-right:260px}.fire-scene{right:20px;width:200px}.fire-scene>svg{width:200px;height:200px}}
@media(max-width:760px){#approach .stage{padding:28px 24px}.fire-scene{position:relative;right:auto;top:auto;transform:none;width:100%;margin:-4px 0 24px}.fire-scene>svg{width:190px;height:170px}.fire-caption{margin-top:0}#approach .model button .fire-tab-icon{width:54px;height:48px}}
@media(prefers-reduced-motion:reduce){.fire-scene .brand-fire,.fire-scene .fire-small-flame,.fire-scene .fire-smoke{animation:none}}

/* Keep ASPARK visible alongside each stage illustration. */
#approach .model button{display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:center;gap:10px 4px}
#approach .model button .stage-letter{display:block;width:auto;height:auto;background:transparent;border-radius:0;color:var(--blue);font:800 34px Arial,sans-serif;text-align:left}
#approach .model button .fire-tab-icon{grid-column:2;justify-self:end}
#approach .model button .stage-label{grid-column:1 / -1;display:block;width:auto;height:auto;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:center}
#approach .model button[aria-selected=true] .stage-letter,#approach .model button[aria-selected=true] .stage-label{background:transparent}
@media(max-width:760px){#approach .model button{grid-template-columns:minmax(0,1fr) 54px}#approach .model button .stage-letter{font-size:30px}}

/* Full stage names above centered campfire icons. */
#approach .model button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:18px 10px}
#approach .model button .stage-word{display:block;width:auto;height:auto;border-radius:0;background:transparent;color:var(--ink);font:500 16px Arial,sans-serif;text-align:center;white-space:nowrap;line-height:1.2}
#approach .model button .stage-word strong{font-size:34px;font-weight:800;color:var(--blue);vertical-align:baseline}
#approach .model button[aria-selected=true] .stage-word{background:transparent}
#approach .model button .fire-tab-icon{align-self:center;width:74px;height:66px}
@media(max-width:760px){#approach .model button .stage-word{font-size:14px}#approach .model button .stage-word strong{font-size:30px}#approach .model button .fire-tab-icon{width:64px;height:58px}}

/* Illustrated campfire scenes with a shared palette and individual motion. */
#approach .model button{padding:20px 8px;justify-content:center;min-height:82px}
#approach .stage{padding-right:410px;min-height:410px}
.fire-scene{right:20px;width:340px}
.fire-scene>svg{width:340px;height:298px;filter:none}
.fire-caption{letter-spacing:2px;margin-top:0}
.camp-scene .scene-flame{transform-box:fill-box;transform-origin:50% 100%;animation:camp-flicker 1.8s ease-in-out infinite alternate}
.scene-glow{animation:camp-glow 3s ease-in-out infinite}
.scene-sharpen{animation:camp-sharpen 2s ease-in-out infinite}
.scene-sparks{animation:camp-sparks 2s ease-out infinite}
.scene-gather{animation:camp-gather 3.6s ease-in-out infinite}
.scene-match{animation:camp-match 3s ease-in-out infinite}
.scene-smoke{animation:camp-smoke 3s ease-out infinite}
.scene-wind{animation:camp-wind 3s ease-in-out infinite}
.scene-growing{transform-origin:160px 210px;animation:camp-grow 4s ease-in-out infinite}
.scene-fuel{animation:camp-fuel 4s ease-in-out infinite}
.scene-warmth{animation:camp-smoke 4s ease-in-out infinite}
@keyframes camp-flicker{0%{transform:scale(.97,1) skewX(-2deg)}100%{transform:scale(1.03,1.07) skewX(2deg)}}
@keyframes camp-glow{50%{opacity:.4}}
@keyframes camp-sharpen{0%,100%{transform:translate(-10px,5px)}50%{transform:translate(9px,-4px)}}
@keyframes camp-sparks{0%,35%,100%{opacity:0}45%{opacity:1}80%{opacity:0;transform:translate(7px,-12px)}}
@keyframes camp-gather{0%,15%{transform:translate(22px,-23px);opacity:0}35%{opacity:1}65%,100%{transform:translate(0,16px);opacity:1}}
@keyframes camp-match{0%,100%{transform:translate(12px,-6px) rotate(3deg)}40%,65%{transform:translate(-10px,8px)}}
@keyframes camp-smoke{0%{opacity:0;transform:translateY(8px)}45%{opacity:.7}100%{opacity:0;transform:translateY(-20px)}}
@keyframes camp-wind{0%,100%{opacity:0;transform:translateX(-10px)}35%,65%{opacity:1;transform:translateX(12px)}}
@keyframes camp-grow{0%,100%{transform:scale(.45);opacity:.4}55%,75%{transform:scale(.9);opacity:1}}
@keyframes camp-fuel{0%,15%{transform:translate(25px,-15px);opacity:0}35%{opacity:1}65%,100%{transform:translate(-53px,41px);opacity:1}}
@media(max-width:1100px){#approach .stage{padding-right:330px}.fire-scene{right:10px;width:290px}.fire-scene>svg{width:290px;height:260px}}
@media(max-width:760px){#approach .stage{padding:28px 24px}.fire-scene{position:relative;width:100%;right:auto;margin:0 0 28px}.fire-scene>svg{width:min(100%,320px);height:260px}#approach .model button{min-height:72px;padding:14px 6px}}
@media(prefers-reduced-motion:reduce){.camp-scene *{animation:none!important}.camp-scene .scene-sparks{opacity:.65}}

/* Bold block lettering, with the ASPARK initial in blue. */
#approach .model button .stage-word{font-family:'Arial Black','Arial',sans-serif;font-weight:900;font-size:21px;color:#111;letter-spacing:-.6px;line-height:1.25}
#approach .model button .stage-word strong{font-family:inherit;font-weight:900;font-size:30px;color:var(--blue)}
@media(max-width:1000px){#approach .model button .stage-word{font-size:18px}#approach .model button .stage-word strong{font-size:27px}}
@media(max-width:420px){#approach .model button .stage-word{font-size:15px}#approach .model button .stage-word strong{font-size:23px}}

/* Realistic campfire footage, without a frame or player chrome. */
#approach .stage{padding-right:49%;min-height:390px}
.fire-scene{width:43%;right:24px}
.framework-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:0;box-shadow:none;background:transparent}
.fire-caption{margin-top:16px}
@media(max-width:1000px){#approach .stage{padding-right:45%}.fire-scene{width:39%;right:20px}}
@media(max-width:760px){#approach .stage{padding:28px 24px}.fire-scene{width:100%;right:auto;margin-bottom:28px}.framework-video{max-width:100%}}

/* Soft elliptical video windows. */
.framework-video{border-radius:50%;overflow:hidden;clip-path:ellipse(50% 50% at 50% 50%)}