/* How we work: flat colour, senior direction and a route that responds. */
.work-page{background:var(--ink);color:#fff}
.work-hero{padding:clamp(5rem,9vw,10rem) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end}
.work-hero h1{font:800 clamp(4rem,9vw,10rem)/.98 var(--display);letter-spacing:-.065em}
.work-hero h1 span{color:var(--pink)}
.work-hero h2{font:800 clamp(1.7rem,3vw,3rem)/1.12 var(--display);letter-spacing:-.045em;margin-bottom:1.5rem}
.senior-word{display:inline-block;white-space:nowrap}
.senior-letter{display:inline-block;transform-origin:50% 75%}
.work-hero p{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;max-width:32rem;color:#dedee3}
.work-routes{background:#fff;color:var(--ink);padding:clamp(3rem,6vw,6rem) var(--pad)}
#rogue-work-flow{max-width:1100px;margin:0 auto;--flow-colour:#2442c6}
.flow-heading{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:3rem}
.flow-heading h2{font:800 clamp(2rem,4.6vw,4.5rem)/1.08 var(--display);letter-spacing:-.05em}
.route-label{display:flex;gap:.8rem;align-items:center;font-size:.875rem;margin-bottom:1rem}
.route-label>span:first-child{font-weight:800;color:var(--flow-colour)}
.route-pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem}
.route-or{position:absolute;top:41px;left:50%;transform:translate(-50%,-50%);font:700 1rem/1 var(--display);color:#484850}
.route-option{min-width:0}
.flow-choice{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:.75rem;width:100%;min-height:82px;background:#fff;border:1px solid #929299;padding:1.2rem 1.4rem;font:800 clamp(1rem,2.15vw,1.7rem)/1.2 var(--display);letter-spacing:-.025em;transition:background .2s,color .2s,transform .25s,border-color .2s}
.flow-choice:disabled{cursor:default}
.flow-choice:enabled:hover{transform:translateY(-3px);border-color:var(--flow-colour)}
.flow-choice[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.flow-choice>span:last-child{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:14px;letter-spacing:0}
.flow-choice>span:last-child:after{content:"+"}
.flow-choice[aria-pressed="true"]>span:last-child{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.flow-choice[aria-pressed="true"]>span:last-child:after{content:"✓"}
.flow-choice:focus-visible,.concept-button:focus-visible{outline:3px solid var(--flow-colour);outline-offset:5px}
.route-caption{font-size:1rem;line-height:1.6;margin-top:1rem;max-width:29rem;color:#484850}
.route-wires{height:84px;position:relative}
.route-wires svg{display:block;width:100%;height:100%;overflow:visible}
.route-wire{fill:none;stroke:#c8c8ce;stroke-width:1.5;transition:stroke .2s}
.route-wire.is-active{stroke:var(--flow-colour);stroke-width:2}
.pulse-core,.hub-core{fill:var(--flow-colour)}
.pulse-ring,.hub-ring{fill:none;stroke:var(--flow-colour);stroke-width:1.5}
.route-pulse{pointer-events:none}
.route-centre{text-align:center;padding:0 0 .5rem}
.route-hub{display:block;margin:0 auto .5rem}
.route-centre>p{font-size:clamp(.875rem,1.5vw,1.125rem);font-weight:600;margin-bottom:.5rem}
.route-centre h3{max-width:42rem;margin:1.2rem auto 0}
.concept-button{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;width:100%;padding:clamp(1.5rem,3vw,2.5rem);border:0;background:var(--ink);color:#fff;text-align:left;transition:background .3s,color .3s}
.concept-title{font:800 clamp(2.1rem,5vw,4rem)/1.03 var(--display);letter-spacing:-.05em}
.concept-title>span{display:block;color:var(--pink);transition:color .3s,transform .3s}
.concept-arrow{display:grid;place-items:center;flex:none;width:clamp(3rem,6vw,5rem);height:clamp(3rem,6vw,5rem);border-radius:50%;background:var(--lime);color:var(--ink);font:500 clamp(2rem,4vw,3rem)/1 var(--display);transition:transform .3s,background .3s,color .3s}
.concept-button:enabled:hover,.concept-button:focus-visible,.is-concept-active .concept-button{background:var(--pink);color:var(--ink)}
.concept-button:enabled:hover .concept-title>span,.concept-button:focus-visible .concept-title>span,.is-concept-active .concept-title>span{color:var(--ink);transform:translateX(.12em)}
.concept-button:enabled:hover .concept-arrow,.concept-button:focus-visible .concept-arrow,.is-concept-active .concept-arrow{transform:translateY(.2rem);background:var(--ink);color:var(--lime)}
.concept-button:disabled{cursor:default}
.route-centre>.concept-cue{font-size:.875rem;font-weight:500;line-height:1.4;margin:.85rem 0 0;color:#484850}
.route-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.flow-help{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid #d8d8dc;font-size:.875rem;color:#484850}
.work-model{background:var(--blue);color:#fff;padding:clamp(3rem,7vw,7rem) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.work-model h2{font:800 clamp(2.5rem,5vw,5rem)/1.06 var(--display);letter-spacing:-.055em}
.work-model h2 span{color:var(--lime)}
.work-model-copy p{font-size:1.125rem;line-height:1.65;max-width:36rem}
.work-model-copy p+p{margin-top:1.3rem}
.work-model-copy .work-direction{font:800 clamp(1.5rem,2.5vw,2.3rem)/1.2 var(--display);letter-spacing:-.035em;margin-block:1.8rem}
.work-footer .footer-bottom{padding-bottom:0}
@media(max-width:760px){
  .work-hero{grid-template-columns:1fr;gap:2rem;padding-block:4rem 4.5rem;min-height:calc(100vh - 86px);min-height:calc(100dvh - 86px);align-content:center}
  .work-hero h1{font-size:18vw}
  .work-hero h2{font-size:1.8rem}
  .flow-heading{align-items:start;flex-direction:column;margin-bottom:2rem;gap:1.25rem}
  .flow-heading h2{font-size:2rem}
  .route-pair{gap:2.5rem}
  .route-or{top:66px;font-size:.875rem}
  .flow-choice{flex-direction:column;gap:.5rem;padding:1rem .75rem;min-height:132px;align-items:stretch;font-size:1rem;overflow-wrap:normal}
  .flow-choice>span:last-child{align-self:flex-end;margin-top:auto;width:18px;height:18px;font-size:12px}
  .route-caption{font-size:.875rem;line-height:1.5}
  .concept-button{gap:1rem;padding:1.5rem 1.1rem}
  .work-model{grid-template-columns:1fr;gap:2rem}
  .work-model h2{font-size:2.5rem}
  .work-model-copy p{font-size:1rem}
}
@media(max-width:360px){.flow-choice{font-size:.9375rem}}
@media(prefers-reduced-motion:reduce){.work-page *{animation:none!important;transition:none!important}.flow-choice:hover,.concept-title>span,.concept-arrow{transform:none!important}}