.case-page{background:#f4f2ed;color:#171719}
.case-page main{min-height:65vh}
.case-wrap{width:min(100% - 2 * var(--gutter),76rem);margin-inline:auto}
.case-intro{padding-block:clamp(3rem,8vw,7rem) clamp(2rem,5vw,4rem)}
.case-page h1,.case-page h2{font-family:var(--display);font-weight:400;line-height:1.02}
.case-page h1{font-size:clamp(3.1rem,7.5vw,7rem);max-width:14ch;margin:.32em 0 .22em}
.case-page h2{font-size:clamp(2rem,4vw,3.6rem);margin:0 0 .3em}
.case-intro>p:not(.case-kicker),.case-brief p,.case-demo>p{max-width:57ch;font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.55}
.case-kicker{color:#31575b;font-size:.84rem;font-weight:700}
.case-back{display:inline-block;color:#31575b;margin-bottom:1.35rem}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-bottom:clamp(3rem,8vw,7rem)}
.project-tile{display:grid;align-content:start;gap:.75rem;padding:1.15rem;border-radius:1rem;border:1px solid #15394328;color:inherit;text-decoration:none}
.project-tile h2{font-size:clamp(1.9rem,3.5vw,3rem);margin:0}
.project-tile p{margin:0;line-height:1.45}
.project-tile-featured{background:#fffaf0;transition:border-color .25s,box-shadow .25s}
.project-tile-featured:is(:hover,:focus-visible){border-color:#25737d;box-shadow:0 .6rem 2rem #15394321}
.project-tile-pending{place-content:center;min-height:15rem;border-style:dashed;color:#515a5b}
.project-art{display:flex;justify-content:center;align-items:center;gap:.45rem;min-height:9rem;border-radius:.7rem;background:radial-gradient(ellipse at 55% 90%,#32616a,#192f38 65%);overflow:hidden}
.project-art i{width:20%;height:4.25rem;border:1px solid #e4d7b6;border-radius:.4rem;background:#eee2c9;transform:rotate(-9deg)}
.project-art i:nth-child(2){height:5.4rem;background:#d7b875;transform:translateY(-.15rem)}
.project-art i:nth-child(3){transform:rotate(9deg)}
.project-link{color:#12515a;font-weight:700}
.case-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:clamp(2rem,5vw,4rem) 0 0;padding:1.2rem 0;border-block:1px solid #bdb6aa}
.case-results dt{font:400 clamp(2.25rem,6vw,4.8rem)/1 var(--display);color:#124d56}
.case-results dd{margin:.4rem 0 0;max-width:24ch;font-size:clamp(.86rem,1.5vw,1.08rem);line-height:1.45}
.case-brief{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;padding-block:1rem 3rem}
.case-demo{padding-block:2rem clamp(3rem,8vw,7rem)}
.case-demo-layout{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(0,2.25fr);gap:clamp(1.25rem,4vw,3.5rem);margin-top:2rem}
.case-timeline{--case-progress:0;position:relative;display:grid;grid-template-rows:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0}
.case-timeline::before,.case-timeline::after{content:"";position:absolute;left:21px;top:12.5%;bottom:12.5%;width:2px;background:#bacbca;pointer-events:none}
.case-timeline::after{background:#287987;transform:scaleY(var(--case-progress));transform-origin:top;transition:transform 320ms cubic-bezier(.25,.65,.25,1)}
.case-timeline li{display:grid}
.case-timeline button{position:relative;z-index:1;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:.55rem;width:100%;min-height:44px;padding:.6rem .45rem .6rem 0;border:0;border-radius:.5rem;background:transparent;color:#202628;text-align:left;font:inherit;cursor:pointer}
.case-node{justify-self:center;width:.7rem;height:.7rem;border:2px solid #55888c;border-radius:50%;background:#f4f2ed;transition:background .23s,box-shadow .23s,transform .23s}
.case-timeline button[aria-current] .case-node{background:#287987;box-shadow:0 0 0 4px #69aeb73d,0 0 .7rem #438a9b8a;transform:scale(1.15)}
.case-step-copy{display:grid;gap:.25rem}
.case-step-copy strong,.case-mobile-step strong{font-weight:700}
.case-step-copy>span,.case-mobile-step>span{font-size:.86rem;line-height:1.42;color:#495454}
.case-switches{display:grid;gap:.5rem;margin:1.1rem 0 0;padding:.75rem .95rem;border:1px solid #bfbab0;border-radius:.7rem}
.case-switches legend{font-size:.85rem;font-weight:700}
.case-switches label{display:flex;align-items:center;gap:.6rem;min-height:32px;font-size:.88rem}
.case-switches input{width:1.05rem;height:1.05rem;accent-color:#124d56}
.case-mobile-step{display:none}
.case-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.ticket-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;align-items:stretch;padding:.65rem;background:#1e2f36;border-radius:1rem}
.ticket-card{min-width:0;display:flex;flex-direction:column;border-radius:.65rem;background:#fcf8f0;color:#1c292b;overflow:hidden}
.ticket-art{position:relative;aspect-ratio:1.75;overflow:hidden}
.ticket-art svg{display:block;width:100%;height:100%}
.ticket-crowd{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.has-imagery .ticket-crowd{opacity:1;transform:translateY(0)}
.ticket-copy{display:flex;flex:1;flex-direction:column;gap:.55rem;padding:.75rem}
.ticket-copy h3{margin:0;font:400 clamp(1.38rem,2.25vw,2rem)/1 var(--display)}
.ticket-copy p,.ticket-copy ul{margin:0;font-size:.79rem;line-height:1.4}
.ticket-copy ul{padding-left:1rem}
.ticket-action{display:block;padding:.4rem .35rem;border:1px solid #52696d;border-radius:.35rem;text-align:center;font-size:.74rem;font-weight:700}
.ticket-reframed{display:none}
.has-framing .ticket-premium{background:#f0d79e}
.has-framing .ticket-legacy{display:none}
.has-framing .ticket-reframed{display:block}
.has-framing .ticket-premium .ticket-action{order:1;margin-top:auto;background:#203a41;color:#fff;border-color:#203a41}
.ticket-play{display:none;position:absolute;right:.25rem;bottom:.25rem;width:44px;height:44px;place-items:center;border:1px solid #ffffff80;border-radius:50%;background:#102329e0;color:#fff;font-size:.85rem;cursor:pointer}
.has-imagery .ticket-play{display:grid}
.ticket-fan{transform-origin:69px 94px}
.has-imagery .ticket-premium.is-playing .ticket-fan{animation:ticket-celebrate 1.25s ease-in-out infinite alternate}
.has-imagery .ticket-premium.is-playing .ticket-light{animation:ticket-light 1.6s ease-in-out infinite alternate}
@media(hover:hover){
  .has-imagery .ticket-premium:hover .ticket-fan{animation:ticket-celebrate 1.25s ease-in-out infinite alternate}
  .has-imagery .ticket-premium:hover .ticket-light{animation:ticket-light 1.6s ease-in-out infinite alternate}
}
@keyframes ticket-celebrate{0%{transform:translateY(1px) rotate(-5deg)}100%{transform:translateY(-5px) rotate(6deg)}}
@keyframes ticket-light{to{opacity:.56}}
.case-demo-note{margin:.6rem 0 0;color:#495454;font-size:.82rem}
.case-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:2rem var(--gutter);background:#171719;color:#f4f2ed}
.case-page :is(a,button,input,[tabindex]):focus-visible{outline:2px solid #18717e;outline-offset:3px}
@media(max-width:700px){
  .project-grid,.case-brief,.case-demo-layout{grid-template-columns:1fr}
  .project-tile-pending{min-height:7rem}
  .case-results{gap:.5rem}
  .case-timeline{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
  .case-timeline::before,.case-timeline::after{left:12.5%;right:12.5%;top:21px;bottom:auto;width:auto;height:2px}
  .case-timeline::after{transform:scaleX(var(--case-progress));transform-origin:left}
  .case-timeline button{display:grid;grid-template-columns:1fr;padding:0;place-items:center}
  .case-step-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .case-mobile-step{display:grid;gap:.35rem;min-height:5rem;margin:.35rem 0 0}
  .ticket-comparison{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(70%,1fr);overflow:auto;scroll-snap-type:x mandatory}
  .ticket-card{scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){
  .case-timeline::after,.case-node,.ticket-crowd{transition:none}
  .has-imagery .ticket-premium:is(:hover,.is-playing) :is(.ticket-fan,.ticket-light){animation:none}
  .has-imagery .ticket-play{display:none}
}

.detail-section.example .wrap:has(.scroll-story){display:block}
.example .wrap:has(.scroll-story)>div:first-child p{max-width:62ch}
.scroll-story{position:relative;margin-top:1.65rem}
.scroll-story-stage{position:sticky;top:calc(var(--nav-height,4.5rem) + .75rem);margin:0;align-items:start;z-index:1;overflow-anchor:none}
.scroll-story-distance{box-sizing:content-box;height:calc(var(--story-steps) * clamp(13rem,48svh,27rem));padding-bottom:clamp(5rem,22svh,12rem);pointer-events:none}
.scroll-story .case-timeline::after{transition:transform 100ms linear}
.scroll-story-stage .demo-tool{min-height:19rem}
.scroll-story-stage .demo-caption{margin-bottom:0}
.scroll-story + .case-switches{max-width:28rem}
.case-timeline button:focus-visible{outline:2px solid #18717e;outline-offset:-2px}
@media(max-width:700px){
  .scroll-story-stage{gap:.65rem;top:calc(var(--nav-height,4.5rem) + .4rem)}
  .scroll-story-stage .demo-tool{min-height:16rem}
  .scroll-story-stage .case-mobile-step{min-height:4.6rem}
  .scroll-story-stage .case-timeline{grid-template-columns:repeat(calc(var(--story-steps) + 1),minmax(0,1fr))}
  .scroll-story-stage .case-timeline::before,.scroll-story-stage .case-timeline::after{inset-inline:calc(50% / (var(--story-steps) + 1))}
  .scroll-story-stage .ticket-comparison{grid-auto-columns:minmax(72%,1fr)}
}
@media(prefers-reduced-motion:reduce){.scroll-story .case-timeline::after{transition:none}}