/* Four scroll-driven acts share a full stage; short screens stay in normal flow. */
#experience{--experience-header:66px;--experience-teal:#74decb;position:relative;scroll-margin-top:66px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 70% 42%,rgba(10,121,125,.07),transparent 65%),var(--ink)}
#experience .experience-stage{max-width:1440px;margin:auto;padding:40px 40px}
#experience .experience-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
#experience .experience-topline .eyebrow{margin-bottom:8px;color:var(--experience-teal);font-size:.64rem;letter-spacing:.2em}
#experience .experience-topline h2{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:500;letter-spacing:-.025em;line-height:1.25}
#experience .experience-skip{font-size:.78rem;color:var(--muted);white-space:nowrap;padding:10px 0;transition:color .2s}
#experience .experience-skip:hover{color:var(--experience-teal)}
#experience .experience-skip span{color:var(--experience-teal);margin-left:7px}
#experience .experience-scenes{position:relative;min-height:0}
#experience .pin-outer.home-story{height:auto!important;scroll-margin-top:100px}
#experience .pin-outer.home-story .pin{position:relative;top:auto;height:auto;min-height:0;padding:35px 0;display:flex;align-items:center;overflow:visible}
#experience .pin-inner{padding:0;max-width:none;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);gap:48px;align-items:center}
#experience .pin-copy .kicker{color:var(--experience-teal);font-size:.66rem;letter-spacing:.15em;margin-bottom:20px}
#experience .pin-copy h3{font-size:clamp(2.1rem,4.1vw,3.7rem);font-weight:500;letter-spacing:-.045em;line-height:1.08;margin-bottom:20px;max-width:14ch}
#experience .pin-copy p{font-size:1rem;line-height:1.75;color:var(--muted);max-width:37ch}
#experience .pin-copy .experience-detail{display:inline-flex;gap:10px;align-items:center;font-size:.83rem;color:var(--experience-teal);margin-top:22px}
#experience .experience-detail:hover{text-decoration:underline;text-underline-offset:4px}
#experience .pin-viz{height:clamp(320px,64svh,660px);min-width:0;margin-top:0;border-radius:22px;border-color:rgba(107,203,194,.27);background:radial-gradient(ellipse at 60% 35%,rgba(65,205,190,.09),transparent 75%),linear-gradient(145deg,#091824,#070d1a);box-shadow:inset 0 1px 0 rgba(184,245,225,.06),inset 0 0 60px rgba(2,7,14,.22),0 32px 90px -48px rgba(39,205,190,.25)}
#experience .tokwrap{padding:28px;gap:18px}
#experience .tok-prompt{border-left-color:rgba(116,222,203,.5);font-size:.76rem}
#experience .tok-prompt b{color:#b8eee5}
#experience .tok-out{font-size:clamp(1.05rem,1.6vw,1.4rem);min-height:4.5em}
#experience .tok-out .w.live{color:var(--experience-teal);text-shadow:0 0 18px rgba(65,205,190,.25)}
#experience .tok-pred .fill{display:block;background:linear-gradient(90deg,rgba(95,208,255,.5),rgba(65,205,190,.7))}
#experience .tok-pred .row.win .cand{color:var(--experience-teal)}
#experience .tok-pred .row.win .pct{color:#b8eee5}
#experience .tok-pred .row.win .fill{background:linear-gradient(90deg,#42b6d8,#74decb);box-shadow:0 0 12px rgba(65,205,190,.25)}
#experience .sample-note{font-family:'JetBrains Mono',monospace;font-size:.59rem;letter-spacing:.035em;color:#9eb3c6;line-height:1.5}
#experience .tokwrap .sample-note{margin-top:0}
#experience .dash{padding:24px;gap:13px}
#experience .dash>.sample-note{color:var(--experience-teal);text-transform:uppercase;letter-spacing:.11em}
#experience .kpi{padding:11px 10px}
#experience .kpi .v{color:var(--experience-teal);text-shadow:0 0 18px rgba(65,205,190,.2);font-size:clamp(1rem,2vw,1.4rem)}
#experience .kpi .v.ice{color:#70d4ed;text-shadow:0 0 18px rgba(95,208,255,.2)}
#experience .experience-navigation{display:none}
#experience .experience-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
#experience .experience-chapters li{min-width:0}
#experience .experience-chapters a{display:flex;gap:10px;align-items:center;color:#8ba3b9;font-size:.75rem;line-height:1.4;transition:color .2s;padding:4px 0}
#experience .experience-chapters a>span{font-family:'JetBrains Mono',monospace;font-size:.61rem;color:#7894a8}
#experience .experience-chapters a:hover,#experience .experience-chapters .is-current,#experience .experience-chapters .is-current>span{color:var(--experience-teal)}
#experience .experience-progress-row{display:flex;align-items:center;gap:20px;margin-top:15px}
#experience .experience-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:2px;border:0;background:rgba(99,151,174,.18);border-radius:5px;overflow:hidden}
#experience .experience-progress::-webkit-progress-bar{background:rgba(99,151,174,.18)}
#experience .experience-progress::-webkit-progress-value{background:linear-gradient(90deg,#33adbd,#8ee4cc)}
#experience .experience-progress::-moz-progress-bar{background:linear-gradient(90deg,#33adbd,#8ee4cc)}
#experience .experience-count{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:#8daebd;white-space:nowrap}
#experience a:focus-visible{outline:2px solid var(--experience-teal);outline-offset:6px;border-radius:2px}
@media(min-width:761px) and (max-width:1000px){
  #experience .experience-stage{padding-right:28px;padding-left:28px}
  #experience .pin-inner{gap:28px;grid-template-columns:minmax(0,.72fr) minmax(0,1.2fr)}
  #experience .pin-copy h3{font-size:2.35rem}
  #experience .pin-copy p{font-size:.9rem}
  #experience .tokwrap{padding:24px}
  #experience .tok-pred .cand{width:73px}
  #experience .experience-chapters{gap:12px}
  #experience .experience-chapters a{font-size:.67rem;gap:7px}
}
/* A readable stacked fallback for phones, short windows and no JavaScript. */
@media(max-width:760px){
  #experience .experience-stage{padding:36px 24px 16px}
  #experience .experience-topline{align-items:flex-start;gap:15px;margin-bottom:7px}
  #experience .experience-topline h2{font-size:1.25rem}
  #experience .experience-topline .eyebrow{font-size:.58rem;letter-spacing:.12em}
  #experience .experience-skip{font-size:.68rem;padding-top:3px}
  #experience .pin-outer.home-story .pin{display:block;padding:30px 0}
  #experience .experience-scene+.experience-scene{border-top:1px solid var(--line)}
  #experience .pin-inner{grid-template-columns:1fr;gap:23px}
  #experience .pin-copy .kicker{margin-bottom:13px}
  #experience .pin-copy h3{font-size:clamp(1.9rem,7vw,2.6rem);max-width:18ch;margin-bottom:14px}
  #experience .pin-copy p{font-size:.94rem;line-height:1.65;max-width:45ch}
  #experience .pin-copy .experience-detail{margin-top:14px}
  #experience .pin-viz{height:340px;height:clamp(300px,51svh,390px);margin:0}
  #experience .tokwrap{padding:23px;gap:15px}
  #experience .tok-out{font-size:1.15rem;min-height:4.5em}
  #experience .tok-prompt{font-size:.69rem}
  #experience .tok-pred{padding-top:15px}
  #experience .tok-pred .row{gap:9px;font-size:.66rem}
  #experience .tok-pred .cand{width:73px}
  #experience .tok-pred .pct{width:35px}
  #experience .dash{padding:16px;gap:12px}
  #experience .kpis{gap:7px}
  #experience .kpi{padding:9px 7px}
  #experience .kpi .l{font-size:.5rem;letter-spacing:.04em}
  #experience .kpi .v{font-size:clamp(.93rem,4vw,1.2rem)}
}
#experience .experience-scene{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* These conditions mirror home-story.js. All scene movement follows scroll. */
@media(min-width:761px) and (min-height:541px) and (prefers-reduced-motion:no-preference),
      (max-width:760px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  #experience.experience-ready{height:520vh;height:520svh}
  #experience.experience-ready .experience-stage{position:sticky;top:var(--experience-header);height:calc(100vh - var(--experience-header));height:calc(100svh - var(--experience-header));display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:22px;padding-bottom:22px}
  #experience.experience-ready .experience-topline{margin-bottom:20px}
  #experience.experience-ready .experience-scenes{perspective:1400px}
  #experience.experience-ready .experience-scene{position:absolute;inset:0;border:0;opacity:var(--scene-opacity,0);visibility:hidden;pointer-events:none;transform:translate3d(0,var(--scene-shift,0px),0) scale(var(--scene-scale,1));transform-origin:50% 55%;transition:none;will-change:opacity,transform}
  #experience.experience-ready .experience-scene.is-visible{visibility:visible}
  #experience.experience-ready .experience-scene.is-active{pointer-events:auto}
  #experience.experience-ready .pin-outer.home-story .pin{height:100%;padding:0}
  #experience.experience-ready .pin-inner{height:100%;min-height:0}
  #experience.experience-ready .pin-viz{height:100%;min-height:0;max-height:690px;align-self:center}
  #experience.experience-ready .experience-navigation{display:block;padding-top:21px}
}
/* Keep short desktop windows immersive without crowding the copy. */
@media(min-width:761px) and (min-height:541px) and (max-height:680px) and (prefers-reduced-motion:no-preference){
  #experience.experience-ready .experience-stage{padding-top:14px;padding-bottom:14px}
  #experience .experience-topline .eyebrow{font-size:.57rem;margin-bottom:4px}
  #experience .experience-topline h2{font-size:1.2rem}
  #experience.experience-ready .experience-topline{margin-bottom:12px}
  #experience .pin-copy .kicker{margin-bottom:12px}
  #experience .pin-copy h3{font-size:2.15rem;margin-bottom:13px}
  #experience .pin-copy p{font-size:.87rem;line-height:1.6}
  #experience .pin-copy .experience-detail{margin-top:12px;font-size:.76rem}
  #experience .tokwrap{padding:18px;gap:10px}
  #experience .tok-out{min-height:3em;font-size:1.05rem}
  #experience .tok-pred{padding-top:12px;gap:4px}
  #experience .dash{padding:16px;gap:10px}
  #experience .kpi{padding:7px 9px}
  #experience.experience-ready .experience-navigation{padding-top:12px}
  #experience .experience-progress-row{margin-top:9px}
}
/* Tall phones get the same scroll sequence, above the fixed contact action. */
@media(max-width:760px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  #experience.experience-ready .experience-stage{height:calc(100vh - var(--experience-header) - 76px);height:calc(100svh - var(--experience-header) - 76px);padding:12px 18px}
  #experience.experience-ready .experience-topline{align-items:center;gap:12px;margin-bottom:12px}
  #experience .experience-topline .eyebrow{font-size:.5rem;letter-spacing:.1em;margin-bottom:3px;line-height:1.4}
  #experience .experience-topline h2{font-size:1rem;line-height:1.25}
  #experience .experience-skip{font-size:.61rem;padding:8px 0}
  #experience .experience-skip span{margin-left:3px}
  #experience.experience-ready .pin-outer.home-story .pin{display:block}
  #experience.experience-ready .pin-inner{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;align-items:stretch}
  #experience .pin-copy .kicker{font-size:.56rem;line-height:1.4;letter-spacing:.12em;margin-bottom:8px}
  #experience .pin-copy h3{font-size:clamp(1.5rem,5vw,1.9rem);line-height:1.06;letter-spacing:-.04em;max-width:none;margin-bottom:10px}
  #experience .pin-copy p{font-size:.81rem;line-height:1.5;max-width:52ch}
  #experience .pin-copy .experience-detail{font-size:.68rem;line-height:1.5;margin-top:9px}
  #experience.experience-ready .pin-viz{height:100%;max-height:none;min-height:0;border-radius:15px}
  #experience .tokwrap{padding:15px 16px;gap:9px}
  #experience .tok-prompt{font-size:.59rem;padding-left:9px}
  #experience .tok-out{font-size:clamp(.87rem,3.7vw,1rem);line-height:1.4;min-height:2.8em}
  #experience .tok-pred{padding-top:9px;margin-top:1px;gap:4px}
  #experience .tok-pred .row{font-size:.59rem;gap:8px;line-height:1.5}
  #experience .tok-pred .cand{width:65px}
  #experience .tok-pred .pct{width:31px}
  #experience .sample-note{font-size:.5rem;line-height:1.4;letter-spacing:0}
  #experience .dash{padding:12px;gap:10px}
  #experience .dash>.sample-note{font-size:.49rem;letter-spacing:.05em}
  #experience .kpis{gap:6px}
  #experience .kpi{padding:7px}
  #experience .kpi .l{font-size:.46rem;line-height:1.4;letter-spacing:.025em}
  #experience .kpi .v{font-size:1rem;line-height:1.25}
  #experience.experience-ready .experience-navigation{padding-top:8px}
  #experience .experience-chapters{gap:8px}
  #experience .experience-chapters a{display:grid;grid-template-rows:auto 1fr;align-items:start;gap:3px;min-height:42px;padding:3px 0;font-size:.58rem;line-height:1.3}
  #experience .experience-chapters a>span{font-size:.5rem;line-height:1.3}
  #experience .experience-progress-row{gap:12px;margin-top:5px}
  #experience .experience-count{font-size:.54rem;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){
  #experience,#experience.experience-ready{height:auto}
  #experience .experience-stage{position:relative;top:auto;height:auto;display:block}
  #experience .experience-scene{position:relative;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  #experience .experience-scene+.experience-scene{border-top:1px solid var(--line)}
  #experience .experience-navigation{display:none}
  #experience *,#experience *::before,#experience *::after{transition:none!important;animation:none!important}
}